Done V1

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

@@ -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>

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

@@ -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}