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>
<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="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="briscola-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="tressette-signals" hidden aria-label="Quale presa"></div>
    <button id="scopa-next" type="button" hidden>Prossima smazzata</button>
    <details><summary>Come si gioca</summary>
      <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 (la carta migliore di ogni seme: 7, 6, Asso, 5, 4, 3, 2, figure), e uno per
      ogni scopa. Si va agli 11.</p>
    </details>
  </section>
  <section id="tressette-controls" hidden aria-label="Comandi del tressette">
    <p id="tressette-status" role="status"></p>
    <div class="tressette-signals" 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="tressette-hand" 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>
      <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>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="briscola-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>
      <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, Re, Cavallo, Fante, 7, 6, 5, 4, 2.
      Asso 11 punti, 3 dieci, Re 4, Cavallo 3, Fante 2; le altre zero.</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>
      <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>
      <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>