Merge pull request 'feat(assets): VK loading-screen Lottie — bouncing Erudit tile' (#146) from feature/vk-loader-lottie into development

assets/vk/README.md

@@ -0,0 +1,115 @@
+# Erudit — VK loading-screen logo (Lottie)
+
+Animated logo for the **VK app loading screen** (shown before the SPA assets load).
+The Erudit «Э» tile (score `8`) **drops in under gravity, lands with a soft squash —
+its left/right edges bulging into a cushion — then springs back up**, looping. A light
+"glint" is caught at the moment of the bounce.
+
+| File | Purpose |
+|------|---------|
+| `erudit-loader.json` | The Lottie to upload to VK. |
+| `erudit-loader-preview.gif` | Looping preview. Rendered on a green "baize" background **only in the preview** — the real asset has a **transparent** background. |
+| `build/` | The reproducible build pipeline (see *Regenerate*). |
+
+**VK requirements met:** 96×96 px · vector Lottie JSON · ≤ 24 KB (~11 KB) · seamless
+~1.1 s loop · transparent background.
+
+Design reference: a photo of the physical wooden Erudit tile.
+
+---
+
+## How it works
+
+A single flat layer holds the tile — a rounded-rect **face path**, the two glyphs, and
+a thin border — and everything is driven by that layer's transform plus a few colour /
+shape tracks. The anchor sits on the tile's **bottom edge**, so the squash happens
+against the floor.
+
+### Bounce (gravity)
+`position.y` of the bottom edge goes apex → floor → apex with **no dwell** (the apex is
+an instantaneous turn-around). The fall uses a strong **ease-in** (accelerate) and the
+rise a strong **ease-out** (decelerate), so it reads as real gravity. While falling fast
+the tile slightly **stretches** (tall+thin); that is the squash-and-stretch setup.
+
+### Soft cushion (squash)
+On contact the layer **squashes** (scaleY↓, scaleX↑) about the bottom anchor, with a
+touch of skew. Crucially the squash/cushion is **decoupled from the fall speed** — it
+eases in and out *slowly* (`ES`), so the landing feels soft even though the fall is
+fast. The squash is deliberately gentle (≈ 86 % / 112 %).
+
+### The cushion shape (the hard part)
+The face is **not** a plain rounded rect — it is a path whose left/right contour bows
+out into a convex cushion on impact:
+- the rest rounded-rect outline is sampled (fine corner arcs + edge mids), and on impact
+  every point is pushed outward by a smooth **barrel** profile `f(y) = b·(1 − (y/HH)²)`
+  (max at the middle, fading to zero at the top/bottom);
+- so the **whole side — corners included — bows out as one piece**, never just the
+  straight middle;
+- bezier handles are computed as a **chordal spline** (handle length ∝ the adjacent
+  chord), which stays smooth across the uneven corner/edge point spacing. This is what
+  keeps the corner↔cushion junction kink-free — both at rest and fully bulged — which a
+  naïve uniform Catmull-Rom (or moving discrete points with fixed tangents) does not.
+
+### Glint
+At the bounce the face flashes a little lighter (`FACE_GLINT`) and the glyphs warm
+toward brown-red (`BLACK_LIT`), then settle back. A cheap, warm "catch the light".
+
+### Border & background
+The tile carries a thin static **border** a touch darker than the face (`BORDER`) so it
+reads on any background. The **green baize background is added only when rendering the
+preview GIF** — the Lottie itself is transparent.
+
+### Player compatibility
+Only plain 2-D shapes (`ddd:0`) — no 3-D layers, expressions or effects — so every
+Lottie player (lottie-web on the web, rlottie on native) renders it identically.
+
+---
+
+## Glyphs
+
+`Э` (U+042D) and `8` are **real outlines from LiberationSans-Regular** — metric-
+compatible with Arial, matching the game's `--font: system-ui … Arial` stack
+(see `ui/src/app.css`). `build/extract.js` pulls the contours into `build/glyphs.json`
+as Lottie cubic paths; a hair of same-colour stroke adds a touch of weight.
+
+---
+
+## Regenerate
+
+Requirements: Node ≥ 18. `extract.js` additionally needs `opentype.js`
+(`npm i opentype.js`); **`generate.js` has no dependencies**.
+
+```sh
+cd assets/vk
+
+# 1. (optional) re-extract the glyphs — only if you change the font:
+#    default font: /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf
+node build/extract.js [/path/to/font.ttf]      # -> build/glyphs.json
+
+# 2. build the animation (reads build/glyphs.json):
+node build/generate.js erudit-loader.json      # -> erudit-loader.json
+
+# 3. (optional) live preview — needs lottie-web (npm i lottie-web):
+node build/build-preview.js erudit-loader.json preview.html
+#    then open preview.html in a browser.
+```
+
+The preview GIF is assembled by rendering the Lottie frame-by-frame (lottie-web canvas,
+filled with the green baize) and stitching with `ffmpeg`; the live HTML preview is the
+quickest way to eyeball changes.
+
+## Tunables (top of `build/generate.js`)
+
+| Symbol | Meaning |
+|--------|---------|
+| `OP`, `FR` | loop length (frames) / fps — overall speed |
+| `T_HIT / T_PEAK / T_LIFT / T_REC` | beats: contact / squash peak / lift-off / cushion recovered |
+| `EI / EO / ES` | easings: fast fall / fast rise / slow soft cushion |
+| `APEX`, `FLOOR` | bottom-edge screen-y at the top of the bounce / at rest |
+| `HW`, `HH`, `CR` | tile half-width / half-height / corner radius |
+| `scl` squash values | the squash amount (scaleX↑ / scaleY↓) |
+| `bulge` `b` | cushion depth (how far the sides bow out) |
+| `FACE / FACE_GLINT` | wood face / glint flash |
+| `BORDER` | tile rim colour |
+| `BLACK / BLACK_LIT` | glyph / glyph-at-glint (brown-red) |
+| preview bg `#3C7858` | the green-baize colour used **only** in the GIF |

assets/vk/build/build-preview.js

@@ -0,0 +1,31 @@
+'use strict';
+const fs = require('fs');
+const data = fs.readFileSync(process.argv[2] || 'erudit.json', 'utf8');
+const lottiePath = __dirname + '/node_modules/lottie-web/build/player/lottie.min.js';
+const html = `<!doctype html><html><head><meta charset="utf8"><style>
+body{margin:0;background:#2b2b2b;font-family:sans-serif;color:#ccc}
+.row{display:flex;gap:18px;padding:18px;align-items:flex-end;flex-wrap:wrap}
+.cell{text-align:center}
+.chk{background-image:linear-gradient(45deg,#8a8a8a 25%,transparent 25%),linear-gradient(-45deg,#8a8a8a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8a8a8a 75%),linear-gradient(-45deg,transparent 75%,#8a8a8a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#b5b5b5}
+.s96{width:96px;height:96px}.big{width:336px;height:336px}small{font-size:11px}
+</style></head><body><div class="row" id="row"></div>
+<script src="./lottie.min.js"></script>
+<script>
+const animationData=${data};window.AD=animationData;
+const row=document.getElementById('row');window.anims=[];
+function make(cls,frame,label){
+  const cell=document.createElement('div');cell.className='cell';
+  const box=document.createElement('div');box.className='chk '+cls;cell.appendChild(box);
+  cell.appendChild(document.createElement('br'));
+  const cap=document.createElement('small');cap.textContent=label;cell.appendChild(cap);
+  row.appendChild(cell);
+  const a=lottie.loadAnimation({container:box,renderer:'svg',loop:false,autoplay:false,animationData:JSON.parse(JSON.stringify(animationData))});
+  a.addEventListener('DOMLoaded',()=>a.goToAndStop(frame,true));
+  window.anims.push(a);
+}
+[0,22,45,68].forEach(f=>make('s96',f,'f'+f));
+make('big',22,'f22 x3.5');
+window.__ready=true;
+</script></body></html>`;
+fs.writeFileSync(process.argv[3] || 'preview.html', html);
+console.log('wrote', process.argv[3] || 'preview.html');

assets/vk/build/extract.js

@@ -0,0 +1,67 @@
+'use strict';
+// Extract the Cyrillic "Э" (U+042D) and the digit "8" outlines from a grotesque
+// font (LiberationSans = Arial-metric, matching the game's system-ui/Arial stack)
+// and emit Lottie cubic-bezier contours, centred at the origin, y-down.
+const opentype = require('opentype.js');
+const fs = require('fs');
+
+const FONT = process.argv[2] || '/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf';
+const b = fs.readFileSync(FONT);
+const font = opentype.parse(b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength));
+const FS = 1000; // em scale
+
+function glyphContours(ch) {
+  const p = font.charToGlyph(ch).getPath(0, 0, FS); // baseline at y=0, y-down
+  const contours = [];
+  let cur = null, prev = null;
+  for (const c of p.commands) {
+    if (c.type === 'M') {
+      if (cur) contours.push(cur);
+      cur = [{ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] }];
+      prev = { x: c.x, y: c.y };
+    } else if (c.type === 'L') {
+      cur.push({ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] });
+      prev = { x: c.x, y: c.y };
+    } else if (c.type === 'C') {
+      cur[cur.length - 1].o = [c.x1, c.y1];
+      cur.push({ v: [c.x, c.y], i: [c.x2, c.y2], o: [c.x, c.y] });
+      prev = { x: c.x, y: c.y };
+    } else if (c.type === 'Q') {
+      const c1 = [prev.x + 2 / 3 * (c.x1 - prev.x), prev.y + 2 / 3 * (c.y1 - prev.y)];
+      const c2 = [c.x + 2 / 3 * (c.x1 - c.x), c.y + 2 / 3 * (c.y1 - c.y)];
+      cur[cur.length - 1].o = c1;
+      cur.push({ v: [c.x, c.y], i: c2, o: [c.x, c.y] });
+      prev = { x: c.x, y: c.y };
+    } else if (c.type === 'Z') {
+      if (cur && cur.length > 1) {
+        const last = cur[cur.length - 1], first = cur[0];
+        if (Math.hypot(last.v[0] - first.v[0], last.v[1] - first.v[1]) < 1e-3) {
+          first.i = last.i;            // fold the duplicate closing point into the first
+          cur.pop();
+        }
+      }
+      if (cur) { contours.push(cur); cur = null; }
+    }
+  }
+  if (cur) contours.push(cur);
+
+  let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+  const out = contours.map(ct => {
+    const v = [], i = [], o = [];
+    ct.forEach(pt => {
+      v.push(pt.v);
+      i.push([pt.i[0] - pt.v[0], pt.i[1] - pt.v[1]]);
+      o.push([pt.o[0] - pt.v[0], pt.o[1] - pt.v[1]]);
+      minx = Math.min(minx, pt.v[0]); maxx = Math.max(maxx, pt.v[0]);
+      miny = Math.min(miny, pt.v[1]); maxy = Math.max(maxy, pt.v[1]);
+    });
+    return { i, o, v, c: true };
+  });
+  return { contours: out, bbox: { x: minx, y: miny, w: maxx - minx, h: maxy - miny } };
+}
+
+const E = glyphContours('Э');
+const D8 = glyphContours('8');
+fs.writeFileSync('glyphs.json', JSON.stringify({ em: FS, E, D8 }));
+console.log('Э bbox', E.bbox, 'contours', E.contours.map(c => c.v.length));
+console.log('8 bbox', D8.bbox, 'contours', D8.contours.map(c => c.v.length));

assets/vk/build/generate.js

@@ -0,0 +1,153 @@
+'use strict';
+// VK preloader Lottie: a flat wooden Erudit tile ("Э" + score "8") that drops in
+// under gravity, squashes on impact (convex cushion bulging out the left/right edges
+// + a touch of skew), and springs back up — looping. A light "glint" is caught at the
+// moment of the bounce. Pure 2D shapes (ddd:0). Glyphs are real LiberationSans
+// outlines (Arial-metric, = the game's font stack); see extract.js -> glyphs.json.
+const fs = require('fs');
+const G = JSON.parse(fs.readFileSync(__dirname + '/glyphs.json', 'utf8'));
+
+// ---- canvas / timing -------------------------------------------------------
+const W = 96, H = 96, cx = 48;
+const FR = 30, OP = 34;                      // ~1.13 s loop (dynamic, 25% faster)
+// keyframe beats (frames): fast fall -> soft squash -> lift -> fast rise -> apex (no dwell)
+const T_HIT = 13, T_PEAK = 18, T_LIFT = 19, T_REC = 28;
+
+// ---- geometry --------------------------------------------------------------
+const HW = 26, HH = 26, CR = 6;              // tile half-width / half-height / corner radius
+const FLOOR = 90, APEX = 60;                 // bottom-centre screen-y at rest / at the top of the bounce
+
+// ---- palette ---------------------------------------------------------------
+const col = h => [parseInt(h.slice(1,3),16)/255, parseInt(h.slice(3,5),16)/255, parseInt(h.slice(5,7),16)/255];
+const FACE = col('#D9B978');                 // wood face (flat)
+const FACE_GLINT = col('#E7CD95');           // face flash caught on impact (gentle, not blinding)
+const BORDER = col('#B49559');               // tile rim: a touch darker than the face, reads on any bg
+const BLACK = col('#1A1A1A');
+const BLACK_LIT = col('#421A0B');            // glyph warms to brown-red on the glint
+const lerp = (a, b, t) => a.map((v, i) => v + (b[i] - v) * t);
+
+// ---- property / easing helpers ---------------------------------------------
+const still = v => ({ a: 0, k: v });
+const EI = { o: { x: [0.82], y: [0] }, i: { x: [1], y: [1] } };  // strong accelerate (gravity fall)
+const EO = { o: { x: [0], y: [0] }, i: { x: [0.18], y: [1] } };  // strong decelerate (rise to apex)
+const ES = { o: { x: [0.42], y: [0] }, i: { x: [0.58], y: [1] } }; // soft/slow (the cushion)
+function anim(samples) {                      // samples: {t, v, e?} ; e = easing toward the NEXT key
+  return { a: 1, k: samples.map((s, idx) => {
+    const kf = { t: s.t, s: s.v };
+    if (idx < samples.length - 1) { const e = s.e || ES; kf.o = e.o; kf.i = e.i; }
+    return kf;
+  }) };
+}
+const animColor = s => anim(s.map(x => ({ t: x.t, v: [...x.v, 1], e: x.e })));
+
+// ---- shape helpers ---------------------------------------------------------
+const tr = () => ({ ty: 'tr', p: still([0,0]), a: still([0,0]), s: still([100,100]), r: still(0), o: still(100) });
+const grp = (items, nm) => ({ ty: 'gr', it: [...items, tr()], nm });
+const fill = c => ({ ty: 'fl', c, o: still(100), r: 1, bm: 0 });
+const stroke = (c,w) => ({ ty: 'st', c: still(c), o: still(100), w: still(w), lc: 2, lj: 2, ml: 4, bm: 0 });
+function glyph(gd, hpx, px, py, bold, colour, nm) {  // font glyph -> filled+stroked group
+  const sc = hpx / gd.bbox.h;
+  const bcx = gd.bbox.x + gd.bbox.w / 2, bcy = gd.bbox.y + gd.bbox.h / 2;
+  const shapes = gd.contours.map(ct => ({
+    ty: 'sh', d: 1, ks: still({
+      i: ct.i.map(p => [p[0]*sc, p[1]*sc]), o: ct.o.map(p => [p[0]*sc, p[1]*sc]),
+      v: ct.v.map(p => [(p[0]-bcx)*sc + px, (p[1]-bcy)*sc + py]), c: true,
+    }),
+  }));
+  return grp([...shapes, fill(colour), stroke(BLACK, bold)], nm);
+}
+
+// Sample the rest rounded-rect outline (clockwise): fine corner arcs + one mid point
+// per straight edge, so a smooth interpolant reproduces it cleanly.
+function arc(ccx, ccy, a0, a1, n) {
+  const out = [];
+  for (let i = 0; i < n; i++) { const a = (a0 + (a1 - a0) * i / (n - 1)) * Math.PI / 180; out.push([ccx + CR*Math.cos(a), ccy + CR*Math.sin(a)]); }
+  return out;
+}
+const REST = (() => {
+  const NC = 7, yi = HH - CR, xi = HW - CR;
+  const C = [ arc(xi,-yi,-90,0,NC), arc(xi,yi,0,90,NC), arc(-xi,yi,90,180,NC), arc(-xi,-yi,180,270,NC) ];
+  const pts = [];
+  for (let k = 0; k < 4; k++) {
+    pts.push(...C[k]);
+    const a = C[k][NC-1], b = C[(k+1)%4][0];
+    pts.push([(a[0]+b[0])/2, (a[1]+b[1])/2]);   // straight-edge mid point (keeps the edge straight)
+  }
+  return pts;
+})();
+// The whole left/right contour (corners + side) bows out by one smooth barrel profile;
+// Catmull-Rom tangents (from neighbours) make every junction C1-smooth -> no kink, the
+// corners follow the cushion and the cushion melts into the corners, bulged or not.
+function facePath(b) {
+  const f = y => b * (1 - (y/HH) * (y/HH));                       // 0 at top/bottom, max at the middle
+  const V = REST.map(([x, y]) => [x + Math.sign(x) * f(y), y]);   // push the sides out, top/bottom stay
+  const n = V.length, I = [], O = [];
+  for (let k = 0; k < n; k++) {
+    const p0 = V[(k-1+n)%n], p1 = V[k], p2 = V[(k+1)%n];
+    let dx = p2[0]-p0[0], dy = p2[1]-p0[1];                       // tangent direction (neighbours)
+    const dl = Math.hypot(dx, dy) || 1; dx /= dl; dy /= dl;
+    const ln = Math.hypot(p2[0]-p1[0], p2[1]-p1[1]) / 3;          // handles ~ 1/3 of the adjacent chord
+    const lp = Math.hypot(p1[0]-p0[0], p1[1]-p0[1]) / 3;          // -> chordal spline, no overshoot/facets
+    O.push([dx*ln, dy*ln]); I.push([-dx*lp, -dy*lp]);
+  }
+  return { i: I, o: O, v: V, c: true };
+}
+const facePathKeys = samples => ({ a: 1, k: samples.map((s, idx) => {
+  const kf = { t: s.t, s: [facePath(s.b)] };
+  if (idx < samples.length - 1) { const e = s.e || ES; kf.o = e.o; kf.i = e.i; }
+  return kf;
+}) });
+
+// ---- animation tracks ------------------------------------------------------
+// bottom-centre screen-y (the tile rests/squashes on its bottom edge)
+const posY = anim([
+  { t: 0,      v: [cx, APEX, 0],  e: EI },           // apex -> immediately falls (no dwell)
+  { t: T_HIT,  v: [cx, FLOOR, 0], e: ES },           // FAST fall (accelerate) -> floor
+  { t: T_LIFT, v: [cx, FLOOR, 0], e: EO },           // sit on the floor while the cushion absorbs
+  { t: OP,     v: [cx, APEX, 0] },                   // FAST rise (decelerate) -> apex = loop start
+]);
+// scale about the bottom anchor: stretch while falling, gentle/slow cushion squash on impact
+const scl = anim([
+  { t: 0,        v: [100, 100, 100], e: ES },
+  { t: T_HIT-5,  v: [95, 106, 100], e: ES },         // stretch while falling fast
+  { t: T_HIT,    v: [104, 95, 100], e: ES },         // touch down
+  { t: T_PEAK,   v: [112, 86, 100], e: ES },         // soft squash peak (gentler, less plче)
+  { t: T_REC,    v: [100, 100, 100], e: ES },        // slow cushion release -> soft landing
+  { t: OP,       v: [100, 100, 100] },
+]);
+// a touch of skew through the squash (organic deform), back to 0
+const skw = anim([
+  { t: T_HIT, v: [0], e: ES }, { t: T_PEAK, v: [4], e: ES }, { t: T_REC, v: [0] }, { t: OP, v: [0] },
+]);
+// left/right cushion bulge: 0 -> gentle peak -> 0 (never inward)
+const bulge = facePathKeys([
+  { t: T_HIT, b: 0, e: ES }, { t: T_PEAK, b: 4, e: ES }, { t: T_REC, b: 0 }, { t: OP, b: 0 },
+]);
+// glint: face + glyph catch the light at the bounce
+const faceCol = animColor([
+  { t: T_HIT-2, v: FACE, e: ES }, { t: T_PEAK, v: FACE_GLINT, e: ES }, { t: T_REC, v: FACE }, { t: OP, v: FACE },
+]);
+const glyphCol = animColor([
+  { t: T_HIT-2, v: BLACK, e: ES }, { t: T_PEAK, v: BLACK_LIT, e: ES }, { t: T_REC, v: BLACK }, { t: OP, v: BLACK },
+]);
+
+// ---- layer (face + glyphs share the bounce/squash transform) ---------------
+const faceShape = grp([ { ty: 'sh', d: 1, ks: bulge }, fill(faceCol), stroke(BORDER, 1.8) ], 'face');
+const glyphE = glyph(G.E,  32, 0, -1, 1.0, glyphCol, 'E');                 // centred Э
+const glyph8 = glyph(G.D8, 8.5, HW-6.5, HH-7.5, 0.5, glyphCol, 'score');   // 8 in the corner
+
+const tile = {
+  ddd: 0, ind: 1, ty: 4, nm: 'tile', sr: 1,
+  ks: { o: still(100), r: still(0), p: posY, a: still([0, HH, 0]), s: scl, sk: skw, sa: still(0) },
+  ao: 0, shapes: [ glyph8, glyphE, faceShape ], ip: 0, op: OP, st: 0, bm: 0,
+};
+
+const root = {
+  v: '5.7.4', fr: FR, ip: 0, op: OP, w: W, h: H, nm: 'erudit-vk-loader', ddd: 0,
+  assets: [], layers: [ tile ], markers: [],
+};
+
+const out = process.argv[2] || 'erudit.json';
+const round = (k, v) => (typeof v === 'number' ? Math.round(v * 100) / 100 : v);
+fs.writeFileSync(out, JSON.stringify(root, round));
+console.log('wrote', out, fs.statSync(out).size, 'bytes');