Skip to content

Commit

Permalink
initial gameplay page
Browse files Browse the repository at this point in the history
  • Loading branch information
Koltheguy committed May 7, 2024
1 parent 3686c6e commit 17601ae
Showing 6 changed files with 127 additions and 69 deletions.
12 changes: 5 additions & 7 deletions src/Game/Game.jsx
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import LeaveButton from "./LeaveButton";
import Spectate from "./Spectate";
import ShipPlacement from "./GameState/ShipPlacement";
import GameOver from "./GameState/GameOver";
import Gameplay from "./GameState/Gameplay";

const Game = ({ user, gameId }) => {
const [gameDoc, isGameDocLoading] = useDocumentData(
@@ -79,15 +80,12 @@ const Game = ({ user, gameId }) => {
case 1:
renderGame = (
<>
{/* <Grid />
<ChatBox />
<UsersConnectedBox /> */}
{isCurrent}
<LeaveButton
<Gameplay
user={user}
gameId={gameId}
isLose={isPlayer}
buttonText={isPlayer ? "Forefeit" : "Leave"}
playerNum={playerNum}
gameName={gameName}
isCurrent={isCurrent}
/>
</>
);
2 changes: 1 addition & 1 deletion src/Game/GameState/GameOver.jsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ function GameOver({ user, gameId, gameOverMessage }) {
return (
<div className={styles.gameOver}>
<h1>Game Over</h1>
<h2>{gameOverMessage}</h2>
<h2 className={styles.center}>{gameOverMessage}</h2>
<LeaveButton
user={user}
gameId={gameId}
82 changes: 82 additions & 0 deletions src/Game/GameState/Gameplay.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React, { useState, useEffect } from "react";
import { doc } from "firebase/firestore";
import { useDocumentData } from "react-firebase-hooks/firestore";
import { db, attack, view } from "../../firebase";

import Grid from "../Grid/Grid";
import LeaveButton from "../LeaveButton";
import styles from "./Gameplay.module.css";

const Gameplay = ({ user, gameId, playerNum, gameName, isCurrent }) => {
const [gridData1, setGridData1] = useState({});
const [gridData2, setGridData2] = useState({});
const [gameDoc, isGameDocLoading] = useDocumentData(
doc(db, "Game", gameId)
);

const shipString = isGameDocLoading
? ""
: playerNum === 0
? gameDoc.ships1
: gameDoc.ships2;

let hitsOther;
let missesOther;
let hitsSelf;
let missesSelf;

useEffect(() => {
//own ships
let tempShipString = shipString;
const newGridData = {};
while (tempShipString.length > 0) {
const shipLength = tempShipString.at(0);
const shipCoords = tempShipString.slice(1, shipLength * 2 + 1);
for (let i = 0; i < shipLength; i++) {
newGridData[
`${shipCoords.at(i * 2)}${shipCoords.at(i * 2 + 1)}`
] = "ship";
}
tempShipString = tempShipString.slice(shipLength * 2 + 1);
}
setGridData2(newGridData);
}, [gameDoc, shipString, setGridData2]);

const handleCellClick = (position) => {
if (!isCurrent) return;
attack({
user,
gameId,
playerNum: playerNum === 0 ? 1 : 0,
isCurrent,
position,
hits: hitsOther,
misses: missesOther,
});
};

return (
<div className={styles.gameplay}>
<div style={{ flex: 3 }}>
<h1>{gameName}</h1>
<Grid handleGridClick={handleCellClick} gridData={gridData1} />
</div>
<div style={{ flex: 2 }}>
<div style={{ flex: 1 }}>
<LeaveButton
user={user}
gameId={gameId}
isLose={false}
buttonText={"Leave"}
/>
</div>
<div style={{ flex: 1 }}>
<h3>Reference</h3>
<Grid handleGridClick={() => {}} gridData={gridData2} />
</div>
</div>
</div>
);
};

export default Gameplay;
16 changes: 16 additions & 0 deletions src/Game/GameState/Gameplay.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.gameplay {
display: flex;
height: 100vh;
width: 100vw;
}

.gameplay h2,
.gameplay h3,
.gameplay h4,
.gameplay h5 {
color: #1eb980;
}

.gameplay button {
background-color: #1eb980;
}
9 changes: 6 additions & 3 deletions src/Game/GameState/ShipPlacement.jsx
Original file line number Diff line number Diff line change
@@ -85,11 +85,11 @@ const ShipPlacement = ({ user, gameId, playerNum, gameName }) => {

return (
<div className={styles.shipPlacement}>
<div style={{ flex: 2 }}>
<div style={{ flex: 3 }}>
<h1>{gameName}</h1>
<Grid handleGridClick={handleCellClick} gridData={gridData} />
</div>
<div style={{ flex: 1 }}>
<div style={{ flex: 2 }}>
<div style={{ flex: 1 }}>
<div className={styles.shipDisplay}>
{shipsLeft.length > 0 ? (
@@ -119,7 +119,10 @@ const ShipPlacement = ({ user, gameId, playerNum, gameName }) => {
buttonText={"Leave"}
/>
</div>
<div style={{ flex: 1 }}></div>
<div style={{ flex: 1 }}>
<h3>Reference</h3>
<Grid handleGridClick={() => {}} gridData={gridData} />
</div>
</div>
</div>
);
75 changes: 17 additions & 58 deletions src/firebase.js
Original file line number Diff line number Diff line change
@@ -149,11 +149,13 @@ const newGame = async ({ user, gameName, timer }) => {
gameOverMessage: "",

lives1: LIVES_TOTAL,
visible1: "",
hits1: "",
misses1: "",
ships1: "",

lives2: LIVES_TOTAL,
visible2: "",
hits2: "",
misses2: "",
ships2: "",
});

@@ -351,74 +353,32 @@ const checkTurn = async ({ user, gameId }) => {
return { playerNum, isCurrent };
};

const attack = async ({ user, gameId, position }) => {
const { playerNum, isCurrent } = checkTurn({ user, gameId });
const attack = async ({
gameId,
position,
playerNum,
isCurrent,
hits,
misses,
}) => {
if (!isCurrent || playerNum === -1) return -1;

const ships = getShips({ gameId, playerNum: playerNum === 0 ? 1 : 0 });
const ships = getShips({ gameId, playerNum });
const isHit = checkHit({ hit: position, ships });
const coord = position.join("");

if (playerNum === 0) {
if (isHit) {
await updateDoc(doc(db, "Game", gameId), {
turn: increment(1),
currentPlayer: isHit ? 0 : 1,
lastMove: serverTimestamp(),

lives2: increment(-1),
visible2X: arrayUnion(position[0]),
visible2Y: arrayUnion(position[1]),
});
} else if (playerNum === 1) {
await updateDoc(doc(db, "Game", gameId), {
turn: increment(1),
currentPlayer: isHit ? 1 : 0,
lastMove: serverTimestamp(),

lives1: increment(-1),
visible1X: arrayUnion(position[0]),
visible1Y: arrayUnion(position[1]),
visible2: coord,
});
}
};

const view = async ({ gameId, playerNum }) => {
const docSnap = await getDoc(doc(db, "Game", gameId));
const hit = [],
miss = [];
if (docSnap.exists()) {
const data = docSnap.data();
if (playerNum === 0) {
const ships = getShips({ gameId, playerNum });
for (let i = 0; i < data.viewable1X.length; i++) {
if (
checkHit({
hit: [data.visible1X[i], data.visible1Y[i]],
ships,
})
) {
hit.push([data.visible1X[i], data.visible1Y[i]]);
} else {
miss.push([data.visible1X[i], data.visible1Y[i]]);
}
}
} else if (playerNum === 1) {
const ships = getShips({ gameId, playerNum });
for (let i = 0; i < data.viewable2X.length; i++) {
if (
checkHit({
hit: [data.visible2X[i], data.visible2Y[i]],
ships,
})
) {
hit.push([data.visible2X[i], data.visible2Y[i]]);
} else {
miss.push([data.visible2X[i], data.visible2Y[i]]);
}
}
}
}
return { hit, miss };
};
//#endregion

const sendMessage = async ({ user, message }) => {
@@ -455,9 +415,8 @@ export {
getShips,
placeShip,
setReady,
checkTurn,
attack,
view,
checkHit,
sendMessage,
//delOldGames,
};

0 comments on commit 17601ae

Please sign in to comment.