classroomstuff/src/routes/IdleScreen/components/time/row.svelte

29 lines
716 B
Svelte

<script>
import { onMount } from "svelte";
import Digit from "./digit.svelte";
import { updateTime } from "../../logic/updateTime.js";
let props = $props();
let size = props.type == "sec" ? "small" : "large";
let digit = props.digit;
let digits = digit == 1 ? 10 : digit == 0 && props.type == "hour" ? 2 : 6;
let thisRow;
onMount(() => {
setInterval(() => {
updateTime(thisRow, digit, props.type);
}, 1000);
});
</script>
<div
style="--height: {size == 'small' ? '75px' : '200px'};"
class="flex h-(--height) flex-col overflow-y-hidden scroll-smooth"
bind:this={thisRow}
>
{#each Array(digits) as _, i}
<Digit {size} digit={i} />
{/each}
<Digit {size} digit={0} />
</div>