LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formatted files

Browse Source
This commit is contained in:
Mawoka
2023-10-04 12:39:50 +02:00
parent e85220ac52
commit 17d67eb680
1 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/dashboard/start_game.svelte
+43 -43
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang='ts'> <script lang="ts">
// import { alertModal } from '$lib/stores'; // import { alertModal } from '$lib/stores';
import { captcha_enabled } from '$lib/config'; import { captcha_enabled } from '$lib/config';
import StartGameBackground from './start_game_background.svg'; import StartGameBackground from './start_game_background.svg';
@@ -94,123 +94,123 @@ SPDX-License-Identifier: MPL-2.0
</script> </script>
<div <div
class='fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50 text-black' class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50 text-black"
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
on:click={on_parent_click} on:click={on_parent_click}
> >
<div <div
class='w-5/6 h-5/6 bg-black m-auto rounded-lg shadow-lg p-4 flex flex-col' class="w-5/6 h-5/6 bg-black m-auto rounded-lg shadow-lg p-4 flex flex-col"
style='background-image: url({StartGameBackground}); background-color: #DFDBE5;' style="background-image: url({StartGameBackground}); background-color: #DFDBE5;"
> >
<div class='flex justify-center w-full'> <div class="flex justify-center w-full">
<label <label
for='large-toggle' for="large-toggle"
class='inline-flex relative items-center cursor-pointer' class="inline-flex relative items-center cursor-pointer"
class:pointer-events-none={!captcha_enabled} class:pointer-events-none={!captcha_enabled}
class:opacity-50={!captcha_enabled} class:opacity-50={!captcha_enabled}
> >
<input <input
type='checkbox' type="checkbox"
bind:checked={captcha_selected} bind:checked={captcha_selected}
id='large-toggle' id="large-toggle"
class='sr-only peer' class="sr-only peer"
/> />
<span <span
class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
/> />
<span class='ml-3 text-sm font-medium text-gray-900' <span class="ml-3 text-sm font-medium text-gray-900"
>Captcha {captcha_selected ? 'enabled' : 'disabled'}</span >Captcha {captcha_selected ? 'enabled' : 'disabled'}</span
> >
</label> </label>
</div> </div>
{#if captcha_selected} {#if captcha_selected}
<div class='flex justify-center mt-2' in:fade> <div class="flex justify-center mt-2" in:fade>
<p class='w-1/3'> <p class="w-1/3">
{$t('start_game.captcha_message')} {$t('start_game.captcha_message')}
</p> </p>
<!-- Todo: Add translation --> <!-- Todo: Add translation -->
</div> </div>
{/if} {/if}
<div class='grid grid-cols-2 gap-8 my-auto'> <div class="grid grid-cols-2 gap-8 my-auto">
<div <div
class='rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2' class="rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2"
class:opacity-50={selected_game_mode !== 'kahoot'} class:opacity-50={selected_game_mode !== 'kahoot'}
on:click={() => { on:click={() => {
selected_game_mode = 'kahoot'; selected_game_mode = 'kahoot';
}} }}
> >
<h2 class='text-center text-2xl'>{$t('words.normal')}</h2> <h2 class="text-center text-2xl">{$t('words.normal')}</h2>
<p> <p>
{$t('start_game.normal_mode_description')} {$t('start_game.normal_mode_description')}
</p> </p>
</div> </div>
<div <div
class='rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2' class="rounded-lg bg-white shadow-lg cursor-pointer transition-all p-2"
class:opacity-50={selected_game_mode !== 'normal'} class:opacity-50={selected_game_mode !== 'normal'}
on:click={() => { on:click={() => {
selected_game_mode = 'normal'; selected_game_mode = 'normal';
}} }}
> >
<h2 class='text-center text-2xl'>{$t('start_game.old_school_mode')}</h2> <h2 class="text-center text-2xl">{$t('start_game.old_school_mode')}</h2>
<p> <p>
{$t('start_game.old_school_mode_description')} {$t('start_game.old_school_mode_description')}
</p> </p>
</div> </div>
</div> </div>
<div class='flex justify-center items-center my-auto'> <div class="flex justify-center items-center my-auto">
<label class='mr-4'>{$t('result_page.custom_field')}</label> <label class="mr-4">{$t('result_page.custom_field')}</label>
<input <input
bind:value={custom_field} bind:value={custom_field}
class='rounded-lg p-2 outline-none placeholder:italic' class="rounded-lg p-2 outline-none placeholder:italic"
placeholder='Phone Number or Email' placeholder="Phone Number or Email"
/> />
</div> </div>
<div class='flex justify-center w-full my-auto'> <div class="flex justify-center w-full my-auto">
<label for='cqc-toggle' class='inline-flex relative items-center cursor-pointer'> <label for="cqc-toggle" class="inline-flex relative items-center cursor-pointer">
<input <input
type='checkbox' type="checkbox"
bind:checked={cqcs_enabled} bind:checked={cqcs_enabled}
id='cqc-toggle' id="cqc-toggle"
class='sr-only peer' class="sr-only peer"
/> />
<span <span
class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
/> />
<span class='ml-3 text-sm font-medium text-gray-900' <span class="ml-3 text-sm font-medium text-gray-900"
><a ><a
href='/controller' href="/controller"
target='_blank' target="_blank"
use:tippy={{ use:tippy={{
content: content:
'ClassQuizControllers are small physical devices to play ClassQuiz. Click to learn more.' 'ClassQuizControllers are small physical devices to play ClassQuiz. Click to learn more.'
}} }}
class='decoration-dashed underline cursor-help'>ClassQuizControllers</a class="decoration-dashed underline cursor-help">ClassQuizControllers</a
> >
are {cqcs_enabled ? 'enabled' : 'disabled'}</span are {cqcs_enabled ? 'enabled' : 'disabled'}</span
> >
</label> </label>
</div> </div>
<div class='flex justify-center w-full my-auto'> <div class="flex justify-center w-full my-auto">
<label <label
for='randomized-answers-toggle' for="randomized-answers-toggle"
class='inline-flex relative items-center cursor-pointer' class="inline-flex relative items-center cursor-pointer"
> >
<input <input
type='checkbox' type="checkbox"
bind:checked={randomized_answers} bind:checked={randomized_answers}
id='randomized-answers-toggle' id="randomized-answers-toggle"
class='sr-only peer' class="sr-only peer"
/> />
<span <span
class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
/> />
<span class='ml-3 text-sm font-medium text-gray-900'> Randomize answers</span> <span class="ml-3 text-sm font-medium text-gray-900"> Randomize answers</span>
</label> </label>
</div> </div>
<button <button
class='mt-auto mx-auto bg-green-500 p-4 rounded-lg shadow-lg hover:bg-green-400 transition-all marck-script text-2xl' class="mt-auto mx-auto bg-green-500 p-4 rounded-lg shadow-lg hover:bg-green-400 transition-all marck-script text-2xl"
on:click={() => { on:click={() => {
start_game(quiz_id); start_game(quiz_id);
}} }}