From f89489f46fa93dd938d9bc2606025d01cba7562a Mon Sep 17 00:00:00 2001 From: Meleeman01 Date: Thu, 20 Feb 2025 02:35:21 -0600 Subject: [PATCH] fixed display bugs, added solve feature, doesn't work rn,and win logic --- index.html | 118 +++++++++++++++++++++++++++++++++++++++-------------- server.js | 77 +++++++++++++++++++++++++++++----- 2 files changed, 155 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 677e2d6..6fac0e6 100644 --- a/index.html +++ b/index.html @@ -93,6 +93,18 @@
+ + +
+

Solve the Puzzle?

+ + +
+ + +
+
+
@@ -105,6 +117,7 @@ +
@@ -396,18 +409,49 @@ }); } + function solvePuzzle() { + const solveDialog = document.querySelector('.solveDialog'); + const solveInput = document.querySelector('.solveInput'); + const solveButton = document.querySelector('.solveButton'); + const closeDialogButton = document.querySelector('.closeSolveDialogButton'); + solveInput.value = ''; + solveDialog.showModal(); + closeDialogButton.addEventListener('click',() => {solveDialog.close()}); + solveButton.addEventListener('click',() => { + socket.send(JSON.stringify({ type: "solve_puzzle", guess:solveInput.value })); + solveDialog.close(); + }); + } + function changeSpinGuessState(message) { - if(message.turnState == 'spin') { + console.log(message.turnState) + if(message.turnState == 'spin' && window.yourTurn) { + + document.getElementById("spin-wheel").style.display = "inline"; + document.getElementById("guess-letter").style.display = "none"; + document.getElementById("guess-button").style.display = "none"; + } + if (message.turnState == 'guess' && window.yourTurn) { document.getElementById("spin-wheel").style.display = "none"; document.getElementById("guess-letter").style.display = "inline"; document.getElementById("guess-button").style.display = "inline"; } - if (message.turnState == 'guess') { + console.log('changeSpinGuessState activated;') + } + function changeTurnState() { + if (!window.yourTurn) { + document.getElementById("guess-letter").style.display = "none"; document.getElementById("spin-wheel").style.display = "none"; - document.getElementById("guess-letter").style.display = "inline"; - document.getElementById("guess-button").style.display = "inline"; + document.getElementById("guess-button").style.display = "none"; + document.querySelector(".solve-button").style.display = 'none'; } - + else { + document.getElementById("guess-letter").style.display = "inline"; + document.getElementById("spin-wheel").style.display = "inline"; + document.getElementById("guess-button").style.display = "inline"; + document.querySelector(".solve-button").style.display = 'inline'; + } + console.log('changeTurnState activated;') } const socket = new WebSocket("ws://localhost:8080"); @@ -474,12 +518,13 @@ document.getElementById("status").innerText = `${status}`; document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`; if (message.isLeader) { - document.getElementById("start-game").style.display = "inline"; - document.getElementById("spin-wheel").style.display = "inline"; - document.getElementById("guess-letter").style.display = "inline"; - document.getElementById("guess-button").style.display = "inline"; + changeTurnState() } } + if (message.type === "your_turn") { + window.yourTurn = true; + changeTurnState() + } if (message.type === "game_started") { let result = drawPuzzle(message); @@ -487,9 +532,8 @@ console.log(result); document.getElementById("status").innerText = "The game has started!"; document.getElementById("start-game").style.display = "none"; - document.getElementById("spin-wheel").style.display = "inline"; - document.getElementById("guess-letter").style.display = "none"; - document.getElementById("guess-button").style.display = "none"; + + changeSpinGuessState(message); } if (message.type === "new_puzzle") { let result = drawPuzzle(message); @@ -497,14 +541,17 @@ console.log(result); document.getElementById("status").innerText = "New Puzzle!"; document.getElementById("start-game").style.display = "none"; - document.getElementById("spin-wheel").style.display = "inline"; - document.getElementById("guess-letter").style.display = "none"; - document.getElementById("guess-button").style.display = "none"; + changeSpinGuessState(message); } if (message.type === "spin_result") { console.log('spin result recieved'); - document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`; + if (message.spinResult != 'lose a turn' || message.spinResult != 'Bankrupt' || message.spinResult != 'spin again') { + document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`; + } + else document.getElementById("status").innerText = `Spin result: ${message.spinResult} for (${message.player})`; + + //find target index let targetIndexArr = wheel.entries(); let filterResultsArr = []; @@ -523,9 +570,17 @@ console.log('else',filterResultsArr[0]) startSpin(filterResultsArr[0]); } - document.getElementById("spin-wheel").style.display = "none"; - document.getElementById("guess-letter").style.display = "inline"; - document.getElementById("guess-button").style.display = "inline"; + if (window.yourTurn && message.spinResult != 'lose a turn') { + console.log('in spin_result: ',message) + // changeTurnState() + changeSpinGuessState(message); + } else if (window.yourTurn && message.spinResult == 'lose a turn') { + window.yourTurn = false; + changeTurnState() + } else if (window.yourTurn && message.spinResult == 'spin again') { + message.turnState = 'spin'; + changeSpinGuessState(message); + } } if (message.type === "guess_result") { @@ -535,16 +590,16 @@ if (message.puzzle) { drawPuzzle(message); } - if (message.turnState) { + if (message.turnState && message.correct) { + console.log(message.turnState); changeSpinGuessState(message); + }else { + window.yourTurn = false + changeTurnState() } - } if (message.type === "next_turn") { - document.getElementById("spin-wheel").style.display = "none"; - document.getElementById("guess-letter").style.display = "none"; - document.getElementById("guess-button").style.display = "none"; if (window.you == message.user) { //send message since socket.send(JSON.stringify({ type: "confirm_id"})); @@ -553,16 +608,16 @@ if (message.type === "next_turn_confirmed") { //this means its your turn console.log('its your turn, id confirmed'); - document.getElementById("spin-wheel").style.display = "inline"; - document.getElementById("guess-letter").style.display = "none"; - document.getElementById("guess-button").style.display = "none"; + window.yourTurn = true; + changeTurnState() + changeSpinGuessState(message) + } if (message.type === "next_turn_denied") { //silently deny the user the next turn if trying to assume the same name as another user + window.yourTurn = false; console.log('its not your turn yet!'); - document.getElementById("spin-wheel").style.display = "none"; - document.getElementById("guess-letter").style.display = "none"; - document.getElementById("guess-button").style.display = "none"; + changeTurnState() } if (message.type === "puzzle_solved") { console.log('puzzle has been solved!!!'); @@ -572,6 +627,9 @@ drawPlayers(message); document.getElementById("status").innerText = "You are now the party leader!"; } + if (message.type === "game_over") { + document.getElementById("status").innerText = message.winner; + } if (message.type === "error") { alert(message.message); diff --git a/server.js b/server.js index 7d36a62..1e1ac6d 100644 --- a/server.js +++ b/server.js @@ -11,7 +11,7 @@ const wheel = [ 300,600,300,500,800,550,400,300,900,500,'spin again', 900,'Bankrupt',600,400,300 ] //represents wheel in wheel of fortune game. -//const wheel = ['spin again','Bankrupt','lose a turn'] +// const wheel = ['spin again','Bankrupt','lose a turn'] function removeProp(obj, prop) { obj = JSON.parse(JSON.stringify(obj)) if(!Array.isArray(prop)){ @@ -186,15 +186,50 @@ function checkGuess(letter,gameStateObject) { else console.error('invalid input to checkGuess() function',currentPuzzle.puzzle[0]) } +function checkSolvePuzzleGuess(guess,ws) { + const room = rooms[ws.roomCode] + if (guess.toUpperCase() != room.gameState.puzzles[room.gameState.puzzleLevel].answer.toUpperCase()) { + console.log(guess.toUpperCase(),room.gameState.puzzles[room.gameState.puzzleLevel].answer.toUpperCase()) + //guess is wrong change turns + console.log('guess is incorrect') + changeTurn(room.gameState,ws) + } + else { + console.log('guess i correct') + //guessed correctly reward the user + rewardUser(room.gameState,ws,true) + loadNewPuzzle(room.gameState,ws) + } +} +function announceWinner(gameStateObject,ws) { + //find user with highest points. + //announce to the world. + const room = rooms[ws.roomCode] + let winner = gameStateObject.players.sort((a,b)=> a.points - b.points) + console.log(winner) + room.clients.forEach((client) => { + client.send(JSON.stringify({ + type:'game_over', + winner: `${winner.name} wins with ${winner.points}` + })) + }) + console.log('winner',) +} //these functions must have both gameStateobject and websockets initialized before use!!! -function rewardUser(gameStateObject,ws) { +function rewardUser(gameStateObject,ws,puzzleSolved = false) { const roomCode = ws.roomCode const room = rooms[ws.roomCode] //find the current player let currentUserTurn = gameStateObject.players[gameStateObject.turn] currentUserTurn.win++ gameStateObject.puzzleLevel++ - + if (puzzleSolved) { + currentUserTurn.points = currentUserTurn.points*3 + console.log(currentUserTurn.points) + } + if (gameStateObject.puzzleLevel == gameStateObject.puzzles.length-1) { + announceWinner(gameStateObject,ws) + } room.clients.forEach((client) => { client.send(JSON.stringify({ type: 'puzzle_solved', roomCode, @@ -254,6 +289,7 @@ checkPuzzleData(puzzles) wss.on('connection', (ws) => { ws.on('message', (message) => { const data = JSON.parse(message) + if (data.type === 'change_name') { const roomCode = ws.roomCode const room = rooms[ws.roomCode] @@ -295,12 +331,17 @@ wss.on('connection', (ws) => { }) } + + if (data.type === 'solve_puzzle') { + console.log('solve_puzzle hit') + checkSolvePuzzleGuess(data.guess, ws) + } if (data.type === 'confirm_id') { const room = rooms[ws.roomCode] const currentUserTurn = room.gameState.players[room.gameState.turn] room.gameState.turnState = 'spin' if (ws.name == currentUserTurn.name && ws.identifierToken == currentUserTurn.id) { - ws.send(JSON.stringify({ type:'next_turn_confirmed'})) + ws.send(JSON.stringify({ type:'next_turn_confirmed', turnState:room.gameState.turnState})) } else ws.send(JSON.stringify({ type:'next_turn_denied'})) } if (data.type === 'create_room') { @@ -388,19 +429,24 @@ wss.on('connection', (ws) => { wins:0 }) }) - console.log(room.gameState) + //console.log(room.gameState) console.log('game started for:',room) - + let selectedPlayer = room.clients.find((x)=>x.identifierToken == room.gameState.players[room.gameState.turn].id) + if (selectedPlayer) { + console.log('hit') + selectedPlayer.send(JSON.stringify({type:'your_turn'})) + } if (room && room.leader === ws) { room.clients.forEach((client) => { + console.log(client.id) client.send(JSON.stringify({ type: 'game_started', roomCode: ws.roomCode, - // eslint-disable-next-line no-undef puzzle: removeProp(currentPuzzle,'answer'), turn:room.gameState.turn, turnState:room.gameState.turnState })) + }) } else { ws.send(JSON.stringify({ type: 'error', message: 'Only the leader can start the game' })) @@ -409,6 +455,7 @@ wss.on('connection', (ws) => { if (data.type === 'spin_wheel' || data.type === 'guess_letter') { const room = rooms[ws.roomCode] + if (room && room.clients.includes(ws)) { // Handle spin and guess events @@ -422,31 +469,40 @@ wss.on('connection', (ws) => { } // Simulate a wheel spin result and update room state let spinResult = getRandomValue(wheel) + + if (spinResult != ['lose a turn', 'spin again', 'Bankrupt'].indexOf(spinResult)) { + room.gameState.turnState = 'guess' + } if (spinResult == 'Bankrupt') { room.gameState.players = room.gameState.players.map((player) => { return player.id == ws.identifierToken ? {...player, points:0} : player }) } if (spinResult == 'spin again') { - + console.log('in spin again') + room.gameState.turnState = 'spin' room.gameState.players = room.gameState.players.map((player) => { return player.id == ws.identifierToken ? {...player, points:player.points + 0, condition:'spin again'} : player }) + } if (spinResult == 'lose a turn') { console.log('lose a turn here ig...?') changeTurn(room.gameState,ws) } + room.gameState.players = room.gameState.players.map((player) => { return player.id == ws.identifierToken ? {...player, points:player.points + 0} : player }) console.log('players', room.gameState.players) room.gameState.spinResult = spinResult + console.log('spin_result',room.gameState) room.clients.forEach((client) => client.send(JSON.stringify({ type: 'spin_result', spinResult, - player: ws === room.leader ? 'Leader' : 'Player' + player: ws === room.leader ? 'Leader' : 'Player', + turnState: room.gameState.turnState })) ) } @@ -487,7 +543,8 @@ wss.on('connection', (ws) => { } else { //the player guessed correctly and its still their turn - room.gameState.turn = 'spin' + room.gameState.turnState = 'spin' + console.log('correct guess!!',room.gameState.turn) room.clients.forEach((client) => client.send(JSON.stringify( { type: 'guess_result', letter,