From e72162b34bddbf04998eea934335e9496b8649f8 Mon Sep 17 00:00:00 2001 From: Bobby Date: Wed, 22 Apr 2026 08:03:06 +0530 Subject: Implement initial load + Begin screens with stub 3s loading pipeline --- eslint.config.js | 9 +- loading/progress.ts | 30 +++++++ loading/session.ts | 26 ++++++ loading/stub.ts | 42 +++++++++ package.json | 1 + pnpm-lock.yaml | 3 + routes/+page.svelte | 58 ++++++------ ui-lib/components/BeginScreen.svelte | 138 +++++++++++++++++++++++++++++ ui-lib/components/InitialLoadScreen.svelte | 57 ++++++++++++ ui-lib/components/ProgressBar.svelte | 34 +++++++ 10 files changed, 365 insertions(+), 33 deletions(-) create mode 100644 loading/progress.ts create mode 100644 loading/session.ts create mode 100644 loading/stub.ts create mode 100644 ui-lib/components/BeginScreen.svelte create mode 100644 ui-lib/components/InitialLoadScreen.svelte create mode 100644 ui-lib/components/ProgressBar.svelte diff --git a/eslint.config.js b/eslint.config.js index d010131..37bdda7 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,6 +1,7 @@ import js from '@eslint/js' import ts from 'typescript-eslint' import svelte from 'eslint-plugin-svelte' +import svelteParser from 'svelte-eslint-parser' import prettier from 'eslint-config-prettier' import globals from 'globals' @@ -52,7 +53,9 @@ export default ts.config( { files: ['**/*.svelte', '**/*.svelte.ts'], languageOptions: { + parser: svelteParser, parserOptions: { + parser: ts.parser, projectService: true, extraFileExtensions: ['.svelte'] } @@ -67,19 +70,19 @@ export default ts.config( selector: "CallExpression[callee.type='MemberExpression'][callee.object.name='Math'][callee.property.name='random']", message: - 'Math.random() is forbidden in gameplay code. Use the seeded RNG from rng/ — determinism is load-bearing (ARCHITECTURE.md §26).' + 'Math.random() is forbidden in gameplay code. Use the seeded RNG.' }, { selector: "CallExpression[callee.type='MemberExpression'][callee.object.name='crypto'][callee.property.name='getRandomValues']", message: - 'crypto.getRandomValues() is forbidden in gameplay code. Use the seeded RNG from rng/.' + 'crypto.getRandomValues() is forbidden in gameplay code. Use the seeded RNG.' }, { selector: "CallExpression[callee.type='MemberExpression'][callee.object.name='Date'][callee.property.name='now']", message: - 'Date.now() is forbidden in gameplay code. Use GameTime from time/ for gameplay logic. Date.now() is permitted only in tests, scripts, and outside the simulation (metadata, logging, performance measurement).' + 'Date.now() is forbidden in gameplay code. Use GameTime. Date.now() is permitted only in tests, scripts, and outside the simulation.' } ], '@typescript-eslint/no-explicit-any': 'error' diff --git a/loading/progress.ts b/loading/progress.ts new file mode 100644 index 0000000..f631757 --- /dev/null +++ b/loading/progress.ts @@ -0,0 +1,30 @@ +import { writable, type Writable } from 'svelte/store' + +/** + * Phase the loading pipeline is in. + * `idle` nothing running yet; percentage is 0. + * `loading` a load is in flight; percentage advances 0 → 1. + * `complete` load finished; percentage is 1. + */ +export type LoadingPhase = 'idle' | 'loading' | 'complete' + +/** Reactive snapshot of the loading pipeline. */ +export interface LoadingProgress { + readonly percentage: number + readonly currentMessage: string + readonly phase: LoadingPhase +} + +const DEFAULT: LoadingProgress = { + percentage: 0, + currentMessage: 'Preparing your reading space', + phase: 'idle' +} + +/** Global store of the initial-load progress. Components subscribe via `$`. */ +export const loadingProgress: Writable = writable(DEFAULT) + +/** Reset the store to its initial state. Useful between sessions in dev. */ +export function resetLoadingProgress(): void { + loadingProgress.set(DEFAULT) +} diff --git a/loading/session.ts b/loading/session.ts new file mode 100644 index 0000000..a1a685b --- /dev/null +++ b/loading/session.ts @@ -0,0 +1,26 @@ +/** + * The three states the Begin screen can render. + * + * `first-ever` no world exists on device yet. Only option is + * to begin (create the first world + character). + * `returning-active` a world exists with a currently-active player + * character. Primary option is to continue them. + * `returning-no-active` a world exists but the current character has + * died (or been ended) without a successor yet. + * Primary option is to pick a successor via the + * continuation flow. + */ +export type BeginState = + | { readonly kind: 'first-ever' } + | { readonly kind: 'returning-active'; readonly characterName: string } + | { readonly kind: 'returning-no-active' } + +/** + * Inspect device-local state and decide which Begin variant to show. The + * real implementation queries IndexedDB for worlds and the currently + * active player character; while persistence is still being wired up this + * returns `first-ever` unconditionally. + */ +export async function detectBeginState(): Promise { + return { kind: 'first-ever' } +} diff --git a/loading/stub.ts b/loading/stub.ts new file mode 100644 index 0000000..99bbd61 --- /dev/null +++ b/loading/stub.ts @@ -0,0 +1,42 @@ +import { loadingProgress } from '@hollowdark/loading/progress' + +const STUB_DURATION_MS = 3000 + +/** + * Stand-in for the real content-manifest fetch and chunk download. Animates + * the loading progress store from 0 to 1 over three seconds of wall-clock + * time, then resolves. Replace with the real pipeline when content loading + * comes online. + */ +export function runStubInitialLoad(): Promise { + loadingProgress.set({ + percentage: 0, + currentMessage: 'Preparing your reading space', + phase: 'loading' + }) + + return new Promise((resolve) => { + const startedAt = performance.now() + + const tick = (): void => { + const elapsed = performance.now() - startedAt + const pct = Math.min(1, elapsed / STUB_DURATION_MS) + const done = pct >= 1 + + loadingProgress.set({ + percentage: pct, + currentMessage: 'Preparing your reading space', + phase: done ? 'complete' : 'loading' + }) + + if (done) { + resolve() + return + } + + requestAnimationFrame(tick) + } + + requestAnimationFrame(tick) + }) +} diff --git a/package.json b/package.json index 55d0e5b..7f1b2f1 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "prettier-plugin-svelte": "^3.5.1", "svelte": "^5.55.4", "svelte-check": "^4.4.6", + "svelte-eslint-parser": "^1.6.0", "typescript": "^6.0.3", "typescript-eslint": "^8.59.0", "vite": "^8.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a2046fa..09fed39 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,6 +51,9 @@ importers: svelte-check: specifier: ^4.4.6 version: 4.4.6(picomatch@4.0.4)(svelte@5.55.4(@typescript-eslint/types@8.59.0))(typescript@6.0.3) + svelte-eslint-parser: + specifier: ^1.6.0 + version: 1.6.0(svelte@5.55.4(@typescript-eslint/types@8.59.0)) typescript: specifier: ^6.0.3 version: 6.0.3 diff --git a/routes/+page.svelte b/routes/+page.svelte index eeff5b2..b7a0146 100644 --- a/routes/+page.svelte +++ b/routes/+page.svelte @@ -1,35 +1,33 @@ + import { onMount } from 'svelte' + import BeginScreen from '@hollowdark/ui-lib/components/BeginScreen.svelte' + import InitialLoadScreen from '@hollowdark/ui-lib/components/InitialLoadScreen.svelte' + import { runStubInitialLoad } from '@hollowdark/loading/stub' + import { detectBeginState, type BeginState } from '@hollowdark/loading/session' + + type View = 'loading' | 'begin' -
-

Hollowdark

-

Scaffolding in place.

-
+ let view: View = $state('loading') + let beginState: BeginState = $state({ kind: 'first-ever' }) - +{#if view === 'loading'} + +{:else} + +{/if} diff --git a/ui-lib/components/BeginScreen.svelte b/ui-lib/components/BeginScreen.svelte new file mode 100644 index 0000000..c095f61 --- /dev/null +++ b/ui-lib/components/BeginScreen.svelte @@ -0,0 +1,138 @@ + + +
+
+

Hollowdark

+

A life simulation

+
+ +
+ {#if state.kind === 'first-ever'} + + {:else if state.kind === 'returning-active'} + + + {:else} + + + {/if} + + +
+ +

{appVersion}

+
+ + diff --git a/ui-lib/components/InitialLoadScreen.svelte b/ui-lib/components/InitialLoadScreen.svelte new file mode 100644 index 0000000..105d283 --- /dev/null +++ b/ui-lib/components/InitialLoadScreen.svelte @@ -0,0 +1,57 @@ + + +
+

Hollowdark

+ +
+ +
+ +

{progress.currentMessage}

+

This will happen once. It will not happen again.

+
+ + diff --git a/ui-lib/components/ProgressBar.svelte b/ui-lib/components/ProgressBar.svelte new file mode 100644 index 0000000..21c9e68 --- /dev/null +++ b/ui-lib/components/ProgressBar.svelte @@ -0,0 +1,34 @@ + + +
+
+
+ + -- cgit v1.2.3