Pictures says more than thousand words they say..
So, guess just start with some pictures..
Start Screen for mobile
So u need to enter a name and an avtar seed
This is stored in local storage so will be remembered when visit page again.
Lobby for mobile
It needs some more css work later on.. for now good enough.
Regular lobby with countdown going for starting game
Question.
Just some hard coded questions in the backend for now.
Round Results
Showing the result of the round. DNA means did not answer, player did not answer before time ran out. Correct answer show a ✔ and incorrect ❌
The css is in no way finished.. for now it's just some quick throw-together so can display something more fun that just text... ;)
Code
So in the last log, I mentioned I had implemented the schematics I made earlier except the handling of disconnects during various states of the game. This is now fixed.
I simply extracted the needed code from the handler into a function and depending on the game state when a player disconnect the appropriate function is run.
Handler just call the function
//use disconnecting instead of discconnect so still have access to room of socket n stuff
socket.on('disconnecting', () => {
disconnecting(io, socket, games);
});
And here is function
function disconnecting(io, socket, games) {
//check if player is in a game and if so remove them from the game..
if (socket.rooms.size > 1) {
for (const room of socket.rooms) {
//seems stuff can be undefined for some time so added a check for this too.
if (room !== socket.id && games.get(room) !== undefined) {
const game = games.get(room);
game?.leave(socket.id);
//delete room if empty
if (game?.players.size === 0) games.delete(room);
else {
//notify the other players that the player has left the game
io.to(game.id).emit('player-left', socket.id);
//-----chek the state of the game and run needed function
switch (game.status) {
case 'waiting-for-start':
shouldGameStart(io, game);
break;
case 'waiting-for-ready':
shouldStartRound(io, game);
break;
case 'waiting-for-answer':
shouldEndRound(io, game);
break;
}
}
break;
}
}
}
}
For now no real generation of questions. Just some hard coded ones for testing.
Later will need figure out a common structure for questions.
module.exports = async function generateQuestions(no) {
const questions = [
{ question: 'What is the capital of the United States?', answers: ['Washington', 'New York', 'Los Angeles'], correctAnswer: 'Washington', type: 'pick-one' },
{ question: 'What is the capital of the United Kingdom?', answers: ['London', 'Manchester', 'Liverpool'], correctAnswer: 'London', type: 'pick-one' },
{ question: 'What is the capital of the Sweden?', answers: ['Stockholm', 'Oslo', 'Madrid'], correctAnswer: 'Stockholm', type: 'pick-one' },
];
//select no random questions from the array
const selectedQuestions = [];
for (let i = 0; i < no; i++) {
const randomIndex = Math.floor(Math.random() * questions.length);
selectedQuestions.push(questions[randomIndex]);
}
console.log('q', selectedQuestions);
return selectedQuestions;
};
The Svelte components are still just rather simple.
Start.svelte.. what is shown first, here u choose name n avatar n what u want to do, like create or join game
<script>
import { onMount } from 'svelte';
import { activeComponent, players, gameProps, playerId } from '../lib/stores';
export let socket;
let playername = '';
let seed = '';
//get player name and seed from localstorage
onMount(() => {
let player = localStorage.getItem('player');
if (player !== null) {
player = JSON.parse(player);
// @ts-ignore
playername = player?.name || ''; //these safeguards are really not needed i guess
// @ts-ignore
seed = player?.seed || '';
}
});
//set player name and seed to localstorage when it chages
$: {
if (playername || seed) localStorage.setItem('player', JSON.stringify({ name: playername, seed: seed }));
}
function createGame() {
let data = { name: playername, avatar: seed };
socket.emit('create-game', data, (response) => {
console.log(response.status);
if (response.status === 'ok') {
//set all the other response data in store.. playerId and gameData
players.set(response.players);
gameProps.set(response.gameData);
playerId.set(response.playerId);
//move to lobby
activeComponent.set('lobby');
}
});
}
/// if find open game will join it
function quickPlay() {
socket.emit('quick-play', (response) => {
if (response.gameId) {
socket.emit('join-game', { gameId: response.gameId, name: playername, avatar: seed }, (response) => {
if (response.status === 'ok') {
//set all the other response data in store.. playerId and gameData
players.set(response.players);
gameProps.set(response.gameData);
playerId.set(response.playerId);
//move to lobby
activeComponent.set('lobby');
}
});
} else alert('no game found');
});
}
function test() {
socket.emit('test');
}
</script>
<div class="wrapper">
<h1>Let's Play!</h1>
<img src={`https://avatars.dicebear.com/api/avataaars/:${seed}.svg`} alt="avatar" />
<input type="text" placeholder="Enter name" bind:value={playername} />
<input type="text" placeholder="Avatar Seed" bind:value={seed} />
<div class="buttons" class:disabled={!seed || !playername}>
<button on:click={createGame}>Create Game</button>
<button on:click={quickPlay}>Quickplay</button>
<button on:click={test}>List Games</button>
</div>
</div>
Lobby.svelte .. here is where u end up after creating or joining game
<script>
import { players, gameProps } from '../lib/stores';
export let socket;
export let currentCount;
let clicked = false;
function playerReady() {
clicked = true;
socket.emit('player-ready', $gameProps.id);
}
</script>
<div class="component-wrapper">
<h1>Lobby</h1>
<h2>{$gameProps.id}</h2>
<div class="player-wrapper">
{#each $players as player}
<div>
<img src={player.avatar} alt="avatar" />
<p>{player.name}</p>
</div>
{/each}
</div>
<button on:click|once={playerReady} disabled={clicked}>Ready</button>
<progress value={currentCount} max={$gameProps.waitBetweenRound} />
<h2>{currentCount > -1 ? currentCount : 'Waiting'}</h2>
</div>
The question component is not even worth posting, it just generates buttons with the different possible answers n emit to server on press.
RoundResult.svelte will just display the results of the round.
<script>
export let currentCount;
export let roundResults;
import { players } from '../lib/stores';
</script>
<h2>Round Results</h2>
<div class="player-wrapper">
{#each $players as player}
<div>
<img src={player.avatar} alt="avatar" />
<p>{player.name}</p>
<p>{roundResults.find((x) => x.id == player.id).answer} <span>{roundResults.find((x) => x.id == player.id).answerCorrect ? '✔' : '❌'} </span></p>
</div>
{/each}
</div>
{#if currentCount > 0}
<h2>{currentCount}</h2>
{/if}
Ending notes
To generate the avatars I use https://avatars.dicebear.com. Awesome stuff!
Pulled in pico.css so I don't have to mock around and style everything myself, saves time.
Now just need to keep implement the missing things. Score system, end game results, question generator, question components and soo on.. For now I think it's good though, all logic seems to be working as intended.
Over n out.. now chill n watch some Korean series..
Top comments (0)