diff --git a/src/lib/ImageQuestionComponent.svelte b/src/lib/ImageQuestionComponent.svelte new file mode 100644 index 0000000..df2b367 --- /dev/null +++ b/src/lib/ImageQuestionComponent.svelte @@ -0,0 +1,55 @@ + + +
+ {#if showQuestion || showAnswer} +
+
{question.data.question}
+
+
+ {path +
+ {/if} + {#if showAnswer} +
+ {question.data.answer} +
+ {/if} +
+ + diff --git a/src/lib/MessageType.ts b/src/lib/MessageType.ts index dc4a937..6f2ff4e 100644 --- a/src/lib/MessageType.ts +++ b/src/lib/MessageType.ts @@ -6,5 +6,7 @@ export enum MessageType { HIDE_ANSWER = "HIDE_ANSWER", SHOW_QUESTION = "SHOW_QUESTION", HIDE_QUESTION = "HIDE_QUESTION", + BUZZER_PRESSED = "BUZZER_PRESSED", + BUZZER_RELEASED = "BUZZER_RELEASED", VISITED_QUESTIONS = "VISITED_QUESTIONS" } diff --git a/src/lib/games/games.ts b/src/lib/games/games.ts index 49d7248..03993ae 100644 --- a/src/lib/games/games.ts +++ b/src/lib/games/games.ts @@ -28,17 +28,19 @@ const games: Games = [ }, { points: 200, - type: "SIMPLE", + type: "IMAGE", data: { question: "Question 2?", + image: "firstImage.jpg", answer: "Answer 2" } }, { points: 300, - type: "SIMPLE", + type: "IMAGE", data: { question: "Question 3?", + image: "test/secondImage.jpg", answer: "Answer 3" } }, @@ -1222,7 +1224,7 @@ const games: Games = [ } ]; -export type QuestionType = "SIMPLE" | "MULTIPLE_CHOICE"; +export type QuestionType = "SIMPLE" | "MULTIPLE_CHOICE" | "IMAGE"; export type Question = { points: number; @@ -1248,16 +1250,28 @@ export type MultipleChoiceQuestion = Question & { }; }; +export type ImageQuestion = Question & { + type: "IMAGE"; + data: { + question: string; + image: string; + answer: string; + }; +}; + export function isSimpleQuestion(question: Question): question is SimpleQuestion { return (question as SimpleQuestion).type === "SIMPLE"; } export function isMultipleChoiceQuestion(question: Question): question is MultipleChoiceQuestion { return (question as MultipleChoiceQuestion).type === "MULTIPLE_CHOICE"; } +export function isImageQuestion(question: Question): question is ImageQuestion { + return (question as ImageQuestion).type === "IMAGE"; +} export type Category = { name: string; - questions: (SimpleQuestion | MultipleChoiceQuestion)[]; + questions: (SimpleQuestion | MultipleChoiceQuestion | ImageQuestion)[]; }; export type Wall = { diff --git a/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte b/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte index cb8ca49..36acc3b 100644 --- a/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte +++ b/src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte @@ -3,11 +3,12 @@ import { page } from "$app/state"; import { error } from "@sveltejs/kit"; import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte"; - import { isMultipleChoiceQuestion, isSimpleQuestion } from "$lib/games/games"; + import { isImageQuestion, 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"; + import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte"; console.log("wall:", page.params.wall); @@ -60,6 +61,7 @@ let showAnswer = $state(false); let showQuestion = $state(false); + let isBuzzed = $state(false); $effect(() => { if (ws.messageNum <= 0) return; @@ -92,6 +94,18 @@ showAnswer = false; }); } + if (json.type == MessageType.BUZZER_PRESSED) { + ws.nextMessage(); + untrack(() => { + isBuzzed = true; + }); + } + if (json.type == MessageType.BUZZER_RELEASED) { + ws.nextMessage(); + untrack(() => { + isBuzzed = false; + }); + } } catch (e) {} }); @@ -110,6 +124,8 @@ {:else if isMultipleChoiceQuestion(question)} + {:else if isImageQuestion(question)} + {:else}

Type of question unknown

{/if} diff --git a/src/routes/connected/games/[game]/+page.svelte b/src/routes/connected/games/[game]/+page.svelte index ba27b06..1ea175c 100644 --- a/src/routes/connected/games/[game]/+page.svelte +++ b/src/routes/connected/games/[game]/+page.svelte @@ -5,8 +5,8 @@ import { isMultipleChoiceQuestion, isSimpleQuestion, - type Game, - type Question + isImageQuestion, + type Game } from "$lib/games/games"; import ws from "$lib/websocket.svelte"; import { page } from "$app/state"; @@ -17,6 +17,7 @@ import PlusMinusButton from "$lib/PlusMinusButton.svelte"; import type { VisitedQuestions } from "$lib/Types.js"; import MultipleChoiceQuestionComponent from "$lib/MultipleChoiceQuestionComponent.svelte"; + import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte"; let startDisabled = $state(true); @@ -67,6 +68,7 @@ public answerIsShowing = $state(false); public questionIsShowing = $state(false); + public isBuzzed = $state(false); constructor(game: Game) { this.game = game; @@ -166,6 +168,20 @@ }); } + buzzerPressed() { + this.isBuzzed = true; + ws.sendMessage({ + type: MessageType.BUZZER_PRESSED + }); + } + + buzzerReleased() { + this.isBuzzed = false; + ws.sendMessage({ + type: MessageType.BUZZER_RELEASED + }); + } + showQuestion() { this.questionIsShowing = true; ws.sendMessage({ @@ -209,6 +225,7 @@ setupGoingBack(): void { this.answerIsShowing = false; this.questionIsShowing = false; + this.isBuzzed = false; } finishQuestion(): void { @@ -342,6 +359,13 @@ showAnswer={true} showQuestion={true} /> + {:else if isImageQuestion(gameManager.question)} + {:else}

Type of question unknown

{/if} @@ -366,6 +390,15 @@ >Antwort aufdecken {/if} + {#if gameManager.isBuzzed} + + {:else} + + {/if} {#each gameManager.players as player}