Merge remote-tracking branch 'origin/master'
This commit is contained in:
mawoka-myblock
@@ -0,0 +1,104 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
||||
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
import type { QuizData } from '$lib/quiz_types';
|
||||
import type { Socket } from 'socket.io-client';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
|
||||
export let bg_color: string;
|
||||
export let selected_question: number;
|
||||
export let quiz_data: QuizData;
|
||||
export let timer_res: string;
|
||||
export let final_results;
|
||||
export let socket: Socket;
|
||||
|
||||
export let game_token: string;
|
||||
|
||||
export let question_results;
|
||||
|
||||
export let shown_question_now: number;
|
||||
|
||||
const { t } = getLocalization();
|
||||
const set_question_number = (q_number: number) => {
|
||||
socket.emit('set_question_number', q_number.toString());
|
||||
};
|
||||
|
||||
const get_question_results = () => {
|
||||
socket.emit('get_question_results', {
|
||||
game_id: game_token,
|
||||
question_number: shown_question_now
|
||||
});
|
||||
};
|
||||
const show_solutions = () => {
|
||||
socket.emit('show_solutions', {});
|
||||
timer_res = '0';
|
||||
};
|
||||
|
||||
const get_final_results = () => {
|
||||
socket.emit('get_final_results', {});
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed top-0 w-full h-10 z-20 grid grid-cols-2"
|
||||
style="background: {bg_color ? bg_color : 'transparent'}"
|
||||
class:text-black={bg_color}
|
||||
>
|
||||
<p class="mr-auto ml-0 col-start-1 col-end-1">
|
||||
{selected_question === -1 ? '0' : selected_question + 1}
|
||||
/{quiz_data.questions.length}
|
||||
</p>
|
||||
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
|
||||
{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
|
||||
{#if JSON.stringify(final_results) === JSON.stringify([null])}
|
||||
<button on:click={get_final_results} class="admin-button"
|
||||
>{$t('admin_page.get_final_results')}
|
||||
</button>
|
||||
{/if}
|
||||
{:else if timer_res === '0' || selected_question === -1}
|
||||
{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
class="admin-button"
|
||||
>{$t('admin_page.next_question', { question: selected_question + 2 })}
|
||||
</button>
|
||||
{/if}
|
||||
{#if question_results === null && selected_question !== -1}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
class="admin-button"
|
||||
>{$t('admin_page.next_question', { question: selected_question + 2 })}
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={get_question_results} class="admin-button"
|
||||
>{$t('admin_page.show_results')}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else if selected_question !== -1}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
class="admin-button"
|
||||
>{$t('admin_page.next_question', { question: selected_question + 2 })}
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={show_solutions} class="admin-button"
|
||||
>{$t('admin_page.stop_time_and_solutions')}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,6 +8,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
import AudioPlayer from '$lib/play/audio_player.svelte';
|
||||
import ControllerCodeDisplay from '$lib/components/controller/code.svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import GrayButton from '$lib/components/buttons/gray.svelte';
|
||||
|
||||
export let game_pin: string;
|
||||
export let players;
|
||||
@@ -51,7 +52,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<img
|
||||
alt="QR code to join the game"
|
||||
src="/api/v1/utils/qr/{game_pin}"
|
||||
class="block mx-auto w-1/2 dark:bg-white"
|
||||
class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded"
|
||||
/>
|
||||
{#if cqc_code}
|
||||
<div class="m-auto">
|
||||
@@ -62,34 +63,33 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-3xl text-center">{$t('words.pin')}: {game_pin}</p>
|
||||
<p class="text-3xl text-center">
|
||||
{$t('words.pin')}: <span class="select-all">{game_pin}</span>
|
||||
</p>
|
||||
<div class="flex justify-center w-full mt-4">
|
||||
<ul class="list-disc pl-8">
|
||||
{#if players.length > 0}
|
||||
{#each players as player}
|
||||
<li>
|
||||
<span
|
||||
class="hover:line-through"
|
||||
on:click={() => {
|
||||
kick_player(player.username);
|
||||
}}>{player.username}</span
|
||||
>
|
||||
<!-- <button>{$t('words.kick')}</button>-->
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{#if players.length > 0}
|
||||
<div class="flex justify-center w-full mt-4">
|
||||
<button
|
||||
class="ml-4 admin-button"
|
||||
id="startGame"
|
||||
<div>
|
||||
<GrayButton
|
||||
disabled={players.length < 1}
|
||||
on:click={() => {
|
||||
socket.emit('start_game', '');
|
||||
}}
|
||||
>{$t('admin_page.start_game')}
|
||||
</button>
|
||||
</GrayButton>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-row w-full mt-4 px-10 flex-wrap">
|
||||
{#if players.length > 0}
|
||||
{#each players as player}
|
||||
<div class="p-2 m-2 border-2 border-[#B07156] rounded hover:cursor-pointer">
|
||||
<span
|
||||
class="hover:line-through text-lg"
|
||||
on:click={() => {
|
||||
kick_player(player.username);
|
||||
}}>{player.username}</span
|
||||
>
|
||||
<!-- <button>{$t('words.kick')}</button>-->
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
||||
|
||||
SPDX-License-Identifier: MPL-2.0
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
import type { QuizData } from '$lib/quiz_types';
|
||||
import { get_foreground_color } from '$lib/helpers.js';
|
||||
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons.js';
|
||||
import CircularTimer from '$lib/play/circular_progress.svelte';
|
||||
import MediaComponent from '$lib/editor/MediaComponent.svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
|
||||
export let quiz_data: QuizData;
|
||||
export let selected_question: number;
|
||||
export let timer_res: string;
|
||||
|
||||
export let answer_count: number;
|
||||
export let default_colors: string[];
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
let circular_progress = 0;
|
||||
$: {
|
||||
try {
|
||||
circular_progress =
|
||||
1 -
|
||||
((100 / parseInt(quiz_data.questions[selected_question].time)) *
|
||||
parseInt(timer_res)) /
|
||||
100;
|
||||
} catch {
|
||||
circular_progress = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
{@html quiz_data.questions[selected_question].question}
|
||||
</h1>
|
||||
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
|
||||
<div class="grid grid-cols-3 my-2">
|
||||
<span />
|
||||
<div class="m-auto">
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_progress}
|
||||
color="#ef4444"
|
||||
/>
|
||||
</div>
|
||||
<p class="m-auto text-3xl">
|
||||
{$t('admin_page.answers_submitted', { answer_count: answer_count })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#if quiz_data.questions[selected_question].image !== null}
|
||||
<div class="flex w-full">
|
||||
<MediaComponent
|
||||
src={quiz_data.questions[selected_question].image}
|
||||
muted={false}
|
||||
css_classes="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING || quiz_data.questions[selected_question].type === QuizQuestionType.CHECK}
|
||||
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div
|
||||
class="rounded-lg h-fit flex border-2 border-black"
|
||||
style="background-color: {answer.color ?? default_colors[i]};"
|
||||
class:opacity-50={!answer.right &&
|
||||
timer_res === '0' &&
|
||||
quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
>
|
||||
<img
|
||||
class="w-14 inline-block pl-4"
|
||||
alt="icon"
|
||||
style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
|
||||
src={kahoot_icons[i]}
|
||||
/>
|
||||
<span
|
||||
class="text-center text-2xl px-2 py-4 w-full"
|
||||
style="color: {get_foreground_color(answer.color ?? default_colors[i])}"
|
||||
>{answer.answer}</span
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if quiz_data.questions[selected_question].type === QuizQuestionType.TEXT}
|
||||
{#if timer_res === '0'}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div class="rounded-lg h-fit flex bg-[#B07156]">
|
||||
<span class="text-center text-2xl px-2 py-4 w-full text-black"
|
||||
>{answer.answer}</span
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center">
|
||||
<p class="text-2xl">{$t('admin_page.enter_answer_into_field')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -11,6 +11,8 @@ SPDX-License-Identifier: MPL-2.0
|
||||
import { onMount } from 'svelte';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { QuizQuestionType } from '$lib/quiz_types';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
export let data;
|
||||
@@ -127,7 +129,9 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<VotingResults data={new_data} {question} />
|
||||
</div>
|
||||
{#if [QuizQuestionType.ABCD, QuizQuestionType.VOTING, QuizQuestionType.TEXT].includes(question.type)}
|
||||
<div class="mt-12">
|
||||
<VotingResults data={new_data} {question} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
import { flip } from 'svelte/animate';
|
||||
import BrownButton from '$lib/components/buttons/brown.svelte';
|
||||
import { get_foreground_color } from '../helpers';
|
||||
import MediaComponent from '$lib/editor/MediaComponent.svelte';
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
@@ -154,10 +155,9 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</h1>
|
||||
{#if question.image !== null && game_mode !== 'kahoot'}
|
||||
<div class="max-h-full">
|
||||
<img
|
||||
src="/api/v1/storage/download/{question.image}"
|
||||
class="object-cover mx-auto mb-8 max-h-[90%]"
|
||||
alt="Content for Question"
|
||||
<MediaComponent
|
||||
src={question.image}
|
||||
css_classes="object-cover mx-auto mb-8 max-h-[90%]"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -167,7 +167,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#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 z-50"
|
||||
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-40"
|
||||
>
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
|
||||
Reference in New Issue
Block a user