50 lines
1.6 KiB
Svelte
50 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { Wall } from "$lib/games/games";
|
|
import type { VisitedQuestions } from "./Types";
|
|
|
|
interface Props {
|
|
wall: Wall | undefined;
|
|
onclick?: (catIndex: number, questionIndex: number) => unknown;
|
|
visited: VisitedQuestions;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
function isVisited(catIndex: number, queIndex: number): boolean {
|
|
return visited[catIndex] && visited[catIndex].includes(queIndex);
|
|
}
|
|
|
|
let { wall, onclick, visited }: Props = $props();
|
|
</script>
|
|
|
|
{#if wall != undefined}
|
|
<div class="grid h-full grow grid-flow-col grid-cols-5 grid-rows-6 gap-4 pb-4">
|
|
{#each wall.categories as category, catIndex}
|
|
<div class="flex items-center justify-center text-3xl font-semibold">
|
|
<div>{category.name}</div>
|
|
</div>
|
|
{#each category.questions as question, queIndex}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<div
|
|
class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
|
|
role="button"
|
|
aria-pressed="false"
|
|
tabindex="0"
|
|
onclick={() => {
|
|
if (onclick) onclick(catIndex, queIndex);
|
|
}}
|
|
>
|
|
<div class="text-6xl font-thin">{question.points}</div>
|
|
</div>
|
|
{/each}
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p>Wall is undefined</p>
|
|
{/if}
|
|
|
|
<style>
|
|
.visited {
|
|
background-color: gray;
|
|
}
|
|
</style>
|