56 lines
1.4 KiB
Svelte
56 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { ImageQuestion } from "./games/games";
|
|
|
|
const path = "/images/";
|
|
|
|
interface Props {
|
|
question: ImageQuestion;
|
|
showAnswer: boolean;
|
|
showQuestion: boolean;
|
|
isBuzzed: boolean;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
let { question, showAnswer, showQuestion, isBuzzed }: Props = $props();
|
|
</script>
|
|
|
|
<div class="mb-4 flex w-full grow flex-col items-center gap-2 text-6xl">
|
|
{#if showQuestion || showAnswer}
|
|
<div class="flex grow items-center">
|
|
<div class="text-center">{question.data.question}</div>
|
|
</div>
|
|
<div class="container grow-6">
|
|
<img
|
|
src={path + question.data.image}
|
|
alt={path + question.data.image}
|
|
class={isBuzzed ? "blurry" : ""}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{#if showAnswer}
|
|
<div class="flex grow items-center text-center">
|
|
{question.data.answer}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
}
|
|
|
|
.container > img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
display: block;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.blurry {
|
|
filter: blur(60px);
|
|
}
|
|
</style>
|