From 826f5f99ecba5a69f1ee98306cec24f3f8987fb1 Mon Sep 17 00:00:00 2001 From: Andrea Manzi Date: Fri, 23 Oct 2026 00:08:00 +0200 Subject: [PATCH] Prototipo del motore: scena, camminata, verbi, inventario, dialoghi, salvataggio Motore guidato dai dati con due scene di prova (Piazza e salita alla Fortezza), percorsi su area concava, clic intelligente e pressione lunga, test della soluzione completa in node e nel browser con Playwright. Nel documento la leggenda del nonno. Co-Authored-By: Claude Opus 5.5 --- .gitignore | 1 + README.md | 26 +++++ docs/PROGETTO.md | 12 ++- index.html | 46 ++++++++ package-lock.json | 44 ++++++++ package.json | 14 +++ src/engine/command.js | 64 +++++++++++ src/engine/game.js | 229 ++++++++++++++++++++++++++++++++++++++++ src/engine/geometry.js | 97 +++++++++++++++++ src/engine/render.js | 72 +++++++++++++ src/engine/storage.js | 29 +++++ src/main.js | 169 +++++++++++++++++++++++++++++ src/story/solution.js | 11 ++ src/story/story.js | 203 +++++++++++++++++++++++++++++++++++ style.css | 70 ++++++++++++ tests/browser.mjs | 105 ++++++++++++++++++ tests/command.test.mjs | 66 ++++++++++++ tests/geometry.test.mjs | 38 +++++++ tests/helpers.mjs | 17 +++ tests/logic.test.mjs | 142 +++++++++++++++++++++++++ tests/storage.test.mjs | 23 ++++ tests/story.test.mjs | 95 +++++++++++++++++ 22 files changed, 1572 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/engine/command.js create mode 100644 src/engine/game.js create mode 100644 src/engine/geometry.js create mode 100644 src/engine/render.js create mode 100644 src/engine/storage.js create mode 100644 src/main.js create mode 100644 src/story/solution.js create mode 100644 src/story/story.js create mode 100644 style.css create mode 100644 tests/browser.mjs create mode 100644 tests/command.test.mjs create mode 100644 tests/geometry.test.mjs create mode 100644 tests/helpers.mjs create mode 100644 tests/logic.test.mjs create mode 100644 tests/storage.test.mjs create mode 100644 tests/story.test.mjs diff --git a/.gitignore b/.gitignore index f69c355..38f3240 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ assets/raw/ prompts/ _site/ __pycache__/ +node_modules/ diff --git a/README.md b/README.md index 9ea33dc..0a27b7b 100644 --- a/README.md +++ b/README.md @@ -6,3 +6,29 @@ Il drappo con il Regolo è sparito: un ragazzo del paese deve ritrovarlo prima d *Al Lele, che mi ha fatto conoscere Monkey Island.* Progetto in fase di ideazione: il documento di progetto è in [`docs/PROGETTO.md`](docs/PROGETTO.md). +Per ora c'è un prototipo del motore con due scene di prova e grafica provvisoria. + +## Giocare in locale + +```zsh +python3 -m http.server 8000 # poi http://localhost:8000 +``` + +Clic = azione più sensata (parla, guarda, vai); clic destro o pressione lunga = guarda; un verbo scelto vale per il +clic successivo. Spazio salta la battuta, i numeri scelgono nel dialogo, Esc annulla il verbo. + +## Struttura + +- `src/engine/`: motore senza storia (`game.js` logica e coda delle azioni, `geometry.js` area calpestabile e + percorsi, `command.js` verbi e clic, `render.js` disegno, `storage.js` salvataggio); +- `src/story/`: la storia come dati (`story.js`) e la sua soluzione completa (`solution.js`); +- `src/main.js`: collega tutto alla pagina. + +## Test + +```zsh +npm test # logica, storia coerente, soluzione percorsa dall'inizio alla fine +npm install && npx playwright install chromium-headless-shell +npm run browser # partita completa con clic veri in Chromium, salvataggio, telefono +``` + diff --git a/docs/PROGETTO.md b/docs/PROGETTO.md index 19cd786..3d64c15 100644 --- a/docs/PROGETTO.md +++ b/docs/PROGETTO.md @@ -44,7 +44,10 @@ Andrea vive a **Cardetole** (i verdi), ma nel 2007 corre per **Campomigliaio** ( amico, l'**Arcu**. Decide di risolvere il mistero prima della festa. Per arrivare alla Fortezza, chiusa da anni, deve farsi aiutare da tutti e quattro i rioni: e ognuno vuole qualcosa in cambio. -**Finale (idea):** nei sotterranei il Regolo esiste davvero, ma non è il mostro della leggenda. È un "piccolo re" +**Finale (idea 2, dal ricordo del nonno):** vedi «La voce di famiglia» qui sotto: la leggenda l'avrebbe messa in +giro il nonno di Andrea per tenersi i funghi della Fortezza. Le due idee possono stare insieme. + +**Finale (idea 1):** nei sotterranei il Regolo esiste davvero, ma non è il mostro della leggenda. È un "piccolo re" permaloso che da secoli compare sul drappo e non è mai stato invitato alla festa. Si è preso il drappo per farsi notare. Andrea lo convince a restituirlo… e il Regolo, per la prima volta, assiste al Palio dalle mura. [Da rivedere: è solo una proposta, il colpo di scena giusto può venire dai ricordi di Andrea.] @@ -56,6 +59,13 @@ notare. Andrea lo convince a restituirlo… e il Regolo, per la prima volta, ass catturarono; un'altra che cadde dal cielo mentre si scavavano le fondamenta. → Due versioni che si contraddicono: ottime per personaggi che litigano su "come è andata veramente". - **Il Regolo della sfilata**: nel corteo sfila un Regolo costruito dai ragazzi a scuola (ricordo di Andrea). +- **La voce di famiglia** (ricordo di Andrea, mai verificato ma riferito da tanti): il nonno di Andrea, + **Settimo Villani** [DA ANDREA: confermare il nome], che visse nella Fortezza, avrebbe inventato lui la leggenda + del serpente pericoloso per tenere lontana la gente e prendersi i funghi da solo. + → Possibile **colpo di scena** del finale: nei sotterranei Andrea scopre le tracce del nonno (un cesto, un + cartello «ATTENTI AL REGOLO» scritto a mano, il posto dei funghi) e capisce chi ha "inventato" il Regolo. + Da decidere [DA ANDREA]: se il Regolo resta comunque vero (il nonno l'ha inventato… o l'aveva incontrato?), + se il nonno compare (ricordo, fantasma bonario, voce) o solo i suoi segni. - **Il soldato Regolo**: un giovane soldato di guardia, tradito e murato dai compagni; nelle notti di luna piena si sentono i suoi passi. → Il fantasma che aiuta Andrea nei sotterranei (o che lo spaventa a morte, per ridere). diff --git a/index.html b/index.html new file mode 100644 index 0000000..2a9afb2 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + +La Leggenda del Regolo + + + +
+
+ +
+
+

La Leggenda
del Regolo

+

San Piero a Sieve · Palio della Fortezza · 2007

+
+

Al Lele, che mi ha fatto conoscere Monkey Island.

+
+ +
+
+
+
+
+
+
+ +
+

Gira il telefono: in orizzontale si gioca meglio.

+
+ + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..7ac0b07 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,44 @@ +{ + "name": "leggenda-del-regolo", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "leggenda-del-regolo", + "version": "0.1.0", + "devDependencies": { + "playwright": "^1.64.1" + } + }, + "node_modules/playwright": { + "version": "1.64.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.64.1.tgz", + "integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.64.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/playwright-core": { + "version": "1.64.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.64.1.tgz", + "integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=20" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..915c39b --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "leggenda-del-regolo", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "test": "node --test tests/*.test.mjs", + "browser": "node tests/browser.mjs", + "serve": "python3 -m http.server 8000" + }, + "devDependencies": { + "playwright": "^1.64.1" + } +} diff --git a/src/engine/command.js b/src/engine/command.js new file mode 100644 index 0000000..2d11a1d --- /dev/null +++ b/src/engine/command.js @@ -0,0 +1,64 @@ +// La "frase" in costruzione sotto la scena (Usa squama con…) e cosa fa ogni clic. +// Senza verbo scelto vale il clic intelligente: l'azione più sensata per quel punto. +import { VERB_LABELS } from './game.js'; + +export class Command { + constructor(game) { + this.game = game; + this.verb = null; + this.item = null; + } + + reset() { this.verb = null; this.item = null; } + + pickVerb(verb) { + this.verb = this.verb === verb ? null : verb; + this.item = null; + } + + // Testo della riga sotto la scena, con l'eventuale bersaglio sotto il puntatore. + sentence(target = null) { + const g = this.game, name = target && g.targetName(target); + if (this.item) return `${VERB_LABELS[this.verb]} ${g.itemName(this.item)} ${this.verb === 'give' ? 'a' : 'con'}${name ? ' ' + name : '…'}`; + if (this.verb) return `${VERB_LABELS[this.verb]}${name ? ' ' + name : '…'}`; + if (!target) return ''; + const isItem = !!g.story.items[target]; + return isItem ? `Usa ${name} con…` : `${VERB_LABELS[g.defaultVerb(target)]} ${name}`; + } + + // Clic sulla scena: `look` per il clic destro o la pressione lunga. + clickScene(point, { look = false } = {}) { + const g = this.game; + if (g.skip()) return 'skip'; + if (g.dialogue || g.busy) return null; + const h = g.hotspotAt(point); + let done; + if (look && h) done = g.act('look', h.id); + else if (!h) done = g.walkTo(point); + else if (this.item) done = g.act(this.verb, h.id, this.item); + else if (this.verb) done = g.act(this.verb, h.id); + else done = g.act(g.defaultVerb(h.id), h.id); + this.reset(); + return done ? (h ? 'act' : 'walk') : null; + } + + clickItem(id, { look = false } = {}) { + const g = this.game; + if (g.skip()) return 'skip'; + if (g.dialogue || g.busy) return null; + if (look) { this.reset(); return g.act('look', id) && 'act'; } + if (this.item) { + const ok = this.item !== id && g.act('use', id, this.item); + this.reset(); + return ok ? 'act' : null; + } + if (!this.verb || this.verb === 'use' || this.verb === 'give') { + this.verb ??= 'use'; + this.item = id; + return 'select'; + } + const ok = g.act(this.verb, id); + this.reset(); + return ok && 'act'; + } +} diff --git a/src/engine/game.js b/src/engine/game.js new file mode 100644 index 0000000..13fc7d0 --- /dev/null +++ b/src/engine/game.js @@ -0,0 +1,229 @@ +// Il cuore dell'avventura, senza DOM: stato, comandi, coda delle azioni, dialoghi. +// La storia (scene, oggetti, dialoghi) arriva tutta dai dati: qui non c'è nessun enigma scritto a mano. +import { findPath, dist, inBox, nearestInside } from './geometry.js'; + +export const VERBS = ['walk', 'look', 'take', 'use', 'talk', 'open', 'give']; +export const VERB_LABELS = { walk: 'Vai a', look: 'Guarda', take: 'Prendi', use: 'Usa', talk: 'Parla con', open: 'Apri', give: 'Dai' }; +const DEFAULT_LINES = { + walk: null, + look: 'Niente di speciale.', + take: 'Non credo di poterlo prendere.', + use: 'Non so proprio come usarlo.', + talk: 'Non mi sembra un gran chiacchierone.', + open: 'Non si apre.', + give: 'Non credo che lo voglia.', + with: 'Non funziona.', +}; +const SPEED = 95; +// Solo profilo, come i cicli di camminata: 'up' e 'down' lasciano il verso com'è. +const FACING = { left: -1, right: 1 }; + +// Condizioni: 'flag', '!flag', 'has:oggetto', '!has:oggetto', oppure un elenco (tutte vere). +export function check(cond, state) { + if (cond == null) return true; + if (Array.isArray(cond)) return cond.every(c => check(c, state)); + const not = cond.startsWith('!'), key = not ? cond.slice(1) : cond; + const value = key.startsWith('has:') ? state.inventory.includes(key.slice(4)) : !!state.flags[key]; + return not ? !value : value; +} + +export const sayTime = text => Math.max(1.6, 0.9 + text.length * 0.055); + +export function newState(story) { + const { scene, at } = story.start; + return { scene, x: at[0], y: at[1], facing: 1, inventory: [], flags: {}, used: {}, ended: false }; +} + +// Ripristina un salvataggio scartando tutto quello che la storia attuale non conosce più. +export function restoreState(story, data) { + const fresh = newState(story); + if (!data || typeof data !== 'object' || !story.scenes[data.scene]) return fresh; + const scene = story.scenes[data.scene]; + const [x, y] = Number.isFinite(data.x) && Number.isFinite(data.y) ? nearestInside(scene.walk, [data.x, data.y]) : scene.entry ?? story.start.at; + const inventory = Array.isArray(data.inventory) ? [...new Set(data.inventory.filter(i => story.items[i]))] : []; + const pick = obj => Object.fromEntries(Object.entries(obj && typeof obj === 'object' ? obj : {}).filter(([, v]) => v === true)); + return { scene: data.scene, x, y, facing: data.facing === -1 ? -1 : 1, inventory, flags: pick(data.flags), used: pick(data.used), ended: data.ended === true }; +} + +export class Game { + constructor(story, { state, onSave } = {}) { + this.story = story; + this.state = state ? restoreState(story, state) : newState(story); + this.onSave = onSave ?? (() => {}); + this.queue = []; + this.task = null; + this.path = []; + this.speech = null; + this.dialogue = null; + this.walking = false; + this.time = 0; + } + + get scene() { return this.story.scenes[this.state.scene]; } + // Occupato: c'è qualcosa in corso che il giocatore non può interrompere. La camminata verso un punto + // o verso un oggetto si può sempre cambiare con un altro clic: la coda che la seguiva viene scartata. + get busy() { return !!this.speech || (this.task ? !this.task.interruptible : this.queue.length > 0); } + get idle() { return !this.busy && !this.task && !this.dialogue; } + + snapshot() { + const { scene, x, y, facing, inventory, flags, used, ended } = this.state; + return { scene, x: Math.round(x), y: Math.round(y), facing, inventory: [...inventory], flags: { ...flags }, used: { ...used }, ended }; + } + + hotspots() { return (this.scene.hotspots ?? []).filter(h => check(h.when, this.state)); } + hotspot(id) { return this.hotspots().find(h => h.id === id); } + hotspotAt(p) { + const list = this.hotspots(); + for (let i = list.length - 1; i >= 0; i--) if (inBox(list[i].box, p)) return list[i]; + return null; + } + itemName(id) { return this.story.items[id]?.name ?? id; } + targetName(id) { return this.story.items[id] ? this.itemName(id) : this.hotspot(id)?.name ?? id; } + defaultVerb(target) { + if (this.story.items[target]) return 'look'; + const h = this.hotspot(target); + return h?.default ?? (h?.exit ? 'walk' : 'look'); + } + + // Quale elenco di effetti produce "verbo + bersaglio (+ oggetto)": il punto unico della logica d'avventura. + resolve(verb, target, item = null) { + const items = this.story.items, h = items[target] ? null : this.hotspot(target); + const def = h ?? items[target]; + if (!def) return []; + if (item) { + const table = verb === 'give' ? 'give' : 'with'; + const found = def[table]?.[item] ?? items[item]?.with?.[target]; + if (found) return found; + return [{ say: verb === 'give' ? DEFAULT_LINES.give : DEFAULT_LINES.with }]; + } + if (def.actions?.[verb]) return def.actions[verb]; + if (verb === 'walk') return h?.exit ? [{ go: h.exit.scene, at: h.exit.at, face: h.exit.face }] : []; + if (verb === 'take' && !h) return [{ say: 'Ce l\'ho già.' }]; + return DEFAULT_LINES[verb] ? [{ say: DEFAULT_LINES[verb] }] : []; + } + + // Comandi dal giocatore. Restituiscono false se in quel momento vanno ignorati. + walkTo(p) { + if (this.busy || this.dialogue || this.state.ended) return false; + this.queue = []; + this.task = { walk: p, interruptible: true }; + this.startWalk(p); + return true; + } + + act(verb, target, item = null) { + if (this.busy || this.dialogue || this.state.ended) return false; + const effects = this.resolve(verb, target, item); + const h = this.story.items[target] ? null : this.hotspot(target); + const steps = []; + if (h) { + const at = h.at ?? [h.box[0] + h.box[2] / 2, h.box[1] + h.box[3]]; + steps.push({ walk: at, interruptible: true }); + if (h.face) steps.push({ face: h.face }); + } + this.task = null; + this.path = []; + this.walking = false; + this.queue = [...steps, ...effects]; + return true; + } + + skip() { + if (this.speech) { this.speech = null; return true; } + return false; + } + + options() { + if (!this.dialogue || this.busy) return []; + const node = this.story.dialogues[this.dialogue.id].nodes[this.dialogue.node]; + return node.options.filter(o => check(o.when, this.state) && !(o.once && this.state.used[o.id])); + } + + choose(index) { + const option = this.options()[index]; + if (!option) return false; + if (option.once) this.state.used[option.id] = true; + const next = option.next ?? this.dialogue.node; + this.queue.push({ say: option.say ?? option.text, who: 'andrea' }, ...(option.then ?? []), next === 'end' ? { endDialogue: true } : { node: next }); + return true; + } + + startWalk(p) { + this.path = findPath(this.scene.walk, [this.state.x, this.state.y], p); + this.walking = this.path.length > 0; + } + + scaleAt(y) { + const d = this.scene.depth; + if (!d) return 1; + const [[y0, s0], [y1, s1]] = d, t = Math.max(0, Math.min(1, (y - y0) / (y1 - y0))); + return s0 + (s1 - s0) * t; + } + + speakerPoint(who) { + if (!who || who === 'andrea') return [this.state.x, this.state.y - 62 * this.scaleAt(this.state.y)]; + const h = this.hotspot(who) ?? (this.scene.hotspots ?? []).find(x => x.id === who); + if (!h) return [this.state.x, this.state.y - 62]; + return h.talkAt ?? [h.box[0] + h.box[2] / 2, h.box[1] - 4]; + } + + update(dt) { + this.time += dt; + if (this.speech) { + this.speech.left -= dt; + if (this.speech.left > 0) return; + this.speech = null; + } + if (this.walking) { + let step = SPEED * this.scaleAt(this.state.y) * dt; + while (step > 0 && this.path.length) { + const target = this.path[0], d = dist([this.state.x, this.state.y], target); + if (Math.abs(target[0] - this.state.x) > 0.5) this.state.facing = target[0] > this.state.x ? 1 : -1; + if (d <= step) { + [this.state.x, this.state.y] = target; + this.path.shift(); + step -= d; + } else { + this.state.x += (target[0] - this.state.x) / d * step; + this.state.y += (target[1] - this.state.y) / d * step; + step = 0; + } + } + if (this.path.length) return; + this.walking = false; + this.task = null; + } + // Esegue gli effetti istantanei di fila e si ferma al primo che richiede tempo. + while (!this.speech && !this.walking && this.queue.length) this.run(this.queue.shift()); + } + + run(e) { + const s = this.state; + if (e.say != null) this.speech = { text: e.say, who: e.who ?? 'andrea', left: sayTime(e.say) }; + else if (e.walk) { this.task = e; this.startWalk(e.walk); } + // `go` prima di `face`: un cambio scena porta con sé il verso d'arrivo. + else if (e.go) this.go(e.go, e.at, e.face); + else if (e.face) s.facing = FACING[e.face] ?? s.facing; + else if (e.give) { if (!s.inventory.includes(e.give)) s.inventory.push(e.give); } + else if (e.drop) s.inventory = s.inventory.filter(i => i !== e.drop); + else if (e.set) s.flags[e.set] = true; + else if (e.unset) delete s.flags[e.unset]; + else if (e.if !== undefined) this.queue.unshift(...(check(e.if, s) ? e.then ?? [] : e.else ?? [])); + else if (e.dialogue) this.dialogue = { id: e.dialogue, node: 'start' }; + else if (e.node) this.dialogue.node = e.node; + else if (e.endDialogue) this.dialogue = null; + else if (e.end) { s.ended = true; this.onSave(this.snapshot()); } + else throw new Error('Effetto sconosciuto: ' + JSON.stringify(e)); + } + + go(scene, at, face) { + if (!this.story.scenes[scene]) throw new Error('Scena sconosciuta: ' + scene); + this.state.scene = scene; + [this.state.x, this.state.y] = at ?? this.scene.entry; + this.state.facing = FACING[face] ?? this.state.facing; + this.path = []; + this.walking = false; + this.queue.unshift(...(this.scene.enter ?? [])); + this.onSave(this.snapshot()); + } +} diff --git a/src/engine/geometry.js b/src/engine/geometry.js new file mode 100644 index 0000000..119e9e7 --- /dev/null +++ b/src/engine/geometry.js @@ -0,0 +1,97 @@ +// Area calpestabile: un poligono semplice (anche concavo) in coordinate di scena. +// Il percorso passa per i vertici concavi (grafo di visibilità + A*), così il personaggio +// gira attorno agli angoli invece di attraversare i muri. +const EPS = 1e-6; + +export const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]); + +function onSegment(p, a, b, tol = 0.5) { + const [px, py] = p, [ax, ay] = a, [bx, by] = b; + const len2 = (bx - ax) ** 2 + (by - ay) ** 2; + const t = len2 ? Math.max(0, Math.min(1, ((px - ax) * (bx - ax) + (py - ay) * (by - ay)) / len2)) : 0; + return dist(p, [ax + t * (bx - ax), ay + t * (by - ay)]) <= tol; +} + +// Dentro o sul bordo (con tolleranza di mezzo pixel). +export function inside(poly, p) { + let hit = false; + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) { + const a = poly[i], b = poly[j]; + if (onSegment(p, a, b)) return true; + if ((a[1] > p[1]) !== (b[1] > p[1]) && p[0] < (b[0] - a[0]) * (p[1] - a[1]) / (b[1] - a[1]) + a[0]) hit = !hit; + } + return hit; +} + +const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]); + +// Incrocio proprio: i due segmenti si tagliano in un punto interno a entrambi. +function crosses(p1, p2, q1, q2) { + const d1 = cross(q1, q2, p1), d2 = cross(q1, q2, p2), d3 = cross(p1, p2, q1), d4 = cross(p1, p2, q2); + return ((d1 > EPS && d2 < -EPS) || (d1 < -EPS && d2 > EPS)) && ((d3 > EPS && d4 < -EPS) || (d3 < -EPS && d4 > EPS)); +} + +export function visible(poly, a, b) { + if (!inside(poly, a) || !inside(poly, b)) return false; + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) + if (crosses(a, b, poly[i], poly[j])) return false; + // Un segmento che passa per due vertici può uscire senza incrociare nessun lato: si campiona. + for (let k = 1; k < 8; k++) { + const t = k / 8; + if (!inside(poly, [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t])) return false; + } + return true; +} + +export function nearestInside(poly, p) { + if (inside(poly, p)) return [p[0], p[1]]; + let best = null, bestD = Infinity; + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) { + const [ax, ay] = poly[j], [bx, by] = poly[i]; + const len2 = (bx - ax) ** 2 + (by - ay) ** 2; + const t = len2 ? Math.max(0, Math.min(1, ((p[0] - ax) * (bx - ax) + (p[1] - ay) * (by - ay)) / len2)) : 0; + const q = [ax + t * (bx - ax), ay + t * (by - ay)], d = dist(p, q); + if (d < bestD) { bestD = d; best = q; } + } + return best; +} + +function signedArea(poly) { + let s = 0; + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) s += poly[j][0] * poly[i][1] - poly[i][0] * poly[j][1]; + return s / 2; +} + +// I vertici concavi (svolta contraria al verso del poligono) sono gli unici dove un percorso minimo può piegare. +export function concaveVertices(poly) { + const sign = Math.sign(signedArea(poly)), n = poly.length; + return poly.filter((v, i) => sign * cross(poly[(i - 1 + n) % n], v, poly[(i + 1) % n]) < -EPS); +} + +export function findPath(poly, from, to) { + const start = nearestInside(poly, from), goal = nearestInside(poly, to); + if (visible(poly, start, goal)) return [goal]; + const nodes = [start, goal, ...concaveVertices(poly)]; + const g = new Map([[0, 0]]), prev = new Map(), open = new Set([0]), done = new Set(); + while (open.size) { + let cur = -1, curF = Infinity; + for (const i of open) { + const f = g.get(i) + dist(nodes[i], goal); + if (f < curF) { curF = f; cur = i; } + } + if (cur === 1) break; + open.delete(cur); + done.add(cur); + for (let i = 0; i < nodes.length; i++) { + if (i === cur || done.has(i) || !visible(poly, nodes[cur], nodes[i])) continue; + const cost = g.get(cur) + dist(nodes[cur], nodes[i]); + if (cost < (g.get(i) ?? Infinity)) { g.set(i, cost); prev.set(i, cur); open.add(i); } + } + } + if (!prev.has(1)) return [start]; + const path = []; + for (let i = 1; i !== 0; i = prev.get(i)) path.unshift(nodes[i]); + return path; +} + +export const inBox = ([x, y, w, h], p) => p[0] >= x && p[0] <= x + w && p[1] >= y && p[1] <= y + h; diff --git a/src/engine/render.js b/src/engine/render.js new file mode 100644 index 0000000..b89170d --- /dev/null +++ b/src/engine/render.js @@ -0,0 +1,72 @@ +// Disegno della scena su un canvas 640×360, ingrandito dal CSS senza sfocatura. +// Le forme provvisorie (`art`) verranno sostituite da sfondi e sprite in pixel art. +export const WIDTH = 640, HEIGHT = 360; + +function drawShape(ctx, s) { + if (s.rect) { + ctx.fillStyle = s.fill; + ctx.fillRect(...s.rect); + } else if (s.poly) { + ctx.fillStyle = s.fill; + ctx.beginPath(); + s.poly.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y)); + ctx.closePath(); + ctx.fill(); + } else if (s.lines) { + // Righe di riempimento: fughe del selciato o sbarre di un cancello. + const { from: [x0, y0], to: [x1, y1], step, vertical } = s.lines; + ctx.fillStyle = s.stroke; + if (vertical) for (let x = x0; x <= x1; x += step) ctx.fillRect(x, y0, 2, y1 - y0); + else for (let y = y0; y <= y1; y += step) ctx.fillRect(x0, y, x1 - x0, 1); + } else if (s.text) { + ctx.fillStyle = s.fill; + ctx.font = 'bold 11px monospace'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText(s.text, ...s.at); + } +} + +// Andrea provvisorio, disegnato a blocchi: maglia blu (il rione di Campomigliaio), gambe che si alternano. +const BODY = [ + // [x, y, w, h, colore] con l'origine ai piedi, rivolto a destra. + [-6, -60, 12, 4, '#4a2e1c'], [-6, -56, 12, 12, '#e8b48c'], [3, -53, 2, 2, '#2a1a10'], [-7, -60, 4, 10, '#4a2e1c'], + [-8, -44, 16, 20, '#2f5fb3'], [-4, -42, 8, 3, '#f4efe4'], +]; + +export function drawAndrea(ctx, x, y, scale, facing, walkPhase) { + ctx.save(); + ctx.translate(Math.round(x), Math.round(y)); + ctx.scale(scale * facing, scale); + ctx.fillStyle = 'rgba(0,0,0,0.22)'; + ctx.fillRect(-10, -2, 20, 4); + const swing = walkPhase == null ? 0 : Math.round(Math.sin(walkPhase) * 5); + ctx.fillStyle = '#3a3f52'; + ctx.fillRect(-6 + swing, -24, 5, 22); + ctx.fillRect(1 - swing, -24, 5, 22); + ctx.fillStyle = '#e8e3d6'; + ctx.fillRect(-7 + swing, -3, 7, 3); + ctx.fillRect(0 - swing, -3, 7, 3); + for (const [bx, by, w, h, c] of BODY) { + ctx.fillStyle = c; + ctx.fillRect(bx, by, w, h); + } + ctx.fillStyle = '#e8b48c'; + ctx.fillRect(-2 - swing, -40, 4, 16); + ctx.restore(); +} + +export function render(ctx, game, { hover } = {}) { + const scene = game.scene, s = game.state; + ctx.clearRect(0, 0, WIDTH, HEIGHT); + for (const shape of scene.art ?? []) drawShape(ctx, shape); + for (const h of game.hotspots()) for (const shape of h.art ?? []) drawShape(ctx, shape); + const phase = game.walking ? (s.x + s.y) / 6 : null; + drawAndrea(ctx, s.x, s.y, game.scaleAt(s.y), s.facing, phase); + if (hover) { + ctx.strokeStyle = 'rgba(255,255,255,0.35)'; + ctx.setLineDash([3, 3]); + ctx.strokeRect(...hover.box); + ctx.setLineDash([]); + } +} diff --git a/src/engine/storage.js b/src/engine/storage.js new file mode 100644 index 0000000..cdb1841 --- /dev/null +++ b/src/engine/storage.js @@ -0,0 +1,29 @@ +// Salvataggio nel browser: ogni accesso può fallire (navigazione privata, spazio pieno), e allora si gioca senza. +const KEY = 'leggenda-regolo-save'; + +export function readSave(storage) { + try { + const raw = storage.getItem(KEY); + return raw ? JSON.parse(raw) : null; + } catch { + return null; + } +} + +export function writeSave(storage, data) { + try { + storage.setItem(KEY, JSON.stringify(data)); + return true; + } catch { + return false; + } +} + +export function clearSave(storage) { + try { + storage.removeItem(KEY); + return true; + } catch { + return false; + } +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..f8248e9 --- /dev/null +++ b/src/main.js @@ -0,0 +1,169 @@ +// Avvio nel browser: collega motore, disegno e interfaccia HTML (verbi, inventario, dialoghi, fumetti). +import { story } from './story/story.js'; +import { Game, VERBS, VERB_LABELS } from './engine/game.js'; +import { Command } from './engine/command.js'; +import { render, WIDTH, HEIGHT } from './engine/render.js'; +import { readSave, writeSave, clearSave } from './engine/storage.js'; + +const $ = id => document.getElementById(id); +const canvas = $('scene'), ctx = canvas.getContext('2d'); +const storage = (() => { try { return window.localStorage; } catch { return null; } })(); +const LONG_PRESS = 450; +const debug = new URLSearchParams(location.search).has('debug'); + +let game = null, command = null, hoverTarget = null, mouse = null, running = false; + +function start(state) { + game = new Game(story, { state, onSave: data => storage && writeSave(storage, data) }); + command = new Command(game); + if (!state) game.go(story.start.scene, story.start.at); + $('title').hidden = true; + $('ending').hidden = true; + running = true; + window.game = game; // per i test nel browser e per curiosare dalla console +} + +function showTitle() { + running = false; + const saved = storage && readSave(storage); + $('continue').hidden = !saved || saved.ended; + $('title').hidden = false; +} + +// --- Puntatore: clic, clic destro e pressione lunga = guarda. +const scenePoint = e => { + const r = canvas.getBoundingClientRect(); + return [(e.clientX - r.left) / r.width * WIDTH, (e.clientY - r.top) / r.height * HEIGHT]; +}; +let press = null; +canvas.addEventListener('pointerdown', e => { + if (!running || e.button > 0) return; + const point = scenePoint(e); + press = { point, long: false, timer: setTimeout(() => { press.long = true; command.clickScene(point, { look: true }); }, LONG_PRESS) }; +}); +canvas.addEventListener('pointerup', e => { + if (!press) return; + clearTimeout(press.timer); + if (!press.long) command.clickScene(scenePoint(e)); + press = null; +}); +canvas.addEventListener('pointercancel', () => { if (press) clearTimeout(press.timer); press = null; }); +canvas.addEventListener('contextmenu', e => { + e.preventDefault(); + if (running) command.clickScene(scenePoint(e), { look: true }); +}); +canvas.addEventListener('pointermove', e => { + if (!running) return; + mouse = e.pointerType === 'mouse' ? scenePoint(e) : null; +}); +canvas.addEventListener('pointerleave', () => { mouse = null; }); + +// --- Verbi. +for (const verb of VERBS) { + const b = document.createElement('button'); + b.type = 'button'; + b.dataset.verb = verb; + b.textContent = VERB_LABELS[verb]; + b.addEventListener('click', () => running && command.pickVerb(verb)); + $('verbs').appendChild(b); +} + +// --- Inventario: si ridisegna solo quando cambia. +let inventoryKey = '', hoverItem = null; +function updateInventory() { + const key = game.state.inventory.join(',') + '|' + command.item; + if (key === inventoryKey) return; + inventoryKey = key; + const box = $('inventory'); + box.replaceChildren(...game.state.inventory.map(id => { + const b = document.createElement('button'), item = story.items[id], dot = document.createElement('i'); + b.type = 'button'; + b.dataset.item = id; + b.setAttribute('aria-pressed', String(command.item === id)); + dot.style.background = item.icon?.fill ?? '#ccc'; + b.append(dot, item.name); + let timer = null, long = false; + b.addEventListener('pointerdown', () => { long = false; timer = setTimeout(() => { long = true; command.clickItem(id, { look: true }); }, LONG_PRESS); }); + b.addEventListener('pointerup', () => clearTimeout(timer)); + b.addEventListener('click', () => { if (!long && running) command.clickItem(id); }); + b.addEventListener('contextmenu', e => { e.preventDefault(); clearTimeout(timer); if (running) command.clickItem(id, { look: true }); }); + b.addEventListener('pointerenter', e => { if (e.pointerType === 'mouse') hoverItem = id; }); + b.addEventListener('pointerleave', () => { if (hoverItem === id) hoverItem = null; }); + return b; + })); +} + +// --- Dialoghi: scelte numerate, anche da tastiera. +let choicesKey = ''; +function updateChoices() { + const options = game.options(), inDialogue = !!game.dialogue; + $('panel').hidden = inDialogue; + $('choices').hidden = !inDialogue; + const key = inDialogue + '|' + options.map(o => o.text).join('|'); + if (key === choicesKey) return; + choicesKey = key; + $('choices').replaceChildren(...options.map((o, i) => { + const li = document.createElement('li'); + li.tabIndex = 0; + li.textContent = o.text; + li.addEventListener('click', () => game.choose(i)); + li.addEventListener('keydown', e => { if (e.key === 'Enter') game.choose(i); }); + return li; + })); +} + +window.addEventListener('keydown', e => { + if (!running) return; + if ([' ', '.', 'Enter'].includes(e.key) && game.speech) { e.preventDefault(); game.skip(); return; } + if (e.key === 'Escape') command.reset(); + const n = Number(e.key); + if (game.dialogue && n >= 1 && n <= 9) game.choose(n - 1); +}); + +// --- Fumetto sopra chi parla, tenuto dentro i bordi della scena. +function updateSpeech() { + const box = $('speech'), sp = game.speech; + if (!sp) { if (box.textContent) box.textContent = ''; return; } + const [x, y] = game.speakerPoint(sp.who); + box.textContent = sp.text; + box.style.color = story.characters[sp.who]?.color ?? '#fff'; + box.style.left = Math.min(77, Math.max(23, x / WIDTH * 100)) + '%'; + box.style.top = Math.max(18, y / HEIGHT * 100) + '%'; +} + +function updateUi() { + // Il bersaglio si ricalcola a ogni fotogramma: la scena cambia anche se il mouse sta fermo. + hoverTarget = (game.state.inventory.includes(hoverItem) && hoverItem) || (mouse && game.hotspotAt(mouse)?.id) || null; + for (const b of $('verbs').children) b.setAttribute('aria-pressed', String(command.verb === b.dataset.verb)); + const text = !running || game.speech || game.dialogue ? '' : command.sentence(hoverTarget); + if ($('sentence').textContent !== text) $('sentence').textContent = text; + updateInventory(); + updateChoices(); + updateSpeech(); + if (game.state.ended && !game.speech && !game.queue.length) { + running = false; + $('ending').hidden = false; + } +} + +let last = performance.now(); +function frame(now) { + const dt = Math.min(0.1, (now - last) / 1000); + last = now; + if (game) { + if (running) game.update(dt); + render(ctx, game, { hover: debug && hoverTarget ? game.hotspot(hoverTarget) : null }); + updateUi(); + } + requestAnimationFrame(frame); +} + +$('new-game').addEventListener('click', () => { if (storage) clearSave(storage); start(null); }); +$('continue').addEventListener('click', () => start(readSave(storage))); +$('restart').addEventListener('click', () => { if (storage) clearSave(storage); start(null); }); + +// Dietro il titolo si vede già la piazza. +game = new Game(story); +command = new Command(game); +showTitle(); +requestAnimationFrame(frame); diff --git a/src/story/solution.js b/src/story/solution.js new file mode 100644 index 0000000..cd653fc --- /dev/null +++ b/src/story/solution.js @@ -0,0 +1,11 @@ +// La soluzione completa, passo per passo: la percorre tests/solution.test.mjs ad ogni modifica della storia. +// Passi: [verbo, bersaglio, oggetto?] oppure ['choose', testo dell'opzione]. +export const solution = [ + ['look', 'asta'], + ['talk', 'vecchietti'], + ['choose', 'Avete notato niente di strano stanotte?'], + ['choose', 'Ci vediamo dopo.'], + ['take', 'cosa_luccicante'], + ['walk', 'verso_salita'], + ['use', 'impronte', 'squama'], +]; diff --git a/src/story/story.js b/src/story/story.js new file mode 100644 index 0000000..0a04811 --- /dev/null +++ b/src/story/story.js @@ -0,0 +1,203 @@ +// Storia del prototipo: due scene di prova per collaudare il motore. +// Testi, personaggi ed enigmi sono provvisori e verranno sostituiti con i ricordi di Andrea (docs/PROGETTO.md). +// La grafica è fatta di forme semplici (`art`): verrà rimpiazzata dagli sfondi in pixel art. + +const C = { + sky: '#9fd0e8', skyLow: '#d9ecd9', hill: '#6f9b55', hillDark: '#557a43', fort: '#a08a6a', fortDark: '#7d6a50', + wall: '#d9b98c', wallDark: '#b8946a', roof: '#a5533b', stone: '#c9b79a', stoneDark: '#ad9b7f', door: '#5b3a28', + wood: '#7a5132', green: '#3f7d3a', iron: '#3b3b44', white: '#f4efe4', red: '#b7342e', +}; + +export const story = { + title: 'La Leggenda del Regolo', + start: { scene: 'piazza', at: [120, 300] }, + characters: { + andrea: { name: 'Andrea', color: '#ffffff' }, + vecchioA: { name: 'Vecchietto col cappello', color: '#ffd27a' }, + vecchioB: { name: 'Vecchietto col bastone', color: '#9fe3ff' }, + }, + items: { + squama: { + name: 'squama', + icon: { fill: '#4fae5e', shape: 'scale' }, + actions: { + look: [{ say: 'Una squama verde, grande come una moneta da due euro. Puzza di cantina.' }], + use: [{ say: 'Potrei usarla come plettro. Ma prima scopro di chi è.' }], + }, + }, + }, + scenes: { + piazza: { + name: 'La Piazza', + walk: [[20, 222], [405, 222], [405, 276], [555, 276], [555, 222], [620, 222], [640, 250], [640, 352], [0, 352], [0, 250]], + depth: [[222, 0.82], [352, 1.12]], + entry: [600, 300], + speakers: { vecchioA: [455, 214], vecchioB: [512, 214] }, + art: [ + { rect: [0, 0, 640, 130], fill: C.sky }, + { rect: [0, 100, 640, 40], fill: C.skyLow }, + { rect: [0, 140, 640, 82], fill: C.wallDark }, + { poly: [[380, 140], [470, 70], [640, 60], [640, 140]], fill: C.hill }, + // La Fortezza sulla collina, sullo sfondo: chiusa, come dice la leggenda. + { poly: [[470, 92], [490, 74], [600, 70], [625, 90], [610, 104], [480, 106]], fill: C.fort }, + { rect: [530, 58, 26, 18], fill: C.fortDark }, + { rect: [0, 40, 180, 182], fill: C.wall }, + { rect: [0, 32, 186, 12], fill: C.roof }, + { rect: [180, 70, 110, 152], fill: C.wallDark }, + { rect: [176, 62, 118, 10], fill: C.roof }, + { rect: [340, 110, 260, 112], fill: C.wall }, + { rect: [334, 100, 272, 12], fill: C.roof }, + { rect: [20, 70, 30, 40], fill: C.green }, { rect: [80, 70, 30, 40], fill: C.green }, + { rect: [360, 130, 26, 34], fill: C.green }, { rect: [560, 130, 26, 34], fill: C.green }, + { rect: [0, 222, 640, 138], fill: C.stone }, + { lines: { from: [0, 240], to: [640, 360], step: 36 }, stroke: C.stoneDark }, + ], + hotspots: [ + { + id: 'bacheca', name: 'bacheca', box: [62, 140, 70, 52], at: [97, 246], face: 'up', + art: [{ rect: [62, 140, 70, 52], fill: C.wood }, { rect: [68, 146, 58, 40], fill: C.white }, { rect: [74, 152, 46, 6], fill: C.red }, { rect: [74, 164, 40, 3], fill: C.iron }, { rect: [74, 172, 30, 3], fill: C.iron }], + actions: { + look: [{ say: 'Il programma del Palio della Fortezza. Qualcuno ci ha scritto sopra col pennarello: «IL REGOLO SI È RIPRESO IL DRAPPO».' }], + take: [{ say: 'È avvitata al muro. E poi il programma lo so a memoria.' }], + open: [{ say: 'È una bacheca, non un frigorifero.' }], + }, + }, + { + id: 'bar', name: 'porta del bar', box: [206, 140, 46, 82], at: [229, 240], face: 'up', + art: [{ rect: [206, 140, 46, 82], fill: C.door }, { rect: [200, 120, 58, 16], fill: C.iron }, { text: 'BAR', at: [229, 132], fill: C.white }], + actions: { + look: [{ say: 'Il bar della piazza. Chi c\'era dietro il bancone nel 2007? Questo lo sa solo Andrea.' }], + open: [{ say: 'Ci torno quando ho qualche soldo in tasca.' }], + talk: [{ say: 'Parlare con una porta. Neanche al Palio si arriva a tanto.' }], + }, + }, + { + id: 'asta', name: 'asta del drappo', box: [296, 60, 14, 172], at: [303, 262], face: 'up', + art: [{ rect: [300, 60, 6, 172], fill: C.iron }, { rect: [290, 224, 26, 10], fill: C.stoneDark }, { rect: [296, 56, 14, 6], fill: '#d8b23a' }], + actions: { + look: [{ say: 'Qui doveva sventolare il drappo del Palio, quello col Regolo. Ora c\'è solo l\'asta.' }, { say: 'E una strana scia luccicante che va verso la salita.' }], + take: [{ say: 'L\'asta del Palio? Mi rincorrerebbero tutti e quattro i rioni.' }], + use: [{ say: 'Arrampicarmi? Il drappo non c\'è comunque.' }], + }, + }, + { + id: 'vecchietti', name: 'vecchietti', box: [430, 196, 104, 60], at: [480, 290], face: 'up', default: 'talk', + art: [ + { rect: [420, 244, 124, 10], fill: C.wood }, { rect: [424, 254, 6, 18], fill: C.wood }, { rect: [534, 254, 6, 18], fill: C.wood }, + { rect: [440, 214, 28, 32], fill: '#5d6b8a' }, { rect: [444, 198, 20, 18], fill: '#e7b58e' }, { rect: [440, 194, 28, 7], fill: '#3e3227' }, + { rect: [498, 214, 28, 32], fill: '#8a6a4f' }, { rect: [502, 198, 20, 18], fill: '#e7b58e' }, { rect: [522, 210, 4, 50], fill: '#4a3424' }, + ], + actions: { + look: [{ say: 'I vecchietti della panchina. Sanno tutto di tutti, soprattutto quello che non è successo.' }], + talk: [{ dialogue: 'vecchietti' }], + take: [{ say: 'Se li porto via, il paese resta senza notizie.' }], + }, + give: { + squama: [{ say: 'Guardate cosa ho trovato.' }, { say: 'Bella! È una patatina?', who: 'vecchioA' }, { say: 'Ma che patatina, è il Regolo che fa la muta!', who: 'vecchioB' }, { say: 'Me la tengo io, grazie.' }], + }, + }, + { + id: 'panchina', name: 'sotto la panchina', box: [440, 256, 84, 16], at: [482, 292], face: 'up', + actions: { + look: [{ if: 'luccichio', then: [{ say: 'Qualcosa luccica, proprio sotto i piedi dei vecchietti.' }], else: [{ say: 'Polvere, un tappo e una cicca. La solita archeologia di piazza.' }] }], + }, + }, + { + id: 'cosa_luccicante', name: 'cosa luccicante', box: [474, 260, 16, 10], at: [482, 292], face: 'up', when: ['luccichio', '!has:squama', '!squama_presa'], + art: [{ rect: [478, 262, 8, 5], fill: '#7fe08a' }, { rect: [480, 262, 3, 2], fill: '#e6ffe0' }], + actions: { + look: [{ say: 'Una cosa verde e luccicante. Non è un tappo.' }], + take: [{ give: 'squama' }, { set: 'squama_presa' }, { say: 'Una squama! E bella grossa.' }], + }, + }, + { + id: 'verso_salita', name: 'verso la Fortezza', box: [600, 190, 40, 120], at: [632, 290], exit: { scene: 'salita', at: [40, 320], face: 'right' }, + art: [{ poly: [[610, 222], [640, 206], [640, 250]], fill: C.stoneDark }], + }, + ], + enter: [{ if: '!intro', then: [{ set: 'intro' }, { say: 'Il drappo del Palio è sparito! E la festa è domani.' }, { say: 'Se nessuno lo ritrova, il Palio salta. Tocca a me.' }] }], + }, + salita: { + name: 'La salita alla Fortezza', + walk: [[0, 290], [300, 240], [470, 218], [560, 222], [560, 260], [640, 300], [640, 352], [0, 352]], + depth: [[218, 0.7], [352, 1.1]], + entry: [40, 320], + art: [ + { rect: [0, 0, 640, 360], fill: C.sky }, + { poly: [[0, 200], [240, 150], [640, 120], [640, 360], [0, 360]], fill: C.hill }, + { poly: [[0, 290], [300, 240], [470, 218], [560, 222], [640, 300], [640, 360], [0, 360]], fill: '#b8a27c' }, + // Il bastione e la porta della Fortezza, in cima alla salita. + { poly: [[400, 222], [420, 60], [640, 40], [640, 230]], fill: C.fort }, + { rect: [400, 52, 240, 14], fill: C.fortDark }, + { poly: [[0, 360], [0, 300], [90, 280], [60, 360]], fill: C.hillDark }, + ], + hotspots: [ + { + id: 'cancello', name: 'porta della Fortezza', box: [470, 120, 76, 102], at: [508, 236], face: 'up', + art: [{ rect: [470, 120, 76, 102], fill: '#2b2420' }, { rect: [474, 124, 68, 98], fill: C.iron }, { lines: { from: [474, 124], to: [542, 222], step: 10, vertical: true }, stroke: '#1d1d22' }, { rect: [500, 170, 16, 12], fill: '#c9a23a' }], + actions: { + look: [{ say: 'La porta della Fortezza. Chiusa con una catena grossa come il mio braccio.' }], + open: [{ say: 'Niente da fare. La Fortezza è chiusa da anni, e il lucchetto lo sa.' }], + talk: [{ say: 'Regolo? Ci sei?' }, { say: '...' }, { say: 'Ho sentito qualcosa. O era la mia pancia.' }], + }, + }, + { + id: 'impronte', name: 'strane impronte', box: [240, 262, 120, 30], at: [300, 300], + art: [{ poly: [[244, 286], [270, 274], [300, 280], [330, 268], [356, 262], [358, 266], [332, 274], [300, 286], [270, 280], [246, 290]], fill: '#8e7a58' }, { rect: [300, 279, 3, 2], fill: '#7fe08a' }], + actions: { + look: [{ say: 'Niente scarpe, niente zampe. Qualcosa è strisciato su per la salita.' }, { say: 'Qualcosa di grosso.' }], + take: [{ say: 'Le impronte non si prendono. Si seguono.' }], + }, + with: { + squama: [ + { say: 'Le metto vicine...' }, + { say: 'Stesso luccichio, stessa puzza di cantina. Il Regolo è passato di qui!' }, + { set: 'indizio_regolo' }, + { say: 'Per stavolta finisce qui: il resto della storia lo dobbiamo ancora scrivere.' }, + { end: true }, + ], + }, + }, + { + id: 'verso_piazza', name: 'verso la Piazza', box: [0, 270, 30, 90], at: [6, 320], exit: { scene: 'piazza', at: [600, 300], face: 'left' }, + }, + ], + }, + }, + dialogues: { + vecchietti: { + nodes: { + start: { + options: [ + { + text: 'Avete visto chi ha preso il drappo?', + then: [ + { say: 'È stato il Regolo! Quello che cadde dal cielo quando scavavano le fondamenta.', who: 'vecchioA' }, + { say: 'Macché cielo! Mangiava le bestie, e lo presero i soldati di Napoleone.', who: 'vecchioB' }, + { say: 'Napoleone? A San Piero? Ma se un c\'è mai venuto!', who: 'vecchioA' }, + { say: 'E il Regolo sì?', who: 'vecchioB' }, + ], + }, + { + id: 'stanotte', once: true, text: 'Avete notato niente di strano stanotte?', + then: [ + { say: 'Io dormivo. Alla mia età si dorme anche in piedi.', who: 'vecchioB' }, + { say: 'Io stamani ho visto luccicare qualcosa sotto la panchina.', who: 'vecchioA' }, + { say: 'Ma con la mia schiena, chi ci si china?', who: 'vecchioA' }, + { set: 'luccichio' }, + ], + }, + { + text: 'Come vi sembra il Palio di quest\'anno?', + then: [ + { say: 'Senza drappo? Un Palio così non s\'è mai visto.', who: 'vecchioB' }, + { say: 'Nel mio, di Palio, si correva con le carriole vere. Mica come voi.', who: 'vecchioA' }, + ], + }, + { text: 'Ci vediamo dopo.', next: 'end', then: [{ say: 'Salutaci i tuoi!', who: 'vecchioA' }] }, + ], + }, + }, + }, + }, +}; diff --git a/style.css b/style.css new file mode 100644 index 0000000..97fed13 --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +:root { + --bg: #1b1420; + --panel: #2a2030; + --ink: #f4efe4; + --dim: #b9a9c2; + --accent: #ffd27a; + --blue: #6fa8ff; + --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; +} +* { box-sizing: border-box; } +[hidden] { display: none !important; } +html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); } +body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } +#app { width: min(100vw, 1280px, calc((100dvh - 250px) * 16 / 9)); min-width: min(100vw, 320px); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } + +#stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; user-select: none; touch-action: manipulation; } +#scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; } + +#speech { position: absolute; left: 0; top: 0; max-width: 46%; transform: translate(-50%, -100%); pointer-events: none; + font-size: clamp(14px, 2.3vw, 26px); font-weight: bold; line-height: 1.2; text-align: center; + text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000; } +#speech:empty { display: none; } + +#sentence { min-height: 1.8em; padding: .25em .6em; text-align: center; color: var(--blue); font-size: clamp(15px, 2vw, 22px); font-weight: bold; background: var(--panel); } + +#panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--panel); } +#verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } +#verbs button, #inventory button { font: inherit; color: var(--dim); background: #3a2d42; border: 2px solid #4b3a55; border-radius: 4px; + padding: .35em .2em; font-size: clamp(13px, 1.7vw, 19px); font-weight: bold; cursor: pointer; } +#verbs button:hover, #inventory button:hover { color: var(--ink); } +#verbs button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); } +#inventory { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(2.4em, auto); gap: 4px; align-content: start; } +#inventory button { display: flex; align-items: center; gap: .35em; justify-content: center; color: var(--ink); } +#inventory button[aria-pressed="true"] { border-color: var(--accent); } +#inventory i { width: .8em; height: .8em; border-radius: 50% 50% 50% 0; flex: none; } + +#choices { margin: 0; padding: 10px 14px 12px 2.4em; background: var(--panel); min-height: 9.5em; } +#choices li { padding: .25em 0; font-size: clamp(15px, 2vw, 22px); font-weight: bold; color: var(--dim); cursor: pointer; } +#choices li:hover, #choices li:focus { color: var(--accent); outline: none; } + +.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; + padding: 16px; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(60, 40, 70, .82), rgba(15, 10, 20, .96)); } +.overlay[hidden] { display: none; } +.overlay h1 { margin: 0; font-size: clamp(30px, 7vw, 76px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 #000; } +.overlay h1 span { color: #7fe08a; } +.overlay h2 { margin: 0; font-size: clamp(24px, 5vw, 52px); color: var(--accent); } +.overlay p { margin: 0; max-width: 34em; font-size: clamp(13px, 2vw, 20px); } +.subtitle { color: var(--dim); } +.dedication { margin-top: .8em !important; font-style: italic; color: var(--accent); } +.buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: .4em; } +.buttons button { font: inherit; font-weight: bold; font-size: clamp(15px, 2.2vw, 22px); padding: .45em 1.2em; border-radius: 6px; cursor: pointer; + color: var(--bg); background: var(--accent); border: 0; } +#continue { background: #7fe08a; } + +#rotate { display: none; padding: 1em; text-align: center; color: var(--dim); } +@media (orientation: portrait) and (max-width: 700px) { #rotate { display: block; } } + +/* Telefono in orizzontale: la scena prende tutta l'altezza, verbi e inventario vanno di lato. */ +@media (orientation: landscape) and (max-height: 520px) { + #app { width: 100vw; flex-direction: row; } + #stage { flex: none; width: min(calc(100dvh * 16 / 9), 68vw); align-self: flex-start; } + #side { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); } + #sentence { font-size: 14px; } + #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; } + #verbs, #inventory { grid-template-columns: repeat(2, 1fr); } + #verbs button, #inventory button, #choices li { font-size: 14px; } + #choices { min-height: 0; padding: 6px 8px 6px 2em; } +} + +#error { position: fixed; inset: auto 16px 16px; padding: 12px; background: #7a1f1f; color: #fff; border-radius: 6px; } diff --git a/tests/browser.mjs b/tests/browser.mjs new file mode 100644 index 0000000..a48d20b --- /dev/null +++ b/tests/browser.mjs @@ -0,0 +1,105 @@ +// Prova nel browser vero (Chromium headless con swiftshader): titolo, partita giocata con clic veri +// fino alla fine, salvataggio e impaginazione su telefono. Schermate in $OUT (predefinito: /tmp/regolo-shots). +// npm run browser +import { chromium } from 'playwright'; +import { spawn } from 'node:child_process'; +import { mkdirSync } from 'node:fs'; +import assert from 'node:assert/strict'; +import { solution } from '../src/story/solution.js'; + +const OUT = process.env.OUT ?? '/tmp/regolo-shots', PORT = 8000 + Math.floor(Math.random() * 900); +mkdirSync(OUT, { recursive: true }); +const server = spawn('python3', ['-m', 'http.server', String(PORT), '--bind', '127.0.0.1'], { stdio: 'ignore' }); +const browser = await chromium.launch({ args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader'] }); +const errors = []; + +async function open(viewport) { + const page = await browser.newPage({ viewport }); + page.on('pageerror', e => errors.push(e.message)); + page.on('console', m => m.type() === 'error' && errors.push(m.text())); + for (let i = 0; i < 50; i++) { + try { await page.goto(`http://127.0.0.1:${PORT}/`); break; } catch { await page.waitForTimeout(100); } + } + return page; +} + +// Clic su un punto della scena (coordinate 640×360). +async function clickScene(page, [x, y]) { + const r = await page.locator('#scene').boundingBox(); + await page.mouse.click(r.x + x / 640 * r.width, r.y + y / 360 * r.height); +} + +// Aspetta che il gioco sia fermo, saltando le battute con la barra spaziatrice. +async function settle(page) { + for (let i = 0; i < 400; i++) { + const s = await page.evaluate(() => ({ speech: !!game.speech, idle: !game.busy && !game.walking && !game.queue.length && !game.task })); + if (s.speech) await page.keyboard.press('Space'); + else if (s.idle) return; + await page.waitForTimeout(50); + } + throw new Error('il gioco non si ferma'); +} + +const hotspotCenter = (page, id) => page.evaluate(id => { const h = game.hotspot(id); return [h.box[0] + h.box[2] / 2, h.box[1] + h.box[3] / 2]; }, id); + +try { + const page = await open({ width: 1280, height: 860 }); + await page.waitForSelector('#title:not([hidden])'); + await page.screenshot({ path: `${OUT}/01-titolo.png` }); + await page.click('#new-game'); + await page.waitForFunction(() => game.speech); + await page.screenshot({ path: `${OUT}/02-inizio.png` }); + const fits = async p => p.evaluate(() => document.querySelector('#panel').getBoundingClientRect().bottom <= innerHeight); + assert.ok(await fits(page), 'verbi e inventario fuori dallo schermo'); + await settle(page); + + for (const [verb, target, item] of solution) { + if (verb === 'choose') { + await page.locator('#choices li', { hasText: target }).click(); + } else { + const smart = await page.evaluate(([v, t]) => game.defaultVerb(t) === v, [verb, target]); + if (item) { + await page.click(`#verbs [data-verb="${verb}"]`); + await page.click(`#inventory [data-item="${item}"]`); + } else if (!smart) await page.click(`#verbs [data-verb="${verb}"]`); + await clickScene(page, await hotspotCenter(page, target)); + } + await page.waitForTimeout(80); + if (verb === 'talk') await page.screenshot({ path: `${OUT}/03-dialogo.png` }); + await settle(page); + if (target === 'cosa_luccicante') await page.screenshot({ path: `${OUT}/04-squama.png` }); + if (target === 'verso_salita') await page.screenshot({ path: `${OUT}/05-salita.png` }); + } + await page.waitForSelector('#ending:not([hidden])'); + await page.screenshot({ path: `${OUT}/06-fine.png` }); + const saved = await page.evaluate(() => JSON.parse(localStorage.getItem('leggenda-regolo-save'))); + assert.ok(saved.ended && saved.inventory.includes('squama'), 'salvataggio finale'); + + // Una partita a metà riprende da dove era rimasta. + await page.click('#restart'); + await settle(page); + await clickScene(page, await hotspotCenter(page, 'verso_salita')); + await settle(page); + await page.reload(); + await page.waitForSelector('#continue:not([hidden])'); + await page.click('#continue'); + assert.equal(await page.evaluate(() => game.state.scene), 'salita'); + + const phone = await open({ width: 390, height: 844 }); + await phone.click('#new-game'); + await settle(phone); + const overflow = await phone.evaluate(() => document.documentElement.scrollWidth > innerWidth); + assert.equal(overflow, false, 'scorrimento orizzontale su telefono'); + await phone.screenshot({ path: `${OUT}/07-telefono.png` }); + const landscape = await open({ width: 844, height: 390 }); + await landscape.click('#new-game'); + await settle(landscape); + assert.equal(await landscape.evaluate(() => document.documentElement.scrollWidth > innerWidth), false); + await landscape.screenshot({ path: `${OUT}/08-orizzontale.png`, fullPage: true }); + + assert.deepEqual(errors, [], 'errori nella console'); + console.log(`Browser OK: soluzione completa, ripresa del salvataggio, telefono. Schermate in ${OUT}`); +} finally { + await browser.close(); + server.kill(); +} diff --git a/tests/command.test.mjs b/tests/command.test.mjs new file mode 100644 index 0000000..8c1b5ef --- /dev/null +++ b/tests/command.test.mjs @@ -0,0 +1,66 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { story } from '../src/story/story.js'; +import { Game } from '../src/engine/game.js'; +import { Command } from '../src/engine/command.js'; +import { settle } from './helpers.mjs'; + +const center = h => [h.box[0] + h.box[2] / 2, h.box[1] + h.box[3] / 2]; +const setup = () => { + const g = new Game(story); + return { g, c: new Command(g), at: id => center(g.hotspot(id)) }; +}; + +test('clic intelligente: parla con le persone, guarda le cose, attraversa le uscite', () => { + const { g, c, at } = setup(); + assert.equal(c.sentence('vecchietti'), 'Parla con vecchietti'); + assert.equal(c.sentence('bacheca'), 'Guarda bacheca'); + assert.equal(c.sentence('verso_salita'), 'Vai a verso la Fortezza'); + assert.equal(c.clickScene(at('vecchietti')), 'act'); + settle(g); + assert.equal(g.dialogue?.id, 'vecchietti'); +}); + +test('verbo scelto, poi bersaglio; il verbo si azzera dopo il comando', () => { + const { g, c, at } = setup(); + c.pickVerb('take'); + assert.equal(c.sentence(), 'Prendi…'); + assert.equal(c.sentence('asta'), 'Prendi asta del drappo'); + c.clickScene(at('asta')); + assert.equal(c.verb, null); + assert.match(settle(g)[0].text, /rincorrerebbero/); +}); + +test('pressione lunga o clic destro guarda', () => { + const { g, c, at } = setup(); + c.clickScene(at('vecchietti'), { look: true }); + assert.match(settle(g)[0].text, /panchina/); + assert.equal(g.dialogue, null); +}); + +test('un clic sul vuoto cammina; un clic mentre si parla salta la battuta', () => { + const { g, c } = setup(); + assert.equal(c.clickScene([300, 330]), 'walk'); + settle(g); + assert.deepEqual([g.state.x, g.state.y], [300, 330]); + g.queue.push({ say: 'Una battuta lunga.' }); + g.update(0.01); + assert.equal(c.clickScene([10, 330]), 'skip'); + assert.equal(g.speech, null); +}); + +test('oggetto dell\'inventario: usa con, dai a, guarda', () => { + const { g, c, at } = setup(); + g.state.inventory.push('squama'); + assert.equal(c.clickItem('squama'), 'select'); + assert.equal(c.sentence('vecchietti'), 'Usa squama con vecchietti'); + c.reset(); + c.pickVerb('give'); + c.clickItem('squama'); + assert.equal(c.sentence('vecchietti'), 'Dai squama a vecchietti'); + c.clickScene(at('vecchietti')); + assert.deepEqual(settle(g).map(s => s.who), ['andrea', 'vecchioA', 'vecchioB', 'andrea']); + assert.deepEqual(g.state.inventory, ['squama'], 'nessun vicolo cieco: la squama resta'); + c.clickItem('squama', { look: true }); + assert.match(settle(g)[0].text, /cantina/); +}); diff --git a/tests/geometry.test.mjs b/tests/geometry.test.mjs new file mode 100644 index 0000000..bd8191a --- /dev/null +++ b/tests/geometry.test.mjs @@ -0,0 +1,38 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { inside, visible, nearestInside, concaveVertices, findPath } from '../src/engine/geometry.js'; + +// Una "L": il passaggio dall'alto a destra deve girare attorno all'angolo interno (100,100). +const L = [[0, 0], [100, 0], [100, 100], [300, 100], [300, 200], [0, 200]]; + +test('punto dentro, fuori e sul bordo', () => { + assert.ok(inside(L, [50, 50])); + assert.ok(!inside(L, [200, 50])); + assert.ok(inside(L, [100, 50])); +}); + +test('la visibilità non attraversa i muri', () => { + assert.ok(visible(L, [50, 50], [50, 150])); + assert.ok(!visible(L, [50, 50], [250, 150])); +}); + +test('un clic fuori finisce sul bordo più vicino', () => { + assert.deepEqual(nearestInside(L, [200, 50]), [200, 100]); + assert.deepEqual(nearestInside(L, [50, -20]), [50, 0]); +}); + +test('solo l\'angolo interno è concavo', () => { + assert.deepEqual(concaveVertices(L), [[100, 100]]); + assert.deepEqual(concaveVertices([...L].reverse()), [[100, 100]]); +}); + +test('il percorso gira attorno all\'angolo', () => { + assert.deepEqual(findPath(L, [50, 50], [250, 150]), [[100, 100], [250, 150]]); + assert.deepEqual(findPath(L, [10, 10], [90, 190]), [[90, 190]]); +}); + +test('una destinazione fuori dall\'area viene avvicinata', () => { + const path = findPath(L, [50, 50], [250, 20]); + assert.deepEqual(path.at(-1), [250, 100]); + for (let i = 1; i < path.length; i++) assert.ok(visible(L, path[i - 1], path[i])); +}); diff --git a/tests/helpers.mjs b/tests/helpers.mjs new file mode 100644 index 0000000..1ed2938 --- /dev/null +++ b/tests/helpers.mjs @@ -0,0 +1,17 @@ +// Fa avanzare il gioco come farebbe un giocatore impaziente: tempo che scorre e battute saltate. +export function settle(game, { maxSteps = 20000 } = {}) { + const said = []; + for (let i = 0; i < maxSteps; i++) { + if (game.speech) { + said.push(game.speech); + game.skip(); + } + if (!game.busy && !game.walking && !game.queue.length && !game.task) return said; + game.update(0.05); + } + throw new Error('Il gioco non si ferma: ' + JSON.stringify(game.snapshot())); +} + +export function memoryStorage() { + return { data: {}, getItem(k) { return this.data[k] ?? null; }, setItem(k, v) { this.data[k] = String(v); }, removeItem(k) { delete this.data[k]; } }; +} diff --git a/tests/logic.test.mjs b/tests/logic.test.mjs new file mode 100644 index 0000000..12f7bc1 --- /dev/null +++ b/tests/logic.test.mjs @@ -0,0 +1,142 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { Game, check, restoreState, newState } from '../src/engine/game.js'; +import { settle } from './helpers.mjs'; + +// Una storia minima, indipendente da quella vera: il motore si collauda con i suoi dati. +const mini = () => ({ + start: { scene: 'a', at: [10, 50] }, + items: { + chiave: { name: 'chiave', actions: { look: [{ say: 'Una chiave.' }] }, with: { sasso: [{ say: 'Chiave sul sasso.' }] } }, + sasso: { name: 'sasso' }, + }, + scenes: { + a: { + walk: [[0, 0], [200, 0], [200, 100], [0, 100]], + entry: [100, 50], + hotspots: [ + { id: 'chiave_a_terra', name: 'chiave a terra', box: [90, 40, 10, 10], at: [95, 50], when: '!has:chiave', actions: { take: [{ give: 'chiave' }] } }, + { id: 'porta', name: 'porta', box: [180, 20, 20, 60], at: [190, 50], actions: { open: [{ if: 'has:chiave', then: [{ go: 'b' }], else: [{ say: 'Chiusa.' }] }] } }, + { id: 'uscita', name: 'uscita', box: [0, 0, 5, 100], at: [2, 50], exit: { scene: 'b', at: [20, 20] } }, + { id: 'tizio', name: 'tizio', box: [50, 0, 10, 20], at: [55, 30], default: 'talk', actions: { talk: [{ dialogue: 'd' }] }, give: { sasso: [{ say: 'Grazie del sasso.', who: 'tizio' }, { drop: 'sasso' }] } }, + ], + }, + b: { walk: [[0, 0], [100, 0], [100, 100], [0, 100]], entry: [50, 50], enter: [{ set: 'visto_b' }] }, + }, + dialogues: { + d: { nodes: { start: { options: [ + { id: 'uno', once: true, text: 'Una volta sola', then: [{ give: 'sasso' }] }, + { text: 'Dimmi altro', next: 'altro' }, + { text: 'Ciao', next: 'end' }, + ] }, altro: { options: [{ text: 'Torna', next: 'start' }, { text: 'Segreto', when: 'has:sasso', then: [{ set: 'segreto' }], next: 'end' }] } } }, + }, +}); + +test('condizioni su flag e inventario', () => { + const s = { flags: { a: true }, inventory: ['x'] }; + assert.ok(check('a', s) && check('!b', s) && check('has:x', s) && check('!has:y', s)); + assert.ok(check(['a', 'has:x'], s) && !check(['a', 'b'], s) && check(undefined, s)); +}); + +test('cammina fino all\'oggetto, lo prende e lo toglie dalla scena', () => { + const g = new Game(mini()); + assert.ok(g.act('take', 'chiave_a_terra')); + settle(g); + assert.deepEqual([g.state.x, g.state.y], [95, 50]); + assert.deepEqual(g.state.inventory, ['chiave']); + assert.equal(g.hotspot('chiave_a_terra'), undefined); +}); + +test('le risposte di ripiego non lasciano mai il giocatore senza una frase', () => { + const g = new Game(mini()); + for (const verb of ['look', 'take', 'use', 'talk', 'open', 'give']) assert.ok(g.resolve(verb, 'porta').length, verb); + assert.deepEqual(g.resolve('use', 'porta', 'sasso'), [{ say: 'Non funziona.' }]); + assert.deepEqual(g.resolve('take', 'sasso'), [{ say: 'Ce l\'ho già.' }]); +}); + +test('usa oggetto con oggetto in entrambi i versi', () => { + const g = new Game(mini()); + assert.deepEqual(g.resolve('use', 'sasso', 'chiave'), [{ say: 'Chiave sul sasso.' }]); + assert.deepEqual(g.resolve('use', 'chiave', 'sasso'), [{ say: 'Chiave sul sasso.' }]); +}); + +test('porta chiusa, poi aperta con la chiave; il cambio scena salva ed esegue l\'ingresso', () => { + const saves = []; + const g = new Game(mini(), { onSave: s => saves.push(s) }); + g.act('open', 'porta'); + assert.deepEqual(settle(g).map(s => s.text), ['Chiusa.']); + g.act('take', 'chiave_a_terra'); settle(g); + g.act('open', 'porta'); settle(g); + assert.equal(g.state.scene, 'b'); + assert.deepEqual([g.state.x, g.state.y], [50, 50]); + assert.ok(g.state.flags.visto_b); + assert.equal(saves.at(-1).scene, 'b'); +}); + +test('l\'uscita porta nell\'altra scena', () => { + const g = new Game(mini()); + g.act('walk', 'uscita'); settle(g); + assert.equal(g.state.scene, 'b'); + assert.deepEqual([g.state.x, g.state.y], [20, 20]); +}); + +test('un clic durante la camminata cambia destinazione e scarta l\'azione', () => { + const g = new Game(mini()); + g.act('take', 'chiave_a_terra'); + g.update(0.1); + assert.ok(g.walking); + assert.ok(g.walkTo([10, 10])); + settle(g); + assert.deepEqual(g.state.inventory, []); + assert.deepEqual([g.state.x, g.state.y], [10, 10]); +}); + +test('mentre parla un personaggio i comandi sono ignorati', () => { + const g = new Game(mini()); + g.queue.push({ say: 'Aspetta.' }); + g.update(0.01); + assert.ok(g.speech && g.busy); + assert.equal(g.walkTo([10, 10]), false); + g.update(10); + assert.equal(g.speech, null); +}); + +test('dialogo: opzioni una tantum, nodi, condizioni e uscita', () => { + const g = new Game(mini()); + g.act('talk', 'tizio'); settle(g); + assert.ok(g.dialogue); + assert.deepEqual(g.options().map(o => o.text), ['Una volta sola', 'Dimmi altro', 'Ciao']); + g.choose(0); settle(g); + assert.deepEqual(g.state.inventory, ['sasso']); + assert.deepEqual(g.options().map(o => o.text), ['Dimmi altro', 'Ciao']); + g.choose(0); settle(g); + assert.deepEqual(g.options().map(o => o.text), ['Torna', 'Segreto']); + g.choose(1); settle(g); + assert.equal(g.dialogue, null); + assert.ok(g.state.flags.segreto); + assert.equal(g.walkTo([20, 20]), true); +}); + +test('dare un oggetto a un personaggio', () => { + const g = new Game(mini()); + g.state.inventory.push('sasso'); + g.act('give', 'tizio', 'sasso'); + const said = settle(g); + assert.deepEqual(said.map(s => [s.who, s.text]), [['tizio', 'Grazie del sasso.']]); + assert.deepEqual(g.state.inventory, []); +}); + +test('un salvataggio rovinato o vecchio non rompe la partita', () => { + const story = mini(); + assert.deepEqual(restoreState(story, null), newState(story)); + assert.deepEqual(restoreState(story, { scene: 'sparita' }), newState(story)); + const s = restoreState(story, { scene: 'b', x: 500, y: 50, inventory: ['chiave', 'fantasma', 'chiave'], flags: { ok: true, strano: 3 }, used: 'x' }); + assert.deepEqual(s, { scene: 'b', x: 100, y: 50, facing: 1, inventory: ['chiave'], flags: { ok: true }, used: {}, ended: false }); +}); + +test('lo stato salvato si ricarica uguale', () => { + const g = new Game(mini()); + g.act('take', 'chiave_a_terra'); settle(g); + const again = new Game(mini(), { state: JSON.parse(JSON.stringify(g.snapshot())) }); + assert.deepEqual(again.snapshot(), g.snapshot()); +}); diff --git a/tests/storage.test.mjs b/tests/storage.test.mjs new file mode 100644 index 0000000..000b0fd --- /dev/null +++ b/tests/storage.test.mjs @@ -0,0 +1,23 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { readSave, writeSave, clearSave } from '../src/engine/storage.js'; +import { memoryStorage } from './helpers.mjs'; + +test('scrive, rilegge e cancella il salvataggio', () => { + const s = memoryStorage(); + assert.equal(readSave(s), null); + assert.ok(writeSave(s, { scene: 'piazza' })); + assert.deepEqual(readSave(s), { scene: 'piazza' }); + assert.ok(clearSave(s)); + assert.equal(readSave(s), null); +}); + +test('un archivio rotto o bloccato non fa cadere il gioco', () => { + const broken = { getItem() { throw new Error('bloccato'); }, setItem() { throw new Error('pieno'); }, removeItem() { throw new Error('no'); } }; + assert.equal(readSave(broken), null); + assert.equal(writeSave(broken, {}), false); + assert.equal(clearSave(broken), false); + const garbage = memoryStorage(); + garbage.setItem('leggenda-regolo-save', '{non è json'); + assert.equal(readSave(garbage), null); +}); diff --git a/tests/story.test.mjs b/tests/story.test.mjs new file mode 100644 index 0000000..1fa7a99 --- /dev/null +++ b/tests/story.test.mjs @@ -0,0 +1,95 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { story } from '../src/story/story.js'; +import { solution } from '../src/story/solution.js'; +import { Game, VERBS } from '../src/engine/game.js'; +import { inside } from '../src/engine/geometry.js'; +import { settle } from './helpers.mjs'; + +const EFFECTS = ['say', 'walk', 'face', 'give', 'drop', 'set', 'unset', 'if', 'dialogue', 'node', 'endDialogue', 'go', 'end']; + +// Visita ogni elenco di effetti della storia, dentro scene, oggetti, dialoghi e rami `if`. +function* effectLists() { + for (const [id, scene] of Object.entries(story.scenes)) { + yield [`${id}.enter`, scene.enter ?? []]; + for (const h of scene.hotspots ?? []) + for (const table of ['actions', 'with', 'give']) + for (const [k, list] of Object.entries(h[table] ?? {})) yield [`${id}.${h.id}.${table}.${k}`, list]; + } + for (const [id, item] of Object.entries(story.items)) + for (const table of ['actions', 'with']) + for (const [k, list] of Object.entries(item[table] ?? {})) yield [`${id}.${table}.${k}`, list]; + for (const [id, d] of Object.entries(story.dialogues)) + for (const [n, node] of Object.entries(d.nodes)) + for (const o of node.options) yield [`${id}.${n}.${o.text}`, o.then ?? []]; +} +function* flatten(list) { + for (const e of list) { + yield e; + if (e.if !== undefined) { yield* flatten(e.then ?? []); yield* flatten(e.else ?? []); } + } +} + +test('la storia è coerente: scene, oggetti, dialoghi e punti calpestabili esistono', () => { + assert.ok(story.scenes[story.start.scene] && inside(story.scenes[story.start.scene].walk, story.start.at)); + for (const [id, scene] of Object.entries(story.scenes)) { + assert.ok(inside(scene.walk, scene.entry), `${id}: ingresso fuori dall'area`); + const ids = new Set(); + for (const h of scene.hotspots ?? []) { + assert.ok(!ids.has(h.id), `${id}.${h.id} doppio`); + ids.add(h.id); + assert.ok(!story.items[h.id], `${id}.${h.id}: stesso nome di un oggetto dell'inventario`); + assert.ok(h.name && h.box?.length === 4, `${id}.${h.id}: nome o riquadro mancante`); + if (h.at) assert.ok(inside(scene.walk, h.at), `${id}.${h.id}: punto d'arrivo fuori dall'area`); + if (h.default) assert.ok(VERBS.includes(h.default)); + for (const k of Object.keys(h.actions ?? {})) assert.ok(VERBS.includes(k), `${id}.${h.id}: verbo ${k}`); + for (const k of [...Object.keys(h.with ?? {}), ...Object.keys(h.give ?? {})]) assert.ok(story.items[k], `${id}.${h.id}: oggetto ${k}`); + if (h.exit) { + const to = story.scenes[h.exit.scene]; + assert.ok(to, `${id}.${h.id}: scena ${h.exit.scene}`); + assert.ok(inside(to.walk, h.exit.at ?? to.entry), `${id}.${h.id}: arrivo fuori dall'area`); + } + } + } + for (const [where, list] of effectLists()) + for (const e of flatten(list)) { + const kind = EFFECTS.find(k => e[k] !== undefined); + assert.ok(kind, `${where}: effetto sconosciuto ${JSON.stringify(e)}`); + if (e.give || e.drop) assert.ok(story.items[e.give ?? e.drop], `${where}: oggetto ${e.give ?? e.drop}`); + if (e.dialogue) assert.ok(story.dialogues[e.dialogue], `${where}: dialogo ${e.dialogue}`); + if (e.go) assert.ok(story.scenes[e.go], `${where}: scena ${e.go}`); + if (e.who) assert.ok(story.characters[e.who], `${where}: personaggio ${e.who}`); + } + for (const [id, d] of Object.entries(story.dialogues)) { + assert.ok(d.nodes.start, `${id}: manca il nodo start`); + for (const node of Object.values(d.nodes)) { + assert.ok(node.options.some(o => o.next === 'end' && !o.when && !o.once), `${id}: ogni nodo deve avere un'uscita sempre disponibile`); + for (const o of node.options) { + if (o.once) assert.ok(o.id, `${id}: opzione una tantum senza id`); + if (o.next && o.next !== 'end') assert.ok(d.nodes[o.next], `${id}: nodo ${o.next}`); + } + } + } +}); + +test('la soluzione si percorre tutta dall\'inizio alla fine', () => { + const saves = []; + const g = new Game(story, { onSave: s => saves.push(s) }); + g.go(story.start.scene, story.start.at); + settle(g); + for (const [verb, target, item] of solution) { + if (verb === 'choose') { + const i = g.options().findIndex(o => o.text === target); + assert.ok(i >= 0, `opzione non disponibile: ${target}`); + g.choose(i); + } else { + if (!story.items[target]) assert.ok(g.hotspot(target), `non c'è ${target} in ${g.state.scene}`); + if (item) assert.ok(g.state.inventory.includes(item), `manca ${item}`); + assert.ok(g.act(verb, target, item), `comando rifiutato: ${verb} ${target}`); + } + settle(g); + } + assert.ok(g.state.ended, 'la partita non è finita'); + assert.ok(g.state.flags.indizio_regolo); + assert.ok(saves.at(-1).ended, 'la fine non è salvata'); +});