Mawoka
101 lines
2.7 KiB
Svelte
101 lines
2.7 KiB
Svelte
<!--
|
|
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
|
|
|
SPDX-License-Identifier: MPL-2.0
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import PlayerOverview from './player_overview.svelte';
|
|
import QuestionOverview from './question_overview.svelte';
|
|
import GeneralOverview from './general_overview.svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import { getLocalization } from '$lib/i18n';
|
|
|
|
const { t } = getLocalization();
|
|
|
|
interface Props {
|
|
data: PageData;
|
|
}
|
|
|
|
let { data }: Props = $props();
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
enum SelectedTab {
|
|
// eslint-disable-next-line no-unused-vars
|
|
Overview,
|
|
// eslint-disable-next-line no-unused-vars
|
|
Players,
|
|
// eslint-disable-next-line no-unused-vars
|
|
Questions
|
|
}
|
|
|
|
let selected_tab: SelectedTab = $state(SelectedTab.Overview);
|
|
</script>
|
|
|
|
<div class="w-full">
|
|
<div class="flex flex-row w-full justify-around border-b-2 border-gray-500 mb-4">
|
|
<div
|
|
class="w-full py-2 flex transition-all hover:opacity-100"
|
|
class:text-lg={selected_tab === SelectedTab.Overview}
|
|
class:opacity-60={selected_tab !== SelectedTab.Overview}
|
|
>
|
|
<button
|
|
onclick={() => {
|
|
selected_tab = SelectedTab.Overview;
|
|
}}
|
|
class="m-auto w-full h-full"
|
|
>{$t('words.overview')}
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="w-full py-2 flex border-x-2 border-gray-500 transition-all hover:opacity-100"
|
|
class:text-lg={selected_tab === SelectedTab.Players}
|
|
class:opacity-60={selected_tab !== SelectedTab.Players}
|
|
>
|
|
<button
|
|
onclick={() => {
|
|
selected_tab = SelectedTab.Players;
|
|
}}
|
|
class="m-auto w-full h-full"
|
|
>
|
|
{$t('words.player', { count: 2 })}
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="w-full py-2 flex transition-all hover:opacity-100"
|
|
class:text-lg={selected_tab === SelectedTab.Questions}
|
|
class:opacity-60={selected_tab !== SelectedTab.Questions}
|
|
>
|
|
<button
|
|
onclick={() => {
|
|
selected_tab = SelectedTab.Questions;
|
|
}}
|
|
class="m-auto w-full h-full"
|
|
>{$t('words.question', { count: 2 })}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{#if selected_tab === SelectedTab.Overview}
|
|
<div in:fade|global={{ duration: 150 }}>
|
|
<GeneralOverview
|
|
scores={data.results.player_scores}
|
|
title={data.results.title}
|
|
timestamp={data.results.timestamp}
|
|
/>
|
|
</div>
|
|
{:else if selected_tab === SelectedTab.Questions}
|
|
<div in:fade|global={{ duration: 150 }}>
|
|
<QuestionOverview questions={data.results.questions} answers={data.results.answers} />
|
|
</div>
|
|
{:else if selected_tab === SelectedTab.Players}
|
|
<div in:fade|global={{ duration: 150 }}>
|
|
<PlayerOverview
|
|
custom_field={data.results.custom_field_data}
|
|
scores={data.results.player_scores}
|
|
answers={data.results.answers}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|