CLASSROOMIO-T-49

merge CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Merge-request: CLASSROOMIO-MR-14 Merged-by: Best Admin <digdippa@gmail.com>
2023-06-17 19:11:29 +00:00
parent b532ea6d29
commit 1e71a91a54
70 changed files with 10601 additions and 497 deletions
@@ -0,0 +1,47 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { SyncLoader } from 'svelte-loading-spinners';
+  import { themeImages, STEPS } from '../../../../utils/constants/quiz';
+  import { quizStore, playQuizStore } from '../../../../utils/store/org';
+  import ConnectToPlay from './ConnectToPlay.svelte';
+  import Players from './Players.svelte';
+  import Question from './Question.svelte';
+  import Scoreboard from './Scoreboard.svelte';
+  import Podium from './Podium.svelte';
+
+  let bgImg;
+
+  onMount(() => {
+    bgImg = themeImages[$quizStore.theme].play;
+  });
+</script>
+
+{#if bgImg}
+  <div
+    class="absolute inset-0 z-50 bg-white h-screen w-screen"
+    in:fly={{ y: 500, duration: 500 }}
+    out:fly={{ y: 500, duration: 500 }}
+  >
+    <div
+      class="p-5 h-full w-full"
+      style="background: url({bgImg}) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;min-height: 100vh;height: fit-content;"
+    >
+      {#if $playQuizStore.step === STEPS.CONNECT_TO_PLAY}
+        <ConnectToPlay />
+      {:else if $playQuizStore.step === STEPS.WAIT_FOR_PLAYERS}
+        <Players />
+      {:else if $playQuizStore.step === STEPS.SHOW_NEXT_QUESTION}
+        <Question />
+      {:else if $playQuizStore.step === STEPS.SCOREBOARD}
+        <Scoreboard />
+      {:else if $playQuizStore.step === STEPS.PODIUM}
+        <Podium />
+      {:else}
+        <div class="w-full m-auto">
+          <SyncLoader size="20" color="#1d4ed8" unit="px" duration="1s" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}