CLASSROOMIO-T-80: Replace sapper with sveltekit

src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { onMount } from 'svelte';
+  import { SyncLoader } from 'svelte-loading-spinners';
+  import PlayContainer from './Container.svelte';
+  import PlayHeader from './Header/index.svelte';
+  import { quizStore, playQuizStore } from '$lib/utils/store/org';
+  import { STEPS } from '$lib/utils/constants/quiz';
+  import { genQuizPin } from '$lib/utils/functions/org';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  let isGettingPin = true;
+
+  function getPin() {
+    setTimeout(() => {
+      $quizStore.pin = genQuizPin();
+      isGettingPin = false;
+    }, 3000);
+  }
+
+  function goToPlayersStep() {
+    $playQuizStore.step = STEPS.WAIT_FOR_PLAYERS;
+  }
+
+  onMount(() => {
+    getPin();
+  });
+</script>
+
+<PlayContainer>
+  <div slot="header">
+    <PlayHeader startCount={true} showCountDown={true} />
+  </div>
+
+  <div
+    slot="body"
+    class="w-full rounded-md bg-white dark:bg-gray-700 py-7 px-5"
+  >
+    <div class="mb-3">
+      <p>1. Visit</p>
+      <h3>play.classroomio.com</h3>
+    </div>
+    <div class="">
+      <p>2. Enter Pin</p>
+      {#if isGettingPin}
+        <SyncLoader size="50" color="#1d4ed8" unit="px" duration="1s" />
+      {:else}
+        <h3>{$quizStore.pin}</h3>
+      {/if}
+    </div>
+  </div>
+
+  <div slot="footer" class="flex justify-center items-center">
+    <p class="font-bold mr-3">Let's go</p>
+    <PrimaryButton
+      label="View Players"
+      variant={VARIANTS.OUTLINED}
+      onClick={goToPlayersStep}
+    />
+  </div>
+</PlayContainer>