CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

show exact start time when hovering over countdown
All checks were successful
delpoy / build-and-deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
bytedream 2023-11-30 15:02:17 +01:00
parent cf90924672
commit 44454f445f
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/components/Countdown/Countdown.svelte
View File

@ -1,11 +1,20 @@
<script lang="ts"> <script lang="ts">
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { env } from '$env/dynamic/public';
// start date in milliseconds. if undefined, start will be Date.now // start date in milliseconds. if undefined, start will be Date.now
export let start: number | undefined = undefined; export let start: number | undefined = undefined;
// end date in milliseconds // end date in milliseconds
export let end: number; export let end: number;
let title = `Spielstart ist am ${new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', {
day: '2-digit',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})} Uhr`;
function getUntil(): [number, number, number, number] { function getUntil(): [number, number, number, number] {
let diff = (end - (start || Date.now())) / 1000; let diff = (end - (start || Date.now())) / 1000;
@ -27,25 +36,25 @@
</script> </script>
<div class="grid grid-flow-col gap-5 text-center auto-cols-max text-white"> <div class="grid grid-flow-col gap-5 text-center auto-cols-max text-white">
<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm"> <div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
<span class="countdown font-mono text-3xl sm:text-6xl"> <span class="countdown font-mono text-3xl sm:text-6xl">
<span class="m-auto" style="--value:{days};" /> <span class="m-auto" style="--value:{days};" />
</span> </span>
Tage Tage
</div> </div>
<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm"> <div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
<span class="countdown font-mono text-3xl sm:text-6xl"> <span class="countdown font-mono text-3xl sm:text-6xl">
<span class="m-auto" style="--value:{hours};" /> <span class="m-auto" style="--value:{hours};" />
</span> </span>
Stunden Stunden
</div> </div>
<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm"> <div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
<span class="countdown font-mono text-3xl sm:text-6xl"> <span class="countdown font-mono text-3xl sm:text-6xl">
<span class="m-auto" style="--value:{minutes};" /> <span class="m-auto" style="--value:{minutes};" />
</span> </span>
Minuten Minuten
</div> </div>
<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm"> <div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
<span class="countdown font-mono text-3xl sm:text-6xl"> <span class="countdown font-mono text-3xl sm:text-6xl">
<span class="m-auto" style="--value:{seconds};" /> <span class="m-auto" style="--value:{seconds};" />
</span> </span>