Skip to content

Commit

Permalink
Merge pull request #18 from LukeRenton/game-page/connecting-boards
Browse files Browse the repository at this point in the history 
Game page/connecting boards
  • Loading branch information
@MitchellNeilson
MitchellNeilson authored May 21, 2024
2 parents 670c232 + 39fd3e3 commit e93c04f
Show file tree
Hide file tree
Showing 11 changed files with 56 additions and 79 deletions.
6 changes: 3 additions & 3 deletions client/build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.dd8c6356.css",
"main.js": "/static/js/main.693f2c43.js",
"main.js": "/static/js/main.a2bd624f.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",
Expand Down Expand Up @@ -35,10 +35,10 @@
"static/media/info.svg": "/static/media/info.86375dfea0b36eba22b87e3829720254.svg",
"index.html": "/index.html",
"main.dd8c6356.css.map": "/static/css/main.dd8c6356.css.map",
"main.693f2c43.js.map": "/static/js/main.693f2c43.js.map"
"main.a2bd624f.js.map": "/static/js/main.a2bd624f.js.map"
},
"entrypoints": [
"static/css/main.dd8c6356.css",
"static/js/main.693f2c43.js"
"static/js/main.a2bd624f.js"
]
}
2 changes: 1 addition & 1 deletion client/build/index.html
View file
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.693f2c43.js"></script><link href="/static/css/main.dd8c6356.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.a2bd624f.js"></script><link href="/static/css/main.dd8c6356.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1 change: 0 additions & 1 deletion client/build/static/js/main.693f2c43.js.map
View file

This file was deleted.

6 changes: 3 additions & 3 deletions client/build/static/js/main.693f2c43.js → client/build/static/js/main.a2bd624f.js
View file

Large diffs are not rendered by default.

0 ...ld/static/js/main.693f2c43.js.LICENSE.txt → ...ld/static/js/main.a2bd624f.js.LICENSE.txt
View file
File renamed without changes.
1 change: 1 addition & 0 deletions client/build/static/js/main.a2bd624f.js.map
View file

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions client/src/Components/Board.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 0 additions & 30 deletions client/src/Components/Cylinder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,5 @@ export default function Cylinder(props) {
// Render the cylinder element with dynamic styles
return (
<div class="cylinder" style={{background: `radial-gradient(50% 20px at 50% 10px, #0003 99.99%, #0000 0), radial-gradient(50% 10px at 50% calc(100% - 10px), #fff3 99.99%, #0000 0), ${props.color}`, transform: `translateZ(${80+10*props.index}px) translateY(30px) translateX(50px)`}}></div>
// <div id="container">
// <div id="frame">
// <div class="strips">
// <div class="strip-1"></div>
// <div class="strip-2"></div>
// <div class="strip-3"></div>
// <div class="strip-4"></div>
// <div class="strip-5"></div>
// <div class="strip-6"></div>
// <div class="strip-7"></div>
// <div class="strip-8"></div>
// <div class="strip-9"></div>
// <div class="strip-10"></div>
// <div class="strip-11"></div>
// <div class="strip-12"></div>
// <div class="strip-13"></div>
// <div class="strip-14"></div>
// <div class="strip-15"></div>
// <div class="strip-16"></div>
// <div class="strip-17"></div>
// <div class="strip-18"></div>
// <div class="strip-19"></div>
// <div class="strip-20"></div>
// <div class="strip-21"></div>
// <div class="strip-22"></div>
// <div class="strip-23"></div>
// <div class="strip-24"></div>
// </div>
// </div>
// </div>
)
}
12 changes: 0 additions & 12 deletions client/src/Components/Hex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default function Hex( props ) {
const [positivePieces, setPositivePieces] = useState([]);
const [negativePieces, setNegativePieces] = useState([]);

// const [] = useState();
// Function to render pieces on the hex
const renderPieces = () => {
return props.pieces.map((piece) => {
Expand All @@ -37,12 +36,6 @@ export default function Hex( props ) {
setShowTooltip(false);
}

// const handleMouseHover = (event) => {
// setMouseX(event.clientX);
// setMouseY(event.clientY);
// console.log('x: '+mouseX);
// }

// Function to handle click event
const handleClick = () => {
// Logic for placing positive, negative pieces or making a search
Expand Down Expand Up @@ -89,17 +82,13 @@ export default function Hex( props ) {

// Function to render negative pieces
const renderNegativePieces = () => {
// const negativePieces = [{row: 0, col: 0, player: 1}];
// const negativePieces = props.gameState.negativePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)});
return negativePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)}).map(piece => {
return <PlayerCube color={colours[piece.player]}></PlayerCube>
});
}

// Function to render positive pieces
const renderPositivePieces = () => {
// const negativePieces = [{row: 0, col: 0, player: 1}];
// const positivePieces = props.gameState.positivePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)});
return positivePieces.filter(piece => {return (piece.row === props.hexRow && piece.col === props.hexCol && piece.tileNum === props.tileNum)}).map((piece, index) => {
return <Cylinder color={colours[piece.player]} index={index}></Cylinder>
});
Expand Down Expand Up @@ -129,7 +118,6 @@ export default function Hex( props ) {
const actual_row = destRow % 3;
const actual_col = destCol % 6;

// console.log({row: actual_row, col: actual_col, tile: tile_num});
console.log(props.tileNumByPosition);

if (tile_num === props.tileNumByPosition && actual_row === props.hexRow && actual_col === props.hexCol) {
Expand Down
61 changes: 40 additions & 21 deletions client/src/Pages/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,21 @@ export default function Game( props ) {
const [allAvailableGuesses, setAllAvailableGuesses] = useState({});
const [showAvailableGueses, setShowAvailableGuesses] = useState(false);

// Handle if a user wants to place a negative piece
const handlePlaceNegative = (value) => {
setPlacePositive(false);
setPlaceSearch(false);
setPlaceNegative(value);
}

// Handle if a user wants to place a positive piece
const handlePlacePositive = (value) => {
setPlaceNegative(false);
setPlaceSearch(false);
setPlacePositive(value);
}

// Handle if a user wants to place a search piece
const handlePlaceSearch = (value) => {
setPlaceNegative(false);
setPlacePositive(false);
Expand All @@ -70,7 +73,7 @@ export default function Game( props ) {
hint: hint
}
*/
const parseInfo = async (map, allTiles, allPieces) => {
const parseInfo = (map, allTiles, allPieces) => {
const clues = map.rules;
const hint = map.hint;
const numTiles = 6;
Expand All @@ -88,9 +91,9 @@ export default function Game( props ) {
const map = allTiles[tile];
console.log(map);
for (let j = 0; j < totalHexesPerMap; j++) {
const hex = await map[j];
const row = await hex.row;
const col = await hex.col;
const hex = map[j];
const row = hex.row;
const col = hex.col;

const globalCol = ((tile+1) % 2 )*6 + col;
const globalRow = (Math.floor((tile-1) / 2))*3 + row;
Expand Down Expand Up @@ -120,6 +123,7 @@ export default function Game( props ) {
return {grid: grid, clues: clues, hint: hint};
}

// Function to run on-component-load to get the map and information for the game
const getNewMap = async () => {
const newMap = await getMap(props.localGameInfo.mode,props.localGameInfo.players);

Expand All @@ -139,53 +143,64 @@ export default function Game( props ) {
setPieces(allPieces);


const grid = await parseInfo(newMap, allTiles, allPieces);
const grid = parseInfo(newMap, allTiles, allPieces);
console.log(grid);
const availableGuesses = getAvailableGuesses(grid);
setAllAvailableGuesses(availableGuesses);
return newMap;
}

// Process the hex numbers to be used for the frontend/css
const processHexNumbers = (availableGuesses) => {
// console.log(availableGuesses);
// const newAvailableGuesses = availableGuesses.map((x) => x);
const newAvailableGuesses = JSON.parse(JSON.stringify(availableGuesses));
console.log(newAvailableGuesses);
for (let player = 1; player <= props.localGameInfo.players; player++) {
const newAvailableGuesses = availableGuesses[player];
for (let i = 0; i < newAvailableGuesses.length; i++) {
const tile = newAvailableGuesses[i];
const newPlayerGuesses = newAvailableGuesses[player];
for (let i = 0; i < newPlayerGuesses.length; i++) {
const tile = newPlayerGuesses[i];
const row = tile.row;
const col = tile.col;

// Retrieve which tile number we are on
const tile_row = Math.floor(row/3);
const tile_col = Math.floor(col/6);
const tile_num = tile_row*2 + tile_col + 1
const tile_num = tile_row*2 + tile_col + 1;

const actual_row = row % 3;
const actual_col = col % 6;

newAvailableGuesses[i].row = actual_row;
newAvailableGuesses[i].col = actual_col;
newAvailableGuesses[i].tileNumByPosition = tile_num;
newPlayerGuesses[i].row = actual_row;
newPlayerGuesses[i].col = actual_col;
newPlayerGuesses[i].tileNumByPosition = tile_num;
}
availableGuesses[player] = newAvailableGuesses;
newAvailableGuesses[player] = newPlayerGuesses;
}
return availableGuesses;
return newAvailableGuesses;
}

// Get all available guesses possible for each player
const getAvailableGuesses = (boardState) => {
const { grid, clues, hint } = boardState;
const availableGuesses = {};
console.log(grid);
console.log("Here #1");
for (let i = 0; i < clues.length; i++) {
// Need to remove "The habitat is" from the clue to get the actual clue
let clue = (clues[i]).substring(15);
const player = i+1;
const allowedTiles = processClue(clue, grid);
availableGuesses[player] = allowedTiles;
}
return processHexNumbers(availableGuesses);
console.log("Here #2")
const processedGuesses = processHexNumbers(availableGuesses);
console.log(processedGuesses);
// console.log("NEW GUESSES:",processHexNumbers(availableGuesses));
return processedGuesses;
}


// Parse string and process each clue
const processClue = (clue, grid) => {
if (clue.startsWith("on")) {
console.log("Processing on: ", clue)
Expand All @@ -212,7 +227,8 @@ export default function Game( props ) {
}
};

const onTypeClue = (clue, grid) => {
// Handle a clue for "on type"
const onTypeClue = (clue, grid) => {
const allowedTiles = [];
const splitClue = clue.split(' ');
const type1 = splitClue[1];
Expand All @@ -228,6 +244,7 @@ export default function Game( props ) {
return allowedTiles;
}

// Handle a clue for "not on type"
const notOnTypeClue = (clue, grid) => {
const allowedTiles = [];
const splitClue = clue.split(' ');
Expand All @@ -244,6 +261,7 @@ export default function Game( props ) {
return allowedTiles;
}

// Handle a clue for "within one space of"
const withinOneSpaceClue = (clue, grid) => {
let allowedTiles = [];
const splitClue = clue.split(' ');
Expand All @@ -269,6 +287,7 @@ export default function Game( props ) {
return allowedTiles;
};

// Handle a clue for "within two spaces of"
const withinTwoSpaceClue = (clue, grid) => {
let allowedTiles = [];
const splitClue = clue.split(' ');
Expand Down Expand Up @@ -307,6 +326,7 @@ export default function Game( props ) {
return allowedTiles;
}

// Handle a clue for "within three spaces of"
const withinThreeSpaceClue = (clue, grid) => {
let allowedTiles = [];
const splitClue = clue.split(' ');
Expand All @@ -332,7 +352,7 @@ export default function Game( props ) {
return allowedTiles;
}


// Generate the neighbours based on the clues and the depth of the clue (how far away from a hex)
const generateNeighbours = (row, col, depth, grid) => {
const neighbours = [];
for (let i = -depth; i <= depth; i++) {
Expand Down Expand Up @@ -363,17 +383,16 @@ export default function Game( props ) {
}
}

// Get the colour of a piece
const getPieceColor = (name) => {
const splitName = name.split('_');
return splitName[0];
}

// Use effect hook on-component-load to get map information
useEffect(async () => {
const newMap = await getNewMap();
},[])
// useEffect(() => {
// const newMap = getNewMap();
// },[])


return (
Expand Down
13 changes: 8 additions & 5 deletions client/src/Pages/Lobby.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,26 +33,31 @@ export default function Lobby( props ) {
setPlayHostOnline(true);
}

// Handle when mouse leaves the host online window
const handleLeaveHostOnline = (event) => {
event.target.pause();
setPlayHostOnline(false);
}

// Handle when mouse enters the host online window
const handleHoverJoinOnline = (event) => {
event.target.play();
setPlayJoinOnline(true);
}

// Handle when mouse leaves the join online window
const handleLeaveJoinOnline = (event) => {
event.target.pause();
setPlayJoinOnline(false);
}

// Handle when mouse enters the local window
const handleHoverLocal = (event) => {
event.target.play();
setPlayLocal(true);
}

// Handle when mouse leaves the local window
const handleLeaveLocal = (event) => {
event.target.pause();
setPlayLocal(false);
Expand All @@ -75,17 +80,19 @@ export default function Lobby( props ) {
navigate('/game');
}

// Update the number of players as required
const updateNumPlayers = (newNumPlayers) => {
setNumPlayers(newNumPlayers);

}

// Update the players name
const updatePlayerName = (playerNum, playerName) => {
const newPlayerNames = props.playerNames;
newPlayerNames[playerNum-1] = playerName;
props.setPlayerNames(newPlayerNames);
}

// Render the player name inputs
const renderPlayerNames = () => {
const newPlayerData = [];
for (let i = 0; i < numPlayers; i++) {
Expand Down Expand Up @@ -122,7 +129,6 @@ export default function Lobby( props ) {
<div className='lobby-settings-player-names'>
{renderPlayerNames()}
</div>
{/* <PlantButton type={'submit'} onClick={handleStartPrivateGame}>Start private game</PlantButton> */}
<button className='lobby-settings-button' type='submit' onClick={handleStartPrivateGame}>Start local game</button>
</form>
</div>
Expand All @@ -132,9 +138,6 @@ export default function Lobby( props ) {

return (
<div className='lobby-root'>
{/* <video autoPlay muted loop className='lobby-background'>
<source src={background} type="video/mp4" />
</video> */}
{showSettings !== '' ? <div className='back-blur' onClick={() => {setShowSettings('')}}></div> : <></>}
{renderSettings()}
<div className='lobby-go-tutorial'>
Expand Down

0 comments on commit e93c04f

Please sign in to comment.