Merge pull request #16 from LukeRenton/game-page/adding-local-game-board

Game page/adding local game board
LukeRenton · May 20, 2024 · 472fd96 · 472fd96
2 parents ede5f92 + 9d18ef8
commit 472fd96
Show file tree

Hide file tree

Showing 36 changed files with 710 additions and 67 deletions.
diff --git a/client/build/asset-manifest.json b/client/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.de38feeb.css",
-    "main.js": "/static/js/main.d28b88ed.js",
+    "main.css": "/static/css/main.c8e9aa28.css",
+    "main.js": "/static/js/main.d9f2fa70.js",
     "static/media/forest_animation.mp4": "/static/media/forest_animation.239347dfe9755133bd14.mp4",
     "static/media/wall-background.mp4": "/static/media/wall-background.9691b868f5274a0471f2.mp4",
     "static/media/cryptid-background.mp4": "/static/media/cryptid-background.af864c7aa5878e2d51e9.mp4",
@@ -34,11 +34,11 @@
     "static/media/question.svg": "/static/media/question.d7dd2c99fbcd281ede054bd70207345c.svg",
     "static/media/info.svg": "/static/media/info.86375dfea0b36eba22b87e3829720254.svg",
     "index.html": "/index.html",
-    "main.de38feeb.css.map": "/static/css/main.de38feeb.css.map",
-    "main.d28b88ed.js.map": "/static/js/main.d28b88ed.js.map"
+    "main.c8e9aa28.css.map": "/static/css/main.c8e9aa28.css.map",
+    "main.d9f2fa70.js.map": "/static/js/main.d9f2fa70.js.map"
   },
   "entrypoints": [
-    "static/css/main.de38feeb.css",
-    "static/js/main.d28b88ed.js"
+    "static/css/main.c8e9aa28.css",
+    "static/js/main.d9f2fa70.js"
   ]
 }
diff --git a/client/build/index.html b/client/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.d28b88ed.js"></script><link href="/static/css/main.de38feeb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.d9f2fa70.js"></script><link href="/static/css/main.c8e9aa28.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/client/build/static/css/main.de38feeb.css → client/build/static/css/main.c8e9aa28.css b/client/build/static/css/main.de38feeb.css → client/build/static/css/main.c8e9aa28.css
diff --git a/client/build/static/css/main.c8e9aa28.css.map b/client/build/static/css/main.c8e9aa28.css.map
diff --git a/client/build/static/css/main.de38feeb.css.map b/client/build/static/css/main.de38feeb.css.map
diff --git a/client/build/static/js/main.d28b88ed.js.map b/client/build/static/js/main.d28b88ed.js.map
diff --git a/client/build/static/js/main.d28b88ed.js → client/build/static/js/main.d9f2fa70.js b/client/build/static/js/main.d28b88ed.js → client/build/static/js/main.d9f2fa70.js
diff --git a/...ld/static/js/main.d28b88ed.js.LICENSE.txt → ...ld/static/js/main.d9f2fa70.js.LICENSE.txt b/...ld/static/js/main.d28b88ed.js.LICENSE.txt → ...ld/static/js/main.d9f2fa70.js.LICENSE.txt
diff --git a/client/build/static/js/main.d9f2fa70.js.map b/client/build/static/js/main.d9f2fa70.js.map
diff --git a/client/src/App.js b/client/src/App.js
@@ -7,16 +7,19 @@ import Game from './Pages/Game.js';
 import { useState } from 'react';
 
 function App() {
+  // State variable to manage local game information
   const [localGameInfo, setLocalGameInfo] = useState({});
+  const [playerNames, setPlayerNames] = useState(["","","","",""]);
+  const [movesList, setMovesList] = useState([[],[],[],[],[]]);
 
   return (
     <div className="App">
       <Router>
         <Routes>
           <Route path='/' element={<Login/>}/>
           <Route path='/tutorial' element={<Tutorial/>}/>
-          <Route path='/lobby' element={<Lobby setLocalGameInfo={setLocalGameInfo}/>}/>
-          <Route path='/game' element={<Game localGameInfo={localGameInfo} />}/>
+          <Route path='/lobby' element={<Lobby setMovesList={setMovesList} playerNames={playerNames} setPlayerNames={setPlayerNames} localGameInfo={localGameInfo} setLocalGameInfo={setLocalGameInfo}/>}/>
+          <Route path='/game' element={<Game movesList={movesList} setMovesList={setMovesList} playerNames={playerNames} localGameInfo={localGameInfo} />}/>
         </Routes>
       </Router>
     </div>

diff --git a/client/src/Components/Board.js b/client/src/Components/Board.js
@@ -3,11 +3,12 @@ import '../Styles/Board.css'
 import Map from './Map'
 import Clues from './Clues'
 
-
+// Board component for the Cryptid game, responsible for rendering the game board and managing game pieces.
 export default function Board( props ) {  
-
+  // Function to get the pieces located on a specific tile.
   const getTilePieces = (tile_num) => {
     const tilePieces = {};
+    // Check and assign each piece to the corresponding tile if it matches the tile number.
     if (props.pieces.blue_shack.tile_num == tile_num) {
       tilePieces.blue_shack = props.pieces.blue_shack;
     } else {tilePieces.blue_shack = null}
@@ -33,19 +34,19 @@ export default function Board( props ) {
     <div className='board-root'>
         <div className='board-columns'>
           <div className='board-column-1'>
-              <Map tileNumByPosition={1} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[1][0].tile_number} hexes={props.tiles[1]} pieces={getTilePieces(1)} mapSide={'left'}></Map>
-              <Map tileNumByPosition={3} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[2][0].tile_number} hexes={props.tiles[2]} pieces={getTilePieces(2)} mapSide={'left'}></Map>
-              <Map tileNumByPosition={5} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[3][0].tile_number} hexes={props.tiles[3]} pieces={getTilePieces(3)} mapSide={'left'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={1} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[1][0].tile_number} hexes={props.tiles[1]} pieces={getTilePieces(1)} mapSide={'left'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={3} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[3][0].tile_number} hexes={props.tiles[3]} pieces={getTilePieces(3)} mapSide={'left'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={5} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[5][0].tile_number} hexes={props.tiles[5]} pieces={getTilePieces(5)} mapSide={'left'}></Map>
           </div>
           <div className='board-column-2'>
-              <Map tileNumByPosition={2} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[4][0].tile_number} hexes={props.tiles[4]} pieces={getTilePieces(4)} mapSide={'right'}></Map>
-              <Map tileNumByPosition={4} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[5][0].tile_number} hexes={props.tiles[5]} pieces={getTilePieces(5)} mapSide={'right'}></Map>
-              <Map tileNumByPosition={6} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[6][0].tile_number} hexes={props.tiles[6]} pieces={getTilePieces(6)} mapSide={'right'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={2} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[2][0].tile_number} hexes={props.tiles[2]} pieces={getTilePieces(2)} mapSide={'right'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={4} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[4][0].tile_number} hexes={props.tiles[4]} pieces={getTilePieces(4)} mapSide={'right'}></Map>
+              <Map turn={props.turn} movesList={props.movesList} setMovesList={props.setMovesList} tileNumByPosition={6} destination={props.destination} revealCryptid={props.revealCryptid} placeSearch={props.placeSearch} setPlaceSearch={props.setPlaceSearch} placePositive={props.placePositive} setPlacePositive={props.setPlacePositive} placeNegative={props.placeNegative} setPlaceNegative={props.setPlaceNegative} gameState={props.gameState} setGameState={props.setGameState} setHexHover={props.setHexHover} mapNum={props.tiles[6][0].tile_number} hexes={props.tiles[6]} pieces={getTilePieces(6)} mapSide={'right'}></Map>
           </div>
         </div>
-        <div className='board-clues'>
+        {/* <div className='board-clues'>
           <Clues clues={props.clues} hint={props.hint} row={props.row} col={props.col}></Clues>
-        </div>
+        </div> */}
     </div>
   )
 }
diff --git a/client/src/Components/BoardInfo.js b/client/src/Components/BoardInfo.js
@@ -9,13 +9,17 @@ import question from '../Icons/question.svg'
 import arrow from '../Icons/arrow.gif'
 import { colours } from '../Models/PlayerColours'
 
+// BoardInfo component displays various game information such as player turns, clues, hints, and hex data.
 export default function BoardInfo( props ) {
 
+    // State variables for managing the visibility and confirmation dialogs
     const [viewClue, setViewClue] = useState(false);
     const [viewHint, setViewHint] = useState(false);
     const [confirmViewHint, setConfirmViewHint] = useState(false);
     const [confirmViewCryptid, setConfirmViewCryptid] = useState(false);
     const [blurBack, setBlurBack] = useState(false);
+    const [showPlayerDropdown, setShowPlayerDropdown] = useState(false);
+
 
     const [hideAccordion, setHideAccordion] = useState(false);
 
@@ -24,6 +28,7 @@ export default function BoardInfo( props ) {
     const [playerNum, setPlayerNum] = useState(1);
     // const playerNum = 2;
 
+    // Function to handle the viewing of clues with animation for accordion effect
     const handleViewClue = () => {
         if (viewClue) {
             setHideAccordion(true);
@@ -36,57 +41,91 @@ export default function BoardInfo( props ) {
         }
     }
 
+    // Function to handle the logic of changing a player 
+    const handlePlayerChange = (newPlayerNum) => {
+        const state = { ...props.gameState, playerTurn: newPlayerNum };
+        props.setGameState(state);
+        setPlayerNum(newPlayerNum);
+        setShowPlayerDropdown(false);
+    }
+
+
+    // Function to initiate the process of viewing the hint, requiring confirmation
     const handleViewHint = () => {
         if (!confirmViewHint) {
             setBlurBack(true);
             setConfirmViewHint(true);
         }
     }
 
+    // Function to cancel the hint confirmation process
     const handleCancelConfirmHint = () => {
         setBlurBack(false);
         setConfirmViewHint(false);
     }
 
+    // Function to confirm and display the hint
     const handleConfirmHint = () => {
         setViewHint(true);
         setBlurBack(false);
         setConfirmViewHint(false);
     }
 
+    // Function to handle the end of the current player's turn and advance to the next player
     const handleEndTurn = () => {
         props.setPlacePositive(false);
         props.setPlaceNegative(false);
         props.setPlaceSearch(false);
 
         const state = props.gameState;
-        if (state.playerTurn + 1 == 5) {
+        if (state.playerTurn + 1 == (props.numPlayers+1)) {
             state.playerTurn = 1;
+            props.setTurn(props.turn + 1);
         } else {
             state.playerTurn += 1;
         }
         props.setGameState(state);
         setPlayerNum(props.gameState.playerTurn);
     }
 
+    // Function to initiate the process to reveal the Cryptid, requiring confirmation
     const handleViewCryptid = () => {
         if (!confirmViewCryptid) {
             setBlurBack(true);
             setConfirmViewCryptid(true);
         }
     }
 
+    // Function to confirm and reveal the Cryptid's location
     const handleConfirmCryptid = () => {
         props.setRevealCryptid(true);
         setBlurBack(false);
         setConfirmViewCryptid(false);
     }
 
+    // Function to cancel the Cryptid reveal confirmation process
     const handleCancelCryptid = () => {
         setBlurBack(false);
         setConfirmViewCryptid(false);
     }
 
+    const handleShowPlayerDropdown = () => {
+
+        const players = [];
+        for (let i = 1; i <= props.numPlayers; i++) {
+            players.push(i);
+        }
+
+        return <div className='player-dropdown'>
+                {players.filter(num => num !== playerNum).map((num) => (
+                    <div key={num} className='player-dropdown-item' style={{background: `${colours[num]}`}} onClick={() => handlePlayerChange(num)}>
+                        {props.playerNames[num-1]}
+                    </div>
+                ))}
+            </div>
+    }
+
+  // Render the main structure of the BoardInfo component  
   return (
     <div className='board-info-root'>
         {blurBack ? <div className='board-info-blur-back'></div> : <></>}
@@ -119,14 +158,20 @@ export default function BoardInfo( props ) {
         <div className='board-header'><h1>Cryptid</h1></div>
         <ul className='board-info-items'>
             <li className='board-info-item' style={{background: `${colours[props.gameState.playerTurn]}`}}>
-                <div className='board-info-turn'>
+            <div className='board-info-turn'>
                     <div className='header'>
-                        <img className='header-icon' src={avatar}/><h2>TURN</h2>
+                        <img className='header-icon' src={avatar} /><h2>TURN</h2>
                     </div>
                     <div className='text'>
-                        Player {playerNum}
+                        {props.playerNames[playerNum-1]}
+
+                        {showPlayerDropdown ? handleShowPlayerDropdown()
+                        :
+                        <></>   
+                        }  
                     </div>
                 </div>
+
             </li>
 
             <li className='board-info-item'>
@@ -241,13 +286,26 @@ export default function BoardInfo( props ) {
                     }
                 </div>
             </li>
+
+
+
 
             <li className='board-info-item'>
                 <div className='board-info-end-turn'>
+
+                <button className='board-info-end-turn-button' onClick={() => setShowPlayerDropdown(!showPlayerDropdown)}>Change Player</button>
+                </div>
+
+            </li>
+            <li className='board-info-item'>
+                <div className='board-info-end-turn'>
+
                     <button className='board-info-end-turn-button' onClick={handleEndTurn}>End Turn</button>
                 </div>
+
             </li>
 
+
         </ul>
     </div>
   )

diff --git a/client/src/Components/Clues.js b/client/src/Components/Clues.js
@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import '../Styles/Clues.css'
 import PlantButton from "./PlantButton";
 
-
+// Clues component for managing and displaying clues, hints, and the cryptid location in the game.
 export default function Clues(props) {
-
+    // State variables for managing the component's behavior and visibility of clues and hints.
     const [clueVisible, setClueVisible] = useState(false);
     const [currentClueIndex, setCurrentClueIndex] = useState(0);
     const [showAllClues, setShowAllClues] = useState(false);
@@ -13,25 +13,28 @@ export default function Clues(props) {
 
     const [showHint, setShowHint] = useState(false);
     const [verifyShowHint, setVerifyShowHint] = useState(false);
+    // Function to update the clue visibility and index.
 
     const handleUpdateClues = () => {
         console.log('clue is '+clueVisible);
         if (clueVisible) {
             setCurrentClueIndex(currentClueIndex+1)
-
+            // Show all clues if all individual clues have been revealed.    
             if (currentClueIndex == 3) {
                 setShowAllClues(true);
             }
         }
     }
 
+    // Function to toggle the visibility of the current clue.
     const toggleClueVisibility = () => {
         // Toggle the visibility of the clue
         // Automatically show the next clue after hiding the current one
         handleUpdateClues();
         setClueVisible(!clueVisible);
     };
 
+    // Function to toggle and set a specific clue.
     const toggleSetClue = (update_clue) => {
         if (update_clue !== clue) {
             if (verifyClue) {
@@ -47,6 +50,7 @@ export default function Clues(props) {
         }
     }
 
+    // Function to handle the visibility of the hint.
     const handleShowHint = () => {
         if (!showHint) {
             if (verifyShowHint) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.d28b88ed.js"></script><link href="/static/css/main.de38feeb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Cryptid</title><script defer="defer" src="/static/js/main.d9f2fa70.js"></script><link href="/static/css/main.c8e9aa28.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>