From c752c01976a11979e761c51c023343c4b7c6f9c2 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sun, 24 Nov 2024 23:59:11 +0100
Subject: [PATCH] feat: cleaned up leaderboard for official links

---
 src/components/Clock.jsx           | 18 --------------
 src/components/LiveLeaderboard.tsx | 13 ++++++++--
 src/components/time.tsx            | 39 ++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/Clock.jsx
 create mode 100644 src/components/time.tsx

diff --git a/src/components/Clock.jsx b/src/components/Clock.jsx
deleted file mode 100644
index 7d0ab14..0000000
--- a/src/components/Clock.jsx
+++ /dev/null
@@ -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')}</>
-}
diff --git a/src/components/LiveLeaderboard.tsx b/src/components/LiveLeaderboard.tsx
index c536c02..c30dae7 100644
--- a/src/components/LiveLeaderboard.tsx
+++ b/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
diff --git a/src/components/time.tsx b/src/components/time.tsx
new file mode 100644
index 0000000..a664d4d
--- /dev/null
+++ b/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')}</>
+}