manzoloandClaude Opus 5.5
111b892916
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A1dxvtsZx8NE9fwjXUNDBr
239 lines
15 KiB
HTML
239 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<meta name="theme-color" content="#1b1420"><meta name="description" content="La Leggenda del Regolo: un'avventura punta-e-clicca a San Piero a Sieve, durante il Palio della Fortezza del 2007.">
|
||
<title>La Leggenda del Regolo</title>
|
||
<!-- Il Regolino (tools/favicon.py, disegnato da Codex pixel per pixel) -->
|
||
<link rel="icon" href="assets/favicon/favicon.ico" sizes="16x16 32x32 48x48">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/icon-192.png">
|
||
<link rel="apple-touch-icon" href="assets/favicon/apple-touch-icon.png">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="stage">
|
||
<canvas id="scene" width="640" height="360" aria-label="La scena dell'avventura"></canvas>
|
||
<div id="speech" aria-live="polite"></div>
|
||
<button id="closeup-close" hidden title="Chiudi (Esc)">Chiudi</button>
|
||
<div id="corner">
|
||
<button id="pause-button" hidden title="Pausa (Esc)">Pausa</button>
|
||
<button id="map-button" hidden title="Mappa (P)">Mappa</button>
|
||
<button id="notebook-button" hidden title="Taccuino (N)">Taccuino</button>
|
||
<button id="spots-button" hidden title="Mostra cosa si può toccare (H)">?</button>
|
||
</div>
|
||
<div id="sound">
|
||
<button id="mute" aria-label="Togli l'audio" title="Audio (M)">♪</button>
|
||
<input id="volume" type="range" min="0" max="100" step="5" aria-label="Volume della musica" title="Volume della musica">
|
||
<label for="voice-volume" class="sound-label" title="Volume delle voci">bla</label>
|
||
<input id="voice-volume" type="range" min="0" max="100" step="5" aria-label="Volume delle voci" title="Volume delle voci">
|
||
</div>
|
||
<section id="splash" class="overlay" aria-label="Manzolo (Poca) Art Presents">
|
||
<p class="splash-name">Manzolo</p>
|
||
<p class="splash-art"><span>(Poca)</span> Art</p>
|
||
<p class="splash-present">Presents</p>
|
||
</section>
|
||
<section id="title" class="overlay" hidden>
|
||
<h1>La Leggenda<br>del <span>Regolo</span></h1>
|
||
<p class="subtitle">San Piero a Sieve · Palio della Fortezza · 2007</p>
|
||
<div class="buttons"><button id="continue" hidden>Continua</button><button id="new-game">Nuova partita</button><button id="load-game" class="secondary">Carica</button><button class="open-credits secondary">Ringraziamenti</button></div>
|
||
<input id="load-file" type="file" accept=".json,application/json" hidden>
|
||
<p id="load-error" class="load-error" hidden role="alert"></p>
|
||
<p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
|
||
<p class="version"></p>
|
||
</section>
|
||
<section id="rione" class="overlay" hidden aria-label="Scegli il rione">
|
||
<h2>Per chi corri quest'anno?</h2>
|
||
<div id="rione-buttons" class="buttons"></div>
|
||
<p class="hint">Il Palio della Fortezza: quattro rioni, un palio solo.</p>
|
||
</section>
|
||
<section id="intro" class="overlay" hidden>
|
||
<p id="intro-text" aria-live="polite"></p>
|
||
<p class="hint">clic o spazio per continuare</p>
|
||
<button id="skip-intro">Salta</button>
|
||
</section>
|
||
<section id="ending" class="overlay" hidden>
|
||
<div class="ending-row">
|
||
<figure class="palio"><img src="assets/credits/palio.png" alt="Il palio del 2007: la strada bianca che sale alla Fortezza, i ragazzi in fila, l'omino con la maglia rossa e le braccia alzate"><figcaption>Il palio del 2007, dipinto dai ragazzi delle medie</figcaption></figure>
|
||
<div>
|
||
<h2>Fine del primo capitolo</h2>
|
||
<p>Il palio è lassù, in Fortezza, ad aspettare il passamano dei mattoni. E il Regolo pure. Il Palio si fa: il resto della storia lo scriviamo correndo.</p>
|
||
<p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
|
||
</div>
|
||
</div>
|
||
<div class="buttons"><button id="restart">Ricomincia</button><button class="open-credits secondary">Ringraziamenti</button></div>
|
||
</section>
|
||
<section id="notebook" class="overlay" hidden aria-label="Taccuino">
|
||
<h2>Taccuino</h2>
|
||
<ol id="notebook-list"></ol>
|
||
<p id="notebook-help"></p>
|
||
<div class="buttons"><button id="close-notebook">Chiudi</button></div>
|
||
</section>
|
||
<section id="map" class="overlay" hidden aria-label="Mappa del paese">
|
||
<div id="map-head"><h2>San Piero a Sieve</h2><input id="map-search" type="search" placeholder="Cerca un posto…" autocomplete="off" spellcheck="false" aria-label="Cerca un posto"></div>
|
||
<p id="map-none" hidden></p>
|
||
<div id="map-scroll"><div id="map-board"><svg id="map-roads" viewBox="0 0 100 100" preserveAspectRatio="none"></svg></div></div>
|
||
<div class="buttons"><button id="close-map">Chiudi</button></div>
|
||
</section>
|
||
<section id="pause" class="overlay" hidden aria-label="Pausa">
|
||
<h2>Pausa</h2>
|
||
<label class="effects-control" for="effects-volume">Ambiente ed effetti
|
||
<input id="effects-volume" type="range" min="0" max="100" step="5" aria-label="Volume ambiente ed effetti">
|
||
</label>
|
||
<div class="buttons pause-buttons">
|
||
<button id="resume">Riprendi</button>
|
||
<button id="pause-map" class="secondary">Mappa</button>
|
||
<button id="save-file" class="secondary" title="Scarica la partita in un file da aprire su un altro dispositivo">Salva su file</button>
|
||
<button class="open-credits secondary">Ringraziamenti</button>
|
||
<button id="to-title" class="secondary">Torna al titolo</button>
|
||
</div>
|
||
<p class="hint">La partita è salvata: dal titolo si riprende con «Continua». Con «Salva su file» la porti su un altro dispositivo e la apri con «Carica».</p>
|
||
<p class="version"></p>
|
||
</section>
|
||
<section id="tutorial" class="overlay" hidden aria-labelledby="tutorial-title">
|
||
<h2 id="tutorial-title">Come si gioca</h2>
|
||
<video id="tutorial-video" controls playsinline preload="metadata"></video>
|
||
<button id="tutorial-close">Torna al gioco</button>
|
||
</section>
|
||
<section id="credits" class="overlay" hidden aria-label="Ringraziamenti">
|
||
<h2>Ringraziamenti</h2>
|
||
<p class="dedication credits-dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
|
||
<dl id="credits-list"></dl>
|
||
<div id="credits-reel" aria-hidden="true"><div class="track"></div></div>
|
||
<p class="legal">Monkey Island è un marchio di Lucasfilm Ltd., citato solo nella dedica: questo gioco non è affiliato né approvato da Lucasfilm.</p>
|
||
<div class="buttons"><button id="close-credits">Chiudi</button></div>
|
||
<figure id="face" hidden><img alt=""><figcaption></figcaption></figure>
|
||
</section>
|
||
</div>
|
||
<div id="side">
|
||
<div id="sentence" aria-live="polite"></div>
|
||
<div id="panel">
|
||
<div id="verbs"></div>
|
||
<div id="inventory" aria-label="Inventario"></div>
|
||
</div>
|
||
<ol id="choices" hidden></ol>
|
||
<section id="scopa-controls" hidden aria-label="Comandi della scopa">
|
||
<p id="scopa-status" role="status"></p>
|
||
<div class="card-hand" aria-label="La mano di Andrea">
|
||
<button id="scopa-card-0" type="button"></button>
|
||
<button id="scopa-card-1" type="button"></button>
|
||
<button id="scopa-card-2" type="button"></button>
|
||
</div>
|
||
<div id="scopa-options" class="card-buttons" hidden aria-label="Quale presa"></div>
|
||
<button id="scopa-next" type="button" hidden>Prossima smazzata</button>
|
||
<details><summary>Come si gioca</summary>
|
||
<button class="tutorial-open" type="button" data-tutorial="scopa" hidden>Guarda il video</button>
|
||
<p>Si gioca una carta: se in tavola ce n’è una dello stesso valore la prendi; se no prendi le carte che sommano
|
||
il suo valore. Se la presa c’è, è obbligatoria; se sono più d’una, scegli tu. Asso 1, gobbo 8, donna 9, regio 10.
|
||
Chi pulisce la tavola fa scopa (non con l’ultima carta). Quel che resta alla fine va all’ultimo che ha preso.</p>
|
||
<p>A fine smazzata un punto per: più carte, più mattoni (con le napoletane i denari), il settebello (il 7 di
|
||
mattoni o di denari), la primiera, e uno per ogni scopa. A pari, il punto non va a nessuno.</p>
|
||
<p>Primiera: si somma la carta migliore di ogni seme (7 = 21, 6 = 18, Asso = 16, 5 = 15, 4 = 14, 3 = 13, 2 = 12,
|
||
figure 10); chi non ha almeno una carta per seme non la fa. Si va agli 11, contati a fine smazzata: vince chi ne
|
||
ha di più; pari, se ne fa un’altra.</p>
|
||
</details>
|
||
</section>
|
||
<section id="tressette-controls" hidden aria-label="Comandi del tressette">
|
||
<p id="tressette-status" role="status"></p>
|
||
<div class="card-buttons" aria-label="Segni per il socio, solo quando esci">
|
||
<button id="tressette-busso" type="button">Busso</button>
|
||
<button id="tressette-striscio" type="button">Striscio</button>
|
||
<button id="tressette-volo" type="button">Volo</button>
|
||
<button id="tressette-next" type="button" hidden>Prossima smazzata</button>
|
||
</div>
|
||
<div class="card-hand-many" aria-label="La mano di Andrea">
|
||
<button id="tressette-card-0" type="button"></button>
|
||
<button id="tressette-card-1" type="button"></button>
|
||
<button id="tressette-card-2" type="button"></button>
|
||
<button id="tressette-card-3" type="button"></button>
|
||
<button id="tressette-card-4" type="button"></button>
|
||
<button id="tressette-card-5" type="button"></button>
|
||
<button id="tressette-card-6" type="button"></button>
|
||
<button id="tressette-card-7" type="button"></button>
|
||
<button id="tressette-card-8" type="button"></button>
|
||
<button id="tressette-card-9" type="button"></button>
|
||
</div>
|
||
<details><summary>Come si gioca</summary>
|
||
<button class="tutorial-open" type="button" data-tutorial="tressette" hidden>Guarda il video</button>
|
||
<p>In quattro, a coppie: Andrea e il socio di fronte contro gli altri due. Si gira verso destra.
|
||
Chi esce gioca quel che vuole, gli altri devono rispondere al seme se ce l’hanno. Prende la carta più alta
|
||
del seme di uscita: 3, 2, Asso, regio, donna, gobbo, 7, 6, 5, 4. Chi prende esce.</p>
|
||
<p>L’Asso vale un punto; 3, 2 e figure un terzo di punto; l’ultima presa un punto. Si va ai 21: la coppia che
|
||
ci arriva per prima è fuori e ha vinto, anche a metà smazzata.</p>
|
||
<p>Accuse, dette da ognuno giocando la sua prima carta: napoletana (Asso, 2 e 3 dello stesso seme) 3 punti;
|
||
tre Assi, tre 2 o tre 3 fanno 3 punti (si dice il seme che manca), quattro fanno 4.</p>
|
||
<p>Convenzioni di questo tavolo: il «fuori» ai 21 è automatico (un’accusa o una presa che ci porta fa vincere
|
||
subito); niente cappotto; i segni valgono anche alla prima presa.</p>
|
||
<p>Segni, solo di chi esce: <b>busso</b> (prendi con la migliore e ritornami il seme),
|
||
<b>striscio</b> (di questo seme ne ho altre), <b>volo</b> (era l’ultima). Prima scegli il segno, poi la carta.
|
||
Tastiera: B, S, V; frecce e 1–0 scelgono, Invio gioca, Esc lascia il tavolo.</p>
|
||
</details>
|
||
</section>
|
||
<section id="briscola-controls" hidden aria-label="Comandi della briscola">
|
||
<p id="briscola-status" role="status"></p>
|
||
<div class="card-hand" aria-label="La mano di Andrea">
|
||
<button id="briscola-card-0" type="button"></button>
|
||
<button id="briscola-card-1" type="button"></button>
|
||
<button id="briscola-card-2" type="button"></button>
|
||
</div>
|
||
<details><summary>Come si gioca</summary>
|
||
<button class="tutorial-open" type="button" data-tutorial="briscola" hidden>Guarda il video</button>
|
||
<p>Tocca una carta sul tavolo o il suo nome qui sotto per giocarla. Frecce o 1–2–3 scelgono; Invio gioca.
|
||
Esc lascia il tavolo. Vince chi fa almeno 61 punti; 60 a 60 è patta.</p>
|
||
<p>Non sei obbligato a rispondere al seme. Prende la briscola più alta, oppure la carta più alta del seme
|
||
di uscita. Ordine: Asso, 3, regio (re), donna (cavallo), gobbo (fante), 7, 6, 5, 4, 2.
|
||
Asso 11 punti, 3 dieci, regio 4, donna 3, gobbo 2; le altre zero. Fra parentesi i nomi delle napoletane.</p>
|
||
<p>Chi prende pesca per primo e poi esce. La briscola scoperta è l’ultima carta del mazzo;
|
||
il contatore la comprende. Finito il mazzo, si giocano le carte rimaste e si contano le prese.
|
||
Durante la partita i punti non si dicono!</p>
|
||
</details>
|
||
</section>
|
||
<section id="bocce-controls" hidden aria-label="Comandi delle bocce">
|
||
<p id="bocce-status" role="status"></p>
|
||
<div class="bocce-adjust">
|
||
<button id="bocce-left" type="button" aria-label="Sposta la mira a sinistra">← Mira</button>
|
||
<label for="bocce-power">Forza <output id="bocce-power-value">50%</output>
|
||
<input id="bocce-power" type="range" min="0" max="100" step="1" value="50" aria-label="Forza del lancio">
|
||
</label>
|
||
<button id="bocce-right" type="button" aria-label="Sposta la mira a destra">Mira →</button>
|
||
<button id="bocce-throw" type="button">Lancia</button>
|
||
</div>
|
||
<details id="bocce-help"><summary>Come si gioca</summary>
|
||
<button class="tutorial-open" type="button" data-tutorial="bocce" hidden>Guarda il video</button>
|
||
<p>Tocca il campo o il dettaglio del pallino per mirare. Regola la forza, poi premi Lancia.
|
||
Il cerchio azzurro indica dove si fermerebbe la boccia senza urti.</p>
|
||
<p>Puoi anche tenere premuto sul campo o Spazio e rilasciare per tirare.
|
||
Frecce ← →: mira; ↑ ↓: forza. Esc esce dalla mano.</p>
|
||
<p>Tre bocce a testa. Tira chi non ha il punto; segna ogni boccia più vicina della migliore avversaria.
|
||
Vince chi fa più punti nella mano.</p>
|
||
</details>
|
||
<details id="biliardo-help" hidden><summary>Come si gioca</summary>
|
||
<button class="tutorial-open" type="button" data-tutorial="biliardo" hidden>Guarda il video</button>
|
||
<p>Clic o tocco sul tavolo fissa la mira: puoi spostarti sui comandi senza cambiarla.
|
||
La linea tratteggiata segue la tua biglia fino al primo urto, comprese le sponde; il cerchio vuoto indica
|
||
il punto di contatto. Dopo l’urto, la freccia azzurra mostra la direzione dell’avversaria, quella gialla
|
||
la tua. Le frecce mostrano solo il primo tratto, fino al prossimo ostacolo o al massimo 50 cm.
|
||
Senza urti, il cerchietto indica dove ti fermi. La guida arancione segnala un primo contatto falloso.</p>
|
||
<p>Regola la forza, poi premi Tira. Oppure tieni premuto sul tavolo o Spazio e rilascia per tirare:
|
||
durante la carica la mira resta ferma. Frecce ← →: mira fine; Maiusc + ← →: regolazione ancora più precisa;
|
||
↑ ↓: forza. Esc esce dalla partita. I colpi sono centrali, senza effetti di rotazione.</p>
|
||
<p>Cinque birilli: devi colpire la biglia avversaria e mandarla sui birilli o sul pallino. Birillo bianco 2 punti,
|
||
rosso 4, rosso da solo 10; pallino toccato dalla biglia avversaria 3. Se manchi la biglia avversaria, tocchi prima
|
||
il pallino o abbatti birilli con la tua, i punti (almeno 2) vanno all'avversario. Un colpo a testa; vince chi arriva prima a 20.</p>
|
||
</details>
|
||
</section>
|
||
</div>
|
||
<p id="rotate">Gira il telefono: in orizzontale si gioca meglio.</p>
|
||
</div>
|
||
<div id="error" hidden role="alert"></div>
|
||
<script type="module">
|
||
import('./src/main.js').catch(error => {
|
||
const panel = document.getElementById('error');
|
||
panel.textContent = 'Avvio non riuscito: apri il gioco da un server statico (python3 -m http.server) e ricarica. ' + error.message;
|
||
panel.hidden = false;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|