Macchinine: si sceglie la macchinina, la forza sale da zero tenendo premuto e la spinta parte lasciando; il saluto col Chiaru («un girino alle case rosse» / «Vorrai dire un giochino!» / «Ciao Mattè»), «Si fa una gara alle macchinine?!?!», Andrea chiama Bertovo «Fabri»; musica del GP in prestito (Andrea)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GiECd9KMfjthRUnujCGSzZ

src/engine/micro-render.js

@@ -1,4 +1,4 @@
-import { HALF, CAR, canThrow, guide, done, overHeld } from './micro.js';
+import { HALF, CAR, CARS, canThrow, guide, done, overHeld, carImage, choiceAt } from './micro.js';
 import { text, panel } from './bocce-render.js';
 
 const NAME = { player: 'Andrea', cpu: 'Chiaru' };
@@ -68,6 +68,12 @@ function aim(ctx, c, img) {
     ctx.fillStyle = over ? '#ff6a4a' : '#e8b48f'; ctx.strokeStyle = '#6b3d26'; ctx.lineWidth = 1;
     ctx.beginPath(); ctx.arc(fx, fy, 4, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
     ctx.fillStyle = '#f7d9c4'; ctx.fillRect(Math.round(fx + ux * 1.5) - 1, Math.round(fy + uy * 1.5) - 1, 2, 2); // l'unghia
+    // La forza che sale mentre si tiene premuto: una barretta sopra la macchinina.
+    if (c.holding) {
+        const x = Math.round(me.x - 15), y = Math.round(me.y - 19);
+        ctx.fillStyle = '#17160fd0'; ctx.fillRect(x - 1, y - 1, 32, 6);
+        ctx.fillStyle = over ? '#ff6a4a' : c.power > 0.75 ? '#ffd23c' : '#9be07c'; ctx.fillRect(x, y, Math.round(30 * c.power), 4);
+    }
 }
 // Dove una macchinina ha fatto il fallo: una croce di gesso rosso che sfuma, e la macchinina (ribaltata, se ha cappottato)
 // che sparisce per tornare al suo posto.
@@ -83,11 +89,27 @@ function returns(ctx, c, images) {
     }
 }
 
+// La scelta della macchinina: le sei in grande sul parcheggio, quella scelta cerchiata di gesso e un po' sollevata.
+function choice(ctx, c, image) {
+    ctx.fillStyle = '#17160fc8'; ctx.fillRect(60, 56, 520, 250);
+    text(ctx, 'SCEGLI LA TUA MACCHININA', 320, 76, 12, '#efd49e', 'center');
+    CARS.forEach((car, i) => {
+        const [x, y] = choiceAt(i), on = i === c.choice, lift = on ? Math.sin(c.visual.time * 5) * 1.5 - 2 : 0, img = image?.(carImage(car.id, true));
+        if (on) { ctx.strokeStyle = 'rgba(246,246,238,0.9)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.ellipse(x, y, 50, 28, 0, 0, Math.PI * 2); ctx.stroke(); }
+        ctx.fillStyle = 'rgba(10,12,16,0.35)'; ctx.fillRect(x - 37, y - 16, 78, 38); // l'ombra
+        if (img) ctx.drawImage(img, Math.round(x - img.width / 2), Math.round(y - img.height / 2 + lift));
+        text(ctx, car.name, x, y + 34, 8, on ? '#fff0c8' : '#a99d86', 'center');
+    });
+    const cpu = CARS[c.choice].id === 'blu' ? 'la rossa' : 'la blu e gialla';
+    text(ctx, `Il Chiaru prende ${cpu}. Tocca la tua, o frecce e Scegli.`, 320, 292, 8, '#d9ccba', 'center');
+}
+
 export function drawMicro(ctx, c, def, bg, image) {
     ctx.save(); ctx.imageSmoothingEnabled = false;
     if (bg) ctx.drawImage(bg, 0, 0, 640, 360); else { ctx.fillStyle = '#4b4d50'; ctx.fillRect(0, 0, 640, 360); }
     drawChalk(ctx, c.track);
-    const images = { player: image?.(def.cars?.player), cpu: image?.(def.cars?.cpu) };
+    if (c.step === 'choose') { choice(ctx, c, image); ctx.restore(); return; }
+    const images = { player: image?.(carImage(c.colors.player)), cpu: image?.(carImage(c.colors.cpu)) };
     if (c.step === 'rolling' && c.trail.length > 1) {
         ctx.strokeStyle = 'rgba(255,248,220,0.35)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(...c.trail[0]);
         for (const p of c.trail.slice(1)) ctx.lineTo(...p);
@@ -101,7 +123,8 @@ export function drawMicro(ctx, c, def, bg, image) {
     text(ctx, 'LA PISTA COL GESSO', 8, 7, 8, '#efd49e');
     const level = { bona: 'alla bona', seria: 'seria', male: 'a fassi male' }[c.level];
     text(ctx, `${level} · spinte ${c.flicks.player}`, 8, 16, 7, '#d9ccba');
-    for (const [who, x0, color] of [['player', 168, '#e0543c'], ['cpu', 404, '#3c66d8']]) {
+    const tint = id => CARS.find(x => x.id === id).color;
+    for (const [who, x0, color] of [['player', 168, tint(c.colors.player)], ['cpu', 404, tint(c.colors.cpu)]]) {
         text(ctx, NAME[who], x0, 11, 8, '#fff0c8');
         ctx.fillStyle = '#3a372e'; ctx.fillRect(x0 + 52, 7, 150, 8);
         ctx.fillStyle = color; ctx.fillRect(x0 + 52, 7, Math.round(150 * done(c, who)), 8);