Skip to content

Commit

Permalink
♻️ Cleaned admin-game code up
Browse files Browse the repository at this point in the history
  • Loading branch information
@mawoka-myblock
mawoka-myblock committed Sep 18, 2023
1 parent 85d162e commit 1b5b5e3
Show file tree
Hide file tree
Showing 9 changed files with 288 additions and 228 deletions.
196 changes: 19 additions & 177 deletions frontend/src/lib/admin.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,14 @@ SPDX-License-Identifier: MPL-2.0
import type { PlayerAnswer } from '$lib/admin.ts';
import { socket } from './socket';
import { QuizQuestionType } from '$lib/quiz_types';
import { kahoot_icons } from './play/kahoot_mode_assets/kahoot_icons';
import CircularTimer from '$lib/play/circular_progress.svelte';
import Spinner from '$lib/Spinner.svelte';
import { get_foreground_color } from '$lib/helpers';
import MediaComponent from '$lib/editor/MediaComponent.svelte';
import Controls from '$lib/play/admin/controls.svelte';
import Question from '$lib/play/admin/question.svelte';
export let game_token: string;
export let quiz_data: QuizData;
export let game_mode;
export let bg_color;
export let game_mode: string;
export let bg_color: string;
const { t } = getLocalization();
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
Expand All @@ -37,10 +35,6 @@ SPDX-License-Identifier: MPL-2.0
export let player_scores;
const set_question_number = (q_number: number) => {
socket.emit('set_question_number', q_number.toString());
};
socket.on('get_question_results', () => {
console.log('get_question_results');
});
Expand All @@ -54,20 +48,6 @@ SPDX-License-Identifier: MPL-2.0
answer_count = 0;
timer(timer_res);
});
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', {});
};
socket.on('solutions', (_) => {
timer_res = '0';
Expand Down Expand Up @@ -109,97 +89,33 @@ SPDX-License-Identifier: MPL-2.0
timer_res = seconds.toString();
}, 1000);
};
let circular_progress = 0;
$: {
try {
circular_progress =
1 -
((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
} catch {
circular_progress = 0;
}
}
</script>

{#if control_visible}
<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}
{:else}
<!-- <button
on:click={() => {
set_question_number(selected_question + 1);
}}
class='admin-button'
>Next Question ({selected_question + 2}
)
</button>-->
{/if}
</div>
</div>
<Controls
{bg_color}
{selected_question}
{quiz_data}
bind:timer_res
{final_results}
{socket}
{question_results}
{game_token}
{shown_question_now}
/>
{/if}
{#if timer_res !== '0' && selected_question >= 0}
<span
class="fixed top-0 bg-red-500 h-8 transition-all"
class:mt-10={control_visible}
style="width: {(100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)}vw"
style="width: {(100 / parseInt(quiz_data.questions[selected_question].time)) *
parseInt(timer_res)}vw"
/>
{/if}

<div class="w-full h-full" class:pt-28={control_visible} class:pt-12={!control_visible}>
{#if timer_res !== undefined && !final_results_clicked && !question_results}
<!-- Question is shown -->
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
{#await import('$lib/play/admin/slide.svelte')}
<Spinner my_20={false} />
Expand All @@ -210,81 +126,7 @@ SPDX-License-Identifier: MPL-2.0
/>
{/await}
{:else}
<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}
<Question {quiz_data} {selected_question} {timer_res} {answer_count} {default_colors} />
{/if}
{/if}
<br />
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/lib/components/popover/commandpalettenotice.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->

<script lang='ts'>
<script lang="ts">
import Smalltop from './smalltop.svelte';
import { PopoverTypes } from '$lib/components/popover/smalltop';
import Cookies from 'js-cookie';
Expand All @@ -19,9 +19,10 @@ SPDX-License-Identifier: MPL-2.0
return;
}
open = true;
Cookies.set('commandpalette_notice', 'shown', { expires: new Date().setDate(new Date().getDate() + 30) });
Cookies.set('commandpalette_notice', 'shown', {
expires: new Date().setDate(new Date().getDate() + 30)
});
});
</script>

<Smalltop bind:open type={PopoverTypes.Generic} data={$t("dashboard.commandpalette_notice")} />
<Smalltop bind:open type={PopoverTypes.Generic} data={$t('dashboard.commandpalette_notice')} />
50 changes: 25 additions & 25 deletions frontend/src/lib/components/popover/smalltop.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,64 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->

<script lang='ts'>
<script lang="ts">
import { fly } from 'svelte/transition';
import { getLocalization } from '$lib/i18n';
import { createEventDispatcher } from 'svelte';
import { PopoverTypes } from './smalltop';
const { t } = getLocalization();
const dispatch = createEventDispatcher()
const dispatch = createEventDispatcher();
export let open = false;
export let type: PopoverTypes;
export let data: undefined | { game_pin: number | string; game_id: string } | string = undefined;
export let data: undefined | { game_pin: number | string; game_id: string } | string =
undefined;
$: dispatch("open", open)
$: dispatch('open', open);
</script>

{#if open}
<div class='fixed w-screen top-10 z-[60] flex justify-center' transition:fly={{ y: -100 }}>
<div class="fixed w-screen top-10 z-[60] flex justify-center" transition:fly={{ y: -100 }}>
<div
class='flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
role='alert'
class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
role="alert"
>
<div class='ml-3 text-sm font-normal'>
<div class="ml-3 text-sm font-normal">
{#if type === PopoverTypes.Copy}
{$t('components.popover.copied_to_clipboard')}
{:else if type === PopoverTypes.GameInLobby}A game is currently in the lobby. Click <a
class='underline'
href='/remote?game_pin={data.game_pin}&game_id={data.game_id}'>here</a
> to join as a remote.
class="underline"
href="/remote?game_pin={data.game_pin}&game_id={data.game_id}">here</a
> to join as a remote.
{:else if type === PopoverTypes.Generic}
{@html data}
{:else}
<p>Error!!!</p>
{/if}
</div>
<button
type='button'
class='ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
data-dismiss-target='#toast-default'
aria-label='Close'
type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
data-dismiss-target="#toast-default"
aria-label="Close"
on:click={() => {
open = false;
}}
>
<span class='sr-only'>{$t('words.close')}</span>
<span class="sr-only">{$t('words.close')}</span>
<svg
aria-hidden='true'
class='w-5 h-5'
fill='currentColor'
viewBox='0 0 20 20'
xmlns='http://www.w3.org/2000/svg'
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clip-rule='evenodd'
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
Expand Down
Loading

0 comments on commit 1b5b5e3

Please sign in to comment.