Added Image Questions

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)}
+                            <ImageQuestionComponent
+                                question={gameManager.question}
+                                showAnswer={true}
+                                showQuestion={true}
+                                isBuzzed={false}
+                            />
                         {:else}
                             <p>Type of question unknown</p>
                         {/if}
@@ -366,6 +390,15 @@
                                 >Antwort aufdecken</button
                             >
                         {/if}
+                        {#if gameManager.isBuzzed}
+                            <button class="btn" onclick={() => gameManager.buzzerReleased()}
+                                >Entbuzzern</button
+                            >
+                        {:else}
+                            <button class="btn" onclick={() => gameManager.buzzerPressed()}
+                                >Buzzern</button
+                            >
+                        {/if}
                         {#each gameManager.players as player}
                             <PlusMinusButton
                                 label={player.name}