implemented join game on lobby

Koltheguy · May 6, 2024 · e2a29fc · e2a29fc
1 parent 571d19f
commit e2a29fc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/src/Game/GameState/ShipPlacement.jsx b/src/Game/GameState/ShipPlacement.jsx
@@ -36,8 +36,10 @@ const ShipPlacement = ({ user, gameId, isPlayer }) => {
 			position,
 			orientation,
 		}).then((result) => {
-			if (result === 1) handleNextShip();
-			else console.error("Failed to place ship on the grid.");
+			if (result === 1) {
+				shipsPlaced.push(currentShipIndex);
+				handleNextShip();
+			} else console.error("Failed to place ship on the grid.");
 		});
 	};
 
@@ -70,7 +72,7 @@ const ShipPlacement = ({ user, gameId, isPlayer }) => {
 						buttonText={"Leave"}
 					/>
 				</div>
-				<div style={{ flex: 1 }}>Bottom Right</div>
+				<div style={{ flex: 1 }}></div>
 			</div>
 		</div>
 	);

diff --git a/src/Game/Grid/Grid.module.css b/src/Game/Grid/Grid.module.css
@@ -3,7 +3,7 @@
 	height: 100%;
 }
 
-table {
+.grid table {
 	height: 100%;
 	aspect-ratio: 1;
 	border-collapse: collapse;
@@ -19,8 +19,8 @@ table {
 	border: none;
 }
 
-th,
-td {
+.grid th,
+.grid td {
 	overflow: hidden;
 	border: 1px solid #1eb980;
 }

diff --git a/src/Lobby/Lobby.jsx b/src/Lobby/Lobby.jsx
@@ -6,7 +6,7 @@ import {
 	useDocumentData,
 	useCollectionData,
 } from "react-firebase-hooks/firestore";
-import { db, auth, changeUserName } from "../firebase";
+import { db, auth, changeUserName, joinGame } from "../firebase";
 import NewGame from "./NewGame";
 import Game from "../Game/Game";
 import styles from "./Lobby.module.css";
@@ -38,6 +38,14 @@ const Lobby = () => {
 		signOut(auth);
 	};
 
+	const handleJoin = (event) => {
+		joinGame({
+			user,
+			gameId: event.target.id,
+			isPlayer: Number(event.target.value) < 2,
+		});
+	};
+
 	const [username, setUsername] = useState(displayName);
 
 	useEffect(() => {
@@ -120,6 +128,9 @@ const Lobby = () => {
 									<td>
 										<button
 											className={`${styles.pureMaterial} ${styles.join}`}
+											id={item.id}
+											value={item.players.length}
+											onClick={handleJoin}
 										>
 											Join
 										</button>

diff --git a/src/firebase.js b/src/firebase.js
@@ -144,36 +144,43 @@ const newGame = async ({ user, gameName, timer }) => {
 		currentPlayer: 0,
 		timeStarted: serverTimestamp(),
 		winner: "",
+
 		lives1: LIVES_TOTAL,
-		visible1X: "",
-		visible1Y: "",
-		ships1X: "",
-		ships1Y: "",
+		visible1: "",
+		ships1: "",
 
 		lives2: LIVES_TOTAL,
-		visible2X: "",
-		visible2Y: "",
-		ships2X: "",
-		ships2Y: "",
+		visible2: "",
+		ships2: "",
 	});
 
 	const gameId = docRef.id;
-	// console.log(gameId);
+	updateDoc(doc(db, "Game", gameId), {
+		id: gameId,
+	});
 	updateDoc(doc(db, "User", user.uid), {
 		currentGame: gameId,
 	});
 };
 const joinGame = async ({ user, gameId, isPlayer }) => {
-	if (isPlayer)
+	console.log({ user, gameId, isPlayer });
+	if (isPlayer) {
 		updateDoc(doc(db, "Game", gameId), {
 			players: arrayUnion(user.uid),
 			currentGame: gameId,
 		});
-	else
+		updateDoc(doc(db, "User", user.uid), {
+			currentGame: gameId,
+		});
+	} else {
 		updateDoc(doc(db, "Game", gameId), {
 			spectate: arrayUnion(user.uid),
 			currentGame: gameId,
 		});
+		updateDoc(doc(db, "User", user.uid), {
+			currentGame: gameId,
+		});
+	}
 };
 const leaveGame = async ({ user, gameId, isPlayer }) => {
 	if (isPlayer) {