✨ Added custom background-color
This commit is contained in:
Mawoka
@@ -23,3 +23,9 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.normal-background {
|
||||
@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
export let game_token: string;
|
||||
export let quiz_data: QuizData;
|
||||
export let game_mode;
|
||||
export let bg_color;
|
||||
|
||||
const { t } = getLocalization();
|
||||
|
||||
@@ -95,7 +96,11 @@
|
||||
</script>
|
||||
|
||||
{#if game_mode === 'kahoot'}
|
||||
<div class="fixed top-0 w-full h-14 bg-transparent z-20 grid grid-cols-3">
|
||||
<div
|
||||
class="fixed top-0 w-full h-14 z-20 grid grid-cols-3"
|
||||
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}
|
||||
@@ -143,7 +148,7 @@
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class:mt-28={game_mode === 'kahoot'} class="w-full h-full">
|
||||
<div class:pt-28={game_mode === 'kahoot'} class="w-full h-full">
|
||||
{#if timer_res !== undefined && !final_results_clicked && !question_results}
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
if (res.ok) {
|
||||
confirm_to_leave = false;
|
||||
console.log(confirm_to_leave);
|
||||
window.location.href = '/dashboard';
|
||||
// window.location.href = '/dashboard';
|
||||
} else {
|
||||
alert('Error');
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import type { EditorData } from '$lib/quiz_types';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import Spinner from '$lib/Spinner.svelte';
|
||||
|
||||
export let pow_data;
|
||||
export let pow_salt;
|
||||
|
||||
@@ -15,8 +16,11 @@
|
||||
let uppyOpen = false;
|
||||
|
||||
export let edit_id: string;
|
||||
|
||||
export let data: EditorData;
|
||||
|
||||
let custom_bg_color = Boolean(data.background_color);
|
||||
|
||||
$: data.background_color = custom_bg_color ? data.background_color : undefined;
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full pb-20 px-20">
|
||||
@@ -122,6 +126,48 @@
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-10 w-full flex justify-center">
|
||||
<div class="grid grid-cols-3 w-fit h-fit gap-4">
|
||||
<div
|
||||
class="max-w-full transition-all"
|
||||
class:pointer-events-none={custom_bg_color}
|
||||
class:opacity-50={custom_bg_color}
|
||||
>
|
||||
<div class="bg-gray-200 rounded-lg w-full h-full p-1">
|
||||
<span
|
||||
class="inline-block w-full h-full bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="large-toggle"
|
||||
class="inline-flex relative items-center cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={custom_bg_color}
|
||||
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-800 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"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class:pointer-events-none={!custom_bg_color}
|
||||
class:opacity-50={!custom_bg_color}
|
||||
class="transition-all"
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
class="rounded-lg p-1 min-h-full hover:cursor-pointer"
|
||||
bind:value={data.background_color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,7 @@ export interface QuizData {
|
||||
game_pin: string;
|
||||
started: boolean;
|
||||
cover_image?: string;
|
||||
background_color?: string;
|
||||
}
|
||||
|
||||
export enum QuizQuestionType {
|
||||
@@ -47,4 +48,5 @@ export interface EditorData {
|
||||
description: string;
|
||||
questions: Question[];
|
||||
cover_image?: string;
|
||||
background_color?: string;
|
||||
}
|
||||
|
||||
@@ -116,85 +116,93 @@
|
||||
}
|
||||
players = players;
|
||||
};
|
||||
let bg_color;
|
||||
$: bg_color = quiz_data ? quiz_data.background_color : undefined;
|
||||
</script>
|
||||
|
||||
<svelte:window on:beforeunload={confirmUnload} />
|
||||
<svelte:head>
|
||||
<title>ClassQuiz - Host</title>
|
||||
</svelte:head>
|
||||
{#if JSON.stringify(final_results) !== JSON.stringify([null])}
|
||||
<div class="w-screen flex justify-center mt-8">
|
||||
<button
|
||||
on:click={request_answer_export}
|
||||
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>{$t('admin_page.export_results')}</button
|
||||
>
|
||||
</div>
|
||||
{#await import('$lib/play/end.svelte') then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:final_results
|
||||
bind:question_count={quiz_data.questions.length}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{#if !success}
|
||||
<input placeholder="game id" bind:value={game_token} />
|
||||
<input placeholder="game pin" bind:value={game_pin} />
|
||||
<button on:click={connect}>{$t('words.connect')}!</button>
|
||||
{#if errorMessage !== ''}
|
||||
<p class="text-red-700">{errorMessage}</p>
|
||||
{/if}
|
||||
{:else if !game_started}
|
||||
<div class="w-full h-full">
|
||||
<AudioPlayer bind:play={play_music} />
|
||||
<img
|
||||
alt="QR code to join the game"
|
||||
src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
|
||||
class="block mx-auto w-1/6"
|
||||
/>
|
||||
<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</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
|
||||
class="min-h-screen min-w-full"
|
||||
style="background: {bg_color ? bg_color : 'transparent'}"
|
||||
class:text-black={bg_color}
|
||||
>
|
||||
{#if JSON.stringify(final_results) !== JSON.stringify([null])}
|
||||
<div class="w-screen flex justify-center mt-8">
|
||||
<button
|
||||
on:click={request_answer_export}
|
||||
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>{$t('admin_page.export_results')}</button
|
||||
>
|
||||
</div>
|
||||
{#if players.length > 0}
|
||||
<div class="flex justify-center w-full mt-4">
|
||||
<button
|
||||
class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
id="startGame"
|
||||
on:click={() => {
|
||||
socket.emit('start_game', '');
|
||||
game_started = true;
|
||||
}}
|
||||
>{$t('admin_page.start_game')}
|
||||
</button>
|
||||
</div>
|
||||
{#await import('$lib/play/end.svelte') then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:final_results
|
||||
bind:question_count={quiz_data.questions.length}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{#if !success}
|
||||
<input placeholder="game id" bind:value={game_token} />
|
||||
<input placeholder="game pin" bind:value={game_pin} />
|
||||
<button on:click={connect}>{$t('words.connect')}!</button>
|
||||
{#if errorMessage !== ''}
|
||||
<p class="text-red-700">{errorMessage}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<SomeAdminScreen
|
||||
bind:final_results
|
||||
bind:game_pin
|
||||
bind:game_token
|
||||
bind:quiz_data
|
||||
bind:game_mode
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{:else if !game_started}
|
||||
<div class="w-full h-full">
|
||||
<AudioPlayer bind:play={play_music} />
|
||||
<img
|
||||
alt="QR code to join the game"
|
||||
src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={bg_color ? false : darkMode}"
|
||||
class="block mx-auto w-1/6"
|
||||
/>
|
||||
<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</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 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
id="startGame"
|
||||
on:click={() => {
|
||||
socket.emit('start_game', '');
|
||||
game_started = true;
|
||||
}}
|
||||
>{$t('admin_page.start_game')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<SomeAdminScreen
|
||||
bind:final_results
|
||||
bind:game_pin
|
||||
bind:game_token
|
||||
bind:quiz_data
|
||||
bind:game_mode
|
||||
bind:bg_color
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
on:click|preventDefault={request_answer_export}
|
||||
href="#"
|
||||
|
||||
@@ -81,7 +81,6 @@
|
||||
socket.on('set_question_number', (data) => {
|
||||
solution = undefined;
|
||||
restart();
|
||||
console.log(data, data.question_index);
|
||||
question = data.question;
|
||||
question_index = data.question_index;
|
||||
answer_results = undefined;
|
||||
@@ -118,6 +117,9 @@
|
||||
socket.on('solutions', (data) => {
|
||||
solution = data;
|
||||
});
|
||||
|
||||
let bg_color;
|
||||
$: bg_color = gameData ? gameData.background_color : undefined;
|
||||
// The rest
|
||||
</script>
|
||||
|
||||
@@ -138,42 +140,52 @@
|
||||
{/each}
|
||||
{/if}-->
|
||||
</svelte:head>
|
||||
<div>
|
||||
{#if !gameMeta.started && gameData === undefined}
|
||||
<JoinGame {game_pin} bind:game_mode bind:username />
|
||||
{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
|
||||
<ShowEndScreen bind:final_results bind:question_count={gameData.question_count} />
|
||||
{:else if gameData !== undefined && question_index === ''}
|
||||
<ShowTitle
|
||||
bind:title={gameData.title}
|
||||
bind:description={gameData.description}
|
||||
bind:cover_image={gameData.cover_image}
|
||||
/>
|
||||
{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
|
||||
{#key unique}
|
||||
<Question bind:game_mode bind:question bind:question_index bind:solution />
|
||||
{/key}
|
||||
{:else if gameMeta.started && answer_results !== undefined}
|
||||
{#if answer_results === null}
|
||||
<div class="w-full flex justify-center">
|
||||
<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
|
||||
</div>
|
||||
{:else if game_mode === 'kahoot'}
|
||||
<div>
|
||||
<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
|
||||
</div>
|
||||
<div
|
||||
class="min-h-screen min-w-full"
|
||||
style="background: {bg_color ? bg_color : 'transparent'}"
|
||||
class:text-black={bg_color}
|
||||
>
|
||||
<div>
|
||||
{#if !gameMeta.started && gameData === undefined}
|
||||
<JoinGame {game_pin} bind:game_mode bind:username />
|
||||
{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
|
||||
<ShowEndScreen bind:final_results bind:question_count={gameData.question_count} />
|
||||
{:else if gameData !== undefined && question_index === ''}
|
||||
<ShowTitle
|
||||
bind:title={gameData.title}
|
||||
bind:description={gameData.description}
|
||||
bind:cover_image={gameData.cover_image}
|
||||
/>
|
||||
{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
|
||||
{#key unique}
|
||||
<KahootResults bind:username bind:question_results={answer_results} bind:scores />
|
||||
{/key}
|
||||
{:else}
|
||||
{#key unique}
|
||||
<ShowResults
|
||||
bind:results={answer_results}
|
||||
bind:game_data={gameData}
|
||||
bind:question_index
|
||||
bind:solution
|
||||
/>
|
||||
<Question bind:game_mode bind:question bind:question_index bind:solution />
|
||||
{/key}
|
||||
{:else if gameMeta.started && answer_results !== undefined}
|
||||
{#if answer_results === null}
|
||||
<div class="w-full flex justify-center">
|
||||
<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
|
||||
</div>
|
||||
{:else if game_mode === 'kahoot'}
|
||||
<div>
|
||||
<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
|
||||
</div>
|
||||
{#key unique}
|
||||
<KahootResults
|
||||
bind:username
|
||||
bind:question_results={answer_results}
|
||||
bind:scores
|
||||
/>
|
||||
{/key}
|
||||
{:else}
|
||||
{#key unique}
|
||||
<ShowResults
|
||||
bind:results={answer_results}
|
||||
bind:game_data={gameData}
|
||||
bind:question_index
|
||||
bind:solution
|
||||
/>
|
||||
{/key}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user