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="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>Tocca il tavolo per mirare: la linea mostra dove va la tua biglia e la freccia dove parte quella colpita.
      Regola la forza, poi premi Tira. Oppure tieni premuto sul tavolo o Spazio e rilascia per tirare.
      Frecce ← →: mira fine; ↑ ↓: forza. Esc esce dalla partita.</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>