diff --git a/src/App.jsx b/src/App.jsx
index a8a82d5..49bab2f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,8 @@ import Lobby from "./Lobby/Lobby";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "./firebase";
+import "./dark-theme.css";
+
export default function App() {
const [user] = useAuthState(auth);
if (user) {
diff --git a/src/Game Over/GameOver.jsx b/src/Game Over/GameOver.jsx
index 58e0812..85719c3 100644
--- a/src/Game Over/GameOver.jsx
+++ b/src/Game Over/GameOver.jsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './dark-theme.css';
+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 (
-
-
Game Over
-
-
- );
+ return (
+
+
Game Over
+
+
+ );
}
-export default GameOver;
\ No newline at end of file
+export default GameOver;
diff --git a/src/Game Over/GameOver.module..css b/src/Game Over/GameOver.module..css
new file mode 100644
index 0000000..ab5d975
--- /dev/null
+++ b/src/Game Over/GameOver.module..css
@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Press+Start+2P&display=swap");
+/* #root {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+} */
+
+.gameOver .center {
+ text-align: center;
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+.gameOver h1 {
+ text-align: center;
+ color: #1eb980;
+ font-family: "Press Start 2P";
+ text-transform: uppercase;
+ font-size: 5rem;
+ margin-top: -10px;
+}
+
+.gameOver Button {
+ margin-top: 3rem;
+}
diff --git a/src/Game Over/dark-theme.css b/src/Game Over/dark-theme.css
deleted file mode 100644
index cd40454..0000000
--- a/src/Game Over/dark-theme.css
+++ /dev/null
@@ -1,40 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Press+Start+2P&display=swap');
-/* #root {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- margin: 0;
- padding: 0;
-} */
-
-
-body {
- background-color: #26272E;
- color: #ffffff;
- margin: 0;
- padding: 0;
- height: 100%;
-}
-
-
-.center{
- text-align: center;
- padding: 20px;
- box-sizing: border-box;
-}
-
-
-h1 {
- text-align: center;
- color: #1eb980;
- font-family: "Press Start 2P";
- text-transform: uppercase;
- font-size: 5rem;
- margin-top: -10px;
-}
-
-
-Button {
- margin-top: 3rem;
-}
\ No newline at end of file
diff --git a/src/Game/Game.jsx b/src/Game/Game.jsx
index 139637e..5b8191e 100644
--- a/src/Game/Game.jsx
+++ b/src/Game/Game.jsx
@@ -3,7 +3,7 @@ import React from "react";
import Grid from "./Grid";
import ChatBox from "./ChatBox";
import UsersConnectedBox from "./UsersConnectedBox";
-import ResignButton from "./ResignButton";
+import LeaveButton from "./LeaveButton";
import ShipPlacement from "./ShipPlacement";
import { doc } from "firebase/firestore";
@@ -29,20 +29,25 @@ const Game = ({ user, gameId, isPlayer }) => {
gameId={gameId}
playerNum={playerNum}
isCurrent={isCurrent}
- player = {isPlayer}
+ player={isPlayer}
/>
) : gameState === 1 ? (
- <>
-
-
-
-
-
- ) : gameState === 2 ? (
- leaveGame({ user, gameId, isPlayer })
- ) : null}
-
- );
+ <>
+
+
+
+
+
+ ) : gameState === 2 ? (
+ leaveGame({ user, gameId, isPlayer })
+ ) : null}
+
+ );
};
export default Game;
diff --git a/src/Game/LeaveButton.jsx b/src/Game/LeaveButton.jsx
new file mode 100644
index 0000000..f5fcb56
--- /dev/null
+++ b/src/Game/LeaveButton.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./LeaveButton.module.css";
+import { leaveGame } from "../firebase";
+
+const LeaveButton = ({ user, gameId, isPlayer, buttonText }) => {
+ const handleClick = async () => {
+ await leaveGame({ user, gameId, isPlayer });
+ };
+
+ return (
+
+ );
+};
+
+export default LeaveButton;
diff --git a/src/Game/ResignButton.module.css b/src/Game/LeaveButton.module.css
similarity index 100%
rename from src/Game/ResignButton.module.css
rename to src/Game/LeaveButton.module.css
diff --git a/src/Game/ResignButton.jsx b/src/Game/ResignButton.jsx
deleted file mode 100644
index a9c7c35..0000000
--- a/src/Game/ResignButton.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import styles from "./ResignButton.module.css";
-import { leaveGame } from "../firebase";
-
-const ResignButton = ({ user, gameId, isPlayer }) => {
- const handleResign = async () => {
- await leaveGame({ user, gameId, isPlayer });
- };
-
- return (
-
- );
-};
-
-export default ResignButton;
diff --git a/src/Game/ShipPlacement.jsx b/src/Game/ShipPlacement.jsx
index 5f57bb2..3537229 100644
--- a/src/Game/ShipPlacement.jsx
+++ b/src/Game/ShipPlacement.jsx
@@ -1,68 +1,87 @@
import React, { useState } from "react";
import Grid from "./Grid";
-import ResignButton from "./ResignButton";
-import styles from "./ShipPlacement.module.css"
-import { SHIP_TYPES, placeShip} from "../firebase.js";
+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";
-const ShipPlacement = ({user, gameId, currentPlayer, isCurrent, player}) => {
- const [currentShipIndex, setCurrentShipIndex] = useState(0);
- const [orientation, setOrientation] = useState("horizontal");
- const shipTypes = Object.keys(SHIP_TYPES);
- const [selectedPosition, setSelectedPosition] = useState(null);
+const ShipPlacement = ({ user, gameId, currentPlayer, isCurrent, player }) => {
+ const [currentShipIndex, setCurrentShipIndex] = useState(0);
+ const [orientation, setOrientation] = useState("horizontal");
+ const shipTypes = Object.keys(SHIP_TYPES);
+ const [selectedPosition, setSelectedPosition] = useState(null);
- const handleNextShip = () => {
- console.log("handleNextShip GOT CALLED");
- setCurrentShipIndex((prevIndex) =>
- prevIndex < shipTypes.length - 1 ? prevIndex + 1 : 0
- );
- };
+ const handleNextShip = () => {
+ console.log("handleNextShip GOT CALLED");
+ setCurrentShipIndex((prevIndex) =>
+ prevIndex < shipTypes.length - 1 ? prevIndex + 1 : 0
+ );
+ };
- const toggleOrientation = () => {
- setOrientation((prevOrientation) =>
- prevOrientation === "horizontal" ? "vertical" : "horizontal"
- );
- };
-
- 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 toggleOrientation = () => {
+ setOrientation((prevOrientation) =>
+ prevOrientation === "horizontal" ? "vertical" : "horizontal"
+ );
+ };
- return (
-
-
Place Your Ships
-
-
Ship: {shipTypes[currentShipIndex]}
- Size: {SHIP_TYPES[shipTypes[currentShipIndex]]}
- Orientation: {orientation}
-
-
-
-
-
-
+
Place Your Ships
+
+
+ Ship: {shipTypes[currentShipIndex]}
+
+
+ Size: {SHIP_TYPES[shipTypes[currentShipIndex]]}
+
+ Orientation: {orientation}
+
+
+
+
+
+