diff --git a/ui/index.html b/ui/index.html index e6167a2..be6efac 100644 --- a/ui/index.html +++ b/ui/index.html @@ -2,6 +2,209 @@ + + diff --git a/ui/package.json b/ui/package.json index 11fa26e..9138db1 100644 --- a/ui/package.json +++ b/ui/package.json @@ -27,6 +27,7 @@ "@playwright/test": "^1.49.0", "@sveltejs/vite-plugin-svelte": "^5.0.0", "@types/node": "^22.10.0", + "core-js-bundle": "^3.49.0", "svelte": "^5.15.0", "svelte-check": "^4.1.0", "typescript": "^5.7.0", diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index 5f813f2..8b4434c 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -36,6 +36,9 @@ importers: '@types/node': specifier: ^22.10.0 version: 22.19.19 + core-js-bundle: + specifier: ^3.49.0 + version: 3.49.0 svelte: specifier: ^5.15.0 version: 5.56.0 @@ -508,6 +511,9 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} + core-js-bundle@3.49.0: + resolution: {integrity: sha512-WXc7oOsePN3aKFOJVG5zQdi+h/Jm2W0WIPYvRc4IG3vkNcbC2w6LlSzTmnhOl6N1xmOJEzCSNieX3mwF+3zBGw==} + debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -1132,6 +1138,8 @@ snapshots: clsx@2.1.1: {} + core-js-bundle@3.49.0: {} + debug@4.4.3: dependencies: ms: 2.1.3 diff --git a/ui/pnpm-workspace.yaml b/ui/pnpm-workspace.yaml index 34a05e7..14571e3 100644 --- a/ui/pnpm-workspace.yaml +++ b/ui/pnpm-workspace.yaml @@ -1,4 +1,8 @@ # pnpm 11 records build-script approval here. esbuild's postinstall materialises # its CLI shim; the platform binary itself ships as an optional dependency. +# core-js-bundle ships a prebuilt minified.js (we only read that file at build time, +# via vite.config emitPolyfills) and its install script is just a funding banner, so +# it is denied — nothing to build. allowBuilds: + core-js-bundle: false esbuild: true diff --git a/ui/src/App.svelte b/ui/src/App.svelte index ad3f36d..39bd17e 100644 --- a/ui/src/App.svelte +++ b/ui/src/App.svelte @@ -26,7 +26,12 @@ import TelegramLaunchError from './screens/TelegramLaunchError.svelte'; onMount(() => { - void bootstrap(); + // Tell the index.html boot guard that startup completed, so its reactive net does not raise the + // unsupported-engine screen on a healthy boot — it only fires when an uncaught error occurred + // AND this flag never sets (a bundle that failed to parse, or an unforeseen incompatibility). + void bootstrap().then(() => { + (window as unknown as { __booted?: boolean }).__booted = true; + }); }); // The lobby is the cold-start landing (an empty hash and Telegram launch params both parse diff --git a/ui/src/game/Board.svelte b/ui/src/game/Board.svelte index 7288220..3e94fa3 100644 --- a/ui/src/game/Board.svelte +++ b/ui/src/game/Board.svelte @@ -479,6 +479,11 @@ position: absolute; top: 5%; left: 8%; + /* Chrome < 105 has no container-query units: a dropped `cqw` would inherit the .cell + `font-size: 0` and the glyph would vanish. Fall back to a viewport-relative size that tracks + the board (≈ the viewport-fitted query container) and the zoom (--z), so old Android System + WebViews still draw the tile glyphs. Chrome 105+ takes the exact `cqw` line below. */ + font-size: calc(4.2vmin * var(--z, 1)); font-size: 4.2cqw; font-weight: 700; line-height: 1; @@ -487,12 +492,14 @@ position: absolute; right: 5%; bottom: 3%; + font-size: calc(2.4vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 2.4cqw; font-weight: 600; } /* A placed Erudit blank ("звёздочка") shows its star where the (absent) point value sits, its ink centred on the same line as a neighbouring tile's value digit. */ .blankmark { + font-size: calc(2.8vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 2.8cqw; bottom: 0; } @@ -501,6 +508,7 @@ inset: 0; display: grid; place-items: center; + font-size: calc(3.6vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 3.6cqw; opacity: 0.7; } @@ -509,6 +517,7 @@ inset: 0; display: grid; place-items: center; + font-size: calc(2.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 2.7cqw; font-weight: 600; opacity: 0.9; @@ -526,10 +535,12 @@ padding: 0 1px; } .bt { + font-size: calc(1.7vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 1.7cqw; font-weight: 600; } .bb { + font-size: calc(1.9vmin * var(--z, 1)); /* cqw fallback for Chrome < 105 — see .letter */ font-size: 1.9cqw; font-weight: 700; white-space: nowrap; diff --git a/ui/vite.config.ts b/ui/vite.config.ts index 53258e6..3395ad0 100644 --- a/ui/vite.config.ts +++ b/ui/vite.config.ts @@ -1,7 +1,42 @@ +import { readFileSync } from 'node:fs'; import { resolve } from 'node:path'; -import { defineConfig } from 'vite'; +import { defineConfig, type Plugin } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte'; +/** + * injectBootVersion stamps the app version into index.html's boot-capability guard, replacing its + * __BOOT_VERSION__ placeholder with the same VITE_APP_VERSION build-arg that feeds __APP_VERSION__. + * The guard runs before the bundle, so it cannot read the bundle's version; this lets its on-demand + * diagnostic report name the client version anyway. Falls back to "dev" for a local build. + */ +function injectBootVersion(): Plugin { + const version = process.env.VITE_APP_VERSION || 'dev'; + return { + name: 'inject-boot-version', + transformIndexHtml(html) { + return html.replace(/__BOOT_VERSION__/g, version); + }, + }; +} + +/** + * emitPolyfills writes the prebuilt core-js bundle to `dist/polyfills.js`. The index.html gate + * script loads it via document.write only on an old engine that lacks the es2020+ runtime APIs the + * app uses (globalThis, structuredClone, Array.at, …) — e.g. the Chromium 66 Android System WebView + * behind the Telegram/VK in-app browser — before the deferred module runs. A modern engine never + * requests it, so it adds nothing to that payload and stays out of the module graph the bundle-size + * gate measures. + */ +function emitPolyfills(): Plugin { + return { + name: 'emit-polyfills', + generateBundle() { + const src = readFileSync(resolve(import.meta.dirname, 'node_modules/core-js-bundle/minified.js'), 'utf8'); + this.emitFile({ type: 'asset', fileName: 'polyfills.js', source: src }); + }, + }; +} + // The edge Connect service is scrabble.edge.v1.Gateway; the gateway serves it over // h2c on :8081 by default. In dev we proxy the RPC path so the browser (which can // not speak h2c directly) talks to the dev server on the same origin. In `mock` @@ -19,7 +54,9 @@ export default defineConfig(({ mode }) => ({ // so a missing build-arg never breaks the build. __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION || 'dev'), }, - plugins: [svelte()], + // emitPolyfills ships dist/polyfills.js (loaded only by old engines; see its docstring + the + // index.html boot guard). injectBootVersion stamps the app version into that guard's diagnostic. + plugins: [svelte(), emitPolyfills(), injectBootVersion()], server: { port: 5173, proxy: @@ -33,7 +70,14 @@ export default defineConfig(({ mode }) => ({ }, }, build: { - target: 'es2022', + // Down-level to es2019 so an old Android System WebView (seen: Telegram/VK in-app WebView on + // Chromium 66, Android 9) can parse the bundle — esbuild lowers es2020+ syntax (?., ??, private + // fields, static blocks, …) that Chrome 66 rejects with "Unexpected token ?", which left the SPA + // on a white screen. esbuild lowers syntax only, not runtime APIs — the es2020+ globals the + // bundle/deps call at runtime (globalThis, structuredClone, Array.at, …) are covered separately + // by the conditional core-js loader (emitPolyfills + the index.html gate), loaded only on an + // engine that actually lacks them. + target: 'es2019', // Emit sourcemaps everywhere except the production build. A shipped `.map` // carries full `sourcesContent` — the entire TypeScript/Svelte source — and the // gateway/landing images serve `dist/` verbatim, so production maps would expose