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>
    <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="spots-button" hidden title="Mostra cosa si può toccare (H)">?</button>
    </div>
    <div id="sound">
      <button id="mute" aria-label="Musica: togli l'audio" title="Musica (M)">♪</button>
      <input id="volume" type="range" min="0" max="100" step="5" aria-label="Volume della musica">
    </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 class="open-credits secondary">Crediti</button></div>
      <p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</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>
      <h2>Fine del prototipo</h2>
      <p>Il Regolo è passato di qui. Il resto della storia è ancora da scrivere.</p>
      <p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
      <div class="buttons"><button id="restart">Ricomincia</button><button class="open-credits secondary">Crediti</button></div>
    </section>
    <section id="map" class="overlay" hidden aria-label="Mappa del paese">
      <h2>San Piero a Sieve</h2>
      <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>
      <div class="buttons pause-buttons">
        <button id="resume">Riprendi</button>
        <button id="pause-map" class="secondary">Mappa</button>
        <button class="open-credits secondary">Crediti</button>
        <button id="to-title" class="secondary">Torna al titolo</button>
      </div>
      <p class="hint">La partita è salvata: dal titolo si riprende con «Continua».</p>
    </section>
    <section id="credits" class="overlay" hidden aria-label="Crediti">
      <h2>Crediti</h2>
      <p class="dedication credits-dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
      <dl id="credits-list"></dl>
      <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>
    </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>
  </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>