Files
leggenda-del-regolo/index.html
T

312 lines
23 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<p class="splash-hint">Tocca per cominciare</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>
<div class="buttons"><button id="tutorial-close">Torna al gioco</button></div>
</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"><button class="arrow prev" type="button" aria-label="Foto precedente">‹</button><div class="track" aria-label="Le immagini del gioco: toccane una per vederla grande"></div><button class="arrow next" type="button" aria-label="Foto successiva">›</button></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>
<!-- Il GP di Fortezza sul telefono: lo swipe qui, così il dito non copre la pista. -->
<div id="gara-pad" hidden role="application" aria-label="Zona dello swipe: tieni premuto per il gas e trascina verso dove vuoi andare">
Tieni premuto qui per il gas e trascina verso dove vuoi andare
</div>
<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>
<button id="gara-brake" type="button" hidden>Frena</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="basket-help" hidden><summary>Come si gioca</summary>
<p>Muovi il mouse sul campo per scegliere l’angolo del tiro: la freccia parte dalle mani di Andrea. Un clic (o un
tocco) fissa la mira, così puoi raggiungere i comandi senza cambiarla; un altro clic la sposta. Tieni premuto sul
campo (o Spazio) e la forza riparte da zero e sale: lascia per tirare. Oppure regola la forza e premi Tira.
Frecce ← →: angolo più teso o più alto; Maiusc + ← →: a mezzo grado; ↑ ↓: forza. Esc esce.</p>
<p>Dieci palloni. Si comincia da sotto; a ogni canestro si arretra di una postazione: tiro libero, media distanza,
da tre e da lontanissimo, dove un canestro vale tre punti invece di due. Il ferro e il tabellone rimandano la
palla: entra anche sporca, ma non da sotto. La gloria: 3 canestri alla bona, 5 seria, 7 a fassi male. Alla bona la
guida mostra la parabola fino al primo urto, Seria solo l’inizio, A fassi male niente.</p>
</details>
<details id="gara-help" hidden><summary>Come si gioca</summary>
<p>Il GP di Fortezza: tre giri attorno alle mura coi cinquantini. <b>Alla bona e Seria</b> la guida è semplice:
tieni premuto sulla scena (o Spazio, o il pulsante Gas) per accelerare e lascia per frenare; lo sterzo segue la
strada da solo, scansa le buche e sorpassa. Ma se entri in curva troppo forte scivoli fuori, e nella paglia ti
fermi: molla prima delle curve. Sopra il motorino «CURVA!» avvisa che ne arriva una, «LASCIA!» dice quando
mollare. A Seria chi entra in curva troppo forte va fuori di sicuro, e chi la prende giusta fa la «curva pulita»
ed esce con una spinta in più.</p>
<p><b>Ginocchio in terra</b> si guida davvero. Con un solo dito: tieni premuto sulla scena per
il gas e trascina verso la direzione in cui vuoi andare sullo schermo. A destra vai verso destra, anche quando
il motorino scende. I piccoli movimenti non sterzano; il cerchietto segue gli swipe lunghi. Alza il dito per
mollare il gas e raddrizzare lo sterzo. Funziona anche col mouse premuto.</p>
<p>Con la tastiera: Spazio, Invio o ↑ per il gas, ← → per sterzare; oppure tieni premuti i pulsanti Sterza.
↓ (o il pulsante Frena, tenuto premuto) frena, anche col gas dato. Dal pannello il
pulsante alterna Gas e Molla. Durante la presentazione dei piloti un tocco passa al prossimo.</p>
<p>Sul telefono lo swipe si fa anche nel riquadro sotto la pista, così il dito non la copre. Il cursore
Sensibilità decide quanto sterza lo swipe: parte basso, alzalo se il motorino gira poco.</p>
<p>Le frecce gialle in terra sono acceleratori; le lattine rosse di miscela danno uno sprint (e ricompaiono); nelle
buche, se ci passi forte, caschi. Fuori strada l'erba frena, e nella paglia ci si ferma. Alla bona la pista mostra
in rosso dove frenare, Seria solo i coni, Ginocchio in terra niente. Esc esce.</p>
</details>
<details id="pesca-help" hidden><summary>Come si gioca</summary>
<p>Un tocco sull’acqua sceglie dove lanciare (o regola la forza: più lontano, pesci più grossi, ma attese più
lunghe). Tieni premuto sulla scena (o Spazio): la forza riparte da zero e sale, lascia per lanciare; oppure premi
Lancia. Poi si aspetta: il galleggiante ha dei tocchi finti (si abbassa appena) e un’abboccata vera (va sotto del
tutto): premi in quel momento per ferrare, e <b>resta premuto</b>: stai già recuperando. Premendo a vuoto si
ricupera la lenza vuota e il lancio è perso; se non ferri in tempo il pesce lo sputa, e riprova fino a tre volte.</p>
<p>Nel recupero guarda la lenza e la barra in basso: quando il pesce strattona (la lenza trema) la barra sale verso
il rosso, lascia andare un attimo, poi riprendi. I pesci piccoli vengono a riva in fretta, le carpe no. Dal pannello
il pulsante alterna Recupera e Molla. Sei lanci. La gloria: 2 pesci alla bona, 3 seria, 4 a fassi male (lo stivale
non conta, e non pesa). Frecce ← →: distanza del lancio; Esc esce.</p>
</details>
<details id="micro-help" hidden><summary>Come si gioca</summary>
<p>La pista col gesso sul parcheggio di Cardetole: un giro contro il Chiaru, una spinta a testa (prima tu, poi
lui). La tua macchinina è la rossa. Vince chi taglia per primo il traguardo a scacchi; se ci arrivate tutti e due
nello stesso giro di spinte, vince chi è andato più in là.</p>
<p>Se durante la corsa la macchinina esce <b>tutta</b> dal gesso, torna dov'era prima della spinta: vale anche se
ce la manda l'altra urtandola, e vale per i tornanti, dove non si salta dall'altra parte. Alla bona vedi dove si
ferma la spinta (verde dentro, rossa fuori), Seria solo la direzione, A fassi male una freccina. Il Chiaru è più
preciso a ogni livello.</p>
<p>Muovi il mouse o tocca il parcheggio per mirare: un tocco fissa solo la mira. Per spingere tieni premuto (o
Spazio) finché il dito si carica e lascia, oppure regola la forza e premi Spingi. Frecce ← → o i pulsanti Mira
girano la mira (Maiusc per i passi fini); Esc esce.</p>
</details>
<details id="rinquarto-help" hidden><summary>Come si gioca</summary>
<p>I rinquarti di Trappizzio Berti: sei posizioni. Su ognuna tiri prima tu, poi il tavolo torna com'era e tira Trappizzio Berti; un
punto per ogni rinquarto riuscito, vince chi ne fa di più (si può anche pareggiare). La tua biglia è la bianca, il
bersaglio la gialla con l'anello. Le biglie viola con la croce e i birilli sono disturbi: toccarne uno prima del
bersaglio annulla il tiro. La diretta è sempre coperta, ma c'è sempre un rinquarto possibile.</p>
<p>Punto se la bianca tocca la gialla dopo almeno le sponde richieste: conta il primo contatto. Alla bona una
sponda e la guida fino al secondo rimbalzo, Seria due sponde e la guida corta, A fassi male tre sponde e niente
guida. Le posizioni si fanno più strette man mano, e Trappizzio Berti è più preciso a ogni livello. La forza è sempre piena:
è un rompicapo di angoli. Nell'allenamento («Fammi vedere un rinquarto») tira prima lui, poi lo rifai tu.</p>
<p>Muovi il mouse o tocca il tavolo per mirare: un tocco fissa solo la mira. Per tirare premi Tira, oppure tieni
premuto sul tavolo (o Spazio) finché la stecca si carica e lascia. Frecce ← → o i pulsanti Mira (tenuti
premuti) girano la stecca, sempre più svelti; con Maiusc a passi fini. Dopo il tiro la traiettoria resta sul tavolo
con le sponde numerate e il punto del contatto: tocca o premi Prossima per andare avanti. Esc esce.</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>