Merge branch 'main' of https://github.com/Koltheguy/Battleship108

src/Game/ChatBox.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./ChatBox.module.css";
+
+const ChatBox = () => {
+  return (
+    <div className={styles.chatBox}>
+      <div className={styles.chatHeader}>
+        <h2>Chat Box</h2>
+      </div>
+      <div className={styles.chatBody}>
+        {/* Content of the chat box */}
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;

src/Game/ChatBox.module.css

@@ -0,0 +1,25 @@
+.chatBox {
+    width: 700px;
+    height: 500px;
+    border: 5px solid black;
+    margin-left: 55%;
+    margin-top: -520px;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .chatHeader {
+    background-color: #f0f0f0;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .chatHeader h2 {
+    margin: 0;
+  }
+
+  .chatBody {
+    padding: 10px;
+  }
+

src/Game/Game.jsx

@@ -1,15 +1,14 @@
 import React, { useState } from "react";
-import styles from "./Game.module.css";
+import styles from "./Grid.module.css";
+import style from "./ChatBox.module.css";
 import Grid from "./Grid";
-import ChatRoom from "./ChatRoom";
+import ChatBox from "./ChatBox";
 
 const Game = () => {
-	return (
-		<>
-			<Grid />
-			<ChatRoom />
-		</>
-	);
+	return <div>
+		<Grid />
+		<ChatBox />
+	</div>;
 };
 
 export default Game;

src/Game/Grid.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styles from "./Game.module.css";
+import styles from "./Grid.module.css";
 
 const Grid = () => {
   const [gridData, setGridData] = useState(Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 0)));

src/Game/Game.module.css → src/Game/Grid.module.css

@@ -1,9 +1,11 @@
 .grid {
     display: flex;
     justify-content: center;
+    margin-right: 60%;
+    width: 50%;
     align-items: center;
     color: black;
-    padding: 100px;
+    padding: 10px;
   }
 
   table {
@@ -15,13 +17,11 @@
   }
 
   .coordNums {
-    margin-top: 10px;
     color: blue;
     border: none;
   }
 
   .coordLetters {
-    margin-top: 10px;
     color: blue;
     border: none;
     justify-content: space-between;
@@ -39,6 +39,8 @@
   th, td {
     border: 1px solid black;
     padding: 10px;
+    height: 50px;
+    width: 500px;
     text-align: center;
   }