Meleeman/WheelOfFortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed display bugs, added solve feature, doesn't work rn,and win logic

Browse Source
This commit is contained in:
Meleeman01 2025-02-20 02:35:21 -06:00
parent 5e20e2321a
commit f89489f46f
2 changed files with 155 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
index.html
View File

@ -93,6 +93,18 @@
</div> </div>
<div> <div>
</dialog> </dialog>
<!-- Dialog -->
<dialog class="solveDialog">
<div class="flx(column) space-evenly">
<h2>Solve the Puzzle?</h2>
<label for="solveInput">Answer:</label>
<input type="text" class="solveInput is-round" style="padding: .25rem; ">
<div class="mt-4 flx(wrap) space-evenly">
<button class="solveButton btn is-success is-round mr-1 div-shadow">Solve</button>
<button class="closeSolveDialogButton btn is-error is-round ml-1 div-shadow">close</button>
</div>
<div>
</dialog>
<button id="create-room">Create Room</button> <button id="create-room">Create Room</button>
<input id="join-code" placeholder="Enter room code"> <input id="join-code" placeholder="Enter room code">
@ -105,6 +117,7 @@
<button id="spin-wheel" style="display: none;">Spin Wheel</button> <button id="spin-wheel" style="display: none;">Spin Wheel</button>
<input id="guess-letter" placeholder="Guess a letter" style="display: none;"> <input id="guess-letter" placeholder="Guess a letter" style="display: none;">
<button id="guess-button" style="display: none;">Guess</button> <button id="guess-button" style="display: none;">Guess</button>
<button class="solve-button" style="display: none;" onclick="solvePuzzle()">Solve</button>
<div class="puzzleboard mb-2"></div> <div class="puzzleboard mb-2"></div>
@ -396,18 +409,49 @@
}); });
} }
function changeSpinGuessState(message) { function solvePuzzle() {
if(message.turnState == 'spin') { const solveDialog = document.querySelector('.solveDialog');
document.getElementById("spin-wheel").style.display = "none"; const solveInput = document.querySelector('.solveInput');
document.getElementById("guess-letter").style.display = "inline"; const solveButton = document.querySelector('.solveButton');
document.getElementById("guess-button").style.display = "inline"; const closeDialogButton = document.querySelector('.closeSolveDialogButton');
} solveInput.value = '';
if (message.turnState == 'guess') { solveDialog.showModal();
document.getElementById("spin-wheel").style.display = "none"; closeDialogButton.addEventListener('click',() => {solveDialog.close()});
document.getElementById("guess-letter").style.display = "inline"; solveButton.addEventListener('click',() => {
document.getElementById("guess-button").style.display = "inline"; socket.send(JSON.stringify({ type: "solve_puzzle", guess:solveInput.value }));
solveDialog.close();
});
} }
function changeSpinGuessState(message) {
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";
}
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-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"); const socket = new WebSocket("ws://localhost:8080");
@ -474,12 +518,13 @@
document.getElementById("status").innerText = `${status}`; document.getElementById("status").innerText = `${status}`;
document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`; document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
if (message.isLeader) { if (message.isLeader) {
document.getElementById("start-game").style.display = "inline"; changeTurnState()
document.getElementById("spin-wheel").style.display = "inline";
document.getElementById("guess-letter").style.display = "inline";
document.getElementById("guess-button").style.display = "inline";
} }
} }
if (message.type === "your_turn") {
window.yourTurn = true;
changeTurnState()
}
if (message.type === "game_started") { if (message.type === "game_started") {
let result = drawPuzzle(message); let result = drawPuzzle(message);
@ -487,9 +532,8 @@
console.log(result); console.log(result);
document.getElementById("status").innerText = "The game has started!"; document.getElementById("status").innerText = "The game has started!";
document.getElementById("start-game").style.display = "none"; document.getElementById("start-game").style.display = "none";
document.getElementById("spin-wheel").style.display = "inline";
document.getElementById("guess-letter").style.display = "none"; changeSpinGuessState(message);
document.getElementById("guess-button").style.display = "none";
} }
if (message.type === "new_puzzle") { if (message.type === "new_puzzle") {
let result = drawPuzzle(message); let result = drawPuzzle(message);
@ -497,14 +541,17 @@
console.log(result); console.log(result);
document.getElementById("status").innerText = "New Puzzle!"; document.getElementById("status").innerText = "New Puzzle!";
document.getElementById("start-game").style.display = "none"; document.getElementById("start-game").style.display = "none";
document.getElementById("spin-wheel").style.display = "inline"; changeSpinGuessState(message);
document.getElementById("guess-letter").style.display = "none";
document.getElementById("guess-button").style.display = "none";
} }
if (message.type === "spin_result") { if (message.type === "spin_result") {
console.log('spin result recieved'); console.log('spin result recieved');
if (message.spinResult != 'lose a turn' || message.spinResult != 'Bankrupt' || message.spinResult != 'spin again') {
document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`; 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 //find target index
let targetIndexArr = wheel.entries(); let targetIndexArr = wheel.entries();
let filterResultsArr = []; let filterResultsArr = [];
@ -523,9 +570,17 @@
console.log('else',filterResultsArr[0]) console.log('else',filterResultsArr[0])
startSpin(filterResultsArr[0]); startSpin(filterResultsArr[0]);
} }
document.getElementById("spin-wheel").style.display = "none"; if (window.yourTurn && message.spinResult != 'lose a turn') {
document.getElementById("guess-letter").style.display = "inline"; console.log('in spin_result: ',message)
document.getElementById("guess-button").style.display = "inline"; // 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") { if (message.type === "guess_result") {
@ -535,16 +590,16 @@
if (message.puzzle) { if (message.puzzle) {
drawPuzzle(message); drawPuzzle(message);
} }
if (message.turnState) { if (message.turnState && message.correct) {
console.log(message.turnState);
changeSpinGuessState(message); changeSpinGuessState(message);
}else {
window.yourTurn = false
changeTurnState()
} }
} }
if (message.type === "next_turn") { 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) { if (window.you == message.user) {
//send message since //send message since
socket.send(JSON.stringify({ type: "confirm_id"})); socket.send(JSON.stringify({ type: "confirm_id"}));
@ -553,16 +608,16 @@
if (message.type === "next_turn_confirmed") { if (message.type === "next_turn_confirmed") {
//this means its your turn //this means its your turn
console.log('its your turn, id confirmed'); console.log('its your turn, id confirmed');
document.getElementById("spin-wheel").style.display = "inline"; window.yourTurn = true;
document.getElementById("guess-letter").style.display = "none"; changeTurnState()
document.getElementById("guess-button").style.display = "none"; changeSpinGuessState(message)
} }
if (message.type === "next_turn_denied") { if (message.type === "next_turn_denied") {
//silently deny the user the next turn if trying to assume the same name as another user //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!'); console.log('its not your turn yet!');
document.getElementById("spin-wheel").style.display = "none"; changeTurnState()
document.getElementById("guess-letter").style.display = "none";
document.getElementById("guess-button").style.display = "none";
} }
if (message.type === "puzzle_solved") { if (message.type === "puzzle_solved") {
console.log('puzzle has been solved!!!'); console.log('puzzle has been solved!!!');
@ -572,6 +627,9 @@
drawPlayers(message); drawPlayers(message);
document.getElementById("status").innerText = "You are now the party leader!"; 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") { if (message.type === "error") {
alert(message.message); alert(message.message);

77
server.js
View File

@ -11,7 +11,7 @@ const wheel = [
300,600,300,500,800,550,400,300,900,500,'spin again', 300,600,300,500,800,550,400,300,900,500,'spin again',
900,'Bankrupt',600,400,300 900,'Bankrupt',600,400,300
] //represents wheel in wheel of fortune game. ] //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) { function removeProp(obj, prop) {
obj = JSON.parse(JSON.stringify(obj)) obj = JSON.parse(JSON.stringify(obj))
if(!Array.isArray(prop)){ if(!Array.isArray(prop)){
@ -186,15 +186,50 @@ function checkGuess(letter,gameStateObject) {
else console.error('invalid input to checkGuess() function',currentPuzzle.puzzle[0]) 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!!! //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 roomCode = ws.roomCode
const room = rooms[ws.roomCode] const room = rooms[ws.roomCode]
//find the current player //find the current player
let currentUserTurn = gameStateObject.players[gameStateObject.turn] let currentUserTurn = gameStateObject.players[gameStateObject.turn]
currentUserTurn.win++ currentUserTurn.win++
gameStateObject.puzzleLevel++ 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) => { room.clients.forEach((client) => {
client.send(JSON.stringify({ client.send(JSON.stringify({
type: 'puzzle_solved', roomCode, type: 'puzzle_solved', roomCode,
@ -254,6 +289,7 @@ checkPuzzleData(puzzles)
wss.on('connection', (ws) => { wss.on('connection', (ws) => {
ws.on('message', (message) => { ws.on('message', (message) => {
const data = JSON.parse(message) const data = JSON.parse(message)
if (data.type === 'change_name') { if (data.type === 'change_name') {
const roomCode = ws.roomCode const roomCode = ws.roomCode
const room = rooms[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') { if (data.type === 'confirm_id') {
const room = rooms[ws.roomCode] const room = rooms[ws.roomCode]
const currentUserTurn = room.gameState.players[room.gameState.turn] const currentUserTurn = room.gameState.players[room.gameState.turn]
room.gameState.turnState = 'spin' room.gameState.turnState = 'spin'
if (ws.name == currentUserTurn.name && ws.identifierToken == currentUserTurn.id) { 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'})) } else ws.send(JSON.stringify({ type:'next_turn_denied'}))
} }
if (data.type === 'create_room') { if (data.type === 'create_room') {
@ -388,19 +429,24 @@ wss.on('connection', (ws) => {
wins:0 wins:0
}) })
}) })
console.log(room.gameState) //console.log(room.gameState)
console.log('game started for:',room) 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) { if (room && room.leader === ws) {
room.clients.forEach((client) => { room.clients.forEach((client) => {
console.log(client.id)
client.send(JSON.stringify({ client.send(JSON.stringify({
type: 'game_started', type: 'game_started',
roomCode: ws.roomCode, roomCode: ws.roomCode,
// eslint-disable-next-line no-undef
puzzle: removeProp(currentPuzzle,'answer'), puzzle: removeProp(currentPuzzle,'answer'),
turn:room.gameState.turn, turn:room.gameState.turn,
turnState:room.gameState.turnState turnState:room.gameState.turnState
})) }))
}) })
} else { } else {
ws.send(JSON.stringify({ type: 'error', message: 'Only the leader can start the game' })) 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') { if (data.type === 'spin_wheel' || data.type === 'guess_letter') {
const room = rooms[ws.roomCode] const room = rooms[ws.roomCode]
if (room && room.clients.includes(ws)) { if (room && room.clients.includes(ws)) {
// Handle spin and guess events // Handle spin and guess events
@ -422,31 +469,40 @@ wss.on('connection', (ws) => {
} }
// Simulate a wheel spin result and update room state // Simulate a wheel spin result and update room state
let spinResult = getRandomValue(wheel) let spinResult = getRandomValue(wheel)
if (spinResult != ['lose a turn', 'spin again', 'Bankrupt'].indexOf(spinResult)) {
room.gameState.turnState = 'guess'
}
if (spinResult == 'Bankrupt') { if (spinResult == 'Bankrupt') {
room.gameState.players = room.gameState.players.map((player) => { room.gameState.players = room.gameState.players.map((player) => {
return player.id == ws.identifierToken ? {...player, points:0} : player return player.id == ws.identifierToken ? {...player, points:0} : player
}) })
} }
if (spinResult == 'spin again') { if (spinResult == 'spin again') {
console.log('in spin again')
room.gameState.turnState = 'spin'
room.gameState.players = room.gameState.players.map((player) => { room.gameState.players = room.gameState.players.map((player) => {
return player.id == ws.identifierToken ? {...player, points:player.points + 0, condition:'spin again'} : player return player.id == ws.identifierToken ? {...player, points:player.points + 0, condition:'spin again'} : player
}) })
} }
if (spinResult == 'lose a turn') { if (spinResult == 'lose a turn') {
console.log('lose a turn here ig...?') console.log('lose a turn here ig...?')
changeTurn(room.gameState,ws) changeTurn(room.gameState,ws)
} }
room.gameState.players = room.gameState.players.map((player) => { room.gameState.players = room.gameState.players.map((player) => {
return player.id == ws.identifierToken ? {...player, points:player.points + 0} : player return player.id == ws.identifierToken ? {...player, points:player.points + 0} : player
}) })
console.log('players', room.gameState.players) console.log('players', room.gameState.players)
room.gameState.spinResult = spinResult room.gameState.spinResult = spinResult
console.log('spin_result',room.gameState) console.log('spin_result',room.gameState)
room.clients.forEach((client) => room.clients.forEach((client) =>
client.send(JSON.stringify({ client.send(JSON.stringify({
type: 'spin_result', spinResult, 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 { else {
//the player guessed correctly and its still their turn //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) => room.clients.forEach((client) =>
client.send(JSON.stringify( client.send(JSON.stringify(
{ type: 'guess_result', letter, { type: 'guess_result', letter,