feat: cleaned up leaderboard for official links

src/components/Clock.jsx

@@ -1,18 +0,0 @@
-import { formatDate } from 'date-fns'
-import { useEffect, useState } from 'preact/hooks'
-
-export const Clock = ({}) => {
-    const [time, setTime] = useState(new Date())
-
-    useEffect(() => {
-        const timer = setInterval(() => {
-            setTime(new Date())
-        }, 1000)
-
-        return () => {
-            clearInterval(timer)
-        }
-    }, [])
-
-    return <>{formatDate(time, 'HH:mm:ss')}</>
-}

src/components/LiveLeaderboard.tsx

@@ -3,7 +3,8 @@ import type { Room } from '@/db/model'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { Leaderboard } from './Leaderboard'
 import { computeScoreboardState } from '@/ggwp'
-import { Clock } from './Clock'
+import { Clock, Countdown } from './time'
+import { parse } from 'date-fns'
 
 type Props = {
     roomId: string
@@ -52,6 +53,9 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
     )
 
     const url = new URL(window.location.href)
+
+    const finishTime = url.searchParams.has('finish') && parse(url.searchParams.get('finish')!, 'HH:mm', new Date())
+
     const pagesCount = parseInt(url.searchParams.get('pages') ?? '1')
     const pageInterval = parseInt(url.searchParams.get('interval') ?? '5000')
 
@@ -79,7 +83,12 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
     return (
         <>
             <h3>
-                <Clock /> &mdash; {room.id}
+                {finishTime && (
+                    <>
+                        <Countdown endTime={finishTime} /> &mdash;{' '}
+                    </>
+                )}
+                {room.id}
                 {pagesCount > 1 ? ` (pagina ${page + 1}/${pagesCount})` : ''}
             </h3>
             <Leaderboard

src/components/time.tsx

@@ -0,0 +1,39 @@
+import { addSeconds, differenceInSeconds, formatDate, formatDistance, formatDuration } from 'date-fns'
+import { useEffect, useState } from 'preact/hooks'
+
+export const Clock = () => {
+    const [time, setTime] = useState(new Date())
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTime(new Date())
+        }, 1000)
+
+        return () => {
+            clearInterval(timer)
+        }
+    }, [])
+
+    return <>{formatDate(time, 'HH:mm:ss')}</>
+}
+
+export const Countdown = ({ endTime }: { endTime: Date }) => {
+    const [time, setTime] = useState(new Date())
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTime(new Date())
+        }, 1000)
+
+        return () => {
+            clearInterval(timer)
+        }
+    }, [])
+
+    const diff = differenceInSeconds(endTime, time)
+    if (diff < 0) {
+        return <>00:00:00</>
+    }
+
+    return <>{formatDate(addSeconds(new Date(0), diff), 'HH:mm:ss')}</>
+}