SRETSS/tssbot.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai generated solutions to our ai generated problems

Browse Source
This commit is contained in:
Heidi
2026-06-15 08:59:15 +01:00
parent 91a657522a
commit 5bd8cab0ce
8 changed files with 56 additions and 778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+3
View File
@@ -55,6 +55,9 @@
</head>
<body>
<div id="root"></div>
<script>
window.__TSS_TURNSTILE_SESSION__ = "__TURNSTILE_SESSION__"
</script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
frontend/src/App.jsx
+45 -253
View File
@@ -1,6 +1,4 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import Tree, { prewarmTreeCanvas } from '../Tree/Tree'
import FallingLeaves from '../Tree/FallingLeaves'
@@ -16,7 +14,6 @@ const apiEndpoints = {
viewers: '/api/viewers',
viewerEvent: '/api/viewers/event',
viewerDelete: '/api/viewers/delete',
songOfDay: '/api/song-of-day',
teams: '/api/tss/leaderboard/teams?limit=100',
teamsHealth: '/api/tss/leaderboard/teams?limit=1',
recentGames: '/api/tss/games/recent?limit=50',
@@ -796,10 +793,15 @@ function SiteGate({ onVerified }) {
}
function App() {
const [gateState, setGateState] = useState(turnstileSiteKey ? 'checking' : 'verified')
const initialGateState = turnstileSiteKey
? ['verified', 'required'].includes(window.__TSS_TURNSTILE_SESSION__)
? window.__TSS_TURNSTILE_SESSION__
: 'checking'
: 'verified'
const [gateState, setGateState] = useState(initialGateState)
useEffect(() => {
if (!turnstileSiteKey) return undefined
if (!turnstileSiteKey || gateState !== 'checking') return undefined
let cancelled = false
fetch('/api/turnstile/session', { headers: { Accept: 'application/json' } })
.then((response) => (response.ok ? response.json() : { verified: false }))
@@ -813,10 +815,10 @@ function App() {
return () => {
cancelled = true
}
}, [])
}, [gateState])
if (gateState === 'checking') {
return <div className="fixed inset-0 grid place-items-center bg-bg" aria-hidden="true" />
return <div className="fixed inset-0 bg-bg" aria-hidden="true" />
}
if (gateState === 'required') {
@@ -832,8 +834,6 @@ function AppContent() {
const [live, setLive] = useState({ status: 'idle', data: null, error: null, updatedAt: 0 })
const [uptime, setUptime] = useState({ status: 'idle', checks: [], history: [], updatedAt: null })
const [viewers, setViewers] = useState({ status: 'idle', data: null, error: null, updatedAt: null })
const [songOfDay, setSongOfDay] = useState({ status: 'idle', data: null, error: null })
const [songOfDayRequest, setSongOfDayRequest] = useState(0)
const [analyticsPreferences, setAnalyticsPreferences] = useState(() => storedAnalyticsPreferences())
const [theme, setTheme] = useState(() => storedThemePreference())
const [showFloatingNav, setShowFloatingNav] = useState(() => window.scrollY > 40)
@@ -1164,37 +1164,6 @@ function AppContent() {
}
}, [route.page])
useEffect(() => {
if (route.page !== 'home') return
const controller = new AbortController()
let timedOut = false
const timeout = window.setTimeout(() => {
timedOut = true
controller.abort()
}, 12000)
setSongOfDay({ status: 'loading', data: null, error: null })
fetchJson(apiEndpoints.songOfDay, controller.signal)
.then((data) => setSongOfDay({ status: 'ready', data, error: null }))
.catch((error) => {
if (!controller.signal.aborted || timedOut) {
setSongOfDay({
status: 'error',
data: null,
error: timedOut ? 'Song lookup timed out' : error.message,
})
}
})
.finally(() => window.clearTimeout(timeout))
return () => {
window.clearTimeout(timeout)
controller.abort()
}
}, [route.page, songOfDayRequest])
useEffect(() => {
if (route.page !== 'team' || !route.teamName) return
@@ -1567,8 +1536,6 @@ function AppContent() {
onTeamSearch={handleTeamSearch}
searchPlaceholder={searchPlaceholder}
setTeamQuery={setTeamQuery}
setSongOfDayRequest={setSongOfDayRequest}
songOfDay={songOfDay}
teamSuggestions={teamSuggestions}
teams={teams}
teamQuery={teamQuery}
@@ -2053,8 +2020,6 @@ function Landing({
onTeamSearch,
searchPlaceholder,
setTeamQuery,
setSongOfDayRequest,
songOfDay,
teamSuggestions,
teams,
teamQuery,
@@ -2124,10 +2089,6 @@ function Landing({
Search teams
</button>
</form>
<SongOfDayCard
onRetry={() => setSongOfDayRequest((value) => value + 1)}
songOfDay={songOfDay}
/>
</div>
</div>
@@ -2154,193 +2115,6 @@ function Landing({
)
}
function SongOfDayCard({ onRetry, songOfDay }) {
const track = songOfDay.data?.track
const isLoading = songOfDay.status === 'loading'
const audioRef = useRef(null)
const [isPreviewPlaying, setIsPreviewPlaying] = useState(false)
const [previewError, setPreviewError] = useState('')
const [previewVolume, setPreviewVolume] = useState(0.18)
const [isPreviewMuted, setIsPreviewMuted] = useState(false)
const message =
songOfDay.status === 'error'
? songOfDay.error
: previewError || songOfDay.data?.error || 'A random track from the last week of Last.fm scrobbles.'
useEffect(() => {
setIsPreviewPlaying(false)
setPreviewError('')
}, [track?.id, track?.preview_url])
useEffect(() => {
const audio = audioRef.current
if (!audio) return
audio.volume = previewVolume
audio.muted = isPreviewMuted
}, [isPreviewMuted, previewVolume, track?.preview_url])
useEffect(() => {
const audio = audioRef.current
if (!track?.preview_url || !audio) return
audio.volume = previewVolume
audio.muted = isPreviewMuted
audio.play()
.then(() => {
setIsPreviewPlaying(true)
setPreviewError('')
})
.catch(() => {
setIsPreviewPlaying(false)
})
}, [isPreviewMuted, previewVolume, track?.preview_url])
function togglePreview() {
const audio = audioRef.current
if (!audio) return
setPreviewError('')
if (!audio.paused) {
audio.pause()
setIsPreviewPlaying(false)
return
}
audio.play()
.then(() => setIsPreviewPlaying(true))
.catch(() => {
setIsPreviewPlaying(false)
setPreviewError('Preview could not play')
})
}
return (
<article className="mt-3 rounded-lg border border-border bg-fury-white/88 p-3 shadow-sm backdrop-blur">
<div className="flex items-center gap-3">
<SongArtwork src={track?.image} />
<div className="min-w-0 flex-1">
<p className="text-xs font-semibold uppercase tracking-wide text-fury-cyan">
Song of the day
</p>
{track ? (
<>
<h2 className="mt-1 truncate text-base font-bold text-text">{track.name}</h2>
<p className="truncate text-sm text-text-soft">
{track.artist}{track.album ? ` · ${track.album}` : ''}
</p>
{previewError ? (
<p className="mt-1 text-xs font-semibold text-fury-cyan">{previewError}</p>
) : null}
{track.preview_url ? (
<>
<audio
onEnded={() => setIsPreviewPlaying(false)}
onError={() => {
setIsPreviewPlaying(false)
setPreviewError('Preview could not load')
}}
onPause={() => setIsPreviewPlaying(false)}
onPlay={() => setIsPreviewPlaying(true)}
preload="auto"
ref={audioRef}
src={track.preview_url}
/>
<label className="mt-2 flex max-w-44 items-center gap-2 text-xs font-semibold text-text-soft">
<span>Vol</span>
<input
aria-label="Preview volume"
className="h-2 min-w-0 flex-1 accent-fury-cyan"
max="1"
min="0"
onChange={(event) => {
setPreviewVolume(Number(event.target.value))
if (Number(event.target.value) > 0) setIsPreviewMuted(false)
}}
step="0.01"
type="range"
value={previewVolume}
/>
</label>
</>
) : null}
<p className="mt-2 text-[11px] font-semibold uppercase tracking-wide text-text-soft">
Song data by Last.fm{track.preview_provider ? ` · Previews by ${track.preview_provider}` : ''}
</p>
</>
) : (
<p className="mt-1 text-sm font-semibold text-text-soft">
{isLoading ? 'Choosing a song' : message}
</p>
)}
</div>
{track?.preview_url ? (
<button
className="shrink-0 rounded-md border border-ring px-3 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
onClick={togglePreview}
type="button"
>
{isPreviewPlaying ? 'Pause' : 'Preview'}
</button>
) : null}
{track?.preview_url ? (
<button
aria-pressed={isPreviewMuted}
className="shrink-0 rounded-md border border-border px-3 py-2 text-sm font-semibold text-text-soft transition hover:border-ring hover:bg-surface hover:text-text"
onClick={() => setIsPreviewMuted((value) => !value)}
type="button"
>
{isPreviewMuted ? 'Unmute' : 'Mute'}
</button>
) : null}
{track?.url ? (
<a
className="shrink-0 rounded-md border border-ring px-3 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
href={track.url}
rel="noopener noreferrer"
target="_blank"
>
Play
</a>
) : songOfDay.status === 'error' ? (
<button
className="shrink-0 rounded-md border border-ring px-3 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
onClick={onRetry}
type="button"
>
Retry
</button>
) : null}
</div>
</article>
)
}
function SongArtwork({ src }) {
const [failed, setFailed] = useState(false)
const showImage = src && !failed
useEffect(() => {
setFailed(false)
}, [src])
return (
<div className="grid h-14 w-14 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-surface">
{showImage ? (
<img
alt=""
className="h-full w-full object-cover"
loading="lazy"
onError={() => setFailed(true)}
referrerPolicy="no-referrer"
src={src}
/>
) : (
<span className="text-lg font-bold text-fury-cyan">♪</span>
)}
</div>
)
}
function LandingOverview({ teams, matches, navigate }) {
const activeTeams = teams.slice(0, 4)
const totalPlayers = matches.reduce((sum, match) => sum + Number(match.player_count || 0), 0)
@@ -3638,6 +3412,8 @@ function LocationSignalTable({ countries, locations }) {
function LocationSignalMap({ countries, locations }) {
const mapRef = useRef(null)
const markersRef = useRef(null)
const leafletRef = useRef(null)
const [mapReady, setMapReady] = useState(false)
const countryMarkerColor = '#e82517'
const maxMarkerVisitors = Math.max(
1,
@@ -3691,34 +3467,50 @@ function LocationSignalMap({ countries, locations }) {
useEffect(() => {
if (!mapRef.current || markersRef.current) return undefined
let cancelled = false
let map = null
const map = L.map(mapRef.current, {
center: [25, 0],
maxBounds: [[-85, -220], [85, 220]],
minZoom: 1,
scrollWheelZoom: true,
worldCopyJump: true,
zoom: 1,
})
async function initializeMap() {
const [{ default: L }] = await Promise.all([
import('leaflet'),
import('leaflet/dist/leaflet.css'),
])
if (cancelled || !mapRef.current) return
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
maxZoom: 8,
}).addTo(map)
leafletRef.current = L
map = L.map(mapRef.current, {
center: [25, 0],
maxBounds: [[-85, -220], [85, 220]],
minZoom: 1,
scrollWheelZoom: true,
worldCopyJump: true,
zoom: 1,
})
markersRef.current = {
layer: L.layerGroup().addTo(map),
map,
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
maxZoom: 8,
}).addTo(map)
markersRef.current = {
layer: L.layerGroup().addTo(map),
map,
}
setMapReady(true)
}
initializeMap()
return () => {
cancelled = true
markersRef.current = null
map.remove()
leafletRef.current = null
map?.remove()
}
}, [])
useEffect(() => {
if (!markersRef.current) return
const L = leafletRef.current
if (!markersRef.current || !L) return
const { layer } = markersRef.current
layer.clearLayers()
@@ -3748,7 +3540,7 @@ function LocationSignalMap({ countries, locations }) {
})
.addTo(layer)
})
}, [cityMarkers, countryMarkerColor, countryMarkers, maxMarkerVisitors])
}, [cityMarkers, countryMarkerColor, countryMarkers, mapReady, maxMarkerVisitors])
return (
<div className="p-5">
frontend/src/main.jsx
+1 -6
View File
@@ -1,10 +1,5 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
createRoot(document.getElementById('root')).render(<App />)
frontend/src/styles.css
+3 -76
View File
@@ -109,78 +109,6 @@
color-scheme: light;
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 400;
src: url("/fonts/SF-Pro-Text-Regular.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 500;
src: url("/fonts/SF-Pro-Text-Medium.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 600;
src: url("/fonts/SF-Pro-Text-Semibold.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 700;
src: url("/fonts/SF-Pro-Text-Bold.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 800;
src: url("/fonts/SF-Pro-Text-Heavy.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Text Local";
font-style: normal;
font-weight: 900;
src: url("/fonts/SF-Pro-Text-Black.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Rounded Local";
font-style: normal;
font-weight: 400;
src: url("/fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Rounded Local";
font-style: normal;
font-weight: 600;
src: url("/fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
}
@font-face {
font-display: swap;
font-family: "SF Pro Rounded Local";
font-style: normal;
font-weight: 700 900;
src: url("/fonts/SF-Pro-Rounded-Black.otf") format("opentype");
}
*,
*::before,
*::after {
@@ -193,8 +121,7 @@ body {
min-height: 100vh;
background: var(--color-bg);
font-family:
"SF Pro Rounded Local", "SF Pro Rounded", "SF Pro Text Local",
"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
"SF Pro Rounded", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
ui-sans-serif, system-ui, sans-serif;
}
@@ -202,8 +129,8 @@ h1,
h2,
h3 {
font-family:
"SF Pro Text Local", "SF Pro Text", -apple-system, BlinkMacSystemFont,
"Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
ui-sans-serif, system-ui, sans-serif;
}
.pixel-mountains {