SRETSS/TSSBOT-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

meow

Browse Source
This commit is contained in:
Clippii
2026-06-21 11:06:07 +01:00
parent 26b48ed04e
commit dde30f1588
2 changed files with 90 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+64 -29
View File
@@ -33,12 +33,15 @@ const apiEndpoints = {
searchPlayers: (name) => `/api/tss/players/search?q=${encodeURIComponent(name)}&limit=10`,
}
const navItems = [
const primaryNavItems = [
{ path: '/', label: 'Home' },
{ path: '/teams', label: 'Team Leaderboard' },
{ path: '/players', label: 'Player Leaderboard' },
{ path: '/battle-logs', label: 'Battle Logs' },
{ path: '/teams', label: 'Team' },
{ path: '/players', label: 'Players' },
{ path: '/battle-logs', label: 'Battles' },
{ path: '/tournaments', label: 'Tournaments' },
]
const utilityNavItems = [
{ path: '/viewers', label: 'Viewers' },
{ path: '/docs', label: 'Setup' },
]
@@ -883,7 +886,7 @@ function themeToggleDockPosition(navPill) {
const top = 16
return {
x: Math.round(left + width - 48),
x: Math.round(left + width - 42),
y: Math.round(top + (height - 36) / 2),
}
}
@@ -1880,26 +1883,44 @@ function AppContent() {
}`}
>
<div
className="flex max-w-[calc(100vw-2rem)] items-center gap-2 rounded-full border border-border bg-fury-white/92 py-2 pl-2 pr-13 shadow-[0_12px_36px_rgba(0,0,0,0.16)] backdrop-blur sm:pl-3"
className="flex max-w-[calc(100vw-2rem)] items-center gap-1.5 rounded-full border border-border bg-fury-white/92 py-1.5 pl-1.5 pr-11 shadow-[0_8px_24px_rgba(0,0,0,0.13)] backdrop-blur sm:pl-2"
ref={navPillRef}
>
<button
aria-label="Go to Toothless' TSS Bot home"
className="hidden h-10 w-10 shrink-0 place-items-center rounded-full transition hover:bg-surface sm:grid"
className="hidden h-8 w-8 shrink-0 place-items-center rounded-full transition hover:bg-surface sm:grid"
onClick={() => navigate('/')}
type="button"
>
<img
alt=""
className="h-8 w-8 rounded-full"
className="h-7 w-7 rounded-full"
src="/embed-icon.svg"
/>
</button>
<nav className="flex min-w-0 items-center gap-1 overflow-x-auto">
{navItems.map((item) => (
<nav className="flex min-w-0 items-center gap-0.5 overflow-x-auto">
{primaryNavItems.map((item) => (
<button
className={`shrink-0 rounded-full px-3 py-2 text-sm font-semibold transition ${activeNavPath === item.path
className={`shrink-0 rounded-full px-2.5 py-1.5 text-[13px] font-semibold leading-5 transition sm:px-3 ${activeNavPath === item.path
? 'bg-text text-bg apricot-button-text'
: 'text-text-soft hover:bg-surface hover:text-text'
}`}
key={item.path}
onClick={() => navigate(item.path)}
type="button"
>
{item.label}
</button>
))}
</nav>
<div className="h-5 w-px shrink-0 bg-border/80" aria-hidden="true" />
<nav className="flex shrink-0 items-center gap-0.5">
{utilityNavItems.map((item) => (
<button
className={`shrink-0 rounded-full px-2.5 py-1.5 text-[13px] font-semibold leading-5 transition ${activeNavPath === item.path
? 'bg-text text-bg apricot-button-text'
: 'text-text-soft hover:bg-surface hover:text-text'
}`}
@@ -2111,7 +2132,7 @@ function ConsentBanner({ preferences, onChoose }) {
className="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/45 px-4 py-4 backdrop-blur-[2px] sm:py-6"
role="dialog"
>
<div className="flex min-h-[18rem] max-h-[calc(100dvh-2rem)] w-full max-w-2xl resize-y flex-col overflow-hidden rounded-md border border-border bg-fury-white p-5 text-text shadow-[0_24px_70px_rgba(0,0,0,0.24)] sm:max-h-[calc(100dvh-3rem)] sm:p-6">
<div className="flex max-h-[calc(100dvh-2rem)] w-full max-w-2xl flex-col overflow-hidden rounded-md border border-border bg-fury-white p-5 text-text shadow-[0_24px_70px_rgba(0,0,0,0.24)] sm:max-h-[calc(100dvh-3rem)]">
<div className="max-w-xl shrink-0">
<h2 id="consent-title" className="text-xl font-semibold">
Cookie and analytics settings
@@ -2130,7 +2151,7 @@ function ConsentBanner({ preferences, onChoose }) {
{isConfiguring ? (
<>
<div className="mt-5 min-h-0 space-y-3 overflow-y-auto pr-1">
<div className="mt-4 min-h-0 space-y-3 overflow-y-auto pr-1">
<PreferenceToggle
checked
description="Stores this consent choice so the popup does not appear on every page."
@@ -2180,7 +2201,7 @@ function ConsentBanner({ preferences, onChoose }) {
/>
</div>
<div className="mt-5 flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<div className="mt-4 flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<button
className="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text-soft transition hover:bg-surface hover:text-text"
onClick={declineAll}
@@ -2205,7 +2226,7 @@ function ConsentBanner({ preferences, onChoose }) {
</div>
</>
) : (
<div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
<div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
<button
className="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text-soft transition hover:bg-surface hover:text-text"
onClick={declineAll}
@@ -2452,7 +2473,7 @@ function Landing({
<PixelMountains />
<section className="relative z-10 mx-auto grid min-h-screen w-full max-w-7xl gap-8 pt-16 pb-16 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
<div className="max-w-3xl">
<div className="max-w-3xl lg:translate-y-[5px]">
<p className="text-base font-semibold uppercase tracking-wide text-fury-cyan">
BorisBot got nothin on THIS
</p>
@@ -2471,6 +2492,13 @@ function Landing({
>
Team Leaderboard
</button>
<button
className="min-h-15 rounded-lg border-2 border-text bg-fury-white px-5 py-4 text-base font-semibold text-text transition hover:bg-surface"
onClick={() => navigate('/players')}
type="button"
>
Player Leaderboard
</button>
<button
className="min-h-15 rounded-lg border-2 border-ring px-5 py-4 text-base font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
onClick={() => navigate('/battle-logs')}
@@ -2478,12 +2506,6 @@ function Landing({
>
Battle Logs
</button>
<a
className="flex min-h-15 items-center justify-center rounded-lg border-2 border-text bg-fury-white px-5 py-4 text-base font-semibold text-text transition hover:bg-surface"
href="https://sre.pawjob.us/"
>
Visit SREBOT
</a>
</div>
<form
@@ -2516,9 +2538,9 @@ function Landing({
</div>
</div>
<div className="relative min-h-[520px] overflow-hidden">
<div className="relative min-h-[500px] overflow-hidden">
<FallingLeaves treeRef={treeRef} />
<div className="absolute inset-0 z-[1] flex items-end justify-center pb-10 lg:pb-0">
<div className="absolute inset-0 z-[1] flex items-end justify-center">
<Tree ref={treeRef} />
</div>
</div>
@@ -3934,6 +3956,8 @@ function BracketViewport({ children }) {
start.moved = true
bracketPan.dragged = true
el.classList.add('is-grabbing')
// Drop any text selection the initial press may have started.
window.getSelection()?.removeAllRanges()
}
if (start.moved) {
el.scrollLeft = start.sl - dx
@@ -3979,6 +4003,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
// `tops` places each match; once placed we read back the DOM to draw connectors.
const [layout, setLayout] = useState({ tops: new Map(), height: 0 })
const [connectors, setConnectors] = useState({ width: 0, height: 0, lines: [], byes: [] })
const [collapsed, setCollapsed] = useState(false)
// Pass 1: measure card heights, then position every match centred on its feeders.
useLayoutEffect(() => {
@@ -3994,7 +4019,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
const observer = new ResizeObserver(relayout)
observer.observe(grid)
return () => observer.disconnect()
}, [side])
}, [side, collapsed])
// Pass 2: with matches positioned, read real edges and draw elbow connectors.
// Each connector carries the teams on either end so a hovered team's whole run
@@ -4040,13 +4065,22 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
}
}
setConnectors({ width: grid.scrollWidth, height: grid.scrollHeight, lines, byes })
}, [side, layout])
}, [side, layout, collapsed])
const active = Boolean(highlight)
return (
<div>
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-fury-violet">{side.label}</h3>
<div className="bracket-side">
<button
aria-expanded={!collapsed}
className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-fury-violet transition hover:text-text"
onClick={() => setCollapsed((value) => !value)}
type="button"
>
<span aria-hidden="true" className={`bracket-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
{side.label}
</button>
{collapsed ? null : (
<BracketViewport>
<div className={`tournament-bracket-grid${active ? ' has-trace' : ''}`} ref={gridRef}>
<svg
@@ -4101,6 +4135,7 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) {
))}
</div>
</BracketViewport>
)}
</div>
)
}
@@ -4263,7 +4298,7 @@ function TournamentDetailPage({ tournamentId, navigate }) {
) : null}
{bracketSides.length ? (
<div className="space-y-6">
<div className="space-y-12">
{hasStandings || listSides.length ? (
<h2 className="text-lg font-semibold">Playoffs</h2>
) : null}
frontend/src/styles.css
+26 -3
View File
@@ -834,20 +834,43 @@ h3 {
/* The bracket reads as a campaign map you drag around. The viewport breaks the
page's max-width so there's room to manoeuvre; the surface carries a faint
tactical grid that pans with the bracket (it lives on the scrolling content). */
/* The whole side (heading + canvas) breaks out to 85vw and centres on the
viewport, so the WINNER/LOSER heading aligns with the canvas's left edge. */
.bracket-side {
width: 85vw;
margin-left: calc(50% - 42.5vw);
}
.bracket-caret {
display: inline-block;
font-size: 0.7em;
transition: transform 0.18s ease;
}
.bracket-caret.is-collapsed {
transform: rotate(-90deg);
}
.bracket-viewport {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
width: 100%;
max-height: 78vh;
overflow: auto;
overscroll-behavior: contain;
cursor: grab;
border-block: 1px solid var(--color-border);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background-color: color-mix(in srgb, var(--color-bg) 86%, #000);
}
.bracket-viewport.is-grabbing {
cursor: grabbing;
user-select: none;
}
/* While panning, don't let the drag turn into a text selection. */
.bracket-viewport.is-grabbing * {
user-select: none;
}
.tournament-bracket-grid {