Files
classquiz-ai/frontend/src/lib/play/end.svelte
T

84 lines
2.1 KiB
Svelte

<script lang="ts">
import type { QuizData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let quiz_data: QuizData;
export let final_results: Array<null> | Array<Array<PlayerAnswer>>;
interface PlayerAnswer {
username: string;
answer: string;
right: string;
}
const getWinnersSorted = () => {
let winners = {};
let q_count = quiz_data.questions.length;
for (let i = 0; i < q_count; i++) {
let q_res = final_results[i];
if (q_res === null) {
continue;
}
for (let j = 0; j < q_res.length; j++) {
let res = q_res[j];
if (res['right']) {
if (winners[res['username']] === undefined) {
winners[res['username']] = 0;
}
winners[res['username']] += 1;
}
}
}
function sortObjectbyValue(obj) {
const asc = false;
const ret = {};
Object.keys(obj)
.sort((a, b) => obj[asc ? a : b] - obj[asc ? b : a])
.forEach((s) => (ret[s] = obj[s]));
return ret;
}
return sortObjectbyValue(winners);
};
let winners = getWinnersSorted();
let winners_arr = Object.keys(winners);
console.log(winners);
</script>
<div>
<h1 class="mx-auto text-center text-6xl mt-8">{$t('play_page.end_sentence')}</h1>
<div class="flex mx-auto w-fit flex-col pt-8 gap-2">
<div>
<p class="text-3xl text-center">
{$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span>
<span>with {winners[winners_arr[0]]} out of {quiz_data.questions.length}</span>
</p>
</div>
{#if winners_arr.length >= 2}
<div>
<p class="text-2xl text-center">
{$t('play_page.2nd_place')}: <span class="underline">{winners_arr[1]}</span>
<span>with {winners[winners_arr[1]]} out of {quiz_data.questions.length}</span>
</p>
</div>
{/if}
{#if winners_arr.length >= 3}
<div>
<p class="text-xl text-center">
{$t('play_page.3rd place')}: <span class="underline">{winners_arr[2]}</span>
<span>
{$t('play_page.with_out_of', {
correct_questions: winners[winners_arr[2]],
total_question_count: quiz_data.questions.length
})}
</span>
</p>
</div>
{/if}
</div>
</div>