ui: plan 01-27 done #1
@@ -0,0 +1,30 @@
|
|||||||
|
# pnpm / node
|
||||||
|
node_modules/
|
||||||
|
.pnpm-store/
|
||||||
|
|
||||||
|
# Vite / SvelteKit
|
||||||
|
.svelte-kit/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Generated WASM bundles
|
||||||
|
*.wasm
|
||||||
|
|
||||||
|
# Wails desktop wrapper (Phase 31+)
|
||||||
|
desktop/build/
|
||||||
|
desktop/frontend/dist/
|
||||||
|
|
||||||
|
# Capacitor mobile wrappers (Phase 32+)
|
||||||
|
mobile/ios/
|
||||||
|
mobile/android/
|
||||||
|
mobile/dist/
|
||||||
|
mobile/node_modules/
|
||||||
|
|
||||||
|
# Playwright artifacts (Phase 2+)
|
||||||
|
test-results/
|
||||||
|
playwright-report/
|
||||||
|
playwright/.cache/
|
||||||
|
|
||||||
|
# Editor / OS noise
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
+19
@@ -0,0 +1,19 @@
|
|||||||
|
.PHONY: help web wasm gomobile desktop-mac desktop-win desktop-linux ios android all
|
||||||
|
|
||||||
|
.DEFAULT_GOAL := help
|
||||||
|
|
||||||
|
help:
|
||||||
|
@echo "ui targets (placeholders, implemented in later phases of ui/PLAN.md):"
|
||||||
|
@echo " web Vite production build (Phase 5+)"
|
||||||
|
@echo " wasm TinyGo build of ui/core to core.wasm (Phase 5)"
|
||||||
|
@echo " gomobile gomobile bind for iOS .framework + Android .aar (Phase 32+)"
|
||||||
|
@echo " desktop-mac Wails build for darwin/{arm64,amd64} (Phase 31)"
|
||||||
|
@echo " desktop-win Wails build for windows/amd64 (Phase 31)"
|
||||||
|
@echo " desktop-linux Wails build for linux/amd64 (Phase 31)"
|
||||||
|
@echo " ios Capacitor sync + xcodebuild + archive (Phase 32+)"
|
||||||
|
@echo " android Capacitor sync + gradle assembleRelease (Phase 32+)"
|
||||||
|
@echo " all every target above"
|
||||||
|
|
||||||
|
web wasm gomobile desktop-mac desktop-win desktop-linux ios android all:
|
||||||
|
@echo "TODO: implement '$@' (placeholder, see ui/PLAN.md)"
|
||||||
|
@exit 1
|
||||||
+22
-12
@@ -241,12 +241,12 @@ live in per-phase topic docs under `ui/docs/`.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Phase 1. Workspace Skeleton
|
## ~~Phase 1. Workspace Skeleton~~
|
||||||
|
|
||||||
Status: pending.
|
Status: done.
|
||||||
|
|
||||||
Goal: bring up the `ui/` workspace with a runnable empty Svelte+Vite
|
Goal: bring up the `ui/` workspace with a runnable empty
|
||||||
frontend and architectural anchors.
|
SvelteKit + Vite frontend and architectural anchors.
|
||||||
|
|
||||||
Artifacts:
|
Artifacts:
|
||||||
|
|
||||||
@@ -254,10 +254,19 @@ Artifacts:
|
|||||||
- `ui/Makefile` with placeholder targets for every build type (`web`,
|
- `ui/Makefile` with placeholder targets for every build type (`web`,
|
||||||
`wasm`, `gomobile`, `desktop-{mac,win,linux}`, `ios`, `android`,
|
`wasm`, `gomobile`, `desktop-{mac,win,linux}`, `ios`, `android`,
|
||||||
`all`)
|
`all`)
|
||||||
- `ui/frontend/` Svelte 5 + Vite + TypeScript project scaffolded with
|
- `ui/pnpm-workspace.yaml` declaring the single-package pnpm workspace
|
||||||
`pnpm create vite`
|
- `ui/frontend/` Svelte 5 + SvelteKit + Vite + TypeScript project
|
||||||
- `ui/frontend/src/routes/` minimal landing page rendering the app
|
(the SvelteKit scaffold provides `+layout.svelte`, `+page.svelte`,
|
||||||
version string in the page footer
|
`static/`, and the file-system router used by later phases)
|
||||||
|
- `ui/frontend/src/routes/+page.svelte` minimal landing page
|
||||||
|
rendering the app version string in the page footer; the version
|
||||||
|
is read at build time by Vite `define` from
|
||||||
|
`ui/frontend/package.json`
|
||||||
|
- `ui/frontend/{vitest.config.ts, tests/}` minimum Vitest harness
|
||||||
|
needed to run the smoke test below (`vitest`, `jsdom`,
|
||||||
|
`@testing-library/svelte`); the rest of the test toolchain
|
||||||
|
(Playwright, `@testing-library/jest-dom`, CI workflows) lands in
|
||||||
|
Phase 2
|
||||||
- `ui/.gitignore` covering `node_modules`, `dist`, `*.wasm`, build
|
- `ui/.gitignore` covering `node_modules`, `dist`, `*.wasm`, build
|
||||||
outputs for Wails and Capacitor, Playwright artefacts
|
outputs for Wails and Capacitor, Playwright artefacts
|
||||||
- `ui/docs/` empty directory ready for per-phase topic docs
|
- `ui/docs/` empty directory ready for per-phase topic docs
|
||||||
@@ -287,10 +296,11 @@ depends on, including Tier 1 (per-PR) and Tier 2 (release) targets.
|
|||||||
|
|
||||||
Artifacts:
|
Artifacts:
|
||||||
|
|
||||||
- `ui/frontend/package.json` dev-dependencies: `vitest`,
|
- `ui/frontend/package.json` dev-dependencies (added on top of the
|
||||||
`@testing-library/svelte`, `@testing-library/jest-dom`, `jsdom`,
|
Phase 1 minimum of `vitest`, `jsdom`, `@testing-library/svelte`):
|
||||||
`playwright`, `@playwright/test`
|
`@testing-library/jest-dom`, `playwright`, `@playwright/test`
|
||||||
- `ui/frontend/vitest.config.ts` configured for Svelte + JSDOM
|
- `ui/frontend/vitest.config.ts` extended for `@testing-library/jest-dom`
|
||||||
|
matchers (the JSDOM environment itself is wired in Phase 1)
|
||||||
- `ui/frontend/playwright.config.ts` with three projects:
|
- `ui/frontend/playwright.config.ts` with three projects:
|
||||||
`chromium-desktop`, `webkit-desktop`, `chromium-mobile-iphone-13`,
|
`chromium-desktop`, `webkit-desktop`, `chromium-mobile-iphone-13`,
|
||||||
`chromium-mobile-pixel-5`; tracing and screenshots enabled on failure
|
`chromium-mobile-pixel-5`; tracing and screenshots enabled on failure
|
||||||
|
|||||||
+115
@@ -0,0 +1,115 @@
|
|||||||
|
# ui — Galaxy Cross-Platform Client
|
||||||
|
|
||||||
|
`ui/` hosts the new cross-platform Galaxy client. A single
|
||||||
|
TypeScript + Svelte source tree builds to five targets: web,
|
||||||
|
web-mobile, standalone PC (mac/win/linux), iOS, and Android. A
|
||||||
|
shared Go module (`ui/core`) carries envelope cryptography, the
|
||||||
|
FlatBuffers codec, keypair management, and a thin bridge over
|
||||||
|
`pkg/calc/` for UI-side game math; it is compiled to WASM for the
|
||||||
|
web targets, gomobile native libraries for mobile, and embedded
|
||||||
|
directly in Wails on desktop. All network I/O lives on the
|
||||||
|
TypeScript side via ConnectRPC, so the Go module is a pure compute
|
||||||
|
boundary on every platform.
|
||||||
|
|
||||||
|
The legacy Fyne client under `client/` is reference-only.
|
||||||
|
Nothing in `ui/` imports from it.
|
||||||
|
|
||||||
|
The full staged implementation plan lives in `PLAN.md`. The
|
||||||
|
strategic rationale (why Svelte, why PixiJS, why Go-as-WASM, why
|
||||||
|
Wails+Capacitor) lives outside the repo at
|
||||||
|
`~/.claude/plans/buzzing-questing-fountain.md`. This README is a
|
||||||
|
quick orientation; deeper per-phase design notes earn their place
|
||||||
|
under `ui/docs/` as they are introduced.
|
||||||
|
|
||||||
|
## Targets
|
||||||
|
|
||||||
|
| Target | Wrapper | Toolchain | Phase |
|
||||||
|
| --------------- | ---------------- | ----------------------- | -------- |
|
||||||
|
| web | browser tab | Vite + WASM | 5+ |
|
||||||
|
| web-mobile | mobile browser | Vite + WASM | 5+ |
|
||||||
|
| desktop (mac) | Wails v2 | Go + Wails CLI | 31 |
|
||||||
|
| desktop (win) | Wails v2 | Go + Wails CLI | 31 |
|
||||||
|
| desktop (linux) | Wails v2 | Go + Wails CLI | 31 |
|
||||||
|
| iOS | Capacitor | gomobile + Xcode | 32+ |
|
||||||
|
| Android | Capacitor | gomobile + Gradle | 32+ |
|
||||||
|
|
||||||
|
## Layered architecture
|
||||||
|
|
||||||
|
- **TypeScript + Svelte 5 frontend**, shared across all five targets,
|
||||||
|
scaffolded with SvelteKit + Vite.
|
||||||
|
- **PixiJS v8** with dual WebGPU/WebGL backend for the world map
|
||||||
|
renderer.
|
||||||
|
- **Go module `ui/core/`** as a compute-only library (canonical bytes,
|
||||||
|
Ed25519 sign/verify, FlatBuffers codec, keypair, thin bridge to
|
||||||
|
`pkg/calc/`) compiled to WASM, gomobile, and Wails-embedded native.
|
||||||
|
- **TypeScript-side `Core` interface** with three adapters
|
||||||
|
(`WasmCore`, `WailsCore`, `CapacitorCore`) selected at build time.
|
||||||
|
- **`GalaxyClient`** on top of `Core` performs all network I/O via
|
||||||
|
ConnectRPC (`@connectrpc/connect-web`) on every platform.
|
||||||
|
- **Per-platform storage:** WebCrypto + IndexedDB on web, OS keychain
|
||||||
|
+ SQLite on desktop, iOS Keychain / Android Keystore + SQLite on
|
||||||
|
mobile, all behind a single `KeyStore` and `Cache` TypeScript
|
||||||
|
interface.
|
||||||
|
- **Mobile-first navigation:** one active view occupies the main area
|
||||||
|
at a time; the sidebar holds a single tool (calculator, inspector,
|
||||||
|
or order) with persistent state on switch.
|
||||||
|
|
||||||
|
## Repository layout
|
||||||
|
|
||||||
|
Filled in incrementally as phases land. Today only `frontend/` exists.
|
||||||
|
|
||||||
|
```text
|
||||||
|
ui/
|
||||||
|
├── README.md this file
|
||||||
|
├── PLAN.md staged implementation plan
|
||||||
|
├── Makefile cross-target build placeholders
|
||||||
|
├── pnpm-workspace.yaml pnpm workspace root
|
||||||
|
├── .gitignore
|
||||||
|
├── docs/ per-phase topic docs (added per phase)
|
||||||
|
├── frontend/ TS + Svelte source, shared across targets
|
||||||
|
├── core/ Go module ui/core (Phase 3+)
|
||||||
|
├── wasm/ TinyGo entry point for core.wasm (Phase 5)
|
||||||
|
├── mobile-bridge/ gomobile bindings (Phase 32+)
|
||||||
|
├── desktop/ Wails project (Phase 31)
|
||||||
|
├── mobile/ Capacitor project (Phase 32+)
|
||||||
|
└── web/ static deploy assets (Phase 30+)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build pipeline
|
||||||
|
|
||||||
|
Every cross-target build flows through `make` at this level. All
|
||||||
|
named targets are placeholders until the named phase lands; running
|
||||||
|
`make` with no arguments prints the current placeholder map.
|
||||||
|
|
||||||
|
```text
|
||||||
|
make web Vite production build Phase 5+
|
||||||
|
make wasm TinyGo → core.wasm Phase 5
|
||||||
|
make gomobile gomobile bind → ios + android Phase 32+
|
||||||
|
make desktop-mac Wails build for darwin Phase 31
|
||||||
|
make desktop-win Wails build for windows Phase 31
|
||||||
|
make desktop-linux Wails build for linux Phase 31
|
||||||
|
make ios Capacitor + xcodebuild Phase 32+
|
||||||
|
make android Capacitor + gradle Phase 32+
|
||||||
|
make all every target above
|
||||||
|
```
|
||||||
|
|
||||||
|
## Per-phase docs
|
||||||
|
|
||||||
|
Topic docs live under `ui/docs/` and are added per phase as they're
|
||||||
|
needed (testing tiers, WASM toolchain, navigation shell, renderer
|
||||||
|
internals, sync protocol, auth flow, and so on). The staged plan in
|
||||||
|
`PLAN.md` names the topic doc each phase produces.
|
||||||
|
|
||||||
|
## Cross-references
|
||||||
|
|
||||||
|
- [`PLAN.md`](./PLAN.md) — staged implementation plan with goals,
|
||||||
|
artifacts, dependencies, acceptance criteria, and targeted tests
|
||||||
|
per phase.
|
||||||
|
- [`../docs/ARCHITECTURE.md`](../docs/ARCHITECTURE.md) — platform
|
||||||
|
architecture and the transport security model (§15) the client
|
||||||
|
envelope contract derives from.
|
||||||
|
- [`../docs/FUNCTIONAL.md`](../docs/FUNCTIONAL.md) — per-domain user
|
||||||
|
stories that drive the UI flows.
|
||||||
|
- [`../docs/TESTING.md`](../docs/TESTING.md) — project-wide testing
|
||||||
|
layers; UI-specific test tiers (Vitest, Playwright) live in
|
||||||
|
`ui/docs/testing.md` from Phase 2 onward.
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
engine-strict=true
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "galaxy-ui-frontend",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite dev",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
|
"test": "vitest run"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/adapter-static": "^3.0.0",
|
||||||
|
"@sveltejs/kit": "^2.59.0",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
||||||
|
"@testing-library/svelte": "^5.2.0",
|
||||||
|
"@types/node": "^22.0.0",
|
||||||
|
"jsdom": "^25.0.0",
|
||||||
|
"svelte": "^5.0.0",
|
||||||
|
"svelte-check": "^4.0.0",
|
||||||
|
"tslib": "^2.6.0",
|
||||||
|
"typescript": "^5.5.0",
|
||||||
|
"vite": "^8.0.0",
|
||||||
|
"vitest": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+10
@@ -0,0 +1,10 @@
|
|||||||
|
declare global {
|
||||||
|
// Build-time constant injected by Vite from package.json version.
|
||||||
|
const __APP_VERSION__: string;
|
||||||
|
|
||||||
|
namespace App {
|
||||||
|
// future-phase types added later
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Galaxy</title>
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
// APP_VERSION is the package.json "version" field, inlined at build time
|
||||||
|
// by the Vite `define` plugin (see vite.config.ts).
|
||||||
|
export const APP_VERSION: string = __APP_VERSION__;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { children } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{@render children()}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { APP_VERSION } from "$lib/version";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Galaxy</h1>
|
||||||
|
<p>Cross-platform UI client — workspace skeleton.</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer data-testid="app-version">version {APP_VERSION}</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
padding: 2rem;
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#1f2937"/><circle cx="16" cy="16" r="3" fill="#fbbf24"/></svg>
|
||||||
|
After Width: | Height: | Size: 160 B |
@@ -0,0 +1,15 @@
|
|||||||
|
import adapter from "@sveltejs/adapter-static";
|
||||||
|
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
export default {
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
kit: {
|
||||||
|
adapter: adapter({
|
||||||
|
pages: "build",
|
||||||
|
assets: "build",
|
||||||
|
fallback: "index.html",
|
||||||
|
strict: true,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { render } from "@testing-library/svelte";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import Page from "../src/routes/+page.svelte";
|
||||||
|
|
||||||
|
describe("landing page", () => {
|
||||||
|
it("renders a non-empty version string in the footer", () => {
|
||||||
|
const { getByTestId } = render(Page);
|
||||||
|
const footer = getByTestId("app-version");
|
||||||
|
expect(footer.textContent?.trim()).not.toBe("");
|
||||||
|
expect(footer.textContent).toMatch(/version\s+\S+/);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true,
|
||||||
|
"moduleResolution": "bundler"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { sveltekit } from "@sveltejs/kit/vite";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import { readFileSync } from "node:fs";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const pkg = JSON.parse(
|
||||||
|
readFileSync(
|
||||||
|
fileURLToPath(new URL("./package.json", import.meta.url)),
|
||||||
|
"utf8",
|
||||||
|
),
|
||||||
|
) as { version: string };
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [sveltekit()],
|
||||||
|
define: {
|
||||||
|
__APP_VERSION__: JSON.stringify(pkg.version),
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { defineConfig, mergeConfig } from "vitest/config";
|
||||||
|
import viteConfig from "./vite.config";
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
viteConfig,
|
||||||
|
defineConfig({
|
||||||
|
resolve: {
|
||||||
|
// Force the browser entry of Svelte so `mount` is available in jsdom.
|
||||||
|
conditions: ["browser"],
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
environment: "jsdom",
|
||||||
|
include: ["tests/**/*.test.ts"],
|
||||||
|
globals: true,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
Generated
+1742
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,4 @@
|
|||||||
|
packages:
|
||||||
|
- "frontend"
|
||||||
|
allowBuilds:
|
||||||
|
esbuild: true
|
||||||
Reference in New Issue
Block a user