From 06be2a663f2c851e8e5997ef6ba373e788fd96e7 Mon Sep 17 00:00:00 2001
From: Kol_the_guy <28795499+Koltheguy@users.noreply.github.com>
Date: Mon, 6 May 2024 07:25:44 -0700
Subject: [PATCH] moved some components to gameState removed dark-theme

---
 src/App.jsx                                   |  2 +-
 src/Game Over/GameOver.jsx                    | 17 ----------
 src/Game/Game.jsx                             | 34 +++++++++++++------
 src/Game/GameState/GameOver.jsx               | 21 ++++++++++++
 .../GameState/GameOver.module.css}            |  0
 src/Game/{ => GameState}/ShipPlacement.jsx    |  9 ++---
 .../{ => GameState}/ShipPlacement.module.css  |  0
 src/dark-theme.css                            | 11 +++++-
 8 files changed, 59 insertions(+), 35 deletions(-)
 delete mode 100644 src/Game Over/GameOver.jsx
 create mode 100644 src/Game/GameState/GameOver.jsx
 rename src/{Game Over/GameOver.module..css => Game/GameState/GameOver.module.css} (100%)
 rename src/Game/{ => GameState}/ShipPlacement.jsx (87%)
 rename src/Game/{ => GameState}/ShipPlacement.module.css (100%)

diff --git a/src/App.jsx b/src/App.jsx
index 49bab2f..abde01b 100644
--- a/src/App.jsx
+++ b/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);
diff --git a/src/Game Over/GameOver.jsx b/src/Game Over/GameOver.jsx
deleted file mode 100644
index 85719c3..0000000
--- a/src/Game Over/GameOver.jsx	
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { Button } from "react-bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
-import styles from "GameOver.module.css";
-
-function GameOver() {
-	return (
-		<div className={styles.gameOver}>
-			<h1>Game Over</h1>
-			<Button style={{ backgroundColor: "#1eb980", border: "none" }}>
-				Back to Lobby
-			</Button>
-		</div>
-	);
-}
-
-export default GameOver;
diff --git a/src/Game/Game.jsx b/src/Game/Game.jsx
index 3549ba5..57a2afb 100644
--- a/src/Game/Game.jsx
+++ b/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,10 +21,12 @@ 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}
@@ -31,7 +34,10 @@ const Game = ({ user, gameId, isPlayer }) => {
 					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;
diff --git a/src/Game/GameState/GameOver.jsx b/src/Game/GameState/GameOver.jsx
new file mode 100644
index 0000000..b87c4ee
--- /dev/null
+++ b/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;
diff --git a/src/Game Over/GameOver.module..css b/src/Game/GameState/GameOver.module.css
similarity index 100%
rename from src/Game Over/GameOver.module..css
rename to src/Game/GameState/GameOver.module.css
diff --git a/src/Game/ShipPlacement.jsx b/src/Game/GameState/ShipPlacement.jsx
similarity index 87%
rename from src/Game/ShipPlacement.jsx
rename to src/Game/GameState/ShipPlacement.jsx
index 0d87b3d..eae1397 100644
--- a/src/Game/ShipPlacement.jsx
+++ b/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);
diff --git a/src/Game/ShipPlacement.module.css b/src/Game/GameState/ShipPlacement.module.css
similarity index 100%
rename from src/Game/ShipPlacement.module.css
rename to src/Game/GameState/ShipPlacement.module.css
diff --git a/src/dark-theme.css b/src/dark-theme.css
index 5c77ab1..e7b4c89 100644
--- a/src/dark-theme.css
+++ b/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;
+}