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
-->
<script lang="ts">
<script lang='ts'>
// import { alertModal } from '$lib/stores';
import { captcha_enabled } from '$lib/config';
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>
<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 }}
on:click={on_parent_click}
>
<div
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;"
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;'
>
<div class="flex justify-center w-full">
<div class='flex justify-center w-full'>
<label
for="large-toggle"
class="inline-flex relative items-center cursor-pointer"
for='large-toggle'
class='inline-flex relative items-center cursor-pointer'
class:pointer-events-none={!captcha_enabled}
class:opacity-50={!captcha_enabled}
>
<input
type="checkbox"
type='checkbox'
bind:checked={captcha_selected}
id="large-toggle"
class="sr-only peer"
id='large-toggle'
class='sr-only peer'
/>
<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"
/>
<span class="ml-3 text-sm font-medium text-gray-900"
>Captcha {captcha_selected ? 'enabled' : 'disabled'}</span
<span class='ml-3 text-sm font-medium text-gray-900'
>Captcha {captcha_selected ? 'enabled' : 'disabled'}</span
>
</label>
</div>
{#if captcha_selected}
<div class="flex justify-center mt-2" in:fade>
<p class="w-1/3">
<div class='flex justify-center mt-2' in:fade>
<p class='w-1/3'>
{$t('start_game.captcha_message')}
</p>
<!-- Todo: Add translation -->
</div>
{/if}
<div class="grid grid-cols-2 gap-8 my-auto">
<div class='grid grid-cols-2 gap-8 my-auto'>
<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'}
on:click={() => {
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>
{$t('start_game.normal_mode_description')}
</p>
</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'}
on:click={() => {
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>
{$t('start_game.old_school_mode_description')}
</p>
</div>
</div>
<div class="flex justify-center items-center my-auto">
<label class="mr-4">{$t('result_page.custom_field')}</label>
<div class='flex justify-center items-center my-auto'>
<label class='mr-4'>{$t('result_page.custom_field')}</label>
<input
bind:value={custom_field}
class="rounded-lg p-2 outline-none placeholder:italic"
placeholder="Phone Number or Email"
class='rounded-lg p-2 outline-none placeholder:italic'
placeholder='Phone Number or Email'
/>
</div>
<div class="flex justify-center w-full my-auto">
<label for="cqc-toggle" class="inline-flex relative items-center cursor-pointer">
<div class='flex justify-center w-full my-auto'>
<label for='cqc-toggle' class='inline-flex relative items-center cursor-pointer'>
<input
type="checkbox"
type='checkbox'
bind:checked={cqcs_enabled}
id="cqc-toggle"
class="sr-only peer"
id='cqc-toggle'
class='sr-only peer'
/>
<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"
/>
<span class="ml-3 text-sm font-medium text-gray-900"
><a
href="/controller"
target="_blank"
use:tippy={{
<span class='ml-3 text-sm font-medium text-gray-900'
><a
href='/controller'
target='_blank'
use:tippy={{
content:
'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
>
</label>
</div>
<div class="flex justify-center w-full my-auto">
<div class='flex justify-center w-full my-auto'>
<label
for="randomized-answers-toggle"
class="inline-flex relative items-center cursor-pointer"
for='randomized-answers-toggle'
class='inline-flex relative items-center cursor-pointer'
>
<input
type="checkbox"
type='checkbox'
bind:checked={randomized_answers}
id="randomized-answers-toggle"
class="sr-only peer"
id='randomized-answers-toggle'
class='sr-only peer'
/>
<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"
/>
<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>
</div>
<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={() => {
start_game(quiz_id);
}}