80 lines
2.1 KiB
Svelte
80 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { buzzerState } from '../stores';
|
|
import { Button } from 'flowbite-svelte';
|
|
|
|
export const start = (offset: bigint = 0n) => {
|
|
timerStartedAt = BigInt(Math.floor(performance.now())) - offset;
|
|
timerStoppedAt = undefined;
|
|
};
|
|
|
|
export const reset = () => {
|
|
timerStartedAt = undefined;
|
|
timerStoppedAt = undefined;
|
|
currentTimerValue = undefined;
|
|
};
|
|
|
|
export let placeholder: string = '';
|
|
|
|
let timerStartedAt: bigint | undefined;
|
|
let timerStoppedAt: bigint | undefined;
|
|
|
|
let currentTimerValue: bigint | undefined;
|
|
|
|
let timerInterval: number | undefined;
|
|
|
|
onMount(() => {
|
|
timerInterval = setInterval(() => {
|
|
if (timerStartedAt) {
|
|
let now = BigInt(Math.floor(performance.now()));
|
|
const timerValue = (timerStoppedAt ?? now) - timerStartedAt;
|
|
currentTimerValue =
|
|
timerStoppedAt === undefined ? timerValue - (timerValue % 100n) : timerValue;
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
clearInterval(timerInterval);
|
|
});
|
|
|
|
const getTimerColor = (timerStartedAt?: bigint, timerStoppedAt?: bigint) => {
|
|
if (timerStartedAt === undefined) {
|
|
return 'white';
|
|
} else if (timerStartedAt !== undefined && timerStoppedAt === undefined) {
|
|
return 'red';
|
|
} else if (timerStartedAt !== undefined && timerStoppedAt !== undefined) {
|
|
return 'green';
|
|
} else {
|
|
return 'white';
|
|
}
|
|
};
|
|
|
|
$: {
|
|
if (!timerStartedAt || !$buzzerState.lastTriggerTime) {
|
|
break $;
|
|
}
|
|
|
|
if ($buzzerState.lastTriggerTime > timerStartedAt) {
|
|
timerStoppedAt = $buzzerState.lastTriggerTime;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center gap-3 pb-6">
|
|
<div class="w-full flex flex-row flex-wrap gap-3 justify-center">
|
|
<div class="flex flex-grow flex-col items-center">
|
|
{#if placeholder.length > 0}
|
|
<span class="text-6xl font-bold text-white py-6 text-center"> {placeholder}</span>
|
|
{:else}
|
|
<span
|
|
class="text-9xl font-bold"
|
|
style="color: {getTimerColor(timerStartedAt, timerStoppedAt)};"
|
|
>
|
|
{(Number(currentTimerValue ?? 0) / 1000).toFixed(3)}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|