Page Structure & Routing

dicechess-analytics-ui is configured as a fully client-side rendered Single-Page Application (SPA) using SvelteKit.

---

1. SPA Mode Configuration

The application is served as static files via Nginx. To ensure SvelteKit handles all routing on the client side without trying to compile server-side modules, the root layout config src/routes/+layout.ts disables SSR (Server-Side Rendering) and prerendering:

// SPA mode: the app is fully client-side rendered
export const ssr = false;
export const prerender = false;

With this configuration, SvelteKit generates a single fallback index.html at build time, and routing transitions occur instantly in the browser.

---

2. Root Layout & Shell

The main application shell is defined in src/routes/+layout.svelte. It wraps every route and provides:

• Global Top Header: Features the main navigation links (Games, Openings, Players), responsive mobile navigation menu, and the theme select dropdown.
• Semantic Blob Effects: Ambient decorative blur circles that add visual depth to the canvas background.
• Visual Adapting Canvas: The main container adjusts its maximum width depending on the active route:
  • Game Viewer /games/[id] is rendered with a wider canvas (max-w-[1600px]) for side-by-side board and moves display.
  • Lists and directories (Games list, Openings, Players search) are constrained to a comfortable reading layout (max-w-7xl).

---

3. Core Pages and Navigation

Root Redirect (/)

There is no dedicated home landing page. When a user hits /, the root load handler src/routes/+page.ts triggers a 307 temporary redirect to the games list:

import { redirect } from '@sveltejs/kit';

export function load(): never {
  redirect(307, '/games');
}

---

Games Database (/games & /games/[id])

Manages historical game searching and playback.

• /games: Renders the game search filters and paginated card grids. Filter criteria are automatically serialized into URL search query params to support bookmarking and shareable links.
• /games/[id]: Interactive visualizer. Loads game metadata and Turn list. The side-by-side panels feature:
  • The Chessboard (rendered using a Chessground Svelte wrapper).
  • The Turn History Sidebar (collating rolled dice pools and micro-move lists).
  • Position Equity charts showing evaluations for White/Black and double cube stats.

---

Openings Explorer (/openings)

Visualizes statistics for played openings. It parses the current board position and fetches next-move trees from the backend. The panel highlights:

• White win, Draw, and Black win percentages.
• Lists of next possible moves sorted by popularity or performance.
• FEN editor to setup custom opening branches.

---

Players Directory (/players & /players/[id])

Used for player lookup and ranking analytics.

• /players: Simple search panel with autocomplete player names.
• /players/[id]: Profiles of individual players, showing Head-to-Head panel metrics (wins/losses against opponents) and Elo rating history charts plotted over time.