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

✨ New end-screen

Browse Source
This commit is contained in:
Mawoka
2022-09-27 16:19:04 +02:00
parent cd3e9d98d7
commit a413b43b20
5 changed files with 107 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+2
View File
@@ -24,6 +24,7 @@
"@sveltejs/adapter-node": "^1.0.0-next.86",
"@sveltejs/kit": "next",
"@tailwindcss/typography": "^0.5.4",
"@types/canvas-confetti": "^1.4.3",
"@types/cookie": "^0.5.1",
"@types/js-cookie": "^3.0.2",
"@types/luxon": "^2.4.0",
@@ -39,6 +40,7 @@
"@uppy/svelte": "^1.0.9",
"@uppy/xhr-upload": "^2.1.3",
"autoprefixer": "^10.4.8",
"canvas-confetti": "^1.5.1",
"cookie": "^0.5.0",
"crypto-js": "^4.1.1",
"cssnano": "^5.1.13",
frontend/pnpm-lock.yaml
Generated
+30 -12
View File
@@ -11,6 +11,7 @@ specifiers:
'@sveltejs/adapter-node': ^1.0.0-next.86
'@sveltejs/kit': next
'@tailwindcss/typography': ^0.5.4
'@types/canvas-confetti': ^1.4.3
'@types/cookie': ^0.5.1
'@types/js-cookie': ^3.0.2
'@types/luxon': ^2.4.0
@@ -26,6 +27,7 @@ specifiers:
'@uppy/svelte': ^1.0.9
'@uppy/xhr-upload': ^2.1.3
autoprefixer: ^10.4.8
canvas-confetti: ^1.5.1
cookie: ^0.5.0
crypto-js: ^4.1.1
cssnano: ^5.1.13
@@ -73,10 +75,11 @@ devDependencies:
'@fontsource/marck-script': 4.5.10
'@sentry/browser': 7.11.1
'@sentry/tracing': 7.11.1
'@sveltejs/adapter-auto': 1.0.0-next.75
'@sveltejs/adapter-auto': 1.0.0-next.80
'@sveltejs/adapter-node': 1.0.0-next.86
'@sveltejs/kit': 1.0.0-next.484_svelte@3.49.0+vite@3.1.2
'@sveltejs/kit': 1.0.0-next.504_svelte@3.49.0+vite@3.1.2
'@tailwindcss/typography': 0.5.4_tailwindcss@3.1.8
'@types/canvas-confetti': 1.4.3
'@types/cookie': 0.5.1
'@types/js-cookie': 3.0.2
'@types/luxon': 2.4.0
@@ -92,6 +95,7 @@ devDependencies:
'@uppy/svelte': 1.0.9_ejnjleuqktlq3genmlddww3ajq
'@uppy/xhr-upload': 2.1.3_@uppy+core@2.3.3
autoprefixer: 10.4.8_postcss@8.4.16
canvas-confetti: 1.5.1
cookie: 0.5.0
crypto-js: 4.1.1
cssnano: 5.1.13_postcss@8.4.16
@@ -519,24 +523,24 @@ packages:
}
dev: true
/@sveltejs/adapter-auto/1.0.0-next.75:
/@sveltejs/adapter-auto/1.0.0-next.80:
resolution:
{
integrity: sha512-UEE6XkeXVrNhpEceqcCbtfV5EYzulIt1D/L+RsjIVsPVtUIZMMpPWzuHHzVvPemFRAuYho+4C1hJjIJ9iCgPeQ==
integrity: sha512-352WoZr9fQgxJqgNENvxRr2gsA+wTF6V9AVaQaaatDYd3RVEBaXTYOOalFaRLSa25mRUJaLYP2aaliqczMl23g==
}
dependencies:
'@sveltejs/adapter-cloudflare': 1.0.0-next.34
'@sveltejs/adapter-cloudflare': 1.0.0-next.38
'@sveltejs/adapter-netlify': 1.0.0-next.78
'@sveltejs/adapter-vercel': 1.0.0-next.76
'@sveltejs/adapter-vercel': 1.0.0-next.77
transitivePeerDependencies:
- encoding
- supports-color
dev: true
/@sveltejs/adapter-cloudflare/1.0.0-next.34:
/@sveltejs/adapter-cloudflare/1.0.0-next.38:
resolution:
{
integrity: sha512-9/YJsx5O+iy2+XGuH0vVzZ9OSeHGjkInh8JG8CLmIc0cKkv2t7sEu7qQ/qXA5CcvmS1AqNSUgIMxGoeEDVlO3g==
integrity: sha512-N6jdTomRZkdKlcNoguwYD7lpdXSt0beIyUJsp0MS/YLm/4gI83y698zFYInFKJ9t5e6DAnuEBSAXcg568z2oFA==
}
dependencies:
'@cloudflare/workers-types': 3.14.1
@@ -562,10 +566,10 @@ packages:
}
dev: true
/@sveltejs/adapter-vercel/1.0.0-next.76:
/@sveltejs/adapter-vercel/1.0.0-next.77:
resolution:
{
integrity: sha512-Od9DBfeMwWC/sZNeCJw4TYVE3LMR8lGJivSdkXWgpvksgG+QizLyzTfvBacapId3wcu+7X4PPTLoH00o5iQGEQ==
integrity: sha512-r4MqtP+lzx83HfcvI8PU0Yxzmxt6WQq9nzZETLboJouJzhSBUFIN5RmNZfEn6nNIlUwZbGQUEK/FxsRnnxI/Ig==
}
dependencies:
'@vercel/nft': 0.22.1
@@ -575,10 +579,10 @@ packages:
- supports-color
dev: true
/@sveltejs/kit/1.0.0-next.484_svelte@3.49.0+vite@3.1.2:
/@sveltejs/kit/1.0.0-next.504_svelte@3.49.0+vite@3.1.2:
resolution:
{
integrity: sha512-Y3l8OmlgmfJX3m081rMUZmmEQWHtiSsj3+YWYK/CQ4V99jqoztXPz/4cAxUt5mC45jVF5Ee9ykmh6GzkYjvfAQ==
integrity: sha512-KrhlSHT3aCVnhRgUoN6aGIjIw3nWEdNwfoZcE1x65F5D7Ju/K9D8dQwyal9v0aBAZyN9nFuXxsYGaMLE9sppfw==
}
engines: { node: '>=16.14' }
hasBin: true
@@ -669,6 +673,13 @@ packages:
engines: { node: '>=10.13.0' }
dev: true
/@types/canvas-confetti/1.4.3:
resolution:
{
integrity: sha512-UwFPTsW1ZwVyo/ETp4hPSikSD7yl2V42E3VWBF5P/0+DHO4iajyceWv7hfNdZ2AX5tkZnuViiBWOqyCPohU2FQ==
}
dev: true
/@types/cookie/0.5.1:
resolution:
{
@@ -1422,6 +1433,13 @@ packages:
}
dev: true
/canvas-confetti/1.5.1:
resolution:
{
integrity: sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==
}
dev: true
/chalk/4.1.2:
resolution:
{
frontend/src/lib/admin.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
let shown_question_now: number;
let final_results_clicked = false;
let player_scores = {};
export let player_scores;
export const set_question_number = (q_number: number) => {
question_results = null;
frontend/src/lib/play/admin/final_results.svelte
+58
View File
@@ -0,0 +1,58 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import { onMount } from 'svelte';
export let data;
export let show_final_results: boolean;
import { fly } from 'svelte/transition';
import confetti from 'canvas-confetti';
function sortObjectbyValue(obj) {
const ret = {};
Object.keys(obj)
.sort((a, b) => obj[b] - obj[a])
.forEach((s) => (ret[s] = obj[s]));
return ret;
}
$: data = sortObjectbyValue(data);
let player_names;
$: player_names = Object.keys(data);
let player_count_or_five;
$: player_count_or_five = player_names.length >= 5 ? 5 : player_names.length;
let canvas;
onMount(() => {
setTimeout(() => {
confetti.create(canvas, {
resize: true,
useWorker: true
});
confetti({ particleCount: 200, spread: 160 });
}, player_count_or_five * 1200 - 800);
});
</script>
{#if show_final_results}
<canvas bind:this={canvas} />
<div>
{#each player_names as player, i}
{#if i <= player_count_or_five - 1}
<p
in:fly={{ y: -300, delay: player_count_or_five * 1200 - (i + 1) * 1000 }}
style="font-size: {player_count_or_five - i / 2}rem"
class="text-center"
>
{i + 1}
: {player} with {data[player]} points
</p>
{/if}
{/each}
</div>
{/if}
frontend/src/routes/admin/+page.svelte
+16 -7
View File
@@ -14,6 +14,7 @@
import AudioPlayer from '$lib/play/audio_player.svelte';
import { browser } from '$app/environment';
import { onMount } from 'svelte';
import FinalResults from '$lib/play/admin/final_results.svelte';
navbarVisible.set(false);
@@ -28,6 +29,7 @@
let { game_pin, auto_connect, game_token } = data;
let players: Array<Player> = [];
let player_scores = {};
let errorMessage = '';
let game_started = false;
let quiz_data: QuizData;
@@ -118,6 +120,8 @@
};
let bg_color;
$: bg_color = quiz_data ? quiz_data.background_color : undefined;
let show_final_results = false;
$: show_final_results = JSON.stringify(final_results) !== JSON.stringify([null]);
</script>
<svelte:window on:beforeunload={confirmUnload} />
@@ -137,13 +141,17 @@
>{$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 game_mode === 'kahoot'}-->
<FinalResults bind:data={player_scores} bind:show_final_results />
<!-- {:else}
{#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}
{#if !success}
<input placeholder="game id" bind:value={game_token} />
@@ -200,6 +208,7 @@
bind:quiz_data
bind:game_mode
bind:bg_color
bind:player_scores
/>
{/if}
</div>