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

✨ Many improvements for players

Browse Source
This commit is contained in:
Mawoka
2023-02-15 19:31:25 +01:00
parent 4360fa2d02
commit 65e08a27ac
6 changed files with 64 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/buttons/brown.svelte
+3
View File
@@ -10,6 +10,8 @@
export let href: undefined | string = undefined;
export let target: undefined | string = '_self';
export let type: undefined | string = 'button';
</script>
{#if href}
@@ -26,6 +28,7 @@
{:else}
<button
{disabled}
{type}
class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
on:click
class:flex
frontend/src/lib/play/admin/final_results.svelte
+8
View File
@@ -7,6 +7,7 @@
import { onMount } from 'svelte';
export let data;
export let username;
export let show_final_results: boolean;
import { fly } from 'svelte/transition';
import confetti from 'canvas-confetti';
@@ -58,4 +59,11 @@
{/if}
{/each}
</div>
{#if data[username]}
<div class="fixed bottom-0 left-0 flex justify-center w-full mb-6">
<div class="mx-auto p-2 border-[#B07156] border-4 rounded">
<p>Your score: <b>{data[username]}</b></p>
</div>
</div>
{/if}
{/if}
frontend/src/lib/play/join.svelte
+10 -14
View File
@@ -11,6 +11,7 @@
import { alertModal } from '../stores';
import { getLocalization } from '$lib/i18n';
import Cookies from 'js-cookie';
import BrownButton from '$lib/components/buttons/brown.svelte';
const { t } = getLocalization();
export let game_pin: string;
@@ -190,13 +191,9 @@
<!-- use:tippy={{content: "Please enter the game pin", sticky: true, placement: 'top'}}-->
<br />
<button
class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
type="submit"
disabled={game_pin.length < 6}
>
{$t('words.submit')}
</button>
<div class="mt-2">
<BrownButton disabled={game_pin.length < 6}>{$t('words.submit')}</BrownButton>
</div>
</form>
</div>
{:else}
@@ -218,13 +215,12 @@
bind:value={custom_field_value}
/>
{/if}
<button
class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50 mt-2"
type="submit"
disabled={username.length <= 3}
>
{$t('words.submit')}
</button>
<div class="mt-2">
<BrownButton disabled={username.length <= 3} on:click={setUsername}
>{$t('words.submit')}</BrownButton
>
</div>
</form>
</div>
{/if}
frontend/src/lib/play/question.svelte
+37 -31
View File
@@ -12,6 +12,7 @@
import { kahoot_icons } from './kahoot_mode_assets/kahoot_icons';
import CircularTimer from '$lib/play/circular_progress.svelte';
import { flip } from 'svelte/animate';
import BrownButton from '$lib/components/buttons/brown.svelte';
const { t } = getLocalization();
@@ -74,6 +75,7 @@
};
const select_complex_answer = (data) => {
selected_answer = 'a';
const new_array = [];
for (let i = 0; i < data.length; i++) {
new_array.push({ answer: data[i].answer });
@@ -162,7 +164,7 @@
{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
<div class="w-full relative" style="height: {get_div_height()}%">
<div
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl"
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
>
<CircularTimer
bind:text={timer_res}
@@ -171,7 +173,7 @@
/>
</div>
<div class="grid grid-cols-2 gap-2 w-full p-4 h-full">
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
{#each question.answers as answer, i}
<button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
@@ -202,18 +204,20 @@
bind:values={slider_value}
bind:min={question.answers.min}
bind:max={question.answers.max}
id="pips-slider"
pips
float
all="label"
/>
</div>
<div class="flex justify-center">
<button
class="w-1/2 text-3xl bg-[#B07156] my-2 disabled:opacity-60 border border-white"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(slider_value[0])}
>{$t('words.submit')}
</button>
<div class="w-1/2">
<BrownButton
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(slider_value[0])}
>{$t('words.submit')}
</BrownButton>
</div>
</div>
{/await}
{:else if question.type === QuizQuestionType.TEXT}
@@ -224,21 +228,23 @@
<input
type="text"
bind:value={text_input}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
disabled={selected_answer}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
/>
</div>
<div class="flex justify-center">
<button
class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
type="button"
disabled={!text_input}
on:click={() => {
selectAnswer(text_input);
}}
>
{$t('words.submit')}
</button>
<div class="flex justify-center mt-2">
<div class="w-1/3">
<BrownButton
type="button"
disabled={selected_answer}
on:click={() => {
selectAnswer(text_input);
}}
>
{$t('words.submit')}
</BrownButton>
</div>
</div>
{:else if question.type === QuizQuestionType.ABCD}
{#if solution === undefined}
@@ -295,7 +301,7 @@
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
type="button"
disabled={i === 0}
disabled={i === 0 || selected_answer}
>
<svg
class="w-8 h-8"
@@ -322,7 +328,7 @@
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
type="button"
disabled={i === question.answers.length - 1}
disabled={i === question.answers.length - 1 || selected_answer}
>
<svg
class="w-8 h-8"
@@ -343,15 +349,15 @@
</button>
</div>
{/each}
<button
class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full"
type="button"
on:click={() => {
select_complex_answer(question.answers);
}}
>
{$t('words.submit')}
</button>
<div class="w-full mt-2">
<BrownButton
type="button"
disabled={selected_answer}
on:click={() => {
select_complex_answer(question.answers);
}}>{$t('words.submit')}</BrownButton
>
</div>
</div>
<!--{/if}-->
{/if}
frontend/src/routes/+layout.svelte
+5
View File
@@ -126,6 +126,11 @@
background-color: #4e6e58;
background-size: cover;
color: white;
:global(#pips-slider) {
--pip: white;
--pip-active: white;
}
}
@keyframes background_animation {
frontend/src/routes/play/+page.svelte
+1 -1
View File
@@ -151,7 +151,7 @@
{#if !gameMeta.started && gameData === undefined}
<JoinGame {game_pin} bind:game_mode bind:username />
{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
<ShowEndScreen bind:data={scores} show_final_results={true} />
<ShowEndScreen bind:data={scores} show_final_results={true} bind:username />
{:else if gameData !== undefined && question_index === ''}
<ShowTitle
bind:title={gameData.title}