Skip to content

Commit

Permalink
gameplay implementation, require double click bug
Browse files Browse the repository at this point in the history
Koltheguy committed May 7, 2024
1 parent 17601ae commit 48ef4bc
Showing 4 changed files with 103 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/Game/Game.jsx
Original file line number Diff line number Diff line change
@@ -58,7 +58,7 @@ const Game = ({ user, gameId }) => {
const winner = gameDoc.lives1 < 1 ? 1 : 0;
endGame({
gameId,
gameOverMessage: `Player ${winner} Wins!`,
gameOverMessage: `Player ${winner + 1} Wins!`,
winner,
players: gameDoc.players,
});
74 changes: 56 additions & 18 deletions src/Game/GameState/Gameplay.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
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 { db, attack } from "../../firebase";

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

const viewGridData = (views, className) => {
const gridData = {};
if (!views) return gridData;
for (let i = 0; i < views.length; i += 2) {
gridData[`${views[i * 2]}${views[i * 2 + 1]}`] = className;
}
return gridData;
};

const Gameplay = ({ user, gameId, playerNum, gameName, isCurrent }) => {
const [gridData1, setGridData1] = useState({});
const [gridData2, setGridData2] = useState({});
const [gridDataOther, setGridDataOther] = useState({});
const [gridDataSelf, setGridDataSelf] = useState({});
const [gameDoc, isGameDocLoading] = useDocumentData(
doc(db, "Game", gameId)
);
@@ -20,59 +29,88 @@ const Gameplay = ({ user, gameId, playerNum, gameName, isCurrent }) => {
? gameDoc.ships1
: gameDoc.ships2;

let hitsOther;
let missesOther;
let hitsSelf;
let missesSelf;
const [hits, setHits] = useState("");
const [misses, setMisses] = useState("");
const [hitsSelf, setHitsSelf] = useState("");
const [missesSelf, setMissesSelf] = useState("");

useEffect(() => {
if (!isGameDocLoading) {
if (playerNum === 0) {
setHits(gameDoc.hits2);
setMisses(gameDoc.misses2);
setHitsSelf(gameDoc.hits1);
setMissesSelf(gameDoc.misses1);
} else {
setHits(gameDoc.hits1);
setMisses(gameDoc.misses1);
setHitsSelf(gameDoc.hits2);
setMissesSelf(gameDoc.misses2);
}
}
}, [playerNum, gameDoc, isGameDocLoading]);

useEffect(() => {
const hitGridData = viewGridData(hits, "hit");
const missesGridData = viewGridData(misses, "miss");
setGridDataOther({ ...hitGridData, ...missesGridData });
}, [hits, misses]);

useEffect(() => {
//own ships
let tempShipString = shipString;
const newGridData = {};
const shipGridData = {};
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[
shipGridData[
`${shipCoords.at(i * 2)}${shipCoords.at(i * 2 + 1)}`
] = "ship";
}
tempShipString = tempShipString.slice(shipLength * 2 + 1);
}
setGridData2(newGridData);
}, [gameDoc, shipString, setGridData2]);
const hitGridData = viewGridData(hitsSelf, "hit");
const missesGridData = viewGridData(missesSelf, "miss");

setGridDataSelf({ ...shipGridData, ...hitGridData, ...missesGridData });
}, [shipString, hitsSelf, missesSelf]);

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

return (
<div className={styles.gameplay}>
<div style={{ flex: 3 }}>
<h1>{gameName}</h1>
<Grid handleGridClick={handleCellClick} gridData={gridData1} />
<h2>{isCurrent ? "WEAPONS READY" : "RELOADING..."}</h2>
<Grid
handleGridClick={handleCellClick}
gridData={gridDataOther}
/>
</div>
<div style={{ flex: 2 }}>
<div style={{ flex: 1 }}>
<LeaveButton
user={user}
gameId={gameId}
isLose={false}
buttonText={"Leave"}
isLose={true}
buttonText={"Forfeit"}
/>
</div>
<div style={{ flex: 1 }}>
<h3>Reference</h3>
<Grid handleGridClick={() => {}} gridData={gridData2} />
<Grid handleGridClick={() => {}} gridData={gridDataSelf} />
</div>
</div>
</div>
1 change: 0 additions & 1 deletion src/Game/GameState/ShipPlacement.jsx
Original file line number Diff line number Diff line change
@@ -72,7 +72,6 @@ const ShipPlacement = ({ user, gameId, playerNum, gameName }) => {
};

let shipName = null;
console.log(playerNum === 0 ? "1" + ready.at(1) : ready.at(0) + 1);
if (shipsLeft.length > 0) {
shipName = shipTypes[shipsLeft[0]];
shipName = shipName.charAt(0).toUpperCase() + shipName.slice(1);
56 changes: 46 additions & 10 deletions src/firebase.js
Original file line number Diff line number Diff line change
@@ -273,7 +273,6 @@ const placeShip = async ({ user, gameId, shipType, position, orientation }) => {
if (orientation !== "horizontal" && orientation !== "vertical") return -1;
if (position[0] < 0 || position[1] < 0) return -1;
const shipSize = SHIP_TYPES[shipType];
console.log(position);
if (orientation === "horizontal") {
if (position[0] + shipSize > GRID_SIZE) return -1;
} else {
@@ -363,19 +362,56 @@ const attack = async ({
}) => {
if (!isCurrent || playerNum === -1) return -1;

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

console.log({
isHit,
gameId,
position,
playerNum,
isCurrent,
hits,
misses,
});

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

lives2: increment(-1),
visible2: coord,
});
lives1: increment(-1),
hits1: hits.concat(coord),
});
else
await updateDoc(doc(db, "Game", gameId), {
turn: increment(1),
currentPlayer: 0,
lastMove: serverTimestamp(),

lives2: increment(-1),
hits2: hits.concat(coord),
});
} else {
if (playerNum === 0)
await updateDoc(doc(db, "Game", gameId), {
turn: increment(1),
currentPlayer: 0,
lastMove: serverTimestamp(),

misses1: misses.concat(coord),
});
else
await updateDoc(doc(db, "Game", gameId), {
turn: increment(1),
currentPlayer: 1,
lastMove: serverTimestamp(),

misses2: misses.concat(coord),
});
}
};

0 comments on commit 48ef4bc

Please sign in to comment.