Almost done
This commit is contained in:
@@ -1,40 +1,72 @@
|
||||
<script lang="ts">
|
||||
import Wall from "./Wall.svelte";
|
||||
import type { Player } from "./Player";
|
||||
import { GameState } from "./GameState";
|
||||
import type { Game } from "$lib/games/games";
|
||||
import Wall from "$lib/Wall.svelte";
|
||||
import type { Player } from "$lib/Player";
|
||||
import { GameState } from "$lib/GameState";
|
||||
import { isSimpleQuestion, type Game, type Question } from "$lib/games/games";
|
||||
import ws from "$lib/websocket.svelte";
|
||||
import { page } from "$app/state";
|
||||
import { MessageType } from "$lib/MessageType";
|
||||
import GameStateSvelte from "$lib/GameState.svelte.js";
|
||||
import Scoreboard from "$lib/Scoreboard.svelte";
|
||||
import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte";
|
||||
import PlusMinusButton from "$lib/PlusMinusButton.svelte";
|
||||
import type { VisitedQuestions } from "$lib/Types.js";
|
||||
|
||||
let startDisabled = $state(true);
|
||||
let _startDisabled = true;
|
||||
|
||||
function handleDisplayConnected() {
|
||||
if (!startDisabled) {
|
||||
gameManager?.sendStart();
|
||||
gameManager?.sendCurrentState();
|
||||
startDisabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleDisplayDisconnected() {
|
||||
startDisabled = true;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!ws.message) return;
|
||||
console.log(ws.message);
|
||||
if (ws.nextMessage() == "DISPLAY-CONNECTED") {
|
||||
if (!_startDisabled) {
|
||||
gameManager?.sendStart();
|
||||
gameManager?.sendCurrentState();
|
||||
}
|
||||
_startDisabled = false;
|
||||
startDisabled = false;
|
||||
console.log("Display connected:", GameStateSvelte.displayConnected);
|
||||
if (GameStateSvelte.displayConnected) {
|
||||
handleDisplayConnected();
|
||||
} else {
|
||||
handleDisplayDisconnected();
|
||||
}
|
||||
});
|
||||
|
||||
class GameManager {
|
||||
public state: GameState = $state(GameState.INIT);
|
||||
public game: Game;
|
||||
public players: Player[];
|
||||
public players: Player[] = $state([
|
||||
{
|
||||
name: "Player 1",
|
||||
points: 0
|
||||
},
|
||||
{
|
||||
name: "Player 2",
|
||||
points: 0
|
||||
},
|
||||
{
|
||||
name: "Player 3",
|
||||
points: 0
|
||||
}
|
||||
]);
|
||||
|
||||
public currentPlayer = $state(0);
|
||||
public currentWall = $state(0);
|
||||
public visitedQuestions: VisitedQuestions = $state([]);
|
||||
public currentCategory = $state(0);
|
||||
public currentQuestion = $state(0);
|
||||
|
||||
constructor(game: Game, players: Player[]) {
|
||||
public answerIsShowing = $state(false);
|
||||
|
||||
constructor(game: Game) {
|
||||
this.game = game;
|
||||
this.players = players;
|
||||
}
|
||||
|
||||
startGame(): void {
|
||||
this.currentPlayer = Math.floor(Math.random() * this.players.length);
|
||||
this.state = GameState.CHOOSING_QUESTION;
|
||||
this.sendStart();
|
||||
this.sendCurrentState();
|
||||
@@ -42,49 +74,182 @@
|
||||
|
||||
sendStart(): void {
|
||||
ws.sendMessage({
|
||||
type: "start"
|
||||
type: MessageType.START
|
||||
});
|
||||
}
|
||||
|
||||
sendPlayers(): void {
|
||||
ws.sendMessage({
|
||||
type: MessageType.PLAYERS,
|
||||
players: this.players,
|
||||
current: this.currentPlayerToName()
|
||||
});
|
||||
}
|
||||
|
||||
sendWall(): void {
|
||||
ws.sendMessage({
|
||||
type: MessageType.GOTO,
|
||||
route: `/${page.params.game}/${this.currentWall}`
|
||||
});
|
||||
this.sendVisited();
|
||||
}
|
||||
|
||||
sendVisited(): void {
|
||||
ws.sendMessage({
|
||||
type: MessageType.VISITED_QUESTIONS,
|
||||
visitedQuestions: this.visitedQuestions
|
||||
});
|
||||
}
|
||||
|
||||
sendCurrentState(): void {
|
||||
this.sendPlayers();
|
||||
this.sendWall();
|
||||
}
|
||||
|
||||
sendCurrentQuestion(): void {
|
||||
ws.sendMessage({
|
||||
type: "players",
|
||||
players
|
||||
type: MessageType.GOTO,
|
||||
route: `/${page.params.game}/${this.currentWall}/${this.currentCategory}/${this.currentQuestion}`
|
||||
});
|
||||
}
|
||||
|
||||
sendEnd(): void {
|
||||
ws.sendMessage({
|
||||
type: "goto",
|
||||
route: `/${page.params.game}/${this.currentWall}`
|
||||
type: MessageType.GOTO,
|
||||
route: `/${page.params.game}/${this.currentWall}/end`
|
||||
});
|
||||
}
|
||||
|
||||
tileClicked(categoryIndex: number, questionIndex: number) {
|
||||
console.log("Cat", categoryIndex, "Que", questionIndex);
|
||||
console.log(gameManager.wall.categories[categoryIndex]?.questions[questionIndex]);
|
||||
|
||||
this.currentCategory = categoryIndex;
|
||||
this.currentQuestion = questionIndex;
|
||||
this.answerIsShowing = false;
|
||||
|
||||
this.sendCurrentQuestion();
|
||||
|
||||
this.state = GameState.SHOW_QUESTION;
|
||||
}
|
||||
|
||||
addPlayer() {
|
||||
this.players.push({
|
||||
name: "Player " + (this.players.length + 1),
|
||||
points: 0
|
||||
});
|
||||
}
|
||||
|
||||
removePlayer(index: number) {
|
||||
this.players.splice(index, 1);
|
||||
}
|
||||
|
||||
showAnswer() {
|
||||
this.answerIsShowing = true;
|
||||
ws.sendMessage({
|
||||
type: MessageType.SHOW_ANSWER
|
||||
});
|
||||
}
|
||||
|
||||
hideAnswer() {
|
||||
this.answerIsShowing = false;
|
||||
ws.sendMessage({
|
||||
type: MessageType.HIDE_ANSWER
|
||||
});
|
||||
}
|
||||
|
||||
plus(player: Player) {
|
||||
if (player.name === this.currentPlayerToName()) {
|
||||
player.points += this.question.points * 2;
|
||||
} else {
|
||||
player.points += this.question.points;
|
||||
}
|
||||
this.sendPlayers();
|
||||
}
|
||||
|
||||
minus(player: Player) {
|
||||
if (player.name === this.currentPlayerToName()) {
|
||||
player.points -= this.question.points * 2;
|
||||
} else {
|
||||
player.points -= this.question.points;
|
||||
}
|
||||
this.sendPlayers();
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.sendWall();
|
||||
this.state = GameState.CHOOSING_QUESTION;
|
||||
}
|
||||
|
||||
finishQuestion(): void {
|
||||
if (this.visitedQuestions[this.currentCategory] === undefined) {
|
||||
this.visitedQuestions[this.currentCategory] = [this.currentQuestion];
|
||||
} else if (
|
||||
!this.visitedQuestions[this.currentCategory].includes(this.currentQuestion)
|
||||
) {
|
||||
this.visitedQuestions[this.currentCategory].push(this.currentQuestion);
|
||||
}
|
||||
this.nextPlayer();
|
||||
if (this.wallIsDone()) {
|
||||
this.goToNextWall();
|
||||
} else {
|
||||
this.sendWall();
|
||||
this.state = GameState.CHOOSING_QUESTION;
|
||||
}
|
||||
}
|
||||
|
||||
wallIsDone(): boolean {
|
||||
let visitedNum = 0;
|
||||
for (const questions of this.visitedQuestions) {
|
||||
if (questions !== undefined) {
|
||||
visitedNum += questions.length;
|
||||
}
|
||||
}
|
||||
let totalNum = 0;
|
||||
for (const category of this.wall.categories) {
|
||||
totalNum += category.questions.length;
|
||||
}
|
||||
console.log(`${visitedNum} >= ${totalNum}`);
|
||||
return visitedNum >= totalNum;
|
||||
}
|
||||
|
||||
goToNextWall(): void {
|
||||
if (this.currentWall + 1 >= this.game.walls.length) {
|
||||
this.goToEndScreen();
|
||||
} else {
|
||||
this.currentWall += 1;
|
||||
this.visitedQuestions = [];
|
||||
this.sendWall();
|
||||
this.state = GameState.CHOOSING_QUESTION;
|
||||
}
|
||||
}
|
||||
|
||||
goToEndScreen(): void {
|
||||
this.sendEnd();
|
||||
this.state = GameState.END;
|
||||
}
|
||||
|
||||
nextPlayer(): void {
|
||||
this.currentPlayer = (this.currentPlayer + 1) % this.players.length;
|
||||
this.sendPlayers();
|
||||
}
|
||||
|
||||
currentPlayerToName(): string {
|
||||
return this.players[this.currentPlayer].name;
|
||||
}
|
||||
|
||||
get wall() {
|
||||
return this.game.walls[this.currentWall];
|
||||
}
|
||||
|
||||
get question() {
|
||||
return this.wall.categories[this.currentCategory].questions[this.currentQuestion];
|
||||
}
|
||||
}
|
||||
|
||||
let { data } = $props();
|
||||
let players: Player[] = $state([
|
||||
{
|
||||
name: "Player 1",
|
||||
points: 0
|
||||
},
|
||||
{
|
||||
name: "Player 2",
|
||||
points: 0
|
||||
},
|
||||
{
|
||||
name: "Player 3",
|
||||
points: 0
|
||||
}
|
||||
]);
|
||||
let gameManager = new GameManager(data, players);
|
||||
|
||||
function addPlayer() {
|
||||
players.push({
|
||||
name: "Player " + (players.length + 1),
|
||||
points: 0
|
||||
});
|
||||
}
|
||||
|
||||
function removePlayer(index: number) {
|
||||
players.splice(index, 1);
|
||||
}
|
||||
let gameManager = new GameManager(data);
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col">
|
||||
@@ -93,21 +258,78 @@
|
||||
<div class="p-4">
|
||||
<div class="flex items-center">
|
||||
<h2 class="grow pb-4 text-5xl">Spieler</h2>
|
||||
<button class="btn" disabled={startDisabled} onclick={() => gameManager.startGame()}
|
||||
>Start</button
|
||||
<button
|
||||
class="btn"
|
||||
disabled={!startDisabled}
|
||||
onclick={() => gameManager.startGame()}>Start</button
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 pb-4">
|
||||
{#each gameManager.players as player, i}
|
||||
<div class="flex items-center">
|
||||
<input class="inputField grow" type="text" bind:value={player.name} />
|
||||
<button class="btn" onclick={() => removePlayer(i)}>Löschen</button>
|
||||
<button class="btn" onclick={() => gameManager.removePlayer(i)}
|
||||
>Löschen</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button class="btn" onclick={addPlayer}>Spieler hinzufügen</button>
|
||||
<button class="btn" onclick={() => gameManager.addPlayer()}>Spieler hinzufügen</button>
|
||||
</div>
|
||||
{:else}
|
||||
<Wall wall={gameManager.game.walls[gameManager.currentWall]} />
|
||||
<div class="flex grow">
|
||||
<Scoreboard
|
||||
players={gameManager.players}
|
||||
currentPlayer={gameManager.currentPlayerToName()}
|
||||
/>
|
||||
{#if gameManager.state === GameState.SHOW_QUESTION}
|
||||
<div class="flex grow flex-col">
|
||||
<div class="flex grow ps-4 pe-4">
|
||||
{#if gameManager.question === undefined}
|
||||
<p>Question is undefined</p>
|
||||
{:else if isSimpleQuestion(gameManager.question)}
|
||||
<SimpleQuestionComponent
|
||||
question={gameManager.question}
|
||||
showAnswer={true}
|
||||
/>
|
||||
{:else}
|
||||
<p>Type of question unknown: {gameManager.question.type}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="m-4 flex items-center gap-4">
|
||||
<button class="btn" onclick={() => gameManager.goBack()}>Zurück</button>
|
||||
{#if gameManager.answerIsShowing}
|
||||
<button class="btn" onclick={() => gameManager.hideAnswer()}
|
||||
>Antwort verstecken</button
|
||||
>
|
||||
{:else}
|
||||
<button class="btn" onclick={() => gameManager.showAnswer()}
|
||||
>Antwort aufdecken</button
|
||||
>
|
||||
{/if}
|
||||
{#each gameManager.players as player}
|
||||
<PlusMinusButton
|
||||
label={player.name}
|
||||
plus={() => gameManager.plus(player)}
|
||||
minus={() => gameManager.minus(player)}
|
||||
/>
|
||||
{/each}
|
||||
<button class="btn" onclick={() => gameManager.finishQuestion()}
|
||||
>Abschließen</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{:else if gameManager.state === GameState.END}
|
||||
<div class="flex grow items-center justify-center text-7xl"><div>ENDE</div></div>
|
||||
{:else}
|
||||
<div class="grow ps-4 pe-4">
|
||||
<Wall
|
||||
wall={gameManager.game.walls[gameManager.currentWall]}
|
||||
onclick={(cat, que) => gameManager.tileClicked(cat, que)}
|
||||
visited={gameManager.visitedQuestions}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user