moved some components to gameState

removed dark-theme

src/App.jsx

@@ -4,7 +4,7 @@ import Lobby from "./Lobby/Lobby";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "./firebase";
 
-import "./dark-theme.css";
+//import "./dark-theme.css";
 
 export default function App() {
 	const [user] = useAuthState(auth);

src/Game/Game.jsx

@@ -4,12 +4,13 @@ import Grid from "./Grid/Grid";
 import ChatBox from "./ChatBox";
 import UsersConnectedBox from "./UsersConnectedBox";
 import LeaveButton from "./LeaveButton";
-import ShipPlacement from "./ShipPlacement";
+import ShipPlacement from "./GameState/ShipPlacement";
 
 import { doc } from "firebase/firestore";
 import { useDocumentData } from "react-firebase-hooks/firestore";
 
 import { db, checkTurn, leaveGame } from "../firebase";
+import GameOver from "./GameState/GameOver";
 
 const Game = ({ user, gameId, isPlayer }) => {
 	const { playerNum, isCurrent } = checkTurn({ user, gameId });
@@ -20,18 +21,23 @@ const Game = ({ user, gameId, isPlayer }) => {
 	let gameState = false;
 	if (!isGameDocLoading && gameDoc && gameDoc.gameState !== "")
 		gameState = gameDoc.gameState;
+	gameState = 2;
 
-	return (
-		<div>
-			{gameState === 0 ? (
+	let renderGame = null;
+	switch (gameState) {
+		case 0:
+			renderGame = (
 				<ShipPlacement
 					user={user}
 					gameId={gameId}
 					playerNum={playerNum}
 					isCurrent={isCurrent}
 					player={isPlayer}
 				/>
-			) : gameState === 1 ? (
+			);
+			break;
+		case 1:
+			renderGame = (
 				<>
 					{/* <Grid /> */}
 					<ChatBox />
@@ -43,11 +49,19 @@ const Game = ({ user, gameId, isPlayer }) => {
 						buttonText={isPlayer ? "Forefeit" : "Leave"}
 					/>
 				</>
-			) : gameState === 2 ? (
-				leaveGame({ user, gameId, isPlayer })
-			) : null}
-		</div>
-	);
+			);
+			break;
+		case 2:
+			renderGame = (
+				<GameOver user={user} gameId={gameId} player={isPlayer} />
+			);
+			break;
+		default:
+			renderGame = null;
+			break;
+	}
+
+	return renderGame;
 };
 
 export default Game;

src/Game/GameState/GameOver.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+import styles from "./GameOver.module.css";
+import LeaveButton from "../LeaveButton";
+
+function GameOver({ user, gameId, isPlayer }) {
+	return (
+		<div className={styles.gameOver}>
+			<h1>Game Over</h1>
+			<LeaveButton
+				user={user}
+				gameId={gameId}
+				player={isPlayer}
+				buttonText="Back to Lobby"
+			/>
+		</div>
+	);
+}
+
+export default GameOver;

src/Game/ShipPlacement.jsx → src/Game/GameState/ShipPlacement.jsx

@@ -1,11 +1,8 @@
 import React, { useState } from "react";
-import Grid from "./Grid/Grid";
-import LeaveButton from "./LeaveButton";
+import Grid from "../Grid/Grid";
+import LeaveButton from "../LeaveButton";
 import styles from "./ShipPlacement.module.css";
-import { SHIP_TYPES, placeShip } from "../firebase.js";
-import { db, checkTurn, leaveGame } from "../firebase";
-import { doc } from "firebase/firestore";
-import { useDocumentData } from "react-firebase-hooks/firestore";
+import { SHIP_TYPES, placeShip } from "../../firebase.js";
 
 const ShipPlacement = ({ user, gameId, currentPlayer, isCurrent, player }) => {
 	const [currentShipIndex, setCurrentShipIndex] = useState(0);

src/dark-theme.css

@@ -1,4 +1,4 @@
-.dark-theme {
+.dark-theme body {
 	background-color: #26272e;
 	color: #ffffff;
 }
@@ -18,3 +18,12 @@
 .dark-theme .form-check-label {
 	color: #ffffff;
 }
+
+.dark-theme .button {
+	background-color: #1eb980;
+	color: white;
+}
+
+.dark-theme .button:hover {
+	background-color: #17a668;
+}