leggenda-del-regolo/index.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>
      <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>
    <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="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="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="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>