amid process of reworking ship placement

and firebase logic
Koltheguy · May 6, 2024 · 571d19f · 571d19f
1 parent 06be2a6
commit 571d19f
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 367 deletions.
diff --git a/src/Game/ChatBox.jsx b/src/Game/ChatBox.jsx
@@ -2,62 +2,65 @@ import React, { useState, useRef, useEffect } from "react";
 import styles from "./ChatBox.module.css";
 
 const ChatBox = () => {
-  const [message, setMessage] = useState("");
-  const [messages, setMessages] = useState([]);
-  const chatBodyRef = useRef(null);
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const handleMessageChange = (event) => {
-    setMessage(event.target.value);
-  };
-
-  const handleSendMessage = () => {
-    if (message.trim() !== "") {
-      setMessages([...messages, message]);
-      setMessage("");
-    }
-  };
-
-  const handleKeyPress = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  const scrollToBottom = () => {
-    if (chatBodyRef.current) {
-      chatBodyRef.current.scrollTop = chatBodyRef.current.scrollHeight;
-    }
-  };
-
-  return (
-    <div className={styles.chatBox}>
-      <div className={styles.chatHeader}>
-        <h2>Chat:</h2>
-      </div>
-      <div className={styles.chatBody} ref={chatBodyRef}>
-        {messages.map((msg, index) => (
-          <div key={index}>{msg}</div>
-        ))}
-      </div>
-      <div className={styles.chatFooter}>
-        <input
-          type="text"
-          value={message}
-          onChange={handleMessageChange}
-          onKeyPress={handleKeyPress}
-          placeholder="Type your message..."
-        />
-        <button className={styles.chatButton} onClick={handleSendMessage}>
-          Send
-        </button>
-      </div>
-    </div>
-  );
+	const [message, setMessage] = useState("");
+	const [messages, setMessages] = useState([]);
+	const chatBodyRef = useRef(null);
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [messages]);
+
+	const handleMessageChange = (event) => {
+		setMessage(event.target.value);
+	};
+
+	const handleSendMessage = () => {
+		if (message.trim() !== "") {
+			setMessages([...messages, message]);
+			setMessage("");
+		}
+	};
+
+	const handleKeyPress = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			handleSendMessage();
+		}
+	};
+
+	const scrollToBottom = () => {
+		if (chatBodyRef.current) {
+			chatBodyRef.current.scrollTop = chatBodyRef.current.scrollHeight;
+		}
+	};
+
+	return (
+		<div className={styles.chatBox}>
+			<div className={styles.chatHeader}>
+				<h2>Chat:</h2>
+			</div>
+			<div className={styles.chatBody} ref={chatBodyRef}>
+				{messages.map((msg, index) => (
+					<div key={index}>{msg}</div>
+				))}
+			</div>
+			<div className={styles.chatFooter}>
+				<input
+					type="text"
+					value={message}
+					onChange={handleMessageChange}
+					onKeyPress={handleKeyPress}
+					placeholder="Type your message..."
+				/>
+				<button
+					className={styles.chatButton}
+					onClick={handleSendMessage}
+				>
+					Send
+				</button>
+			</div>
+		</div>
+	);
 };
 
 export default ChatBox;
diff --git a/src/Game/Game.jsx b/src/Game/Game.jsx
@@ -19,9 +19,10 @@ const Game = ({ user, gameId, isPlayer }) => {
 	);
 
 	let gameState = false;
+	if (!isGameDocLoading && !gameDoc) leaveGame({ user, gameId, isPlayer });
+
 	if (!isGameDocLoading && gameDoc && gameDoc.gameState !== "")
 		gameState = gameDoc.gameState;
-	gameState = 2;
 
 	let renderGame = null;
 	switch (gameState) {
@@ -31,8 +32,7 @@ const Game = ({ user, gameId, isPlayer }) => {
 					user={user}
 					gameId={gameId}
 					playerNum={playerNum}
-					isCurrent={isCurrent}
-					player={isPlayer}
+					isPlayer={isPlayer}
 				/>
 			);
 			break;
@@ -45,7 +45,7 @@ const Game = ({ user, gameId, isPlayer }) => {
 					<LeaveButton
 						user={user}
 						gameId={gameId}
-						player={isPlayer}
+						isPlayer={isPlayer}
 						buttonText={isPlayer ? "Forefeit" : "Leave"}
 					/>
 				</>

diff --git a/src/Game/GameState/ShipPlacement.jsx b/src/Game/GameState/ShipPlacement.jsx
@@ -4,17 +4,22 @@ import LeaveButton from "../LeaveButton";
 import styles from "./ShipPlacement.module.css";
 import { SHIP_TYPES, placeShip } from "../../firebase.js";
 
-const ShipPlacement = ({ user, gameId, currentPlayer, isCurrent, player }) => {
+const shipTypes = Object.keys(SHIP_TYPES);
+
+const ShipPlacement = ({ user, gameId, isPlayer }) => {
 	const [currentShipIndex, setCurrentShipIndex] = useState(0);
 	const [orientation, setOrientation] = useState("horizontal");
-	const shipTypes = Object.keys(SHIP_TYPES);
-	const [selectedPosition, setSelectedPosition] = useState(null);
+	const [shipsPlaced, setShipsPlaced] = useState([]);
 
 	const handleNextShip = () => {
-		console.log("handleNextShip GOT CALLED");
-		setCurrentShipIndex((prevIndex) =>
-			prevIndex < shipTypes.length - 1 ? prevIndex + 1 : 0
-		);
+		let newIndex = currentShipIndex;
+		while (shipsPlaced.includes(newIndex)) {
+			newIndex =
+				currentShipIndex < shipTypes.length - 1
+					? currentShipIndex + 1
+					: 0;
+		}
+		setCurrentShipIndex(newIndex);
 	};
 
 	const toggleOrientation = () => {
@@ -23,60 +28,50 @@ const ShipPlacement = ({ user, gameId, currentPlayer, isCurrent, player }) => {
 		);
 	};
 
-	const handleCellClick = (row, col) => {
-		console.log("handleCellClick GOT CALLED");
-		if (selectedPosition !== null) {
-			placeShip({
-				user: user,
-				gameId: gameId,
-				shipType: shipTypes[currentShipIndex],
-				position: selectedPosition,
-				orientation: orientation,
-			}).then((result) => {
-				if (result === 1) {
-					console.log("IT WORKED");
-					setSelectedPosition(null);
-					handleNextShip();
-				} else {
-					console.error("Failed to place ship on the grid.");
-				}
-			});
-		} else {
-			setSelectedPosition([row, col]);
-		}
+	const handleCellClick = (position) => {
+		placeShip({
+			user,
+			gameId,
+			shipType: shipTypes[currentShipIndex],
+			position,
+			orientation,
+		}).then((result) => {
+			if (result === 1) handleNextShip();
+			else console.error("Failed to place ship on the grid.");
+		});
 	};
 
+	let shipName = shipTypes[currentShipIndex];
+	shipName = shipName.charAt(0).toUpperCase() + shipName.slice(1);
+
 	return (
-		<div>
-			<h2 style={{ color: "#1eb980" }}>Place Your Ships</h2>
-			<div className={styles.shipDisplay}>
-				<h3 style={{ color: "#1eb980" }}>
-					Ship: {shipTypes[currentShipIndex]}
-				</h3>
-				<h4 style={{ color: "#1eb980" }}>
-					Size: {SHIP_TYPES[shipTypes[currentShipIndex]]}
-				</h4>
-				<h5 style={{ color: "#1eb980" }}>Orientation: {orientation}</h5>
-				<button
-					style={{ backgroundColor: "#1eb980" }}
-					onClick={toggleOrientation}
-				>
-					Toggle Orientation
-				</button>
-				<button
-					style={{ backgroundColor: "#1eb980" }}
-					onClick={handleNextShip}
-				>
-					Next Ship
-				</button>
+		<div className={styles.container}>
+			<div style={{ flex: 2 }}>
+				<div className={styles.shipDisplay}>
+					<h2>Place Your Ships</h2>
+					<h3>Ship: {shipName}</h3>
+					<h4>
+						Size: {SHIP_TYPES[shipTypes[currentShipIndex]]} units
+					</h4>
+					<h5>Orientation: {orientation}</h5>
+					<button onClick={toggleOrientation}>
+						Toggle Orientation
+					</button>
+					<button onClick={handleNextShip}>Next Ship</button>
+				</div>
+				<Grid handleGridClick={handleCellClick} />
+			</div>
+			<div style={{ flex: 1 }}>
+				<div style={{ flex: 1 }}>
+					<LeaveButton
+						user={user}
+						gameId={gameId}
+						player={isPlayer}
+						buttonText={"Leave"}
+					/>
+				</div>
+				<div style={{ flex: 1 }}>Bottom Right</div>
 			</div>
-			<Grid handleGridClick={handleCellClick} />
-			<LeaveButton
-				user={user}
-				gameId={gameId}
-				player={player}
-				buttonText={"Leave"}
-			/>
 		</div>
 	);
 };

diff --git a/src/Game/GameState/ShipPlacement.module.css b/src/Game/GameState/ShipPlacement.module.css
@@ -1,4 +1,16 @@
-/* .shipDisplay {
-  margin-left : -45rem;
-  margin-bottom: 30rem;
-} */
+.container {
+	display: flex;
+	height: 100vh;
+	width: 100vw;
+}
+
+h2,
+h3,
+h4,
+h5 {
+	color: #1eb980;
+}
+
+button {
+	background-color: #1eb980;
+}
diff --git a/src/Game/Grid/Cell.jsx b/src/Game/Grid/Cell.jsx
@@ -1,11 +1,16 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "./Cell.module.css";
 
-const Cell = ({ handleClick, initClassName }) => {
-	if (!initClassName) initClassName = "";
-	const [className, setClassName] = useState(initClassName);
+const Cell = ({ tdKey, handleClick, className }) => {
+	if (!className) className = "";
 
-	return <div className={className} onClick={handleClick}></div>;
+	return (
+		<td
+			key={tdKey}
+			className={`${styles.cell} ${styles[className]}`}
+			onClick={handleClick}
+		></td>
+	);
 };
 
 export default Cell;
diff --git a/src/Game/Grid/Cell.module.css b/src/Game/Grid/Cell.module.css
@@ -1,19 +1,6 @@
+.clickable :hover {
+	cursor: pointer;
+}
 .cell {
-    /* display: inline-block; */
-    /* border: 1px solid black; */
-    display: flex; 
-    justify-content: center; 
-    align-items: center; 
-    /* border: 1px solid #1eb980; */
-    width: 100%; 
-    height:100%; 
-  }
-
-  .cell:hover {
-    cursor: pointer;
-  }
-
-  .clicked {
-    background-color: blue;
-  }
-
+	aspect-ratio: 1;
+}