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

✨ Start-Game screen can now be closed

Browse Source
This commit is contained in:
Mawoka
2023-10-04 12:23:54 +02:00
parent 47abc28440
commit f228857e41
1 changed files with 59 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/dashboard/start_game.svelte
+59 -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';
@@ -76,125 +76,141 @@ SPDX-License-Identifier: MPL-2.0
); );
} }
}; };
const on_parent_click = (e: Event) => {
if (e.target !== e.currentTarget) {
return;
}
quiz_id = null;
};
const close_start_game_if_esc_is_pressed = (key: KeyboardEvent) => {
if (key.code === 'Escape') {
quiz_id = null;
}
};
onMount(() => {
document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
});
</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}
> >
<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);
}} }}