Trushy/Jeopardy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Done V1

Browse Source
This commit is contained in:
Jonas Kappa
2025-09-06 12:25:18 +02:00
parent 985f6d9bf9
commit 6f55dedbaa
8 changed files with 212 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/MessageType.ts
View File

@@ -4,5 +4,7 @@ export enum MessageType {
GOTO = "GOTO",
SHOW_ANSWER = "SHOW_ANSWER",
HIDE_ANSWER = "HIDE_ANSWER",
SHOW_QUESTION = "SHOW_QUESTION",
HIDE_QUESTION = "HIDE_QUESTION",
VISITED_QUESTIONS = "VISITED_QUESTIONS"
}

67
src/lib/MultipleChoiceQuestionComponent.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
import type { MultipleChoiceQuestion } from "./games/games";
interface Props {
question: MultipleChoiceQuestion;
showAnswer: boolean;
showQuestion: boolean;
[key: string]: unknown;
}
function shuffle<T>(array: T[]) {
let currentIndex = array.length;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
}
let { question, showAnswer, showQuestion }: Props = $props();
const answer = question.data.choices[0];
let _choices = [...question.data.choices];
shuffle(_choices);
</script>
<div class="mb-4 flex grow flex-col items-center text-6xl">
{#if showQuestion}
<div class="flex grow-1 items-center">
<div>{question.data.question}</div>
</div>
<div class="flex w-full grow-1 flex-wrap items-center justify-around gap-2">
{#each _choices as choice}
<div class="choiceCard {showAnswer && choice === answer ? 'answer' : ''}">
{choice}
</div>
{/each}
</div>
{/if}
</div>
<style>
.choiceCard {
border: 1px solid black;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
height: fit-content;
padding: 32px;
/* font-size: larger;
font-weight: bold;
cursor: pointer; */
}
.answer {
background-color: rgb(87, 255, 87);
box-shadow: 0 0 20px 5px rgb(87, 255, 87);
border: 1px solid rgb(50, 141, 50);
}
</style>

12
src/lib/PlusMinusButton.svelte
View File

@@ -3,18 +3,24 @@
label: string;
plus: (label: string) => void;
minus: (label: string) => void;
showPlus?: boolean;
showMinus?: boolean;
[key: string]: unknown;
}
let { label, plus, minus }: Props = $props();
let { label, plus, minus, showPlus = true, showMinus = true }: Props = $props();
</script>
<div class="specialBtn flex w-min gap-2 text-2xl">
<button class="innerBtn" onclick={() => minus(label)}>-</button>
{#if showMinus}
<button class="innerBtn" onclick={() => minus(label)}>-</button>
{/if}
<div class="whitespace-nowrap">
{label}
</div>
<button class="innerBtn" onclick={() => plus(label)}>+</button>
{#if showPlus}
<button class="innerBtn" onclick={() => plus(label)}>+</button>
{/if}
</div>
<style>

29
src/lib/Scoreboard.svelte
View File

@@ -4,10 +4,12 @@
interface Props {
players: Player[];
currentPlayer: string;
editable?: boolean;
onReload?: () => void;
[key: string]: unknown;
}
let { players, currentPlayer }: Props = $props();
let { players, currentPlayer, editable = false, onReload = () => {} }: Props = $props();
let _players = $derived(() => {
let p = [...players];
@@ -16,18 +18,33 @@
</script>
<div
class="h-full w-fit max-w-[400px] overflow-hidden border-r-1 border-solid border-gray-300 pr-4 pl-4"
class="h-full w-fit {editable === true
? 'max-w-[600px]'
: 'max-w-[400px]'} overflow-hidden border-r-1 border-solid border-gray-300 pr-4 pl-4"
>
<div class="flex justify-center">
<div class="flex items-center justify-around">
<h3 class="text-5xl">Scoreboard</h3>
{#if editable === true}
<button class="btn w-16" onclick={() => onReload()}>&#x21bb;</button>
{/if}
</div>
<div class="mt-4 text-3xl">
<table class="w-1/1">
<tbody>
{#each _players() as player}
{#each _players() as player (player.name)}
<tr class="{currentPlayer === player.name ? 'current' : ''} h-12">
<td class="pr-4 pl-2">{player.points}</td>
<td>{player.name}</td>
<td class="pr-4 pl-2">
{#if editable === true}
<input
class="inputField max-w-[200px]"
type="number"
bind:value={player.points}
/>
{:else}
{player.points}
{/if}
</td>
<td class="whitespace-nowrap">{player.name}</td>
</tr>
{/each}
</tbody>

11
src/lib/SimpleQuestionComponent.svelte
View File

@@ -4,16 +4,19 @@
interface Props {
question: SimpleQuestion;
showAnswer: boolean;
showQuestion: boolean;
[key: string]: unknown;
}
let { question, showAnswer }: Props = $props();
let { question, showAnswer, showQuestion }: Props = $props();
</script>
<div class="mb-4 flex grow flex-col items-center text-6xl">
<div class="flex grow-1 items-center">
<div>{question.data.question}</div>
</div>
{#if showQuestion || showAnswer}
<div class="flex grow-1 items-center">
<div>{question.data.question}</div>
</div>
{/if}
{#if showAnswer}
<div class="flex grow-1 items-center">
{question.data.answer}

20
src/lib/games/games.ts
View File

@@ -10,10 +10,20 @@ const games: Games = [
questions: [
{
points: 100,
type: "SIMPLE",
type: "MULTIPLE_CHOICE",
data: {
question: "Question 1?",
answer: "Answer 1"
question: "Wie heißt unser Planet?",
choices: [
"Erde",
"Sonne",
"Mars",
"Venus",
"Saturn",
"Jupiter",
"Merkur",
"Uranus",
"Neptun"
]
}
},
{
@@ -946,11 +956,13 @@ export type SimpleQuestion = Question & {
};
};
/**
* First choice is correct answer. Choices need to be shuffled in component
*/
export type MultipleChoiceQuestion = Question & {
type: "MULTIPLE_CHOICE";
data: {
question: string;
answer: number;
choices: string[];
};
};

24
src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte
View File

@@ -3,10 +3,11 @@
import { page } from "$app/state";
import { error } from "@sveltejs/kit";
import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte";
import { isSimpleQuestion } from "$lib/games/games";
import { isMultipleChoiceQuestion, isSimpleQuestion } from "$lib/games/games";
import ws from "$lib/websocket.svelte";
import { MessageType } from "$lib/MessageType";
import { untrack } from "svelte";
import MultipleChoiceQuestionComponent from "$lib/MultipleChoiceQuestionComponent.svelte";
console.log("wall:", page.params.wall);
@@ -58,6 +59,7 @@
}
let showAnswer = $state(false);
let showQuestion = $state(false);
$effect(() => {
if (ws.messageNum <= 0) return;
@@ -67,6 +69,7 @@
if (json.type == MessageType.SHOW_ANSWER) {
ws.nextMessage();
untrack(() => {
showQuestion = true;
showAnswer = true;
});
}
@@ -76,6 +79,19 @@
showAnswer = false;
});
}
if (json.type == MessageType.SHOW_QUESTION) {
ws.nextMessage();
untrack(() => {
showQuestion = true;
});
}
if (json.type == MessageType.HIDE_QUESTION) {
ws.nextMessage();
untrack(() => {
showQuestion = false;
showAnswer = false;
});
}
} catch (e) {}
});
</script>
@@ -91,9 +107,11 @@
{#if question === undefined}
<p>Question is undefined</p>
{:else if isSimpleQuestion(question)}
<SimpleQuestionComponent {question} {showAnswer} />
<SimpleQuestionComponent {question} {showAnswer} {showQuestion} />
{:else if isMultipleChoiceQuestion(question)}
<MultipleChoiceQuestionComponent {question} {showAnswer} {showQuestion} />
{:else}
<p>Type of question unknown: {question.type}</p>
<p>Type of question unknown</p>
{/if}
</div>
</div>

72
src/routes/connected/games/[game]/+page.svelte
View File

@@ -2,7 +2,12 @@
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 {
isMultipleChoiceQuestion,
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";
@@ -11,6 +16,7 @@
import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte";
import PlusMinusButton from "$lib/PlusMinusButton.svelte";
import type { VisitedQuestions } from "$lib/Types.js";
import MultipleChoiceQuestionComponent from "$lib/MultipleChoiceQuestionComponent.svelte";
let startDisabled = $state(true);
@@ -60,6 +66,9 @@
public currentQuestion = $state(0);
public answerIsShowing = $state(false);
public questionIsShowing = $state(false);
public pointsGivenForCurrentQuestion = $state(false);
constructor(game: Game) {
this.game = game;
@@ -146,6 +155,7 @@
showAnswer() {
this.answerIsShowing = true;
this.questionIsShowing = true;
ws.sendMessage({
type: MessageType.SHOW_ANSWER
});
@@ -158,12 +168,29 @@
});
}
showQuestion() {
this.questionIsShowing = true;
ws.sendMessage({
type: MessageType.SHOW_QUESTION
});
}
hideQuestion() {
this.questionIsShowing = false;
this.answerIsShowing = false;
ws.sendMessage({
type: MessageType.HIDE_QUESTION
});
}
plus(player: Player) {
if (!this.answerIsShowing) return;
if (player.name === this.currentPlayerToName()) {
player.points += this.question.points * 2;
} else {
player.points += this.question.points;
}
this.pointsGivenForCurrentQuestion = true;
this.sendPlayers();
}
@@ -189,6 +216,9 @@
) {
this.visitedQuestions[this.currentCategory].push(this.currentQuestion);
}
this.pointsGivenForCurrentQuestion = false;
this.answerIsShowing = false;
this.questionIsShowing = false;
this.nextPlayer();
if (this.wallIsDone()) {
this.goToNextWall();
@@ -242,8 +272,12 @@
return this.game.walls[this.currentWall];
}
get category() {
return this.wall.categories[this.currentCategory];
}
get question() {
return this.wall.categories[this.currentCategory].questions[this.currentQuestion];
return this.category.questions[this.currentQuestion];
}
}
@@ -281,9 +315,17 @@
<Scoreboard
players={gameManager.players}
currentPlayer={gameManager.currentPlayerToName()}
editable={true}
onReload={() => gameManager.sendPlayers()}
/>
{#if gameManager.state === GameState.SHOW_QUESTION}
<div class="flex grow flex-col">
<div class="m-4 flex justify-between text-4xl">
<div>{gameManager.category.name}</div>
<div>
{gameManager.question.points} Punkte
</div>
</div>
<div class="flex grow ps-4 pe-4">
{#if gameManager.question === undefined}
<p>Question is undefined</p>
@@ -291,6 +333,13 @@
<SimpleQuestionComponent
question={gameManager.question}
showAnswer={true}
showQuestion={true}
/>
{:else if isMultipleChoiceQuestion(gameManager.question)}
<MultipleChoiceQuestionComponent
question={gameManager.question}
showAnswer={true}
showQuestion={true}
/>
{:else}
<p>Type of question unknown: {gameManager.question.type}</p>
@@ -298,6 +347,15 @@
</div>
<div class="m-4 flex items-center gap-4">
<button class="btn" onclick={() => gameManager.goBack()}>Zurück</button>
{#if gameManager.questionIsShowing}
<button class="btn" onclick={() => gameManager.hideQuestion()}
>Frage verstecken</button
>
{:else}
<button class="btn" onclick={() => gameManager.showQuestion()}
>Frage aufdecken</button
>
{/if}
{#if gameManager.answerIsShowing}
<button class="btn" onclick={() => gameManager.hideAnswer()}
>Antwort verstecken</button
@@ -312,11 +370,15 @@
label={player.name}
plus={() => gameManager.plus(player)}
minus={() => gameManager.minus(player)}
showPlus={gameManager.answerIsShowing}
/>
{/each}
<button class="btn" onclick={() => gameManager.finishQuestion()}
>Abschließen</button
>
<div class="grow"></div>
{#if gameManager.answerIsShowing && gameManager.pointsGivenForCurrentQuestion}
<button class="btn" onclick={() => gameManager.finishQuestion()}
>Abschließen</button
>
{/if}
</div>
</div>
{:else if gameManager.state === GameState.END}