Added Editing of Questions

src/lib/AudioMultipleChoiceQuestionComponent.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import AudioPlayerComponent from "./AudioPlayerComponent.svelte";
     import type { AudioMultipleChoiceQuestion } from "./games/games";
+    import { url } from "./util";
 
     const path = "/sounds/";
 
@@ -9,10 +10,19 @@
         showAnswer: boolean;
         showQuestion: boolean;
         showPlayer: boolean;
+        isLegacy?: boolean;
+        randomize?: boolean;
         [key: string]: unknown;
     }
 
-    let { question, showAnswer, showQuestion, showPlayer }: Props = $props();
+    let {
+        question,
+        showAnswer,
+        showQuestion,
+        showPlayer,
+        isLegacy = true,
+        randomize = true
+    }: Props = $props();
 
     function shuffle<T>(array: T[]) {
         let currentIndex = array.length;
@@ -28,10 +38,24 @@
         }
     }
 
-    const answer = question.data.choices[0];
+    const answer = $derived(question.data.choices[0]);
 
-    let _choices = [...question.data.choices];
-    shuffle(_choices);
+    let _choices = $derived.by(() => {
+        let c = [...question.data.choices];
+        if (randomize) shuffle(c);
+        return c;
+    });
+
+    let audioPath = $derived.by(() => {
+        if (question.data.audio === null) return undefined;
+        if (isLegacy) return `${path}${question.data.audio}`;
+        let audio = question.data.audio;
+        if (typeof audio === "string") {
+            return url(`/cdn/${question.owner}/${audio}`);
+        } else {
+            return url(`/cdn/${audio?.user}/${audio?._id}`);
+        }
+    });
 </script>
 
 <div class="mb-4 flex grow flex-col items-center text-6xl">
@@ -42,7 +66,16 @@
     {/if}
     {#if showPlayer}
         <div class="flex w-full flex-col justify-center">
-            <AudioPlayerComponent src={path + question.data.audio} />
+            {#if audioPath}
+                <AudioPlayerComponent src={audioPath} />
+            {:else}
+                <div class="flex h-full w-full flex-col items-center justify-center">
+                    <div class="text-[128px] text-gray-300">
+                        <i class="fa-solid fa-file-audio"></i>
+                    </div>
+                    <div class="text-[24px] text-gray-500 select-none">Kein Audio ausgewählt</div>
+                </div>
+            {/if}
         </div>
     {/if}
     {#if showQuestion}