fixed display bugs, added solve feature, doesn't work rn,and win logic
This commit is contained in:
Meleeman01
parent
5e20e2321a
commit
f89489f46f
118
index.html
118
index.html
@ -93,6 +93,18 @@
|
||||
</div>
|
||||
<div>
|
||||
</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>
|
||||
<input id="join-code" placeholder="Enter room code">
|
||||
@ -105,6 +117,7 @@
|
||||
<button id="spin-wheel" style="display: none;">Spin Wheel</button>
|
||||
<input id="guess-letter" placeholder="Guess a letter" style="display: none;">
|
||||
<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>
|
||||
@ -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);
|
||||
|
||||
77
server.js
77
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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user