feat: phc branding

src/components/LiveLeaderboard.tsx

@@ -3,8 +3,6 @@ import type { Room } from '@/db/model'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { Leaderboard } from './Leaderboard'
 import { computeScoreboardState } from '@/ggwp'
-import clsx from 'clsx'
-import { formatDate } from 'date-fns'
 import { Clock } from './Clock'
 
 type Props = {
@@ -68,35 +66,6 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
         }
     }, [])
 
-    // useEffect(() => {
-    //     const PIXELS_PER_MILLISECOND = [1, 1000 / 30] // e.g. [1, 10] means 1px every 10ms
-
-    //     if (autoscroll !== false) {
-    //         timerRef.current = setInterval(() => {
-    //             console.log('scrolling')
-
-    //             window.scrollBy({
-    //                 top: autoscroll === 'down' ? PIXELS_PER_MILLISECOND[0] : -PIXELS_PER_MILLISECOND[0],
-    //                 behavior: 'instant',
-    //             })
-
-    //             if (window.scrollY + window.innerHeight + 1 > document.body.scrollHeight) {
-    //                 setAutoscroll('up')
-    //             }
-
-    //             if (window.scrollY === 0) {
-    //                 setAutoscroll('down')
-    //             }
-    //         }, PIXELS_PER_MILLISECOND[1])
-
-    //         return () => {
-    //             if (timerRef.current) {
-    //                 clearInterval(timerRef.current)
-    //             }
-    //         }
-    //     }
-    // }, [autoscroll])
-
     return (
         <>
             <h3>
@@ -109,6 +78,16 @@ export const LiveLeaderboard = ({ roomId }: Props) => {
                     board: scoreboard.board.slice(page * 20, (page + 1) * 20),
                 }}
             />
+            <div class="position-fixed bottom right stack-v center">
+                <span>
+                    made with <code>&lt;3</code>
+                </span>
+
+                <div class="stack-h center">
+                    <span>by </span>
+                    <img style={{ height: '2rem' }} src="/phc-logo.png" alt="phc logo" />
+                </div>
+            </div>
         </>
     )
 }

src/styles.css

@@ -16,7 +16,7 @@ body {
 }
 
 img {
-    display: block;
+    display: inline-block;
 }
 
 /* Root */