manzoloandClaude Opus 5.5
a699115a03
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GiECd9KMfjthRUnujCGSzZ
90 lines
6.4 KiB
JavaScript
90 lines
6.4 KiB
JavaScript
import { SEATS, NAMES, MANI, canDraw, myTurn, evaluate, CATEGORIES, red } from './poker.js';
|
|
import { drawTable, drawCard } from './briscola-render.js';
|
|
import { text, panel } from './bocce-render.js';
|
|
|
|
// Le carte di Andrea, in basso: coordinate condivise da disegno e tocco (bersagli larghi anche sul telefono).
|
|
export const HAND = { x: 150, y: 222, gap: 70, w: 62, h: 90 };
|
|
export function cardAt(c, [x, y]) {
|
|
if (!canDraw(c)) return -1;
|
|
return c.cards.andrea.findIndex((_, i) => x >= HAND.x + i * HAND.gap && x < HAND.x + i * HAND.gap + HAND.w && y >= HAND.y - 14 && y < HAND.y + HAND.h);
|
|
}
|
|
const ink = '#2a1f1a', paper = '#fff4dc';
|
|
function rect(ctx, x, y, w, h, color) { ctx.fillStyle = color; ctx.fillRect(Math.round(x), Math.round(y), w, h); }
|
|
// I semi francesi a pixel (il carattere del gioco non ha ♥♦♣♠): cuore, quadro, fiore, picca, larghi 2·s.
|
|
function pip(ctx, suit, x, y, s) {
|
|
const color = suit === 'cuori' || suit === 'quadri' ? '#c0392b' : ink;
|
|
ctx.fillStyle = color; ctx.beginPath();
|
|
if (suit === 'quadri') { ctx.moveTo(x, y - s); ctx.lineTo(x + s * 0.75, y); ctx.lineTo(x, y + s); ctx.lineTo(x - s * 0.75, y); }
|
|
else if (suit === 'cuori') {
|
|
ctx.moveTo(x, y + s); ctx.lineTo(x - s, y - s * 0.1); ctx.arc(x - s * 0.5, y - s * 0.35, s * 0.52, Math.PI * 0.85, Math.PI * 1.95);
|
|
ctx.arc(x + s * 0.5, y - s * 0.35, s * 0.52, Math.PI * 1.05, Math.PI * 0.15); ctx.lineTo(x, y + s);
|
|
} else if (suit === 'picche') {
|
|
ctx.moveTo(x, y - s); ctx.lineTo(x + s, y + s * 0.15); ctx.arc(x + s * 0.5, y + s * 0.3, s * 0.5, 0, Math.PI * 0.9);
|
|
ctx.lineTo(x, y + s * 0.2); ctx.arc(x - s * 0.5, y + s * 0.3, s * 0.5, Math.PI * 0.1, Math.PI); ctx.closePath();
|
|
ctx.fill(); ctx.beginPath(); ctx.moveTo(x, y + s * 0.3); ctx.lineTo(x + s * 0.35, y + s); ctx.lineTo(x - s * 0.35, y + s);
|
|
} else {
|
|
for (const [dx, dy] of [[0, -0.45], [-0.48, 0.15], [0.48, 0.15]]) { ctx.moveTo(x + dx * s + s * 0.42, y + dy * s); ctx.arc(x + dx * s, y + dy * s, s * 0.42, 0, Math.PI * 2); }
|
|
ctx.fill(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + s * 0.35, y + s); ctx.lineTo(x - s * 0.35, y + s);
|
|
}
|
|
ctx.closePath(); ctx.fill();
|
|
}
|
|
// Una carta francese: angolo col valore e il seme, il seme grande in mezzo (le figure con una cornice).
|
|
export function drawFrench(ctx, card, x, y, w, h, back = false) {
|
|
if (back) { drawCard(ctx, null, x, y, w, h, true); return; }
|
|
rect(ctx, x + 2, y + 3, w, h, '#15231d'); rect(ctx, x, y, w, h, ink); rect(ctx, x + 1, y + 1, w - 2, h - 2, paper);
|
|
const color = red(card) ? '#c0392b' : ink, k = w / 62;
|
|
text(ctx, card.rank, x + 5 * k, y + 9 * k, Math.round(9 * k), color);
|
|
pip(ctx, card.suit, x + 9 * k, y + 22 * k, 5 * k);
|
|
if (['J', 'Q', 'K'].includes(card.rank)) {
|
|
rect(ctx, x + 14 * k, y + 28 * k, 34 * k, 50 * k, red(card) ? '#f3d6c4' : '#d8dfe6');
|
|
ctx.strokeStyle = color; ctx.lineWidth = 1; ctx.strokeRect(Math.round(x + 14 * k) + 0.5, Math.round(y + 28 * k) + 0.5, Math.round(34 * k), Math.round(50 * k));
|
|
text(ctx, card.rank, x + 31 * k, y + 46 * k, Math.round(16 * k), color, 'center');
|
|
pip(ctx, card.suit, x + 31 * k, y + 66 * k, 7 * k);
|
|
} else pip(ctx, card.suit, x + 31 * k, y + 52 * k, 14 * k);
|
|
}
|
|
// Le fiches del piatto: pile colorate, una ogni cinque.
|
|
function chips(ctx, n, x, y) {
|
|
const colors = ['#c0392b', '#2f6fb0', '#e8e0c8', '#3a8a4a'];
|
|
for (let i = 0; i < Math.min(24, Math.ceil(n / 5)); i++) {
|
|
const col = i % 6, row = Math.floor(i / 6), cx = x + col * 14 - 35, cy = y - row * 3;
|
|
rect(ctx, cx, cy, 12, 4, '#1a1410'); rect(ctx, cx, cy - 1, 12, 3, colors[i % colors.length]);
|
|
}
|
|
}
|
|
// Dove siedono: Vannino a sinistra, Pierino a destra, Andrea in basso.
|
|
const SPOTS = { vannino: { x: 40, y: 70 }, pierino: { x: 420, y: 70 } };
|
|
|
|
export function drawPoker(ctx, c) {
|
|
ctx.save(); ctx.imageSmoothingEnabled = false;
|
|
drawTable(ctx, 'IL POKERINO DEL BARRETTINO · 10 LUGLIO 1997');
|
|
const show = c.step === 'show' || c.step === 'result';
|
|
for (const who of ['vannino', 'pierino']) {
|
|
const { x, y } = SPOTS[who], out = !c.in?.[who];
|
|
text(ctx, `${NAMES[who]} · ${c.chips[who]}`, x + 90, y - 22, 7, c.current === who ? '#ffe28a' : '#fff0c8', 'center');
|
|
c.cards[who].forEach((card, i) => drawFrench(ctx, card, x + i * 36, y - 10, 42, 62, !(show && c.in[who])));
|
|
if (out && c.step !== 'result') { ctx.fillStyle = 'rgba(20,16,12,0.55)'; ctx.fillRect(x - 2, y - 12, 190, 66); text(ctx, 'lascia', x + 90, y + 22, 7, '#d9ccba', 'center'); }
|
|
if (show && c.in[who] && c.cards[who].length) text(ctx, CATEGORIES[evaluate(c.cards[who])[0]], x + 90, y + 62, 6, c.winners?.includes(who) ? '#b9e5b3' : '#d9ccba', 'center');
|
|
if (c.changed?.[who] !== undefined && c.step !== 'show') text(ctx, c.changed[who] ? `cambia ${c.changed[who]}` : 'servito', x + 90, y + 62, 6, '#9fd0ff', 'center');
|
|
}
|
|
// Il piatto in mezzo.
|
|
chips(ctx, c.pot ?? 0, 320, 178);
|
|
text(ctx, `Piatto ${c.pot ?? 0}`, 320, 192, 7, '#ffe09b', 'center');
|
|
// Le carte di Andrea: quelle scelte per il cambio si alzano.
|
|
c.cards.andrea.forEach((card, i) => {
|
|
const up = c.selected?.has(i) ? -14 : 0;
|
|
drawFrench(ctx, card, HAND.x + i * HAND.gap, HAND.y + up, HAND.w, HAND.h);
|
|
if (up) text(ctx, 'cambia', HAND.x + i * HAND.gap + HAND.w / 2, HAND.y + up - 7, 5, '#ffe28a', 'center');
|
|
});
|
|
text(ctx, `Andrea · ${c.chips.andrea}`, 320, 210, 7, myTurn(c) || canDraw(c) ? '#ffe28a' : '#fff0c8', 'center');
|
|
if (c.cards.andrea.length) text(ctx, CATEGORIES[evaluate(c.cards.andrea)[0]], 590, 300, 6, '#d9ccba', 'center');
|
|
text(ctx, `Mano ${Math.min(c.hand, MANI)}/${MANI}`, 40, 300, 6, '#d9ccba');
|
|
if (c.line && c.step !== 'result') { ctx.fillStyle = '#17160fd0'; ctx.fillRect(120, 146, 400, 16); text(ctx, c.line, 320, 154, 7, c.step === 'show' ? '#b9e5b3' : '#9fd0ff', 'center'); }
|
|
if (c.step === 'result') {
|
|
const r = c.result, title = r.winner === 'player' ? 'HAI VINTO IL POKERINO!' : r.winner === 'draw' ? 'PARI' : `HA VINTO ${NAMES[r.top[0]].toUpperCase()}`;
|
|
panel(ctx, 150, 110, 340, 84);
|
|
text(ctx, title, 320, 132, 11, r.winner === 'player' ? '#b9e5b3' : '#efd49e', 'center');
|
|
text(ctx, SEATS.map(s => `${NAMES[s]} ${r.chips[s]}`).join(' · '), 320, 156, 7, '#efd49e', 'center');
|
|
text(ctx, 'Torna al Barrettino per uscire.', 320, 176, 7, '#d9ccba', 'center');
|
|
}
|
|
ctx.restore();
|
|
}
|