diff --git a/.env.example b/.env.example index 98d01ad..f24c17f 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,6 @@ # Copy this file to .env and configure your MQTT feed. No map key or build is needed. # Keep .env and any optional .secrets files private. -CARTOLITE_IMAGE=ghcr.io/n30nex/cartolite-server:0.8.5 +CARTOLITE_IMAGE=ghcr.io/n30nex/cartolite-server:0.9.0 CARTOLITE_BIND_ADDR=127.0.0.1 CARTOLITE_PORT=8080 # Optional CARTO override: see compose.carto.yml and docs/deployment.md. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 70caf06..0f5b959 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -150,6 +150,21 @@ jobs: bash scripts/publish-fixture.sh cartolite-server-mqtt testdata/synthetic-live.ndjson bash scripts/integration-smoke.sh http://127.0.0.1:39476 artifacts/integration cartolite-server-mqtt bash scripts/performance-smoke.sh http://127.0.0.1:39476 cartolite-server-mqtt + - name: Terminal presentation and isolation + if: matrix.arch == 'amd64' + working-directory: web + env: + PLAYWRIGHT_HTML_OUTPUT_DIR: terminal-playwright-report + run: npm run test:e2e -- terminal.spec.ts --output terminal-test-results + - name: Preserve Terminal review screenshots + if: always() && matrix.arch == 'amd64' + uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a + with: + name: cartolite-server-terminal-review + retention-days: 30 + path: | + web/terminal-test-results/ + web/terminal-playwright-report/ - name: UI audit and recovery regressions if: matrix.arch == 'amd64' working-directory: web @@ -165,12 +180,6 @@ jobs: path: | web/ux-audit-test-results/ web/ux-audit-playwright-report/ - - name: Terminal presentation and isolation - if: matrix.arch == 'amd64' - working-directory: web - env: - PLAYWRIGHT_HTML_OUTPUT_DIR: terminal-playwright-report - run: npm run test:e2e -- terminal.spec.ts --output terminal-test-results - name: Worldwide and terrain regressions if: matrix.arch == 'amd64' working-directory: web diff --git a/README.md b/README.md index 8f46898..2c842b7 100644 --- a/README.md +++ b/README.md @@ -192,3 +192,20 @@ Layout, region choices and route visibility are remembered in this browser. Open /terminal/ or choose **Terminal** beside Map and Netgraph (in the View picker on phones). This BBS-style geographic view uses live Braille/ASCII graphics with ANSI, amber or green phosphor. Find, inspection, layer toggles, route windows, Follow, optional 3D and opt-in sounds use the same live data and controls as Map. Set characters and cell size under **Display → Terminal display**. The character renderer is downloaded only when you open Terminal; no extra map key or service is required. See [implementation and validation plan](docs/terminal-view-plan-2026-10-17.md). + +### Terminal appearance + +Open **Terminal → Display → Terminal options** for six retro presets, per-element +colours, HSL sliders, console/pixel fonts and independent map brightness/live glow. +Choose Braille, ASCII, pixel-block or cel-shaded geography; confirmed routes stay +sharp above it. Live packets can use characters or smooth strokes. Settings are +local, migrate older Terminal choices and synchronize across tabs without changing +Map/Netgraph preferences or sound. The colour editor always keeps a readable reset. +Fonts and licences are bundled in `web/public/fonts/terminal/`. + +Terminal defaults match the owner-selected screenshots: routes, live packets, +heatmap, node/place labels, roads and buildings on; clusters, regions, Topo and +3D off; 15-minute routes and 15% Topo shading. Fine ANSI/BBS Braille, Spectacle, +Complete detail, High graphics, system motion, standard text and Neon routes. +Layer/display settings are independent from Map/Netgraph, and saved Terminal +customizations remain. Reset all display settings restores these Terminal defaults. diff --git a/VERSION b/VERSION index 7ada0d3..ac39a10 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.8.5 +0.9.0 diff --git a/compose.yml b/compose.yml index 6a0b5a8..9643e52 100644 --- a/compose.yml +++ b/compose.yml @@ -2,7 +2,7 @@ name: cartolite-server services: cartolite: - image: ${CARTOLITE_IMAGE:-ghcr.io/n30nex/cartolite-server:0.8.5} + image: ${CARTOLITE_IMAGE:-ghcr.io/n30nex/cartolite-server:0.9.0} restart: unless-stopped ports: - "${CARTOLITE_BIND_ADDR:-127.0.0.1}:${CARTOLITE_PORT:-8080}:8080" diff --git a/docs/releases/0.9.0.md b/docs/releases/0.9.0.md new file mode 100644 index 0000000..9e7b4d1 --- /dev/null +++ b/docs/releases/0.9.0.md @@ -0,0 +1,27 @@ +# 0.9.0 — Make Terminal your own + +- Add Terminal options inside Display, with BBS, Amber, Green, CGA, EGA and Cel-shaded presets. +- Adjust geography, node, packet, route, label and interface colours with a picker, hex value and hue/saturation/lightness sliders. +- Choose system mono, Typewriter, VT323 console or Silkscreen pixel fonts, with map size, weight and interface scale controls. +- Draw Braille, ASCII, pixel-block or cel-shaded maps. Keep routes sharp above the map and choose glowing characters or smooth live packets. +- Adjust background brightness, place labels and live glow independently; keep the existing six route styles and advanced controls. +- Preserve existing preferences and synchronize Terminal profiles across tabs. The editor retains readable colours and reset controls. + +Fonts are bundled locally under SIL OFL 1.1; no remote font service is used. No +backend endpoints, traffic fields, dependencies, packet/audio timing or native APK +changes. Builds, tests and screenshots run only in Actions. Release publication +and deployment evidence will be recorded in the published release. + +Terminal defaults match the owner-selected screenshots: routes, live packets, +heatmap, node/place labels, roads and buildings on; clusters, regions, Topo and +3D off; 15-minute routes and 15% Topo shading. Fine ANSI/BBS Braille, Spectacle, +Complete detail, High graphics, system motion, standard text and Neon routes. +Layer/display settings are independent from Map/Netgraph, and saved Terminal +customizations remain. Reset all display settings restores these Terminal defaults. + +Route visibility now updates the map scene and finishes its compositor handoff, +preventing stale lines after hiding routes in Safari. Terrain graphics recovery +uses stylesheet readiness rather than waiting for a tile reload to emit a new +style event. Terminal keeps its active time window visible and honours Large +text for map labels. The supplemental visual audit is tracked separately in the +roadmap; broader inspector/overview changes are not claimed in this release. diff --git a/docs/roadmap.md b/docs/roadmap.md index 59abd71..ff9eb21 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -1,12 +1,12 @@ # CartoLite delivery roadmap -Updated 17 October 2026. Current audit: [end-to-end UI/UX review](ui-ux-audit-2026-10-17.md). +Updated 18 October 2026. Current audit: [end-to-end UI/UX review](ui-ux-audit-2026-10-17.md). The [older roadmap](roadmap-archive-2026-09.md) is preserved as a dated record; its Planned labels and build-size caps are not current instructions. ## Previously verified release baseline -Canada **0.17.3**, Worldwide **0.8.4**, Canada Android **1.1.2**. Already shipped: +Canada **0.17.4**, Worldwide **0.8.5**, Canada Android **1.1.2**. Already shipped: shared appearance and six route presets; cinematic effects and quality/motion controls; optional Map and Netgraph 3D; buildings/topography; scoped ten-second Follow; region layout/dragging/filtering and live-only routes; compact phone @@ -23,8 +23,8 @@ It must be reviewed against current main before integration, preserving the new | Phase | Status | Deliverable | Exit condition | | --- | --- | --- | --- | | 1. Everyday navigation and recovery | Delivered | UI01–UI06/UI15: live search refresh, dialog Back/Escape, quiet dismissible map notices, actionable empty Netgraph, reachable Follow actions, stable Labs feedback and this reconciled roadmap. Released in Canada 0.17.3 / Worldwide 0.8.4. | Baseline reproduction; focused tests pass without weakening assertions; full Actions gates; reviewed paired PRs; exact images, qualified Canada deployment and Worldwide installs. | -| 2. Controls, discovery and explanations | Implemented; [delivery status](https://github.com/n30nex/CartoLite-Server/releases/tag/v0.8.5) | UI07/UI08: relevant per-view controls (including a true High-quality override in Labs), consistent visible help, clearer active filters and route/live/observer-only explanations. Silent voice browsing and reliable immediate mute. | Keyboard/Back/focus, 320px/short landscape, enlarged text, sound opt-in and no duplicate feed/layout reset. | -| 3. Animation and visual clarity | Planned | UI09/UI10: semantic Terminal network ink, dense-label priority, purposeful live emphasis, consistent ground/perspective behavior and measured sustained quality. Review each Labs scene independently. | Fixed-time synthetic GPU/Canvas/audio comparisons; all themes/presets; terrain/buildings/date-line/context loss; unchanged 4k-node/7k-route and responsiveness gates. | +| 2. Controls, discovery and explanations | Delivered; [delivery status](https://github.com/n30nex/CartoLite-Server/releases/tag/v0.8.5) | UI07/UI08: relevant per-view controls (including a true High-quality override in Labs), consistent visible help, clearer active filters and route/live/observer-only explanations. Silent voice browsing and reliable immediate mute. | Keyboard/Back/focus, 320px/short landscape, enlarged text, sound opt-in and no duplicate feed/layout reset. | +| 3. Animation and visual clarity | Active: Terminal customization | UI09/UI10: semantic Terminal network ink, dense-label priority, purposeful live emphasis, consistent ground/perspective behavior and measured sustained quality. Review each Labs scene independently. | Fixed-time synthetic GPU/Canvas/audio comparisons; all themes/presets; terrain/buildings/date-line/context loss; unchanged 4k-node/7k-route and responsiveness gates. | | 4. Recovery and release hardening | Planned integration | UI11/UI12: reconcile the separate retained/freshness/clock/region-loading work; clear development-tool advisories through existing dependency PRs; extend browser/accessibility coverage. | Conservative topology/privacy; real reconnect/failure scenarios; exact native images and checkpoint-preserving anonymous installs. No unrelated branch resets or local builds. | | 5. Optional additions | Planned | UI13/UI14: named local views, public-only share links, bounded role/recent/in-view Find filters, EN/FR Canada chrome and worldwide locale/units. Approved extra tile providers remain a separate configuration decision. | Demonstrate a useful task, reversible saved settings and explicit data/coverage limitations before broadening the UI. | @@ -63,7 +63,7 @@ passed 224 frontend and 321 browser cases; its [161 deployed browser checks](https://github.com/n30nex/CartoLite/actions/runs/39066754097) passed without retries. Three live observations over 369.4 seconds confirmed advancing traffic/checkpoints and zero drops/restarts after an encrypted backup -and isolated restore. The exact tested image remains deployed. +and isolated restore. That exact tested image was deployed and qualified. Worldwide's [exact-main CI](https://github.com/n30nex/CartoLite-Server/actions/runs/39064086634) passed 198 frontend and 273 browser cases, including native anonymous AMD64/ARM64 @@ -86,3 +86,39 @@ The new Find filters remain an optional addition; existing Find recovery is reta The linked release record carries final validation and delivery status. This versioned roadmap records the source implementation; publication alone is not proof of a healthy deployment. The release notes distinguish these stages. + +## Next package: Terminal customization + +Target Canada 0.18.0 / Worldwide 0.9.0. Add a compact Terminal options editor +inside Display with BBS, Amber, Green, CGA, EGA and Cel-shaded presets. Provide +separate semantic colours for geography, traffic, nodes, labels and interface, +colour-picker/hex/HSL sliders, independent map brightness, live glow and typography. +Keep a readable reset/editor surface even for low-contrast custom palettes. + +Convert geography before drawing the existing network layers. Preserve solid +route cores, source topology, hit geometry and packet/audio timing. Offer Braille, +ASCII, pixel blocks or flat cel-shaded geography, and character or smooth packets. +Keep bounded sampling, quality/reduced-motion behavior, fallback and context recovery. +Fonts are bundled locally with their licences and only loaded by Terminal. + +Migrate legacy phosphor/glyph/grid preferences; save the new profile separately +and synchronize Terminal tabs. Existing Map/Netgraph styles, layers and sound remain. +Actions must cover all presets, arbitrary colour separation, mobile bounds, font +loading, keyboard input, migration/reset, cross-tab behavior, unchanged live timing, +context recovery and the existing scale/privacy/installation gates. Exact-image +release and Canada qualification follow passing paired reviews. The remaining +phase 3 Labs/dense-label/terrain audit and phases 4-5 remain planned. + +Owner-selected Terminal defaults (18 October): routes/live/heatmap/labels/roads/ +buildings on; clusters/regions/Topo/3D off; 15-minute routes, 15% Topo shading; +BBS/ANSI fine Braille, Spectacle, Complete, High, system motion, standard text +and Neon routes. Terminal layer/display settings now use separate storage from +Map/Netgraph, while existing Terminal custom profiles and sound choices persist. + +## Supplemental visual audit + +The owner-supplied 15-page visual audit adds A01–A15, separate from this audit's +UI identifiers. [The follow-up](visual-audit-followup-2026-10-18.md) prioritizes a +measured selected-node/inspector layout and complete duration labels after the +Terminal package, then scope handoff, overview/selection clarity and control copy. +These findings remain planned until reproduced and verified on current code. diff --git a/docs/visual-audit-followup-2026-10-18.md b/docs/visual-audit-followup-2026-10-18.md new file mode 100644 index 0000000..0b70149 --- /dev/null +++ b/docs/visual-audit-followup-2026-10-18.md @@ -0,0 +1,52 @@ +# Supplemental visual-audit follow-up + +The owner supplied **CartoLite UI/UX Audit, 17 October 2026** (15-page PDF) on +18 October. Its A01–A15 findings come from rendered Canada browser observations; +they are distinct from UI01–UI15 in the repository's source audit. They do not +establish backend/RF defects, clean-session defaults, hardware performance or +full accessibility conformance. Reproduce the relevant states against current +code with synthetic fixtures before marking a finding fixed. Do not commit the +live examples or captures as test data. + +## Current Terminal package + +Canada 0.18.0 / Worldwide 0.9.0 address the visual-hierarchy portion of A11: +geography is drawn separately from exact network strokes; colours, map brightness, +fonts and live treatment are adjustable; labels retain an opaque backing and +Large text support. The selected marker remains `@`, and stale markers can be +quieter without dimming their names. A visible Terminal status names the route +window or live-only/hidden state. This is not a claim that all A11 inspection, +naming and handoff work is finished. + +The owner's later screenshots explicitly choose independent Terminal defaults: +fine ANSI/BBS Braille, Spectacle, Complete, High, system motion, Standard and Neon; +15-minute routes with the requested layers. These take precedence over the PDF's +suggestion to share every preference. Map and Netgraph keep their saved settings. + +## Next focused packages + +1. **Keep the subject visible — A01, A02, A07a.** Measure the actual mobile + inspector, desktop summary/inspector rail and dock. Frame the selected node + inside the remaining canvas on selection or explicit recovery; preserve manual + panning. Add readable sheet states and a clear return to the map. Show complete + duration values at 320px and with Large text. Validate Map and Netgraph in both + editions; reuse the same framing for Terminal. +2. **Explain investigation scope — A03, A08, A15.** Keep selected identity across + views and announce the destination's time/filter scope. Offer an explicit + same-window action where appropriate, preserving Terminal's chosen defaults. + Verify timestamp and retained-count meanings before changing labels. Keep the + query during no-result recovery; distinguish quiet, filtered, paused and + disconnected states. +3. **Readable overview and primary selection — A04, A05.** Collision-safe region + names, stronger primary selection, quieter neighbours and a reachable node-type + key. Retain every eligible connection and honest drill-down. Any optional + aggregated summary must be labelled and reversible; never present representative + region-centre lines as confirmed RF links. +4. **Consistent controls and outreach — A06, A07b, A09–A14.** Align panel/trigger + names and reset scopes, make camera recovery and Follow scope easier to reach, + use consistent Terminal naming, and clarify Labs keys, pause, sound and scene + rotation. Labs remains Canada-only. Review each change with before/after scenes. + +Use the existing Actions suites and synthetic scenes at desktop, 390px, 320px, +short landscape and Large text. Preserve keyboard/Back behavior, opt-in sound, +reduced motion, frame/route budgets, privacy and exact-image release checks. diff --git a/scripts/write-terminal-page.mjs b/scripts/write-terminal-page.mjs index 65abc9c..b8158b3 100644 --- a/scripts/write-terminal-page.mjs +++ b/scripts/write-terminal-page.mjs @@ -1,12 +1,20 @@ -import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises'; +import { mkdir, readFile, writeFile, unlink, rmdir } from 'node:fs/promises'; // Reuse the Map document and its exact asset graph. A second bundled Map entry // would move MapLibre into shared chunks also downloaded by Netgraph. const html = await readFile('dist/index.html', 'utf8'); -const assets = (await readdir('dist/assets')).filter(name => /^terminal-.*\.(?:js|css)$/.test(name)); -if (assets.filter(name => name.endsWith('.js')).length !== 1 || assets.filter(name => name.endsWith('.css')).length !== 1) throw new Error('Terminal entry assets missing or ambiguous'); -const script = ``; -const style = ``; +const manifest = JSON.parse(await readFile('dist/.vite/manifest.json','utf8')); +const entry = manifest['src/terminal.ts']; +if(!entry?.isEntry || !/^assets\/[\w.-]+\.js$/.test(entry.file))throw new Error('Terminal entry missing from build manifest'); +const visited=new Set(), css=new Set(); +function collect(chunk) { + for(const id of chunk.imports??[]) { if(visited.has(id))continue;visited.add(id);if(!manifest[id])throw new Error('Missing Terminal import');collect(manifest[id]); } + for(const path of chunk.css??[]) {if(!/^assets\/[\w.-]+\.css$/.test(path))throw new Error('Invalid Terminal CSS');if(!html.includes(`href="/${path}"`))css.add(path);} +} +collect(entry); +if(!css.size)throw new Error('Terminal stylesheet missing'); +const script = ``; +const style = [...css].map(path=>``).join('\n'); const terminal = html.replace('', '') .replace('', `\n${script}`) .replace('', `${style}\n`) @@ -16,3 +24,6 @@ const terminal = html.replace('', '({...((element as HTMLElement).dataset)}))); throw error; } await expect(map).toHaveAttribute('data-rendered-route-segments', '7000'); + if(viewPath === '/terminal/') { + // First-view timing above exercises the new High/Neon/unclustered defaults. + // Stage the same off-to-on route and clustered-to-individual interactions + // below, preserving every existing count and performance assertion. + await openMapOptions(page);await page.locator('#routes-button').click();await page.locator('#clusters-button').click(); + await page.keyboard.press('Escape');await expect(map).toHaveAttribute('data-render-state','idle'); + } await installLongTaskObserver(page); const heatmapButton = page.locator('#heatmap-button'); diff --git a/web/e2e/terminal.spec.ts b/web/e2e/terminal.spec.ts index c673bb1..5c57415 100644 --- a/web/e2e/terminal.spec.ts +++ b/web/e2e/terminal.spec.ts @@ -2,6 +2,7 @@ import { expect, test, type Page } from '@playwright/test'; import { visualFixture, visualPacket } from './visualFixtures'; import { openMapOptions } from './mapControls'; import { openViewMenu } from './dockControls'; +import type { LiveMap } from '../src/map'; test('Terminal gives live packets a bounded glow while keeping labels and quiet modes clear', async ({page},info) => { test.slow(); @@ -184,7 +185,7 @@ test('unavailable Terminal graphics falls back without stopping the feed', async test('Map and Netgraph never download the optional Terminal renderer', async ({page}) => { const terminalAssets: string[] = []; - page.on('request', request => { if (/\/terminal-[^/]+\.(?:js|css)(?:\?|$)/.test(request.url())) terminalAssets.push(request.url()); }); + page.on('request', request => { if (/\/terminal-[^/]+\.(?:js|css)(?:\?|$)|\/fonts\/terminal\//.test(request.url())) terminalAssets.push(request.url()); }); await visualFixture(page); for (const path of ['/', '/netgraph/']) { await page.goto(path); @@ -193,6 +194,232 @@ test('Map and Netgraph never download the optional Terminal renderer', async ({p expect(terminalAssets).toEqual([]); }); +test('Terminal presets keep real routes above every drawing mode and load the selected fonts',async({page},info)=>{ + test.slow();await visualFixture(page,10.2,true);await page.goto('/terminal/'); + await expect(page.locator('#map')).toHaveAttribute('data-render-state','idle'); + const errors:string[]=[];page.on('pageerror',error=>errors.push(error.message)); + let sequence=0; + for(const [preset,mode,font] of [['ansi','0','mono'],['amber','0','mono'],['green','0','mono'],['cga','2','pixel'],['ega','1','vt323'],['cell','3','mono']]) { + await openMapOptions(page);await page.getByLabel('Terminal palette').selectOption(preset!); + await page.keyboard.press('Escape'); + await expect(page.locator('#map')).toHaveAttribute('data-terminal-drawing',mode!); + await expect(page.locator('html')).toHaveAttribute('data-terminal-font',font!); + await expect(page.locator('#map')).toHaveAttribute('data-eligible-routes','1'); + await expect(page.locator('.terminal-notice')).toBeHidden(); + await expect.poll(()=>page.evaluate(()=>document.fonts.status)).toBe('loaded'); + if(font==='pixel')expect(await page.evaluate(()=>document.fonts.check('16px Silkscreen'))).toBe(true); + if(font==='vt323')expect(await page.evaluate(()=>document.fonts.check('16px VT323'))).toBe(true); + await visualPacket(page,++sequence, 'Text'); + await page.screenshot({path:info.outputPath(`preset-${preset}.png`)}); + } + expect(errors).toEqual([]); +}); + +test('Terminal starts with the requested layers and Neon appearance without overwriting Map defaults',async({page},info)=>{ + test.slow();await visualFixture(page,10.2,true); + await page.addInitScript(()=>{ + if(sessionStorage.getItem('terminal-defaults-seeded'))return; + sessionStorage.setItem('terminal-defaults-seeded','true'); + for(const prefix of ['cartolite','cartolite-server']) { + localStorage.removeItem(`${prefix}:terminal-ui:v1`); + localStorage.setItem(`${prefix}:display:v1`,JSON.stringify({preset:'dotted',quality:'economy'})); + } + }); + await page.goto('/terminal/');await expect(page.locator('#map')).toHaveAttribute('data-render-state','idle'); + await openMapOptions(page); + for(const id of ['routes','live-packets','heatmap','node-labels','map-labels','roads','buildings'])await expect(page.locator(`#${id}-button`)).toHaveAttribute('aria-pressed','true'); + for(const id of ['clusters','regions','hillshade','terrain'])if(await page.locator(`#${id}-button`).count())await expect(page.locator(`#${id}-button`)).toHaveAttribute('aria-pressed','false'); + await expect(page.locator('#route-window')).toHaveValue('15m');await expect(page.locator('#terrain-relief')).toHaveValue('15'); + for(const [label,value] of [['Terminal palette','ansi'],['Terminal characters','braille'],['Terminal cell size','10'],['Effects intensity','spectacle'],['Detail level','complete'],['Graphics quality','high'],['Motion preference','system'],['Text size','standard'],['Route style','neon']])await expect(page.getByLabel(label!,{exact:true})).toHaveValue(value!); + await page.screenshot({path:info.outputPath('terminal-defaults.png')}); + await page.locator('#route-window').selectOption('1h');await page.getByLabel('Route style',{exact:true}).selectOption('dashed'); + await page.keyboard.press('Escape');await page.goto('/');await openMapOptions(page); + await expect(page.locator('#route-window')).toHaveValue('24h');await expect(page.getByLabel('Graphics quality')).toHaveValue('economy');await expect(page.getByLabel('Route style',{exact:true})).toHaveValue('dotted'); + await page.goto('/terminal/');await openMapOptions(page); + await expect(page.locator('#route-window')).toHaveValue('1h');await expect(page.getByLabel('Route style',{exact:true})).toHaveValue('dashed'); + await page.getByRole('button',{name:'Reset all display settings',exact:true}).click(); + await expect(page.locator('#route-window')).toHaveValue('15m');await expect(page.getByLabel('Route style',{exact:true})).toHaveValue('neon'); +}); + +test('Terminal colour and typography editor preserves other views, survives refresh and synchronizes tabs',async({page,context},info)=>{ + test.slow();await visualFixture(page,10.2,true); + await page.addInitScript(()=>{ + if(!localStorage.getItem('cartolite-terminal-v2'))localStorage.setItem('cartolite-terminal-v1',JSON.stringify({palette:'amber',glyphs:'ascii',size:16})); + }); + await page.goto('/terminal/?node=visual-a'); + await expect(page.locator('#map')).toHaveAttribute('data-selected-node-id','visual-a'); + await expect(page.locator('html')).toHaveAttribute('data-terminal-palette','amber'); + await page.keyboard.press('Escape'); + const saved=await page.evaluate(()=>Object.fromEntries(Object.entries(localStorage).filter(([key])=>!key.startsWith('cartolite-terminal')&&!key.includes(':view:')))); + await openMapOptions(page); + await page.getByText('Typography',{exact:true}).click(); + await expect(page.getByLabel('Terminal map font size')).toHaveValue('16'); + await page.getByLabel('Terminal map font',{exact:true}).selectOption('vt323'); + await page.getByLabel('Terminal interface font').selectOption('pixel'); + await page.getByLabel('Terminal map font size').fill('18'); + await page.getByLabel('Terminal interface scale').fill('1.35'); + await page.getByText('Element colours',{exact:true}).click(); + await page.getByLabel('Terminal colour element').selectOption('water'); + await page.getByLabel('Terminal hue',{exact:true}).focus();await page.keyboard.press('ArrowRight'); + await page.getByLabel('Terminal colour hex').fill('#403a77'); + await page.getByLabel('Terminal colour element').selectOption('ink'); + await page.getByLabel('Terminal colour hex').fill('#050b10'); + // Even a deliberately invisible custom UI must leave the recovery editor legible. + expect(await page.locator('.terminal-settings').evaluate(el=>getComputedStyle(el).color)).toBe('rgb(213, 230, 223)'); + await page.screenshot({path:info.outputPath('terminal-editor.png')}); + const panel=(await page.locator('#layers-panel').boundingBox())!; + expect(panel.x).toBeGreaterThanOrEqual(0);expect(panel.x+panel.width).toBeLessThanOrEqual(page.viewportSize()!.width+1); + expect(await page.locator('.terminal-settings').evaluate(el=>el.scrollWidth<=el.clientWidth+1)).toBe(true); + await page.keyboard.press('Escape');await page.reload(); + await expect(page.locator('html')).toHaveAttribute('data-terminal-font','vt323'); + await expect.poll(()=>page.evaluate(()=>getComputedStyle(document.documentElement).getPropertyValue('--terminal-water').trim())).toBe('#403a77'); + expect(await page.evaluate(()=>Object.fromEntries(Object.entries(localStorage).filter(([key])=>!key.startsWith('cartolite-terminal')&&!key.includes(':view:'))))).toEqual(saved); + const other=await context.newPage();await visualFixture(other,10.2,true);await other.goto('/terminal/'); + await expect(other.locator('html')).toHaveAttribute('data-terminal-font','vt323'); + await openMapOptions(page);await page.getByRole('button',{name:'Reset Terminal display',exact:true}).click(); + await expect(other.locator('html')).toHaveAttribute('data-terminal-palette','ansi'); + await expect(other.locator('html')).toHaveAttribute('data-terminal-font','mono'); + await other.close(); +}); + +test('Terminal custom traffic ink stays visible over geography without restarting packets or camera',async({page},info)=>{ + test.slow();await visualFixture(page,10.2,true); + await page.addInitScript(()=>window.addEventListener('cartolite-map-ready',event=>Object.assign(window,{terminalHarness:(event as CustomEvent).detail}),{once:true})); + await page.goto('/terminal/');await expect(page.locator('#map')).toHaveAttribute('data-render-state','idle'); + await openMapOptions(page);await page.getByText('Element colours',{exact:true}).click(); + await page.getByLabel('Terminal colour element').selectOption('text');await page.getByLabel('Terminal colour hex').fill('#67ff23'); + await page.getByLabel('Terminal colour element').selectOption('water');await page.getByLabel('Terminal colour hex').fill('#5b183a'); + await page.getByLabel('Terminal colour element').selectOption('roads');await page.getByLabel('Terminal colour hex').fill('#ff3600'); + await page.keyboard.press('Escape'); + await expect.poll(()=>greenRoutePixels(page)).toBeGreaterThan(20); + await expect.poll(async()=>{ + const screenshot=await page.screenshot(); + return page.evaluate(async image=>{ + const img=new Image();img.src='data:image/png;base64,'+image;await img.decode(); + const canvas=document.createElement('canvas');canvas.width=img.width;canvas.height=img.height; + const ctx=canvas.getContext('2d')!;ctx.drawImage(img,0,0); + const pixels=ctx.getImageData(0,0,img.width,img.height).data;let roads=0; + for(let i=0;i110&&pixels[i+1]!<70&&pixels[i+2]!<40)roads++; + return roads; + },screenshot.toString('base64')); + }).toBeGreaterThan(30); + const order=await page.evaluate(()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + const ids=view.map.getLayersOrder();return [ids.indexOf('terminal-graphics'),ids.indexOf('route-exact-webgl')]; + });expect(order[0]).toBeLessThan(order[1]!); + await page.screenshot({path:info.outputPath('terminal-custom-ink.png')}); + await openMapOptions(page);await page.locator('#routes-button').click();await page.keyboard.press('Escape'); + await expect(page.locator('#map')).toHaveAttribute('data-routes-visible','false'); + await expect(page.locator('#map')).toHaveAttribute('data-render-state','idle'); + try { await expect.poll(()=>greenRoutePixels(page)).toBeLessThan(10); } + catch(error) { + const diagnostic=await page.evaluate(async()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + const map=view.map,gl=map.getCanvas().getContext('webgl2')!; + const before={...map.getContainer().dataset}; + const layers=map.getLayersOrder().filter(id=>id.startsWith('route')).map(id=>({id,visibility:map.getLayoutProperty(id,'visibility')})); + const gpuError=gl.getError(); + await new Promise(resolve=>{map.once('render',()=>{map.once('render',()=>resolve());map.triggerRepaint();});map.triggerRepaint();}); + return {before,after:{...map.getContainer().dataset},layers,gpuError}; + }); + await info.attach('hidden-route-diagnostic',{body:JSON.stringify({...diagnostic,pixelsAfterTwoFrames:await greenRoutePixels(page)}),contentType:'application/json'}); + await page.screenshot({path:info.outputPath('hidden-route-after-two-frames.png')}); + throw error; + } + await visualPacket(page,1,'Text'); + const continuity=await page.evaluate(()=>{ + const {view,animator}=(window as unknown as {terminalHarness:{view:LiveMap;animator:{activeRoutes:{started:number;duration:number}[]}}}).terminalHarness; + const before=animator.activeRoutes.map(route=>[route.started,route.duration]);const camera=[view.map.getCenter().toArray(),view.map.getZoom(),view.map.getPitch()]; + const input=document.querySelector('[data-terminal="mapBrightness"]')!; + input.value='.3';input.dispatchEvent(new Event('input',{bubbles:true})); + return {before,after:animator.activeRoutes.map(route=>[route.started,route.duration]),camera,afterCamera:[view.map.getCenter().toArray(),view.map.getZoom(),view.map.getPitch()]}; + }); + expect(continuity.before.length).toBe(1);expect(continuity.after).toEqual(continuity.before);expect(continuity.afterCamera).toEqual(continuity.camera); + await expect.poll(async()=>Number(await page.locator('#terminal-packets').getAttribute('data-cells'))).toBeGreaterThan(0); + await page.screenshot({path:info.outputPath('terminal-custom-live.png')}); +}); + +test('Terminal cel-shaded 3D retains its profile and routes through graphics-context recovery',async({page},info)=>{ + test.skip(info.project.name!=='desktop','Actual context-loss injection is exercised on desktop Chromium; fallback/retry runs on every browser.'); + test.slow();await visualFixture(page,14,true); + const errors:string[]=[];page.on('pageerror',error=>errors.push(error.message)); + const warnings:string[]=[];page.on('console',message=>{if(['warning','error'].includes(message.type()))warnings.push(message.text());}); + await page.addInitScript(()=>window.addEventListener('cartolite-map-ready',event=>Object.assign(window,{terminalHarness:(event as CustomEvent).detail}),{once:true})); + await page.goto('/terminal/');await expect(page.locator('#map')).toHaveAttribute('data-render-state','idle'); + await openMapOptions(page);await page.getByLabel('Terminal palette').selectOption('cell');await page.keyboard.press('Escape'); + await page.locator('#terrain-shortcut').click(); + await expect(page.locator('#map')).toHaveAttribute('data-terrain3d','true'); + await expect(page.locator('#map')).toHaveAttribute('data-camera-moving','false'); + await page.evaluate(()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + view.map.jumpTo({bearing:25}); + }); + await terminalMapIdle(page); + const before=await page.screenshot({path:info.outputPath('terminal-3d-before-recovery.png')}); + await page.evaluate(()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + const gl=view.map.getCanvas().getContext('webgl2')!,extension=gl.getExtension('WEBGL_lose_context'); + if(!extension)throw Error('Context-loss fixture unavailable'); + extension.loseContext();setTimeout(()=>extension.restoreContext(),120); + }); + await expect(page.locator('#map')).toHaveAttribute('data-route-context-restores','1'); + await expect(page.locator('#map')).toHaveAttribute('data-terminal-drawing','3'); + await expect(page.locator('html')).toHaveAttribute('data-terminal-palette','cell'); + await expect(page.locator('.terminal-notice')).toBeHidden(); + await expect.poll(()=>page.evaluate(()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + const ids=view.map.getLayersOrder();return ids.indexOf('terminal-graphics')message.includes('INVALID_OPERATION'))).toEqual([]); + const difference=await page.evaluate(async images=>{ + const samples:Uint8ClampedArray[]=[]; + for(const image of images){ + const img=new Image();img.src='data:image/png;base64,'+image;await img.decode(); + const canvas=document.createElement('canvas');canvas.width=img.width;canvas.height=img.height; + const ctx=canvas.getContext('2d')!;ctx.drawImage(img,0,0); + samples.push(ctx.getImageData(0,0,img.width,img.height).data); + } + let total=0,count=0; + // Same stationary scene: ignore alpha and sample sparsely, allowing small + // label/antialias differences while rejecting a broken terrain framebuffer. + for(let i=0;i{ + await page.evaluate(async()=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + if(!view.map.loaded())await new Promise(resolve=>view.map.once('idle',()=>resolve())); + }); +} + +async function greenRoutePixels(page: Page):Promise { + const png=await page.screenshot(); + return page.evaluate(async base64=>{ + const {view}=(window as unknown as {terminalHarness:{view:LiveMap}}).terminalHarness; + const a=view.map.project([-80.35,43.45]),b=view.map.project([-80.23,43.51]); + const image=new Image();image.src='data:image/png;base64,'+base64;await image.decode(); + const canvas=document.createElement('canvas');canvas.width=image.width;canvas.height=image.height; + const ctx=canvas.getContext('2d')!;ctx.drawImage(image,0,0); + const pixels=ctx.getImageData(0,0,image.width,image.height).data; + const dx=b.x-a.x,dy=b.y-a.y,length=dx*dx+dy*dy,sx=image.width/innerWidth,sy=image.height/innerHeight; + // Sample the middle of the actual route. Endpoint labels may contain green + // emoji and must not be counted as retained network ink. + let count=0;for(let y=0;y.75||(px-t*dx)**2+(py-t*dy)**2>36)continue; + const i=(y*image.width+x)*4;if(pixels[i]!<140&&pixels[i+1]!>140&&pixels[i+2]!<100)count++; + }return count; + },png.toString('base64')); +} + // Inspect actual pixels, not a renderer's own readiness flag. Only the ANSI // character water has this bright blue in the synthetic scene's centre. async function blueGlyphPixels(page: Page): Promise { diff --git a/web/e2e/terrain-scale.spec.ts b/web/e2e/terrain-scale.spec.ts index 1dd5714..fcf383c 100644 --- a/web/e2e/terrain-scale.spec.ts +++ b/web/e2e/terrain-scale.spec.ts @@ -5,7 +5,7 @@ import type { NodeV2, RouteV2, StateV2 } from '../src/types'; test.use({ trace: 'off', screenshot: 'off' }); -test('keeps close 3D inspection responsive with 7000 retained routes', async ({ page }, info) => { +test('@terrain keeps close 3D inspection responsive with 7000 retained routes', async ({ page }, info) => { test.skip(info.project.name !== 'desktop', 'desktop terrain scale gate'); await visualFixture(page, 15); const now = Date.now(); @@ -43,7 +43,7 @@ test('keeps close 3D inspection responsive with 7000 retained routes', async ({ await page.screenshot({ path: info.outputPath('terrain-scale-close.png') }); }); -test('keeps controls responsive while preparing a dense 7000-route terrain mesh', async ({ page }, info) => { +test('@terrain keeps controls responsive while preparing a dense 7000-route terrain mesh', async ({ page }, info) => { test.skip(info.project.name !== 'desktop', 'desktop dense terrain gate'); await visualFixture(page, 13); const now = Date.now(); diff --git a/web/e2e/ui-audit.spec.ts b/web/e2e/ui-audit.spec.ts index 9cd56cd..8fee779 100644 --- a/web/e2e/ui-audit.spec.ts +++ b/web/e2e/ui-audit.spec.ts @@ -195,9 +195,10 @@ test.describe('UI audit controls', () => { await page.goto('/terminal/'); await expect(page.locator('#terminal-map')).toBeVisible(); await openDisplay(page); await expect(page.locator('#basemap-style')).toBeHidden(); await expect(page.locator('#interface-theme')).toBeHidden(); - for (const [palette, colour] of [['ansi', 'rgb(121, 248, 196)'], ['green', 'rgb(141, 255, 176)'], ['amber', 'rgb(255, 209, 138)']]) { + for (const [palette, colour] of [['ansi', 'rgb(114, 255, 207)'], ['green', 'rgb(141, 255, 176)'], ['amber', 'rgb(255, 209, 138)']]) { await page.getByLabel('Terminal palette').selectOption(palette!); - await expect(page.locator('.terminal-settings legend')).toHaveCSS('color', colour!); + // The recovery editor keeps fixed readable colours; the route preview follows traffic ink. + await expect(page.locator('.terminal-settings legend')).toHaveCSS('color', 'rgb(121, 248, 196)'); await expect(page.locator('.route-preview')).toHaveCSS('color', colour!); await expect(page.locator('.route-preview')).toHaveCSS('background-color', 'rgb(0, 0, 0)'); } diff --git a/web/e2e/visualFixtures.ts b/web/e2e/visualFixtures.ts index 94b5631..f6c17b6 100644 --- a/web/e2e/visualFixtures.ts +++ b/web/e2e/visualFixtures.ts @@ -24,7 +24,7 @@ export async function visualFixture(page: Page, zoom = 10.2, detail = false): Pr await page.route('**/api/config', (route) => route.fulfill({ json: { schemaVersion: 1, basemap: { provider: 'openfreemap' } } })); await page.addInitScript(({ center, zoom, detail }) => { const ui = { routes: true, heatmap: false, clusters: false, hillshade: false, terrain3D: false, buildings: false, mapLabels: detail, nodeLabels: detail, livePackets: true, routeWindow: '24h' }; - for (const key of ['cartolite:ui:v1', 'cartolite-server:ui:v1']) if (!localStorage.getItem(key)) localStorage.setItem(key, JSON.stringify(ui)); + for (const key of ['cartolite:ui:v1', 'cartolite-server:ui:v1','cartolite:terminal-ui:v1','cartolite-server:terminal-ui:v1']) if (!localStorage.getItem(key)) localStorage.setItem(key, JSON.stringify(ui)); for (const prefix of ['cartolite:view:v3', 'cartolite-server:view:v1']) for (const kind of ['desktop', 'mobile']) { if (!localStorage.getItem(`${prefix}:${kind}`)) localStorage.setItem(`${prefix}:${kind}`, JSON.stringify({ center, zoom })); } diff --git a/web/package-lock.json b/web/package-lock.json index 61b408c..398f972 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1,12 +1,12 @@ { "name": "cartolite-server-web", - "version": "0.8.5", + "version": "0.9.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cartolite-server-web", - "version": "0.8.5", + "version": "0.9.0", "dependencies": { "maplibre-gl": "6.4.1" }, diff --git a/web/package.json b/web/package.json index cd1ed7f..9513c44 100644 --- a/web/package.json +++ b/web/package.json @@ -1,6 +1,6 @@ { "name": "cartolite-server-web", - "version": "0.8.5", + "version": "0.9.0", "private": true, "type": "module", "scripts": { diff --git a/web/public/fonts/terminal/README.txt b/web/public/fonts/terminal/README.txt new file mode 100644 index 0000000..6544e44 --- /dev/null +++ b/web/public/fonts/terminal/README.txt @@ -0,0 +1,10 @@ +CartoLite Terminal fonts + +VT323 - Copyright 2011 The VT323 Project Authors (peter.hull@oikoi.com). +Silkscreen - Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen). + +Unmodified fonts under SIL Open Font License 1.1, bundled with their complete licences: +vt323-OFL.txt and silkscreen-OFL.txt in this directory. +Source: https://github.com/google/fonts/tree/47d54ca1ebb14fd864695f1d39dc734f39017c33/ofl +Only Terminal requests these fonts. No remote font service or tracking is used. +System mono and Typewriter use installed browser fonts with a monospace fallback. diff --git a/web/public/fonts/terminal/Silkscreen-Bold.ttf b/web/public/fonts/terminal/Silkscreen-Bold.ttf new file mode 100644 index 0000000..6771252 Binary files /dev/null and b/web/public/fonts/terminal/Silkscreen-Bold.ttf differ diff --git a/web/public/fonts/terminal/Silkscreen-Regular.ttf b/web/public/fonts/terminal/Silkscreen-Regular.ttf new file mode 100644 index 0000000..8caff81 Binary files /dev/null and b/web/public/fonts/terminal/Silkscreen-Regular.ttf differ diff --git a/web/public/fonts/terminal/VT323-Regular.ttf b/web/public/fonts/terminal/VT323-Regular.ttf new file mode 100644 index 0000000..afa6909 Binary files /dev/null and b/web/public/fonts/terminal/VT323-Regular.ttf differ diff --git a/web/public/fonts/terminal/silkscreen-OFL.txt b/web/public/fonts/terminal/silkscreen-OFL.txt new file mode 100644 index 0000000..d26b0ed --- /dev/null +++ b/web/public/fonts/terminal/silkscreen-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/web/public/fonts/terminal/vt323-OFL.txt b/web/public/fonts/terminal/vt323-OFL.txt new file mode 100644 index 0000000..bcb092f --- /dev/null +++ b/web/public/fonts/terminal/vt323-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2011, The VT323 Project Authors (peter.hull@oikoi.com) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/web/src/displayControls.ts b/web/src/displayControls.ts index 466809c..62d43dd 100644 --- a/web/src/displayControls.ts +++ b/web/src/displayControls.ts @@ -1,4 +1,5 @@ import './display.css'; +import { TERMINAL_PAGE } from './preferences'; import './cinematic.css'; import { DEFAULT_DISPLAY, DISPLAY_EVENT, ROUTE_PRESETS, displayPreferences, initializeDisplay, updateDisplay, type DisplayPreferences } from './displayPreferences'; @@ -25,7 +26,7 @@ export function mountDisplayControls(parent: HTMLElement, surface: 'map' | 'netg ] as const).map(([key, label, min, max, step, unit]) => ``).join('')} ` : '

'} -

${surface === 'labs' ? 'Effects, motion, graphics, text and interface settings are shared. Each experiment keeps its own artistic setting; route styling stays in Map, Netgraph and Terminal.' : 'Shared across Map, Netgraph and Terminal in this browser. Route styling changes appearance, not connections or packet timing.'}

`; +

${surface === 'labs' ? 'Effects, motion, graphics, text and interface settings are shared. Each experiment keeps its own artistic setting; route styling stays in Map, Netgraph and Terminal.' : (TERMINAL_PAGE ? 'Terminal saves its own display settings. Map and Netgraph keep their choices. Styling never changes connections or packet timing.' : 'Shared across Map and Netgraph in this browser. Terminal saves its own display settings. Styling never changes connections or packet timing.')}

`; const oldOpacity = parent.querySelector('#route-opacity'); const oldOpacityLabel = oldOpacity?.closest('label'); const duplicateOpacity = section.querySelector('[data-display="opacity"]')?.closest('label'); @@ -61,7 +62,7 @@ export function mountDisplayControls(parent: HTMLElement, surface: 'map' | 'netg if (input.value !== 'custom') updateDisplay({ preset: input.value as DisplayPreferences['preset'], ...ROUTE_PRESETS[input.value as keyof typeof ROUTE_PRESETS] }); } else updateDisplay({ [key]: input.value, ...(key === 'pattern' ? { preset: 'custom' as const } : {}) }); }); - section.querySelector('.display-reset')?.addEventListener('click', () => updateDisplay({ preset: DEFAULT_DISPLAY.preset, ...ROUTE_PRESETS.crisp })); + section.querySelector('.display-reset')?.addEventListener('click', () => updateDisplay({ preset: DEFAULT_DISPLAY.preset, ...ROUTE_PRESETS[DEFAULT_DISPLAY.preset === 'neon' ? 'neon' : 'crisp'] })); window.addEventListener(DISPLAY_EVENT, sync); sync(); } diff --git a/web/src/displayPreferences.ts b/web/src/displayPreferences.ts index 8b11110..8801728 100644 --- a/web/src/displayPreferences.ts +++ b/web/src/displayPreferences.ts @@ -1,4 +1,4 @@ -import { UI_STORAGE_KEY, type BasemapStyle, type InterfaceTheme } from './preferences'; +import { TERMINAL_PAGE, UI_STORAGE_KEY, type BasemapStyle, type InterfaceTheme } from './preferences'; import { PACKET_KIND_COLORS as DARK_KINDS } from './trafficVisuals'; export type LinePattern = 'solid' | 'dashed' | 'dotted'; @@ -21,7 +21,7 @@ export interface DisplayPreferences { residueSeconds: number; } -export const DISPLAY_STORAGE_KEY = UI_STORAGE_KEY.replace(':ui:', ':display:'); +export const DISPLAY_STORAGE_KEY = UI_STORAGE_KEY.replace(':ui:', ':display:').replace(':terminal-ui:', ':terminal-display:'); export const DISPLAY_EVENT = 'cartolite:display-change'; export const ROUTE_PRESETS = { crisp: { pattern: 'solid', width: 1.6, opacity: 0.8, glow: 0.15, packetSize: 1, trailLength: 1, residueSeconds: 15 }, @@ -31,7 +31,7 @@ export const ROUTE_PRESETS = { ribbon: { pattern: 'solid', width: 3.5, opacity: 0.75, glow: 0.1, packetSize: 1.35, trailLength: 1, residueSeconds: 12 }, comet: { pattern: 'solid', width: 1.4, opacity: 0.8, glow: 0.5, packetSize: 1.4, trailLength: 2, residueSeconds: 30 }, } as const; -export const DEFAULT_DISPLAY: DisplayPreferences = { effects: 'spectacle', detail: 'auto', quality: 'auto', motion: 'system', textSize: 'standard', basemap: 'dark', theme: 'map', preset: 'crisp', ...ROUTE_PRESETS.crisp }; +export const DEFAULT_DISPLAY: DisplayPreferences = { effects: 'spectacle', detail: TERMINAL_PAGE ? 'complete' : 'auto', quality: TERMINAL_PAGE ? 'high' : 'auto', motion: 'system', textSize: 'standard', basemap: 'dark', theme: 'map', preset: TERMINAL_PAGE ? 'neon' : 'crisp', ...(TERMINAL_PAGE ? ROUTE_PRESETS.neon : ROUTE_PRESETS.crisp) }; const LIGHT_KINDS = { Advert: '#006957', Trace: '#855000', Text: '#a21b58', ACK: '#075b98', Control: '#6740a0', Other: '#445760' }; const LIGHT_COLORS: Record = { @@ -51,16 +51,29 @@ const LIGHT_COLORS: Record = { let current: DisplayPreferences = { ...DEFAULT_DISPLAY }; let initialized = false; +// Optional per-view colour presentation. Terminal installs this after its lazy +// entry loads; shared preferences and other pages never import its renderer. +let viewColors: Record = {}; +let viewLightColors: Record = LIGHT_COLORS; +let hasViewColors = false; +let colorRevision = 0; +export function displayColorRevision(): number { return colorRevision; } +export function setDisplayColors(colors: Record = {}): void { + const safe = Object.fromEntries(Object.entries(colors).filter(([from,to]) => /^#[0-9a-f]{6}$/i.test(from) && /^#[0-9a-f]{6}$/i.test(to)).map(([from,to])=>[from.toLowerCase(),to.toLowerCase()])); + if(JSON.stringify(safe)===JSON.stringify(viewColors))return; + viewColors=safe; hasViewColors=Object.keys(safe).length>0; viewLightColors={...LIGHT_COLORS,...safe}; colorRevision++; +} export function displayPreferences(): Readonly { return current; } export function lightScene(): boolean { return !document.documentElement.hasAttribute('data-terminal') && current.basemap !== 'dark'; } export function displayColor(color: string, light = lightScene()): string { - if (!light) return color; - const direct = LIGHT_COLORS[color.toLowerCase()]; + if(!light && !hasViewColors)return color; + const colors = light ? viewLightColors : viewColors; + const direct = colors[color.toLowerCase()]; if (direct) return direct; const rgba = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i.exec(color); if (!rgba) return color; const hex = '#' + rgba.slice(1, 4).map((channel) => Number(channel).toString(16).padStart(2, '0')).join(''); - const mapped = LIGHT_COLORS[hex]; + const mapped = colors[hex]; if (!mapped) return color; const value = Number.parseInt(mapped.slice(1), 16); return `rgba(${(value >> 16) & 255}, ${(value >> 8) & 255}, ${value & 255}, ${rgba[4] ?? 1})`; @@ -68,12 +81,16 @@ export function displayColor(color: string, light = lightScene()): string { export function recolorPaint(value: unknown, light: boolean): unknown { if (typeof value === 'string') return displayColor(value, light); if (!Array.isArray(value)) return value; - if (light && value[0] === 'get' && typeof value[1] === 'string' && /^color(?:\d|$)/.test(value[1])) { - return ['match', value, ...Object.entries(LIGHT_COLORS).flat(), value]; + const colors = light ? viewLightColors : viewColors; + if ((light || hasViewColors) && value[0] === 'get' && typeof value[1] === 'string' && /^color(?:\d|$)/.test(value[1])) { + return ['match', value, ...Object.entries(colors).flat(), value]; } return value.map((item) => recolorPaint(item, light)); } -export function packetPalette(light = lightScene()): typeof DARK_KINDS { return light ? LIGHT_KINDS : DARK_KINDS; } +export function packetPalette(light = lightScene()): typeof DARK_KINDS { + if(!hasViewColors)return light ? LIGHT_KINDS : DARK_KINDS; + return Object.fromEntries(Object.entries(DARK_KINDS).map(([kind,color])=>[kind,displayColor(color,light)])) as typeof DARK_KINDS; +} export function canvasColorWithAlpha(color: string, alpha: number): string { const resolved = displayColor(color); const value = Number.parseInt(resolved.startsWith('#') ? resolved.slice(1) : 'ffffff', 16); @@ -93,13 +110,13 @@ export function normalizeDisplay(value: unknown): DisplayPreferences { }; return { effects: v.effects === 'calm' || v.effects === 'minimal' ? v.effects : 'spectacle', - detail: v.detail === 'complete' ? 'complete' : 'auto', - quality: v.quality === 'high' || v.quality === 'economy' ? v.quality : 'auto', - motion: v.motion === 'full' || v.motion === 'reduced' ? v.motion : 'system', + detail: v.detail === 'complete' || v.detail === 'auto' ? v.detail : DEFAULT_DISPLAY.detail, + quality: v.quality === 'high' || v.quality === 'economy' || v.quality === 'auto' ? v.quality : DEFAULT_DISPLAY.quality, + motion: v.motion === 'full' || v.motion === 'reduced' || v.motion === 'system' ? v.motion : DEFAULT_DISPLAY.motion, textSize: v.textSize === 'large' ? 'large' : 'standard', basemap: v.basemap === 'light' || v.basemap === 'streets' ? v.basemap : 'dark', theme: v.theme === 'light' || v.theme === 'dark' ? v.theme : 'map', - preset: v.preset === 'custom' || (typeof v.preset === 'string' && Object.hasOwn(ROUTE_PRESETS, v.preset)) ? v.preset as RoutePreset : 'crisp', + preset: v.preset === 'custom' || (typeof v.preset === 'string' && Object.hasOwn(ROUTE_PRESETS, v.preset)) ? v.preset as RoutePreset : DEFAULT_DISPLAY.preset, pattern: v.pattern === 'dashed' || v.pattern === 'dotted' ? v.pattern : 'solid', width: amount('width', 1, 5), opacity: amount('opacity', 0.2, 1), glow: amount('glow', 0, 1), packetSize: amount('packetSize', 0.75, 2), trailLength: amount('trailLength', 0.5, 2), residueSeconds: amount('residueSeconds', 0, 45), diff --git a/web/src/main.ts b/web/src/main.ts index 7874a87..bea1c9c 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -311,16 +311,16 @@ async function start(): Promise { const button = document.getElementById(id); if (button && uiPreferences[key] !== DEFAULT_UI_PREFERENCES[key]) button.click(); } - persistUiPreference({ relief: DEFAULT_UI_PREFERENCES.relief, routeWindow: 'auto' }); - routeWindow.value = 'auto'; - liveMap.setRouteWindow('auto'); + persistUiPreference({ relief: DEFAULT_UI_PREFERENCES.relief, routeWindow: DEFAULT_UI_PREFERENCES.routeWindow }); + routeWindow.value = DEFAULT_UI_PREFERENCES.routeWindow; + liveMap.setRouteWindow(DEFAULT_UI_PREFERENCES.routeWindow); applyAppearance(); }; required('reset-layers').addEventListener('click', resetLayers); required('reset-appearance').addEventListener('click', () => { resetLayers(); if (legendExpanded) legendToggle.click(); - persistUiPreference({ basemap: 'dark', theme: 'map', routeOpacity: 0.8, terrainExaggeration: 1, terrainPitch: 50, terrainBearing: 0 }); + persistUiPreference({ basemap: 'dark', theme: 'map', routeOpacity: DEFAULT_UI_PREFERENCES.routeOpacity, terrainExaggeration: 1, terrainPitch: 50, terrainBearing: 0 }); updateDisplay({ ...DEFAULT_DISPLAY }); applyAppearance(); }); diff --git a/web/src/map.ts b/web/src/map.ts index 028b700..3b1c601 100644 --- a/web/src/map.ts +++ b/web/src/map.ts @@ -281,7 +281,13 @@ export class LiveMap { const creditSize = new ResizeObserver(() => document.documentElement.style.setProperty('--map-credits-height', `${credits.offsetHeight}px`)); creditSize.observe(credits); this.map.once('remove', () => creditSize.disconnect()); - this.map.on('load', () => this.#installLayers()); + // Evented runs on listeners before once listeners. Keep initial indexing + // ahead of load consumers (Find), then unregister before graphics recovery. + const installInitialLayers = (): void => { + this.map.off('load', installInitialLayers); + this.#installLayers(); + }; + this.map.on('load', installInitialLayers); this.map.on('movestart', () => { this.container.dataset.cameraMoving = 'true'; }); this.map.on('sourcedata', (event) => { if (this.#buildingSourceID && event.sourceId === this.#buildingSourceID) { @@ -300,6 +306,8 @@ export class LiveMap { this.map.on('zoom', this.#updateRouteRepresentation); this.map.on('zoomend', this.#handleZoomEnd); this.map.on('resize', this.#handleInspectorResize); + this.map.getCanvas().addEventListener('webglcontextlost', this.#prepareWebGLContextLoss, true); + this.map.on('webglcontextlost', this.#handleWebGLContextLost); this.map.on('webglcontextrestored', this.#handleWebGLContextRestored); document.addEventListener('keydown', this.#handleKeyDown); this.#freshnessTimer = window.setInterval(() => this.#refreshRouteClock(), 60_000); @@ -936,6 +944,8 @@ export class LiveMap { this.map.off('zoom', this.#updateRouteRepresentation); this.map.off('zoomend', this.#handleZoomEnd); this.map.off('resize', this.#handleInspectorResize); + this.map.getCanvas().removeEventListener('webglcontextlost', this.#prepareWebGLContextLoss, true); + this.map.off('webglcontextlost', this.#handleWebGLContextLost); this.map.off('webglcontextrestored', this.#handleWebGLContextRestored); this.map.remove(); } @@ -1816,17 +1826,41 @@ export class LiveMap { } #handleInspectorResize = (): void => { + if(!this.#layersReady)return; this.#updateBuildingLayer(); if (this.#selectedNodeID) this.#renderNodeInspector(true); }; + #prepareWebGLContextLoss = (): void => { + // Release terrain's tile textures into the OLD painter before MapLibre + // replaces it. Otherwise its terrain teardown recycles invalid GPU handles + // into the restored painter. Keep our 3D preference and camera unchanged. + if (this.map.getTerrain()) this.map.setTerrain(null); + }; + + #handleWebGLContextLost = (): void => { + // MapLibre discards its stylesheet during context loss. Resize/data events + // can run before the replacement stylesheet exists; retain state, not writes. + this.#layersReady=false; + this.#routeHydrationEpoch++; + this.#routeHydrating=false; + if(this.#routeHydrationTimer!==undefined)window.clearTimeout(this.#routeHydrationTimer); + this.#routeHydrationTimer=undefined; + this.renderEpoch++;this.renderingScheduled=false;this.renderingSources.clear(); + this.container.dataset.graphicsRecovering='true'; + }; + #handleWebGLContextRestored = (): void => { const restore = (): void => { - if (!this.#layersReady) return; - if (!this.map.isStyleLoaded()) { + // Restored terrain tiles may still be loading, without another style.load + // event. Layer presence establishes the stylesheet, not global tile idle. + if (!this.map.getLayer(ROUTE_FOCUS_LAYER_IDS[0])) { + // Loss before first load is completed by the ordinary initial installer. + if(this.map.getLayer('basemap-water')&&!this.map.getSource(NODE_SOURCE_ID))return; this.map.once('style.load', restore); return; } + this.#layersReady=true; if (this.map.getLayer(ROUTE_WEBGL_LAYER_ID)) this.map.removeLayer(ROUTE_WEBGL_LAYER_ID); const layer = new HistoricalRouteLayer(); layer.setOpacity(this.#appearance.routeOpacity); @@ -1837,6 +1871,14 @@ export class LiveMap { this.#historicalRouteLayer = layer; const before = this.map.getLayer(ROUTE_FOCUS_LAYER_IDS[0]) ? ROUTE_FOCUS_LAYER_IDS[0] : undefined; this.map.addLayer(layer, before); + this.setAppearance(this.#appearance,true); + if (this.#terrain3D) { + this.#ensureTerrainLayers(); + this.map.setTerrain({ source: TERRAIN_SOURCE_ID, exaggeration: this.#appearance.terrainExaggeration }); + } + this.render(this.#lastState,{reset:true},true); + this.showFollowPacket(this.#followedPacket); + this.container.dataset.graphicsRecovering='false'; this.container.dataset.routeContextRestores = String(Number(this.container.dataset.routeContextRestores ?? 0) + 1); }; window.requestAnimationFrame(restore); diff --git a/web/src/packetAnimator.ts b/web/src/packetAnimator.ts index 706e082..7aafeae 100644 --- a/web/src/packetAnimator.ts +++ b/web/src/packetAnimator.ts @@ -305,6 +305,7 @@ export class PacketAnimator { #residueCacheUpdatedAt = Number.NEGATIVE_INFINITY; #dpr = 1; #scheduledWakeCount = 0; + #presentationGlow = 1; #frameSink?: (canvas?: HTMLCanvasElement) => void; #appliedQuality?: VisualQuality; @@ -384,7 +385,10 @@ export class PacketAnimator { this.#requestFrame(); } - /** Optional presentation sink; never owns packet progression or audio. */ + /** Presentation only; never changes packet progression or audio. */ + setPresentationGlow(scale: number): void { this.#presentationGlow = Math.max(0, Math.min(2, Number.isFinite(scale) ? scale : 1)); this.#residueContentDirty = true; this.#requestFrame(); } + #glow(): number { return Math.min(1,displayPreferences().glow * this.#presentationGlow); } + setFrameSink(sink?: (canvas?: HTMLCanvasElement) => void): void { this.#frameSink = sink; } setPaused(paused: boolean): void { @@ -608,7 +612,7 @@ export class PacketAnimator { const coreWidth = this.#reducedMotion ? 1.8 : style.coreWidth; const coreColor = this.#reducedMotion ? item.color : blendWithWhite(item.color, style.hot * 0.16); traceSurfacePath(context, this.projection.projectSegment(item.segment)); - context.strokeStyle = withAlpha(item.color, Math.min(0.7, bloomOpacity * rangeBoost * detail) * displayPreferences().glow); + context.strokeStyle = withAlpha(item.color, Math.min(0.7, bloomOpacity * rangeBoost * detail) * this.#glow()); context.lineWidth = bloomWidth * rangeBoost * detail; context.stroke(); context.setLineDash(lineDash()); @@ -755,7 +759,7 @@ export class PacketAnimator { const width = quality === 'full' ? 7.2 : quality === 'balanced' ? 5.8 : 3.8; this.#context.lineWidth = width * (longHaul ? 1.42 : 1) * (trail.head.scale ?? 1); traceSurfacePath(this.#context, trail.points ?? [trail.tail, trail.head]); - this.#context.globalAlpha = displayPreferences().glow * effectStrength(); + this.#context.globalAlpha = this.#glow() * effectStrength(); this.#context.stroke(); this.#context.globalAlpha = 1; const core = this.#context.createLinearGradient(trail.tail.x, trail.tail.y, trail.head.x, trail.head.y); @@ -818,7 +822,7 @@ export class PacketAnimator { } #drawStaticSegment(points: readonly ScreenPoint[], color: string, opacity: number, _signature: PacketSignature): void { - this.#context.strokeStyle = withAlpha(color, opacity * 0.2 * displayPreferences().glow); + this.#context.strokeStyle = withAlpha(color, opacity * 0.2 * this.#glow()); this.#context.lineWidth = 7; traceSurfacePath(this.#context, points); this.#context.stroke(); @@ -859,7 +863,7 @@ export class PacketAnimator { this.#context.fillStyle = glow; this.#context.beginPath(); this.#context.arc(point.x, point.y, radius, 0, Math.PI * 2); - this.#context.globalAlpha = displayPreferences().glow * effectStrength(); + this.#context.globalAlpha = this.#glow() * effectStrength(); this.#context.fill(); this.#context.globalAlpha = 1; this.#context.fillStyle = displayColor(color); @@ -922,8 +926,8 @@ export class PacketAnimator { return; } const gradient = this.#context.createRadialGradient(point.x, point.y, 0, point.x, point.y, radius); - gradient.addColorStop(0, withAlpha(blendWithWhite(color, 0.3), timing.opacity * 0.62 * displayPreferences().glow)); - gradient.addColorStop(0.2, withAlpha(color, timing.opacity * 0.5 * displayPreferences().glow)); + gradient.addColorStop(0, withAlpha(blendWithWhite(color, 0.3), timing.opacity * 0.62 * this.#glow())); + gradient.addColorStop(0.2, withAlpha(color, timing.opacity * 0.5 * this.#glow())); gradient.addColorStop(1, withAlpha(color, 0)); this.#context.fillStyle = gradient; this.#context.beginPath(); diff --git a/web/src/preferences.ts b/web/src/preferences.ts index f41df69..0928370 100644 --- a/web/src/preferences.ts +++ b/web/src/preferences.ts @@ -31,7 +31,8 @@ export interface UiPreferences { } const VIEW_STORAGE_PREFIX = 'cartolite-server:view:v1'; -export const UI_STORAGE_KEY = 'cartolite-server:ui:v1'; +export const TERMINAL_PAGE = typeof document !== 'undefined' && document.documentElement.hasAttribute('data-terminal'); +export const UI_STORAGE_KEY = TERMINAL_PAGE ? 'cartolite-server:terminal-ui:v1' : 'cartolite-server:ui:v1'; export const DEFAULT_UI_PREFERENCES: UiPreferences = { routes: false, heatmap: true, @@ -51,7 +52,8 @@ export const DEFAULT_UI_PREFERENCES: UiPreferences = { roads: true, livePackets: true, routeOpacity: 0.8, - relief: 0.75 + relief: 0.75, + ...(TERMINAL_PAGE ? { routes:true,heatmap:true,clusters:false,hillshade:false,terrain3D:false,buildings:true,routeWindow:'15m' as const,mapLabels:true,nodeLabels:true,roads:true,livePackets:true,relief:.15,routeOpacity:.9 } : {}), }; export function viewClass( @@ -102,7 +104,7 @@ export function loadUiPreferences(storage: Storage): UiPreferences { clusters: typeof value.clusters === 'boolean' ? value.clusters : DEFAULT_UI_PREFERENCES.clusters, hillshade: typeof value.hillshade === 'boolean' ? value.hillshade : DEFAULT_UI_PREFERENCES.hillshade, terrain3D: typeof value.terrain3D === 'boolean' ? value.terrain3D : DEFAULT_UI_PREFERENCES.terrain3D, - buildings: typeof value.buildings === 'boolean' ? value.buildings : Boolean(value.terrain3D), + buildings: typeof value.buildings === 'boolean' ? value.buildings : Boolean(value.terrain3D) || DEFAULT_UI_PREFERENCES.buildings, terrainExaggeration: savedRange(value.terrainExaggeration, 1, 0.5, 2), terrainPitch: savedRange(value.terrainPitch, 50, 0, 65), terrainBearing: savedRange(value.terrainBearing, 0, -180, 180), @@ -116,8 +118,8 @@ export function loadUiPreferences(storage: Storage): UiPreferences { nodeLabels: typeof value.nodeLabels === 'boolean' ? value.nodeLabels : true, roads: typeof value.roads === 'boolean' ? value.roads : true, livePackets: typeof value.livePackets === 'boolean' ? value.livePackets : true, - routeOpacity: savedAmount(value.routeOpacity, 0.8, 0.2), - relief: savedAmount(value.relief, 0.75, 0) + routeOpacity: savedAmount(value.routeOpacity, DEFAULT_UI_PREFERENCES.routeOpacity, 0.2), + relief: savedAmount(value.relief, DEFAULT_UI_PREFERENCES.relief, 0) }; } catch { return { ...DEFAULT_UI_PREFERENCES }; diff --git a/web/src/routeLayer.ts b/web/src/routeLayer.ts index 588afbe..105b45a 100644 --- a/web/src/routeLayer.ts +++ b/web/src/routeLayer.ts @@ -2,7 +2,7 @@ import { LngLat, MercatorCoordinate, type CustomLayerInterface, type CustomRende import type { Feature, LineString } from 'geojson'; import { splitWorldRoute, routeCoordinate, longitudeDelta, type Coordinate } from './worldGeometry'; import { adaptiveSurfacePath, type SurfacePoint } from './terrainProjection'; -import { displayColor, displayPreferences } from './displayPreferences'; +import { displayColor, displayColorRevision, displayPreferences } from './displayPreferences'; export const ROUTE_WEBGL_LAYER_ID = 'route-exact-webgl'; // From xyz, to xyz, corner (along/side), rgb, alpha, age band. @@ -44,6 +44,7 @@ export class HistoricalRouteLayer implements CustomLayerInterface { #cameraKey = ''; #buffers: GPUChunk[] = []; #bufferTerrain = false; + #colorRevision = -1; onAdd(map: MapLibreMap, gl: GL): void { this.#map = map; @@ -72,6 +73,7 @@ export class HistoricalRouteLayer implements CustomLayerInterface { map.off('moveend', this.#cameraChanged); map.off('terrain', this.#terrainChanged); map.off('sourcedata', this.#sourceChanged); + map.off('render',this.#settleVisibility); this.#clearBuffers(); if (this.#resources) gl.deleteProgram(this.#resources.program); this.#resources = undefined; @@ -104,6 +106,7 @@ export class HistoricalRouteLayer implements CustomLayerInterface { this.#refreshTimer = setTimeout(() => { this.#refreshTimer = undefined; this.#invalidate(); }, delay); } #invalidate = (): void => { this.#dirty = true; if (this.#visible) this.#map?.triggerRepaint(); }; + #settleVisibility = (): void => { this.#map?.triggerRepaint(); }; #terrainChanged = (): void => { this.#cancelBuild(); // A flat mesh has neither terrain heights nor viewport culling. Do not draw @@ -127,6 +130,12 @@ export class HistoricalRouteLayer implements CustomLayerInterface { if (this.#visible === visible) return; this.#visible = visible; if (!visible) this.#cancelBuild(); + // Keep this custom layer's slot stable: native visibility changes rebuild + // terrain's render-to-texture stacks. The draw guard hides the strokes. + // Complete the compositor handoff even when the scene becomes entirely + // still. This is one final frame per toggle, not a permanent repaint loop. + this.#map?.off('render',this.#settleVisibility); + this.#map?.once('render',this.#settleVisibility); this.#map?.triggerRepaint(); } setMaximumBand(band: number): void { @@ -292,6 +301,9 @@ export class HistoricalRouteLayer implements CustomLayerInterface { } render(gl: GL, options: CustomRenderMethodInput): void { if (!this.#resources || !this.#map || !this.#visible) return; + if(this.#colorRevision !== displayColorRevision()) { + this.#colorRevision=displayColorRevision(); this.#cancelBuild(); + } if (this.#dirty && !this.#building && !this.#prepared) void this.#upload(Array.from(options.defaultProjectionData.mainMatrix)).catch(() => { this.#building = false; if (this.#map) this.#map.getContainer().dataset.routeMeshBusy = 'false'; @@ -371,11 +383,12 @@ export class HistoricalRouteLayer implements CustomLayerInterface { gl.uniform1f(uniforms.glow!, denseOverview ? 0 : settings.glow * clamp((this.#map.getZoom() - 3) / 7, 0.15, 1)); gl.uniform1f(uniforms.outline!, denseOverview ? 0 : 1); gl.uniform1f(uniforms.simple!, denseOverview ? 1 : 0); + // Character conversion needs a clear foreground signal; keep the same + // routes/patterns and the user's opacity control, without density dimming. gl.uniform1f(uniforms.opacity!, Math.min(1,this.#opacity * (terminal ? 1.35 : settings.detail === 'auto' ? clamp(1 - Math.log2(1 + this.#routes.length / 150) * .1, .38, .9) : 1))); gl.uniform1f(uniforms.maximum_band!, this.#maximumBand); gl.uniform1f(uniforms.pattern!, settings.pattern === 'dashed' ? 1 : settings.pattern === 'dotted' ? 2 : 0); - if (this.#lightBackground) gl.uniform3f(uniforms.casing!, 0.97, 0.99, 0.95); - else gl.uniform3f(uniforms.casing!, 0.025, 0.055, 0.075); + gl.uniform3fv(uniforms.casing!, parseColor(displayColor('#061216',this.#lightBackground))); for (const chunk of this.#buffers) { gl.bindBuffer(gl.ARRAY_BUFFER, chunk.buffer); let offset = 0; diff --git a/web/src/terminal.css b/web/src/terminal.css index 0722df6..a4621fc 100644 --- a/web/src/terminal.css +++ b/web/src/terminal.css @@ -1,40 +1,86 @@ +@font-face { font-family:VT323; src:url('/fonts/terminal/VT323-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; } +@font-face { font-family:Silkscreen; src:url('/fonts/terminal/Silkscreen-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; } +@font-face { font-family:Silkscreen; src:url('/fonts/terminal/Silkscreen-Bold.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; } :root[data-terminal][data-theme] { - --panel-solid: #050b10; --panel-border: #527885; --ink-strong: #e9e9bf; - --ink: #d5e6df; --muted: #a5bdbb; --field-bg: #08121a; --selected: #193c3e; - --focus-ring: #79f8c4; --terminal-accent: #79f8c4; color-scheme: dark; - font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; + --panel-solid:var(--terminal-panel,#050b10); --panel-border:var(--terminal-border,#527885); --ink-strong:var(--terminal-strong,#e9e9bf); + --ink:var(--terminal-ink,#d5e6df); --muted:var(--terminal-muted,#a5bdbb); --field-bg:var(--terminal-field,#08121a); --selected:var(--terminal-active,#193c3e); + --focus-ring:var(--terminal-accent,#79f8c4); color-scheme:dark; + --terminal-text-factor:1; + font-family:var(--terminal-font,ui-monospace,monospace); font-synthesis:weight; } -:root[data-terminal][data-terminal-palette="amber"] { --terminal-accent: #ffd18a; } -:root[data-terminal][data-terminal-palette="green"] { --terminal-accent: #8dffb0; } -[data-terminal] .route-preview { background:#000; color:var(--terminal-accent); } -[data-terminal] body, [data-terminal] #map { background: #000; } -[data-terminal] .glass, [data-terminal] dialog { border-radius: 2px; background: #050b10; border-color: #527885; box-shadow: none; backdrop-filter: none; color: #d5e6df; } +:root[data-terminal][data-text-size="large"] { --terminal-text-factor:1.15; } +[data-terminal] .route-preview { background:var(--terminal-background,#000); color:var(--terminal-advert,var(--terminal-accent)); } +[data-terminal] body, [data-terminal] #map { background:var(--terminal-background,#000); } +html:root[data-terminal] :is(.glass,dialog,.maplibregl-popup-content,.maplibregl-ctrl-attrib) { border-radius:2px; background:var(--panel-solid); border-color:var(--panel-border); box-shadow:none; backdrop-filter:none; color:var(--ink); font-family:inherit; } [data-terminal] button, [data-terminal] select, [data-terminal] input { font-family: inherit; } +[data-terminal] :is(.control-button,.dock-views a,.node-inspector,.sound-panel,.map-appearance,.layer-toggles,.follow-card) { font-size:calc(11px * var(--terminal-scale,1) * var(--terminal-text-factor,1)); } +[data-terminal] :is(.display-settings,.sound-panel,.camera-settings) label { font-size:calc(12px * var(--terminal-scale,1) * var(--terminal-text-factor,1)); } +[data-terminal] :is(.node-name,.node-search-name,.neighbor-label) { color:var(--ink-strong); } +[data-terminal] :is(.node-meta,.node-search-meta,.neighbor-meta,.sound-hint) { color:var(--muted); } +[data-terminal] :is(.sound-unlock-hint,.map-notice) { color:var(--terminal-warning); } +[data-terminal] :is(button,input,select):disabled { color:var(--muted); opacity:.7; } +[data-terminal] :is(input,select) { background:var(--field-bg); color:var(--ink); border-color:var(--panel-border); } +[data-terminal] :is(button,a):focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; } +html:root[data-terminal] :is(.control-button,.node-search-result,.neighbor-row,.follow-card,.node-inspector,.tooltip,.route-legend,.legend,.sound-panel,.maplibregl-ctrl-attrib) { color:var(--ink); } +html:root[data-terminal] :is(.tooltip strong,.node-inspector strong,.node-inspector h3,.node-search-result strong,.follow-subject,.follow-title) { color:var(--ink-strong); } +html:root[data-terminal] :is(.tooltip span,.node-inspector dt,.node-role,.node-search-result span,.follow-detail,.follow-meta,.sound-description,.display-note,.layer-hint) { color:var(--muted); } +html:root[data-terminal] :is(.control-button.selected,.control-button.active,.control-button[aria-pressed="true"],.node-search-result[aria-selected="true"],.node-search-result:hover,.neighbor-row:hover) { color:var(--ink-strong); background:var(--selected); } +html:root[data-terminal] :is(.control-button,.node-search-result,.neighbor-row,.maplibregl-popup-content,.sound-panel button) { border-color:var(--panel-border); } +html:root[data-terminal] :is(.node-search-result:focus-visible,.neighbor-row:focus-visible) { box-shadow:inset 0 0 0 2px var(--focus-ring); } +html:root[data-terminal] .focus-chip i { background:var(--terminal-selection); border-color:var(--terminal-selection); box-shadow:none; } +html:root[data-terminal] .maplibregl-popup-tip { border-top-color:var(--panel-solid); } +html:root[data-terminal] input[type=range] { accent-color:var(--terminal-accent); } +html:root[data-terminal] #app { --traffic-rgb:var(--terminal-advert-rgb); } +html:root[data-terminal] #app[data-traffic-kind="trace"] { --traffic-rgb:var(--terminal-trace-rgb); } +html:root[data-terminal] #app[data-traffic-kind="text"] { --traffic-rgb:var(--terminal-text-rgb); } +html:root[data-terminal] #app[data-traffic-kind="ack"] { --traffic-rgb:var(--terminal-ack-rgb); } +html:root[data-terminal] #app[data-traffic-kind="control"] { --traffic-rgb:var(--terminal-control-rgb); } +html:root[data-terminal] #app[data-traffic-kind="other"] { --traffic-rgb:var(--terminal-other-rgb); } [data-terminal] .control-button { border-radius: 2px; } [data-terminal] .brand { color: var(--terminal-accent); } [data-terminal] #legend .node { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; font-style: normal; } -[data-terminal] #legend .repeater::after { content: 'R'; color: #71f5c7; } -[data-terminal] #legend .companion::after { content: 'C'; color: #78cfff; } -[data-terminal] #legend .room::after { content: 'H'; color: #b39aff; } +[data-terminal] #legend .repeater::after { content: 'R'; color:var(--terminal-repeater); } +[data-terminal] #legend .companion::after { content: 'C'; color:var(--terminal-companion); } +[data-terminal] #legend .room::after { content: 'H'; color:var(--terminal-room); } [data-terminal] #map-grade { display: none; } [data-terminal]:not([data-terminal-fallback]) #packet-canvas { opacity: 0; } +[data-terminal][data-terminal-traffic="smooth"] #packet-canvas { opacity:1; z-index:2; } +[data-terminal][data-terminal-traffic="smooth"] #terminal-packets { display:none; } .terminal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #terminal-map { z-index: 4; } #terminal-packets { z-index: 2; } [data-terminal] .maplibregl-control-container > div { z-index: 6; } [data-terminal-fallback] .terminal-canvas { display: none; } -#terminal-status { position: absolute; top: 60px; left: 14px; right: 14px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 18px; width: fit-content; max-width: calc(100% - 28px); padding: 5px 8px; border: 1px solid #334b57; background: #000d; color: var(--terminal-accent); font-size: 11px; pointer-events: none; } -.terminal-help { color: #a3b4bd; } -.terminal-settings { margin: 8px 0; padding: 8px; border: 1px solid #527885; display: grid; gap: 8px; } -.terminal-settings legend { color: var(--terminal-accent); font-weight: bold; } +#terminal-status { position: absolute; top: 60px; left: 14px; right: 14px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 18px; width: fit-content; max-width: calc(100% - 28px); padding: 5px 8px; border: 1px solid var(--panel-border); background:var(--panel-solid); color:var(--terminal-accent); font-size:calc(11px * var(--terminal-scale,1)); pointer-events:none; } +.terminal-help { color:var(--muted); } +/* The editor is a recovery surface even when the chosen UI colours are illegible. */ +html:root .terminal-settings { margin:8px 0; padding:10px; border:1px solid #527885; display:grid; gap:10px; min-width:0; color:#d5e6df; background:#050b10; font:12px/1.5 ui-monospace,monospace; color-scheme:dark; } +.terminal-settings legend { color:#79f8c4; font-weight:bold; } .terminal-settings label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } -.terminal-settings select { min-height: 36px; max-width: 100%; background: #08121a; color: #efffdf; border: 1px solid #527885; } +html:root .terminal-settings :is(input,select,button) { min-height:36px; max-width:100%; background:#08121a; color:#efffdf; border:1px solid #527885; border-radius:3px; font:inherit; } +html:root .terminal-settings :is(input,select,button):focus-visible { outline:2px solid #79f8c4; outline-offset:2px; } +.terminal-settings select { min-width:0; max-width:65%; } +.terminal-settings details { border-top:1px solid #334b57; padding-top:6px; } +.terminal-settings summary { cursor:pointer; padding:7px 0; min-height:36px; } +.terminal-settings details[open] > :not(summary) { margin-top:10px; } +.terminal-settings a { color:#89e5ff; } +.terminal-slider input { width:100%; margin:0; accent-color:#79f8c4; } +html:root[data-terminal] .terminal-settings input[type=range] { accent-color:#79f8c4; } +.terminal-slider output { color:#efffdf; } +.terminal-colour-inputs { display:flex; gap:10px; } +.terminal-colour-inputs input[type=color] { width:52px; flex-shrink:0; padding:3px; } +.terminal-colour-inputs input[type=text] { min-width:0; width:100%; padding:6px; } +.terminal-colour-inputs input:invalid { outline:2px solid #ff85ce; } +.terminal-preview { display:grid; gap:4px; padding:10px; border:1px solid #527885; background:var(--sample-background); font-size:16px; overflow:hidden; } +.terminal-preview span { color:var(--sample-water); } +.terminal-preview i { color:var(--sample-advert); font-style:normal; } +.terminal-preview b { color:var(--sample-labels); font-weight:normal; } .terminal-settings p { color: #a5bdbb; font-size: 11px; line-height: 1.5; margin: 0; } .terminal-notice { position: absolute; z-index: 8; top: 105px; left: 14px; max-width: min(340px, calc(100% - 28px)); padding: 8px; font-size: 12px; } .terminal-notice[hidden] { display: none; } @media(max-width:900px), (pointer:coarse) { #terminal-status { top: max(52px, calc(env(safe-area-inset-top) + 45px)); font-size: 10px; gap: 4px 10px; } .terminal-help { display: none; } - .terminal-settings select { min-height: 44px; } + html:root .terminal-settings :is(input,select,button,summary) { min-height:44px; } } @media(max-height:480px) { #terminal-status { top: 8px; left: 205px; right: 8px; max-width: calc(100% - 220px); } #terminal-status strong, .terminal-help { display: none; } } diff --git a/web/src/terminal.ts b/web/src/terminal.ts index 8bf30cb..d125a16 100644 --- a/web/src/terminal.ts +++ b/web/src/terminal.ts @@ -1,12 +1,13 @@ import type { LiveMap } from './map'; import type { PacketAnimator } from './packetAnimator'; import { browserStorage } from './browserStorage'; -import { applyDisplayChrome, effectStrength, prefersReducedMotion } from './displayPreferences'; +import { applyDisplayChrome, displayPreferences, DISPLAY_EVENT, effectStrength, prefersReducedMotion, setDisplayColors } from './displayPreferences'; import { terminalGraphics } from './terminalGraphics'; -import { characterCells, terminalColor, terminalPreferences, TERMINAL_DEFAULTS, TERMINAL_COLORS } from './terminalGrid'; +import { characterCells } from './terminalGrid'; +import { loadTerminal, TERMINAL_FONTS, TERMINAL_KEY, TERMINAL_LEGACY_KEY, shade } from './terminalProfile'; +import { terminalControls } from './terminalControls'; import './terminal.css'; -const KEY = 'cartolite-terminal-v1'; const ROLES: Record = { repeater: 'R', companion: 'C', room_server: 'H', sensor: 'S' }; // This page samples the existing 2D packet canvas. Choose CPU backing before @@ -25,8 +26,7 @@ window.addEventListener('cartolite-map-ready', event => { /** Presentation only: the existing Map and packet clock still own the scene. */ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => void { const map = view.map, host = map.getContainer(), root = document.documentElement; - let preferences = { ...TERMINAL_DEFAULTS }; - try { preferences = terminalPreferences(browserStorage().getItem(KEY)); } catch { /* Storage may be disabled. */ } + let preferences = loadTerminal(browserStorage()); const originalPaint = new Map[2] }>(); let labelLayers: string[] = []; let disposed = false, failed = false, lastPacket = 0; @@ -37,32 +37,73 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo const sample = document.createElement('canvas'); const read = sample.getContext('2d', { willReadFrequently: true })!; const status = document.createElement('div'); status.id = 'terminal-status'; - status.innerHTML = 'CARTOLITE BBSDrag to pan · Scroll to zoom · Find to inspect'; + status.innerHTML = 'CARTOLITE BBSDrag to pan · Scroll to zoom · Find to inspect'; host.after(status); const notice = document.createElement('div'); notice.className = 'terminal-notice glass'; notice.hidden = true; notice.innerHTML = 'Terminal graphics paused. The map and live traffic are still available.'; host.after(notice); - const settings = document.createElement('fieldset'); settings.className = 'terminal-settings'; - settings.innerHTML = 'Terminal display

R repeater · C companion · H room · S sensor · @ selected. ANSI textures: green vegetation, grey built-up land. Live timing stays the same.

'; + const controls = terminalControls(preferences, value => { + preferences=value; + try { browserStorage().setItem(TERMINAL_KEY,JSON.stringify(preferences)); } catch { /* Session settings still work. */ } + sync(); + }); + const { settings }=controls; document.querySelector('#map-appearance > summary')!.after(settings); - const selects = settings.querySelectorAll('select'); + const allReset=document.querySelector('#reset-appearance')!; + const resetTerminal=()=>settings.querySelector('[data-reset-terminal]')!.click(); + allReset.addEventListener('click',resetTerminal); + if(allReset.nextElementSibling)allReset.nextElementSibling.textContent='Resets Terminal layers and display. Map, Netgraph and sound settings stay unchanged.'; + const font = (size: number) => `${preferences.weight} ${size}px ${TERMINAL_FONTS[preferences.font].family}`; + const packetColours = () => ({2:preferences.colours.core,3:preferences.colours.other,4:preferences.colours.advert,5:preferences.colours.trace,6:preferences.colours.text,7:preferences.colours.ack,8:preferences.colours.control}); + let loadedFont = ''; const sync = () => { - selects[0]!.value = preferences.palette; selects[1]!.value = preferences.glyphs; selects[2]!.value = String(preferences.size); + controls.sync(preferences); root.dataset.terminalPalette = preferences.palette; + root.dataset.terminalTraffic = preferences.traffic; + root.dataset.terminalFont = preferences.font; + for(const [key,value] of Object.entries(preferences.colours))root.style.setProperty(`--terminal-${key}`,value); + root.style.setProperty('--terminal-font',TERMINAL_FONTS[preferences.uiFont].family); + root.style.setProperty('--terminal-scale',String(preferences.uiScale)); + applyColours(); + view.setAppearance(undefined,true); animator.setPresentationGlow(preferences.liveGlow);animator.refreshAppearance(); style(); + const nextFont=[preferences.font,preferences.uiFont,preferences.weight].join(':'); + if(loadedFont!==nextFont) { + loadedFont=nextFont; + void Promise.all([document.fonts.load(font(32)),document.fonts.load(`16px ${TERMINAL_FONTS[preferences.uiFont].family}`)]) + .then(()=>{if(!disposed && !failed && nextFont===loadedFont)capture.refreshFont();}).catch(()=>{ /* System fallback remains usable. */ }); + } + fx.clearRect(0,0,effects.width,effects.height); + lastPacket=0; schedule(); }; - const save = () => { try { browserStorage().setItem(KEY, JSON.stringify(preferences)); } catch { /* Session settings still work. */ } sync(); }; - settings.addEventListener('change', () => { preferences = terminalPreferences(JSON.stringify({ palette: selects[0]!.value, glyphs: selects[1]!.value, size: Number(selects[2]!.value) })); save(); }); - settings.querySelector('button')!.addEventListener('click', () => { preferences = { ...TERMINAL_DEFAULTS }; save(); }); - const storage = (event: StorageEvent) => { if (event.key === KEY || event.key === null) { preferences = terminalPreferences(event.newValue); sync(); } }; + const storage = (event: StorageEvent) => { if (event.key === TERMINAL_KEY || event.key === TERMINAL_LEGACY_KEY || event.key === null) { preferences=loadTerminal(browserStorage()); sync(); } }; window.addEventListener('storage', storage); + function applyColours() { + if(failed)return; + const c=preferences.colours; + for(const kind of ['advert','trace','text','ack','control','other'] as const) { + root.style.setProperty(`--terminal-${kind}-rgb`,[1,3,5].map(i=>parseInt(c[kind].slice(i,i+2),16)).join(',')); + } + setDisplayColors({ + '#4de7c4':c.advert,'#ffd15a':c.trace,'#ff75b5':c.text,'#78cfff':c.ack,'#a78bfa':c.control,'#9caebd':c.other, + '#73d9cf':c.advert,'#45c27f':c.repeater,'#53a7e8':c.companion,'#ab76dc':c.room,'#a2ad57':c.sensor,'#8794a6':c.sensor, + '#ffffff':c.core,'#eaffff':c.core,'#f2ffff':c.core,'#edfffd':c.core,'#e5fffc':c.core, + '#f3b844':c.neighbours,'#f2bd55':c.selection,'#fff0b8':c.selection,'#f5cf76':c.selection, + '#69d1ca':c.boundary,'#8ec5c1':c.places,'#f6d77f':c.labels,'#d2e0ef':c.labels, + '#02070b':c.background,'#061216':c.background,'#08272c':c.background,'#bce9e5':c.labels,'#48d5c7':c.repeater,'#32c8bb':c.repeater, + }); + applyDisplayChrome(); + } + const displayChanged=()=>{ applyColours(); style(); schedule(); }; + window.addEventListener(DISPLAY_EVENT,displayChanged); + function dimensions() { const width = host.clientWidth, height = host.clientHeight; // Bound raster work on very large screens without dropping any route data. let size = Math.max(preferences.size, Math.floor(Math.sqrt(width*height/16000)/.83)), cw = 0, ch = 0; do { - context.font = `${size}px ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", monospace`; + context.font = font(size); cw = context.measureText('M').width; ch = size * 1.15; if (Math.ceil(width/cw)*Math.ceil(height/ch) <= 16000) break; size++; @@ -79,10 +120,11 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo sample.width = Math.ceil(width / cw) * 2; sample.height = Math.ceil(height / ch) * 4; read.imageSmoothingEnabled = false; read.drawImage(source, 0, 0, sample.width, sample.height); - const cells = characterCells(read.getImageData(0, 0, sample.width, sample.height), preferences.glyphs === 'ascii'); - ctx.font = `bold ${size}px ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", monospace`; + const colours=packetColours(); + const cells = characterCells(read.getImageData(0, 0, sample.width, sample.height), preferences.glyphs === 'ascii', colours); + ctx.font = font(size); ctx.textBaseline = 'top'; - const glow = prefersReducedMotion() ? 0 : effectStrength() * (source.dataset.qualityMode === 'low' ? 2 : source.dataset.qualityMode === 'balanced' ? 4 : 6); + const glow = prefersReducedMotion() ? 0 : preferences.liveGlow * effectStrength() * (source.dataset.qualityMode === 'low' ? 2 : source.dataset.qualityMode === 'balanced' ? 4 : 6); ctx.lineWidth=.5; // Batch colour/brightness runs. Bound decorative work before reducing cores. let visible = 0, blooms=0; @@ -92,14 +134,16 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo do { text += cells.glyphs[y * cells.columns + x]!; x++; } while (x < cells.columns && cells.colors[y * cells.columns + x] === color && cells.energy[y*cells.columns+x] === energy); if (!color) continue; ctx.globalAlpha=Math.min(1,energy/255*1.35); - ctx.fillStyle=ctx.strokeStyle=ctx.shadowColor=terminalColor(color,preferences.palette); + ctx.fillStyle=ctx.strokeStyle=ctx.shadowColor=colours[color as keyof typeof colours]??preferences.colours.core; ctx.shadowBlur=blooms++<120 ? glow : 0; - ctx.strokeText(text,start*cw,y*ch); ctx.fillText(text,start*cw,y*ch); visible+=x-start; + // A console font may fall back for Braille. Keep its glyphs inside the + // same geographic cells instead of letting the fallback widen the trail. + ctx.strokeText(text,start*cw,y*ch,(x-start)*cw); ctx.fillText(text,start*cw,y*ch,(x-start)*cw); visible+=x-start; } - ctx.shadowBlur=0; ctx.fillStyle=terminalColor(2,preferences.palette); + ctx.shadowBlur=0; ctx.fillStyle=preferences.colours.core; for(let i=0;i vo } function labels() { - const { width, height } = dimensions(), size = preferences.size; - context.font = `${size}px ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", monospace`; + const { width, height } = dimensions(), size = preferences.fontSize * (displayPreferences().textSize==='large'?1.25:1); + context.font = font(size); const cw = context.measureText('M').width, ch = size * 1.25; const occupied = new Set(); const features = map.queryRenderedFeatures(undefined, { layers: labelLayers.filter(id => map.getLayer(id)) }); @@ -121,7 +165,7 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo for (const feature of features) { if (feature.geometry.type !== 'Point') continue; const p = feature.properties, node = feature.layer.id === 'nodes', cluster = feature.layer.id === 'clusters'; - context.font = `${node || cluster ? 'bold ' : ''}${size}px ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", monospace`; + context.font = font(size); const text = cluster ? `[${p.point_count_abbreviated ?? p.point_count}]` : node ? (p.id === selected ? '@' : (ROLES[String(p.role)] ?? '?')) : String(p.label ?? p.name_en ?? p['name:en'] ?? p.name ?? ''); if (!text) continue; const coordinate = feature.geometry.coordinates; @@ -140,10 +184,11 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo for (let row=Math.floor((y-2)/ch);row<=Math.floor((y+ch+2)/ch);row++) for (let col=Math.floor((x-2)/cw);col<=Math.floor((x+w+2)/cw);col++) cells.push(`${col}:${row}`); if (cells.some(cell => occupied.has(cell))) continue; cells.forEach(cell => occupied.add(cell)); - context.fillStyle = '#000'; context.fillRect(x-1,y,w+2,ch); - context.fillStyle = terminalColor(node ? (p.id === selected ? 2 : p.role === 'companion' ? 7 : p.role === 'room_server' ? 8 : 4) : cluster ? 4 : nodeLabel ? 2 : 5, preferences.palette); + context.fillStyle = preferences.colours.background; context.fillRect(x-1,y,w+2,ch); + const c=preferences.colours; + context.fillStyle = selected && p.id===selected ? c.selection : node ? (p.role==='companion'?c.companion:p.role==='room_server'?c.room:p.role==='repeater'?c.repeater:c.sensor) : cluster?c.repeater:nodeLabel?c.labels:shade(c.places,preferences.labelBrightness); context.shadowColor=String(context.fillStyle); context.shadowBlur=node || cluster ? 3*effectStrength() : 0; - context.globalAlpha=node || cluster || nodeLabel ? 1 : .65; + context.globalAlpha=node && p.id!==selected && typeof p.opacity==='number' ? Math.max(.65,Math.min(1,p.opacity)) : 1; context.fillText(text,x,y); context.shadowBlur=0; context.globalAlpha=1; drawn++; break; } } @@ -155,6 +200,8 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo delete root.dataset.terminal; for (const item of originalPaint.values()) if (map.getLayer(item.layer)) map.setPaintProperty(item.layer, item.property as Parameters[1], item.value); originalPaint.clear(); + setDisplayColors(); + animator.setPresentationGlow(1); applyDisplayChrome(); view.setAppearance(undefined, true); animator.refreshAppearance(); fx.clearRect(0, 0, effects.width, effects.height); } @@ -170,6 +217,10 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo canvas.dataset.workMs = String(Math.round(performance.now() - started)); const center = map.getCenter(); status.querySelector('.terminal-coordinates')!.textContent = `${center.lat.toFixed(2)}, ${center.lng.toFixed(2)} Z:${map.getZoom().toFixed(1)}`; + const routes=document.querySelector('#routes-button')?.getAttribute('aria-pressed')==='true'; + const live=document.querySelector('#live-packets-button')?.getAttribute('aria-pressed')==='true'; + const window=document.querySelector('#route-window')?.selectedOptions[0]?.textContent??''; + status.querySelector('.terminal-scope')!.textContent=routes?`Links ${window}${live?'':' · live off'}`:live?'Live only':'Traffic hidden'; } catch { fail(); } } function schedule() { @@ -185,7 +236,7 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo const setPaint = (layer: string, property: string, value: Parameters[2]) => { const current = map.getPaintProperty(layer, property as Parameters[1]); if (JSON.stringify(current) === JSON.stringify(value)) return; - originalPaint.set(`${layer}:${property}`, { layer, property, value: current }); + if(!originalPaint.has(`${layer}:${property}`))originalPaint.set(`${layer}:${property}`, { layer, property, value: current }); map.setPaintProperty(layer, property as Parameters[1], value); }; // Public layer ordering includes custom layers and avoids serializing all @@ -195,9 +246,19 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo for (const layer of layers) { if (layer.type === 'symbol') { setPaint(layer.id, 'text-opacity', 0); + } else if (['nodes','nodes-glow','node-core'].includes(layer.id)) { + setPaint(layer.id,'circle-opacity',0); + if(layer.id==='nodes')setPaint(layer.id,'circle-stroke-opacity',0); + } else if(layer.id==='building-footprints') { + setPaint(layer.id,'fill-color','#ffd15a');setPaint(layer.id,'fill-opacity',1); + } else if(layer.id==='building-extrusions') { + setPaint(layer.id,'fill-extrusion-color','#ffd15a');setPaint(layer.id,'fill-extrusion-opacity',1); + } + else if(layer.id==='terrain-hillshade') { + setPaint(layer.id,'hillshade-shadow-color','#030609');setPaint(layer.id,'hillshade-highlight-color','#72b89b'); } else if (layer.id.startsWith('basemap-')) { const property = layer.type === 'background' ? 'background-color' : layer.type === 'fill' ? 'fill-color' : layer.type === 'line' ? 'line-color' : undefined; - const color = layer.id.includes('water') ? '#08145a' : layer.id.includes('boundary') ? '#526270' : layer.id === 'basemap-landcover' ? '#124b24' : layer.id === 'basemap-landuse' ? '#383838' : layer.type === 'line' ? '#526270' : '#030609'; + const color = layer.id.includes('water') ? '#08145a' : layer.id.includes('boundary') ? '#c184f6' : layer.id === 'basemap-landcover' ? '#124b24' : layer.id === 'basemap-landuse' ? '#383838' : layer.type === 'line' ? '#405060' : '#030609'; if (property) setPaint(layer.id, property, layer.id === 'basemap-landcover' ? ['match', ['get','class'], ['wood','grass'], '#124b24', '#383838'] : color); } } @@ -206,21 +267,25 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo } const capture = terminalGraphics(map, () => { const { width, height, cw, ch } = dimensions(); - return { columns: Math.max(1,Math.ceil(width/cw)), rows: Math.max(1,Math.ceil(height/ch)), ascii: preferences.glyphs === 'ascii', colors: TERMINAL_COLORS.map((_,i) => terminalColor(i,preferences.palette)) }; + const c=preferences.colours; + return { columns: Math.max(1,Math.ceil(width/cw)), rows: Math.max(1,Math.ceil(height/ch)), mode:['braille','ascii','blocks','cell'].indexOf(preferences.glyphs), + colors:[c.background,c.water,c.terrain,c.roads,c.terrain,c.buildings,c.boundary,c.shore,c.boundary,c.vegetation,c.urban,c.shore],brightness:preferences.mapBrightness,font:font(32) }; }, paint, fail, () => !disposed && !failed && !document.hidden); const visibility = () => { if (document.hidden) capture.suspend(); else { style(); schedule(); } }; // Appearance/terrain can finish loading while the camera or feed keeps the // map busy. Do not wait for idle to reapply the encoded cartographic colours. const ensureStyle = () => { if (map.getLayer('basemap-water') && (map.getPaintProperty('basemap-water','fill-color') !== '#08145a' - || (map.getLayer('node-labels') && map.getPaintProperty('node-labels','text-opacity') !== 0))) style(); + || (map.getLayer('node-labels') && map.getPaintProperty('node-labels','text-opacity') !== 0) + || (map.getLayer('nodes') && map.getPaintProperty('nodes','circle-opacity') !== 0) + || (map.getLayer('building-footprints') && map.getPaintProperty('building-footprints','fill-color') !== '#ffd15a'))) style(); }; const restored = () => { failed = false; root.dataset.terminal = 'true'; delete root.dataset.terminalFallback; notice.hidden = true; - applyDisplayChrome(); view.setAppearance(undefined, true); animator.refreshAppearance(); style(); schedule(); + sync(); }; notice.querySelector('button')!.addEventListener('click', restored); - map.on('load', style); map.on('idle', style); + map.on('load', style); map.on('style.load',style);map.on('idle', style); map.on('render', ensureStyle); map.on('webglcontextrestored', restored); document.addEventListener('visibilitychange', visibility); @@ -229,19 +294,27 @@ export function mountTerminal(view: LiveMap, animator: PacketAnimator): () => vo if (failed || document.hidden) return; const now = performance.now(); if (now - lastPacket < 40 && (source.dataset.activeCount !== '0' || source.dataset.residueCount !== '0')) return; - try { draw(source, effects, fx); lastPacket = now; } catch { fail(); } + try { + if(preferences.traffic==='smooth') { + // Show the original canvas directly: no full-screen copy or second clock. + effects.dataset.cells=source.dataset.activeCount??'0';effects.dataset.glow='0'; + } else draw(source, effects, fx); + lastPacket = now; + } catch { fail(); } }); sync(); style(); const destroy = () => { if (disposed) return; disposed = true; capture.destroy(); animator.setFrameSink(undefined); - map.off('load', style); map.off('idle', style); + map.off('load', style); map.off('style.load',style);map.off('idle', style); map.off('render', ensureStyle); map.off('webglcontextrestored', restored); map.off('remove', destroy); document.removeEventListener('visibilitychange', visibility); window.removeEventListener('storage', storage); + window.removeEventListener(DISPLAY_EVENT,displayChanged);allReset.removeEventListener('click',resetTerminal);setDisplayColors();animator.setPresentationGlow(1); for (const element of [canvas, effects, status, notice, settings]) element.remove(); delete root.dataset.terminal; delete root.dataset.terminalFallback; delete root.dataset.terminalPalette; + delete root.dataset.terminalTraffic;delete root.dataset.terminalFont; }; map.on('remove', destroy); return destroy; diff --git a/web/src/terminalControls.ts b/web/src/terminalControls.ts new file mode 100644 index 0000000..89fcb53 --- /dev/null +++ b/web/src/terminalControls.ts @@ -0,0 +1,97 @@ +import { colourHSL, hslColour, normalizeTerminal, TERMINAL_COLOURS, TERMINAL_FONTS, TERMINAL_PRESETS, terminalPreset, type TerminalColour, type TerminalPreset, type TerminalProfile } from './terminalProfile'; + +/** One editor inside Display: no extra floating panel or live-feed owner. */ +export function terminalControls(initial: TerminalProfile, change: (value: TerminalProfile) => void) { + const settings = document.createElement('fieldset'); settings.className = 'terminal-settings'; + const fonts = Object.entries(TERMINAL_FONTS).map(([id,font])=>``).join(''); + const slider = (key:string,label:string,min:number,max:number,step:number) => ``; + settings.innerHTML = `Terminal options + +
░░░ ≋≋≋R ══════◆── CCartoLite BBS
+ + + +
Map & traffic visibility + ${slider('mapBrightness','Map brightness',.15,1.3,.05)} + ${slider('labelBrightness','Place label brightness',.4,1.3,.05)} + ${slider('liveGlow','Live glow',0,2,.1)} +

Routes stay sharp above the map. Use Route style and Advanced route styling below for solid, dashed or dotted lines, width, opacity, packet size and trails. Glow respects Effects, Motion and Graphics settings.

+
+
Typography + + ${slider('fontSize','Map font size',10,24,1)}${slider('weight','Font weight',400,700,100)} + + ${slider('uiScale','Interface scale',.9,1.35,.05)} +

Fonts affect labels, ASCII and controls. Braille and pixel map shapes keep their fixed grid. Missing characters use the system font. Font credits

+
+
Element colours + +
+ ${slider('hue','Hue',0,360,1)}${slider('saturation','Saturation',0,100,1)}${slider('lightness','Lightness',0,100,1)} + +

Traffic colours are shared by routes, packets and their legend. This editor keeps readable colours so you can always undo a change.

+
+ +

Saved on this device; updates other Terminal tabs. Map, Netgraph, layers, sound and volume keep their saved settings. R repeater · C companion · H room · S sensor · @ selected.

`; + let current = initial; + const element = settings.querySelector('[aria-label="Terminal colour element"]')!; + const colour = settings.querySelector('[type=color]')!; + const hex = settings.querySelector('[aria-label="Terminal colour hex"]')!; + const channels = ['hue','saturation','lightness'] as const; + let hsl: number[] = [0,0,0]; + function syncColour() { + const key=element.value as TerminalColour; + colour.value=hex.value=current.colours[key]; hex.setCustomValidity(''); + hsl=colourHSL(colour.value); + channels.forEach((key,i)=>{ + settings.querySelector(`[data-terminal="${key}"]`)!.value=String(hsl[i]); + settings.querySelector(`[data-value="${key}"]`)!.value=String(hsl[i])+(i===0?'°':'%'); + }); + } + function sync(profile: TerminalProfile) { + current=profile; + for(const input of settings.querySelectorAll('[data-terminal]')) { + const key=input.dataset.terminal as keyof TerminalProfile; + if(key in current) input.value=String(current[key]); + } + for(const output of settings.querySelectorAll('[data-value]')) { + const key=output.dataset.value as keyof TerminalProfile; + if(!(key in current))continue; + const value=Number(current[key]); + output.value=['mapBrightness','labelBrightness','liveGlow','uiScale'].includes(key)?`${Math.round(value*100)}%`:key==='fontSize'?`${value}px`:String(value); + } + const preview=settings.querySelector('.terminal-preview')!; + for(const key of ['background','water','advert','labels'] as const)preview.style.setProperty(`--sample-${key}`,current.colours[key]); + preview.style.fontFamily=TERMINAL_FONTS[current.font].family; + syncColour(); + } + function update(value: TerminalProfile, keepHsl=false) { + const held=[...hsl]; current=normalizeTerminal(value); change(current); sync(current); + // Keep hue/saturation adjustable through grey and black: RGB cannot retain them. + if(keepHsl){hsl=held;channels.forEach((key,i)=>{settings.querySelector(`[data-terminal="${key}"]`)!.value=String(hsl[i]); settings.querySelector(`[data-value="${key}"]`)!.value=String(hsl[i])+(i===0?'°':'%');});} + } + settings.addEventListener('input',event=>{ + const input=event.target; + if(!(input instanceof HTMLInputElement))return; + const key=input.dataset.terminal; + if(channels.includes(key as typeof channels[number])) { + hsl[channels.indexOf(key as typeof channels[number])]=Number(input.value); + update({...current,colours:{...current.colours,[element.value]:hslColour(hsl[0]!,hsl[1]!,hsl[2]!)}},true); + } else if(key) update({...current,[key]:Number(input.value)}); + else if(input===colour || input===hex) { + if(/^#[0-9a-f]{6}$/i.test(input.value))update({...current,colours:{...current.colours,[element.value]:input.value}}); + else hex.setCustomValidity('Use six hexadecimal digits, for example #55ffff.'); + } + }); + settings.addEventListener('change',event=>{ + const input=event.target; + if(!(input instanceof HTMLSelectElement))return; + if(input===element){syncColour();return;} + const key=input.dataset.terminal!; + update(key==='palette'?terminalPreset(input.value as TerminalPreset):{...current,[key]:key==='size'?Number(input.value):input.value}); + }); + settings.querySelector('[data-reset-colour]')!.addEventListener('click',()=>update({...current,colours:{...current.colours,[element.value]:terminalPreset(current.palette).colours[element.value as TerminalColour]}})); + settings.querySelector('[data-reset-terminal]')!.addEventListener('click',()=>update(terminalPreset('ansi'))); + sync(initial); + return {settings,sync}; +} diff --git a/web/src/terminalGraphics.ts b/web/src/terminalGraphics.ts index 70c8936..973a191 100644 --- a/web/src/terminalGraphics.ts +++ b/web/src/terminalGraphics.ts @@ -3,11 +3,7 @@ import type { CustomLayerInterface, Map as LibreMap } from 'maplibre-gl'; const VERTEX = `#version 300 es void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0,1);}`; // One pixel per character in the first pass; screen pixels only sample the font. -const CELLS = `#version 300 es -precision highp float;precision highp int; -uniform sampler2D terminal_scene;uniform vec2 grid;uniform int ascii; -out vec4 result; -int ink(vec3 c){ +const INK = `int ink(vec3 c){ if(max(c.r,max(c.g,c.b))<26./255.)return 0; if(c.b>c.r*1.8&&c.b>c.g*1.6)return 1; if(max(c.r,max(c.g,c.b))<100./255.&&c.g>c.r*1.5&&c.g>c.b*1.2)return 9; @@ -19,7 +15,12 @@ int ink(vec3 c){ if(c.g>c.r*1.2&&c.g>c.b*.9)return 4; if(c.b>c.r*1.1&&c.r>c.g*.9)return 8; if(c.b>c.r*1.1)return 7;return 2; -} +}`; +const CELLS = `#version 300 es +precision highp float;precision highp int; +uniform sampler2D terminal_scene;uniform vec2 grid;uniform int ascii; +out vec4 result; +${INK} int at(vec2 p){return ink(texture(terminal_scene,clamp(p,vec2(0),vec2(1))).rgb);} int rank(int k){return k==0?-1:k==1||k==9||k==10?0:k==3?1:k==11?2:3;} void main(){ @@ -47,21 +48,31 @@ void main(){ }`; const GLYPHS = `#version 300 es precision highp float;precision highp int; -uniform sampler2D cells;uniform sampler2D glyphs;uniform vec2 grid;uniform vec2 viewport;uniform vec3 colors[12]; +uniform sampler2D cells;uniform sampler2D glyphs;uniform sampler2D terminal_scene;uniform vec2 grid;uniform vec2 viewport;uniform vec3 colors[12];uniform int mode;uniform float brightness; out vec4 result; +${INK} void main(){ + if(mode==3){ + vec2 uv=gl_FragCoord.xy/viewport;int k=ink(texture(terminal_scene,uv).rgb); + float edge=0.,shore=0.;vec2 stepSize=vec2(1.5)/viewport; + for(int i=0;i<4;i++) {vec2 p=uv+vec2(i<2?(i==0?stepSize.x:-stepSize.x):0.,i>1?(i==2?stepSize.y:-stepSize.y):0.);int next=ink(texture(terminal_scene,clamp(p,vec2(0),vec2(1))).rgb);if(next!=k)edge=1.;if(k!=1&&next==1)shore=1.;} + result=vec4(mix(mix(colors[0],colors[k]*brightness,1.-edge*.4),colors[11]*brightness,shore),1);return; + } vec2 p=gl_FragCoord.xy/viewport*grid; vec3 cell=floor(texture(cells,(floor(p)+.5)/grid).rgb*255.+.5); vec2 local=clamp(vec2(fract(p.x),1.-fract(p.y)),vec2(.5/24.,.5/40.),vec2(1.-.5/24.,1.-.5/40.)); vec2 uv=(cell.xy+local)/vec2(16,17); - result=vec4(colors[int(cell.z)]*texture(glyphs,uv).a,1); + float coverage=texture(glyphs,uv).a; + if(mode==2){int bits[8]=int[8](1,8,2,16,4,32,64,128);int x=int(local.x*2.);int y=int(local.y*4.);coverage=(int(cell.x+cell.y*16.)&bits[y*2+x])!=0?1.:0.;} + result=vec4(mix(colors[0],colors[int(cell.z)]*brightness,coverage),1); }`; -export function terminalGraphics(map: LibreMap, config: () => { columns: number; rows: number; ascii: boolean; colors: string[] }, frame: () => void, failure: () => void, enabled: () => boolean) { +export function terminalGraphics(map: LibreMap, config: () => { columns: number; rows: number; mode: number; colors: string[]; brightness: number; font: string }, frame: () => void, failure: () => void, enabled: () => boolean) { let gl: WebGL2RenderingContext | undefined, programs: WebGLProgram[] = [], textures: WebGLTexture[] = [], shaders: WebGLShader[] = []; let framebuffer: WebGLFramebuffer | null = null, vao: WebGLVertexArrayObject | null = null; let locations: Record[] = [], width = 0, height = 0, columns = 0, rows = 0, disposed = false, lastLabels = 0; const metrics = map.getContainer().dataset; + let atlasFont = ''; function release() { if (gl) { for (const p of programs) gl.deleteProgram(p); @@ -70,7 +81,7 @@ export function terminalGraphics(map: LibreMap, config: () => { columns: number; gl.deleteFramebuffer(framebuffer); gl.deleteVertexArray(vao); } programs = []; textures = []; shaders = []; locations = []; framebuffer = vao = null; - width = height = columns = rows = 0; + width = height = columns = rows = 0; atlasFont=''; } function initialize(g: WebGL2RenderingContext) { for (const fragment of [CELLS, GLYPHS]) { @@ -82,7 +93,7 @@ export function terminalGraphics(map: LibreMap, config: () => { columns: number; g.attachShader(p, s); } g.linkProgram(p); if (!g.getProgramParameter(p, g.LINK_STATUS)) throw new Error('Terminal program unavailable'); - locations.push(Object.fromEntries(['terminal_scene','grid','ascii','cells','glyphs','viewport','colors[0]'].map(name => [name,g.getUniformLocation(p,name)]))); + locations.push(Object.fromEntries(['terminal_scene','grid','ascii','cells','glyphs','viewport','colors[0]','mode','brightness'].map(name => [name,g.getUniformLocation(p,name)]))); } for (const s of shaders) g.deleteShader(s); shaders = []; framebuffer = g.createFramebuffer(); vao = g.createVertexArray(); @@ -93,14 +104,19 @@ export function terminalGraphics(map: LibreMap, config: () => { columns: number; g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.NEAREST); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.NEAREST); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE); } + } + function updateFont(g: WebGL2RenderingContext, font: string) { + if(atlasFont===font)return; const atlas = document.createElement('canvas'); atlas.width = 384; atlas.height = 680; const ctx = atlas.getContext('2d'); if (!ctx) throw new Error('Terminal font unavailable'); - ctx.font = '32px ui-monospace, "DejaVu Sans Mono", monospace'; ctx.textBaseline = 'top'; ctx.fillStyle = '#fff'; + ctx.font = font; ctx.textBaseline = 'top'; ctx.fillStyle = '#fff'; ctx.textAlign='center'; for (let i = 1; i < 256; i++) for (let dot=0;dot<8;dot++) { if (i & [1,8,2,16,4,32,64,128][dot]!) ctx.fillRect((i%16)*24+(dot%2)*12+3,Math.floor(i/16)*40+Math.floor(dot/2)*10+2,6,6); } - for (let i=257;i<=260;i++) ctx.fillText(['.','+','#',':'][i-257]!, (i%16)*24,Math.floor(i/16)*40); + for (let i=257;i<=260;i++) ctx.fillText(['.','+','#',':'][i-257]!, (i%16)*24+12,Math.floor(i/16)*40,24); + g.activeTexture(g.TEXTURE2);g.bindTexture(g.TEXTURE_2D,textures[2]!); g.texImage2D(g.TEXTURE_2D,0,g.RGBA,g.RGBA,g.UNSIGNED_BYTE,atlas); + atlasFont=font; } const layer: CustomLayerInterface = { id: 'terminal-graphics', type: 'custom', renderingMode: '2d', @@ -111,16 +127,18 @@ export function terminalGraphics(map: LibreMap, config: () => { columns: number; const target = g.getParameter(g.FRAMEBUFFER_BINDING), readTarget = g.getParameter(g.READ_FRAMEBUFFER_BINDING), viewport = g.getParameter(g.VIEWPORT); const unpack = g.getParameter(g.PIXEL_UNPACK_BUFFER_BINDING), flip = g.getParameter(g.UNPACK_FLIP_Y_WEBGL); const dither = g.isEnabled(g.DITHER); + const depthMask=g.getParameter(g.DEPTH_WRITEMASK), activeTexture=g.getParameter(g.ACTIVE_TEXTURE); try { g.bindBuffer(g.PIXEL_UNPACK_BUFFER,null); g.pixelStorei(g.UNPACK_FLIP_Y_WEBGL,false); g.activeTexture(g.TEXTURE0); if (!programs.length) initialize(g); const options = config(), w = g.drawingBufferWidth, h = g.drawingBufferHeight; + updateFont(g,options.font);g.activeTexture(g.TEXTURE0); g.bindTexture(g.TEXTURE_2D,textures[0]!); if (width !== w || height !== h) { width=w; height=h; g.texImage2D(g.TEXTURE_2D,0,g.RGBA8,w,h,0,g.RGBA,g.UNSIGNED_BYTE,null); } // No readPixels, preserved drawing buffer, or CPU geographic copy. g.bindFramebuffer(g.READ_FRAMEBUFFER,target); g.copyTexSubImage2D(g.TEXTURE_2D,0,0,0,0,0,w,h); - g.disable(g.BLEND); g.disable(g.DEPTH_TEST); g.disable(g.STENCIL_TEST); g.disable(g.SCISSOR_TEST); g.disable(g.CULL_FACE); g.disable(g.DITHER); g.colorMask(true,true,true,true); + g.disable(g.BLEND); g.disable(g.DEPTH_TEST); g.depthMask(false);g.disable(g.STENCIL_TEST); g.disable(g.SCISSOR_TEST); g.disable(g.CULL_FACE); g.disable(g.DITHER); g.colorMask(true,true,true,true); g.bindVertexArray(vao); g.bindFramebuffer(g.FRAMEBUFFER,framebuffer); g.activeTexture(g.TEXTURE1); g.bindTexture(g.TEXTURE_2D,textures[1]!); if (columns !== options.columns || rows !== options.rows) { @@ -131,22 +149,30 @@ export function terminalGraphics(map: LibreMap, config: () => { columns: number; } g.viewport(0,0,columns,rows); g.useProgram(programs[0]!); const a=locations[0]!, b=locations[1]!; - g.uniform1i(a.terminal_scene!,0); g.uniform2f(a.grid!,columns,rows); g.uniform1i(a.ascii!,Number(options.ascii)); g.drawArrays(g.TRIANGLES,0,3); + g.uniform1i(a.terminal_scene!,0); g.uniform2f(a.grid!,columns,rows); g.uniform1i(a.ascii!,Number(options.mode===1)); g.drawArrays(g.TRIANGLES,0,3); g.bindFramebuffer(g.FRAMEBUFFER,target); g.viewport(0,0,w,h); g.useProgram(programs[1]!); g.activeTexture(g.TEXTURE2); g.bindTexture(g.TEXTURE_2D,textures[2]!); g.uniform1i(b.cells!,1); g.uniform1i(b.glyphs!,2); g.uniform2f(b.grid!,columns,rows); g.uniform2f(b.viewport!,w,h); + g.uniform1i(b.terminal_scene!,0);g.uniform1i(b.mode!,options.mode);g.uniform1f(b.brightness!,options.brightness); g.uniform3fv(b['colors[0]']!, options.colors.flatMap(color => { const n=parseInt(color.slice(1),16); return [(n>>16&255)/255,(n>>8&255)/255,(n&255)/255]; })); g.drawArrays(g.TRIANGLES,0,3); metrics.terminalRenderer='webgl2'; metrics.terminalGridCells=String(columns*rows); + metrics.terminalDrawing=String(options.mode);metrics.terminalBrightness=String(options.brightness); metrics.terminalSamples=String(Number(metrics.terminalSamples??0)+1); if (performance.now()-lastLabels>100) { frame(); lastLabels=performance.now(); } } catch { release(); failure(); } - finally { g.bindFramebuffer(g.FRAMEBUFFER,target); g.bindFramebuffer(g.READ_FRAMEBUFFER,readTarget); g.viewport(...viewport as [number,number,number,number]); g.bindBuffer(g.PIXEL_UNPACK_BUFFER,unpack); g.pixelStorei(g.UNPACK_FLIP_Y_WEBGL,flip); if (dither) g.enable(g.DITHER); } + finally { g.bindFramebuffer(g.FRAMEBUFFER,target); g.bindFramebuffer(g.READ_FRAMEBUFFER,readTarget); g.viewport(...viewport as [number,number,number,number]); g.bindBuffer(g.PIXEL_UNPACK_BUFFER,unpack); g.pixelStorei(g.UNPACK_FLIP_Y_WEBGL,flip);g.depthMask(depthMask);g.activeTexture(activeTexture); if (dither) g.enable(g.DITHER); } }, }; map.on('webglcontextlost',release); return { - attach() { if (disposed) return; if (!map.getLayer(layer.id)) map.addLayer(layer); else if (map.getLayersOrder().at(-1)!==layer.id) map.moveLayer(layer.id); }, + // Only geography is converted. Network ink, heat, selection and hit targets + // retain their real layers and cannot be mistaken for a cartographic colour. + attach() { if (disposed) return; const before=map.getLayersOrder().find(id=>id.startsWith('activity-heat-')); + if (!map.getLayer(layer.id)) map.addLayer(layer,before); + else if (before && map.getLayersOrder().indexOf(layer.id)!==map.getLayersOrder().indexOf(before)-1) map.moveLayer(layer.id,before); + }, + refreshFont() { atlasFont='';lastLabels=0;if(!disposed && enabled())map.triggerRepaint(); }, request() { lastLabels=0; if (!disposed && enabled()) map.triggerRepaint(); }, suspend: release, destroy() { disposed=true; map.off('webglcontextlost',release); if (map.getLayersOrder().includes(layer.id)) map.removeLayer(layer.id); release(); }, diff --git a/web/src/terminalGrid.ts b/web/src/terminalGrid.ts index c34128e..958dbd6 100644 --- a/web/src/terminalGrid.ts +++ b/web/src/terminalGrid.ts @@ -36,17 +36,29 @@ export function terminalInk(r: number, g: number, b: number, alpha = 255): numbe return 2; } -export function characterCells(image: Pick, ascii: boolean) { +export function characterCells(image: Pick, ascii: boolean, palette?: Record) { const { data, width, height } = image; const columns = Math.floor(width / 2), rows = Math.floor(height / 4); const glyphs: string[] = new Array(columns * rows).fill(' '), hot = [...glyphs]; const colors = new Uint8Array(glyphs.length), energy = new Uint8Array(glyphs.length); const strengths = new Float32Array(8), kinds = new Uint8Array(8); + const inks=palette?Object.entries(palette).map(([id,hex])=>{ + const rgb=[1,3,5].map(i=>parseInt(hex.slice(i,i+2),16));const peak=Math.max(1,...rgb); + return {id:Number(id),rgb:rgb.map(channel=>channel/peak)}; + }):undefined; for (let y = 0; y < rows; y++) for (let x = 0; x < columns; x++) { let mask = 0, white = 0, color = 2, peak = 0, colourPeak = 0, count = 0; for (let dy = 0; dy < 4; dy++) for (let dx = 0; dx < 2; dx++) { const p = ((y*4+dy)*width+x*2+dx)*4; - const k = terminalInk(data[p]!, data[p+1]!, data[p+2]!, data[p+3]!); + let k = terminalInk(data[p]!, data[p+1]!, data[p+2]!, data[p+3]!); + if(k && inks) { + const peak=Math.max(1,data[p]!,data[p+1]!,data[p+2]!); + let distance=Infinity; + for(const ink of inks) { + const d=ink.rgb.reduce((sum,v,i)=>sum+(data[p+i]!/peak-v)**2,0); + if(dsetDisplayColors()); +describe('Terminal profiles',()=>{ + it('migrates the three legacy choices without touching shared settings',()=>{ + const store={getItem:(key:string)=>key===TERMINAL_KEY?null:'{"palette":"amber","glyphs":"ascii","size":16}'}; + expect(loadTerminal(store)).toMatchObject({palette:'amber',glyphs:'ascii',size:16,fontSize:16}); + expect(loadTerminal({getItem:()=>{throw Error('blocked');}})).toEqual(terminalPreset('ansi')); + }); + it('bounds arbitrary saved data and rejects CSS, fonts and unknown keys',()=>{ + for(const raw of [null,[],{},false])expect(normalizeTerminal(raw)).toEqual(terminalPreset('ansi')); + const value=normalizeTerminal({palette:'__proto__',font:'url(https://evil)',uiFont:'bogus',glyphs:'html',weight:Infinity,fontSize:999,mapBrightness:-3,liveGlow:20,colours:{water:'red;display:none',ink:'#AaCcFF',unknown:'#ffffff'}}); + expect(value).toMatchObject({palette:'ansi',font:'mono',uiFont:'mono',glyphs:'braille',weight:600,fontSize:24,mapBrightness:.15,liveGlow:2}); + expect(value.colours.ink).toBe('#aaccff');expect(value.colours.water).toBe('#213c78'); + expect(Object.keys(value.colours)).toEqual(Object.keys(TERMINAL_COLOURS)); + }); + it('round-trips every preset and edits without sharing mutable defaults',()=>{ + for(const preset of Object.keys(TERMINAL_PRESETS) as (keyof typeof TERMINAL_PRESETS)[]){ + const profile=terminalPreset(preset); + expect(normalizeTerminal(JSON.parse(JSON.stringify(profile)))).toEqual(profile); + profile.colours.water='#ffffff';expect(terminalPreset(preset).colours.water).not.toBe('#ffffff'); + } + expect(hslColour(...colourHSL('#ff0000'))).toBe('#ff0000'); + expect(hslColour(180,100,50)).toBe('#00ffff'); + expect(colourHSL('#000000')).toEqual([0,0,0]); + }); + it('keeps arbitrary network colours and legend consistent, then removes the override',()=>{ + const old=displayColorRevision();setDisplayColors({'#4de7c4':'#5329ff','#ffffff':'#ff5500','bad':'url(no)'}); + expect(displayColorRevision()).toBe(old+1); + expect(displayColor('#4de7c4',false)).toBe('#5329ff');expect(packetPalette(false).Advert).toBe('#5329ff'); + expect(displayColor('rgba(77,231,196,0.4)',false)).toBe('rgba(83, 41, 255, 0.4)'); + expect(recolorPaint(['get','color'],false)).toEqual(['match',['get','color'],'#4de7c4','#5329ff','#ffffff','#ff5500',['get','color']]); + setDisplayColors();expect(displayColor('#4de7c4',false)).toBe('#4de7c4'); + }); + it('preserves glyph packet colours even when users choose unconventional hues',()=>{ + const data=new Uint8ClampedArray(32);data.set([83,41,255,220],0);data.set([255,85,0,255],28); + const cell=characterCells({data,width:2,height:4},false,{2:'#ff5500',4:'#5329ff',6:'#00ff00'}); + expect([...cell.colors]).toEqual([4]);expect(cell.hot).toEqual(['⢀']); + }); + it('starts Terminal with the owner-selected defaults in its own storage scope',async()=>{ + vi.resetModules();document.documentElement.setAttribute('data-terminal','true'); + try { + const ui=await import('./preferences'),display=await import('./displayPreferences'); + expect(ui.UI_STORAGE_KEY).toContain(':terminal-ui:');expect(display.DISPLAY_STORAGE_KEY).toContain(':terminal-display:'); + expect(ui.loadUiPreferences(localStorage)).toMatchObject({routes:true,livePackets:true,heatmap:true,clusters:false,hillshade:false,terrain3D:false,buildings:true,routeWindow:'15m',nodeLabels:true,mapLabels:true,roads:true,relief:.15}); + if('regions' in ui.DEFAULT_UI_PREFERENCES)expect(ui.DEFAULT_UI_PREFERENCES.regions).toBe(false); + expect(display.loadDisplayPreferences({getItem:()=>null})).toMatchObject({effects:'spectacle',detail:'complete',quality:'high',motion:'system',textSize:'standard',preset:'neon',...display.ROUTE_PRESETS.neon}); + expect(loadTerminal({getItem:()=>null})).toMatchObject({palette:'ansi',glyphs:'braille',size:10}); + } finally {document.documentElement.removeAttribute('data-terminal');vi.resetModules();} + }); +}); diff --git a/web/src/terminalProfile.ts b/web/src/terminalProfile.ts new file mode 100644 index 0000000..6ac6129 --- /dev/null +++ b/web/src/terminalProfile.ts @@ -0,0 +1,120 @@ +import { terminalPreferences as legacyPreferences } from './terminalGrid'; + +export const TERMINAL_KEY = 'cartolite-terminal-v2'; +export const TERMINAL_LEGACY_KEY = 'cartolite-terminal-v1'; +export const TERMINAL_FONTS = { + mono: { label: 'System mono', family: 'ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace' }, + vt323: { label: 'VT323 console', family: '"VT323", monospace' }, + pixel: { label: 'Silkscreen pixel', family: '"Silkscreen", monospace' }, + typewriter: { label: 'Typewriter', family: '"Courier New", Courier, monospace' }, +} as const; + +// Semantic slots stay independent: a green river can never become an Advert. +export const TERMINAL_COLOURS = { + background: ['Map', 'Background', '#000000'], water: ['Map', 'Water', '#213c78'], + vegetation: ['Map', 'Vegetation', '#253e31'], urban: ['Map', 'Built-up land', '#28323f'], + roads: ['Map', 'Roads', '#536b80'], boundary: ['Map', 'Borders', '#657d91'], + shore: ['Map', 'Shorelines', '#788a98'], buildings: ['Map', 'Buildings', '#667b89'], + terrain: ['Map', 'Terrain highlights', '#516455'], places: ['Labels', 'Place names', '#a5b8c8'], + labels: ['Labels', 'Node names', '#f2fff1'], selection: ['Nodes', 'Selected node', '#ffffff'], + neighbours: ['Nodes', 'Neighbours', '#a5b8c8'], + repeater: ['Nodes', 'Repeaters', '#72ffcf'], companion: ['Nodes', 'Companions', '#89e5ff'], + room: ['Nodes', 'Rooms', '#c6a4ff'], sensor: ['Nodes', 'Sensors / unknown', '#d7e393'], + advert: ['Traffic', 'Advert', '#72ffcf'], trace: ['Traffic', 'Trace', '#ffdb72'], + text: ['Traffic', 'Text', '#ff85ce'], ack: ['Traffic', 'ACK', '#89e5ff'], + control: ['Traffic', 'Control', '#c6a4ff'], other: ['Traffic', 'Other', '#b7cbd9'], + core: ['Traffic', 'Packet core', '#f2fff1'], + panel: ['Interface', 'Panel background', '#050b10'], field: ['Interface', 'Input background', '#08121a'], + border: ['Interface', 'Panel borders', '#527885'], ink: ['Interface', 'Text', '#d5e6df'], + strong: ['Interface', 'Headings', '#e9e9bf'], muted: ['Interface', 'Secondary text', '#a5bdbb'], + accent: ['Interface', 'Accent / focus', '#79f8c4'], active: ['Interface', 'Active controls', '#193c3e'], + warning: ['Interface', 'Warnings', '#ffd18a'], +} as const; +export type TerminalColour = keyof typeof TERMINAL_COLOURS; +export type TerminalFont = keyof typeof TERMINAL_FONTS; +export type TerminalPreset = 'ansi' | 'amber' | 'green' | 'cga' | 'ega' | 'cell'; +export interface TerminalProfile { + palette: TerminalPreset; glyphs: 'braille' | 'ascii' | 'blocks' | 'cell'; size: number; + font: TerminalFont; uiFont: TerminalFont; fontSize: number; weight: number; uiScale: number; + mapBrightness: number; labelBrightness: number; liveGlow: number; traffic: 'characters' | 'smooth'; + colours: Record; +} +const baseColours = Object.fromEntries(Object.entries(TERMINAL_COLOURS).map(([key, value]) => [key, value[2]])) as TerminalProfile['colours']; +const BASE: Omit = { + glyphs: 'braille', size: 10, font: 'mono', uiFont: 'mono', fontSize: 10, weight: 600, uiScale: 1, + mapBrightness: 1, labelBrightness: 1, liveGlow: 1, traffic: 'characters', +}; +export const TERMINAL_PRESETS: Record; options?: Partial> }> = { + ansi: { label: 'BBS', colours: {} }, + amber: { label: 'Amber', colours: { + water: '#332414', vegetation: '#30271b', urban: '#382d1c', roads: '#78552a', boundary: '#876c3c', shore: '#a5814c', buildings: '#806947', terrain: '#655235', places: '#bf9e70', + labels: '#ffe5ac', neighbours:'#bf9e70', repeater: '#ffd18a', companion: '#ffe8ba', room: '#eaba6c', sensor: '#dac19a', advert: '#ffd18a', trace: '#ffffc7', text: '#eaba6c', ack: '#ffe8ba', control: '#d1a66b', other: '#c7ad83', core: '#fff5dc', selection: '#ffffff', + panel: '#100b05', field: '#1c1308', border: '#806538', ink: '#f3d8a4', strong: '#fff0cc', muted: '#c5ab80', accent: '#ffd18a', active: '#40301b', warning: '#fff3ba', + } }, + green: { label: 'Green', colours: { + water: '#113b32', vegetation: '#122c1d', urban: '#203b29', roads: '#42684d', boundary: '#5d7e60', shore: '#72997f', buildings: '#446b51', terrain: '#345440', places: '#94bb9a', + labels: '#afffc7', neighbours:'#94bb9a', repeater: '#8dffb0', companion: '#ceffd9', room: '#61db86', sensor: '#b1d5ac', advert: '#8dffb0', trace: '#dfffab', text: '#6be79c', ack: '#ccffe4', control: '#51c98e', other: '#a3ceb1', core: '#effff2', selection: '#ffffff', + panel: '#050e08', field: '#0a1b12', border: '#497b5b', ink: '#c3f2cd', strong: '#e5ffdf', muted: '#9dbea5', accent: '#8dffb0', active: '#173c26', warning: '#dfffab', + } }, + cga: { label: 'CGA', options: { glyphs: 'blocks', font: 'pixel', fontSize: 11, weight: 400, mapBrightness: .7, traffic: 'smooth' }, colours: { + water: '#005555', vegetation: '#002a2a', urban: '#2b152b', roads: '#aa55aa', boundary: '#ff55ff', shore: '#55ffff', buildings: '#aa55aa', places: '#55ffff', labels: '#ffffff', + advert: '#55ffff', trace: '#ffffff', text: '#ff55ff', ack: '#55aaff', control: '#aa55ff', other: '#aaaaaa', repeater: '#55ffff', companion: '#ffffff', room: '#ff55ff', + panel: '#080008', field: '#180b18', border: '#aa55aa', ink: '#ffffff', strong: '#55ffff', muted: '#bbaabb', accent: '#ff55ff', active: '#3f153f', + } }, + ega: { label: 'EGA', options: { glyphs: 'ascii', font: 'vt323', fontSize: 16, weight: 400, mapBrightness: .65, traffic: 'smooth' }, colours: { + water: '#0000aa', vegetation: '#005500', urban: '#555555', roads: '#aaaaaa', boundary: '#aa5500', shore: '#5555ff', buildings: '#aaaaaa', places: '#ffff55', + advert: '#55ff55', trace: '#ffff55', text: '#ff55ff', ack: '#55ffff', control: '#5555ff', other: '#aaaaaa', repeater: '#55ff55', companion: '#55ffff', room: '#ff55ff', + border: '#5555ff', accent: '#55ffff', active: '#000055', + } }, + cell: { label: 'Cel-shaded', options: { glyphs: 'cell', font: 'mono', fontSize: 12, mapBrightness: .65, traffic: 'smooth' }, colours: { + background: '#07141b', water: '#183d59', vegetation: '#1e3d32', urban: '#35434b', roads: '#657582', boundary: '#81949c', shore: '#7b9ba9', buildings: '#647c88', terrain: '#476b53', places: '#b9cdd4', + } }, +}; +export function terminalPreset(palette: TerminalPreset): TerminalProfile { + const preset = TERMINAL_PRESETS[palette]; + return { ...BASE, ...preset.options, palette, colours: { ...baseColours, ...preset.colours } }; +} +export function normalizeTerminal(value: unknown): TerminalProfile { + const v = value && typeof value === 'object' ? value as Partial : {}; + const palette = typeof v.palette === 'string' && Object.hasOwn(TERMINAL_PRESETS, v.palette) ? v.palette : 'ansi'; + const defaults = terminalPreset(palette); + const number = (key: keyof TerminalProfile, min: number, max: number, step: number) => typeof v[key] === 'number' && Number.isFinite(v[key]) + ? Number((Math.round(Math.max(min, Math.min(max, v[key] as number)) / step) * step).toFixed(3)) : defaults[key] as number; + return { + palette, glyphs: ['braille','ascii','blocks','cell'].includes(String(v.glyphs)) ? v.glyphs! : defaults.glyphs, + size: [10,12,16].includes(v.size!) ? v.size! : defaults.size, + font: typeof v.font === 'string' && Object.hasOwn(TERMINAL_FONTS,v.font) ? v.font : defaults.font, + uiFont: typeof v.uiFont === 'string' && Object.hasOwn(TERMINAL_FONTS,v.uiFont) ? v.uiFont : defaults.uiFont, + fontSize: number('fontSize',10,24,1), weight: number('weight',400,700,100), uiScale: number('uiScale',.9,1.35,.05), + mapBrightness: number('mapBrightness',.15,1.3,.05), labelBrightness: number('labelBrightness',.4,1.3,.05), liveGlow: number('liveGlow',0,2,.1), + traffic: v.traffic === 'smooth' || v.traffic === 'characters' ? v.traffic : defaults.traffic, + colours: Object.fromEntries(Object.keys(baseColours).map(key => { + const colour = v.colours?.[key as TerminalColour]; + return [key, typeof colour === 'string' && /^#[0-9a-f]{6}$/i.test(colour) ? colour.toLowerCase() : defaults.colours[key as TerminalColour]]; + })) as TerminalProfile['colours'], + }; +} +export function loadTerminal(storage: Pick): TerminalProfile { + try { + const value = storage.getItem(TERMINAL_KEY); + if (value) return normalizeTerminal(JSON.parse(value)); + const raw=storage.getItem(TERMINAL_LEGACY_KEY); + if(!raw)return terminalPreset('ansi'); + const legacy=legacyPreferences(raw); + return normalizeTerminal({...legacy,fontSize:legacy.size}); + } catch { return terminalPreset('ansi'); } +} +export function shade(colour: string, amount: number): string { + return '#' + [1,3,5].map(start => Math.min(255, Math.round(parseInt(colour.slice(start,start+2),16)*amount)).toString(16).padStart(2,'0')).join(''); +} +export function colourHSL(hex: string): [number,number,number] { + const [r=0,g=0,b=0] = [1,3,5].map(i=>parseInt(hex.slice(i,i+2),16)/255); + const min=Math.min(r,g,b), max=Math.max(r,g,b), d=max-min, l=(max+min)/2; + const h=d===0?0:(max===r?(g-b)/d+(g{const k=(n+h/30)%12;return Math.round(255*(l-a*Math.max(-1,Math.min(k-3,9-k,1)))).toString(16).padStart(2,'0');}).join(''); +} diff --git a/web/vite.config.ts b/web/vite.config.ts index dd3c91a..1e86d40 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -7,6 +7,7 @@ function inputPath(relative: string): string { export default defineConfig({ build: { + manifest: true, target: 'es2022', assetsInlineLimit: 0, chunkSizeWarningLimit: 500,