Ustagammon/web/index.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#4A2E1F">
<title>Ustagammon</title>
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="icons/favicon.svg" type="image/svg+xml">
<link rel="icon" href="icons/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="icons/apple-touch-icon-180.png">
<link rel="preload" href="fonts/AlegreyaSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/AlegreyaSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="app.css">
<script type="module" src="app/main.js"></script>
</head>
<body class="busy">
<!-- Les textes des boutons et des messages viennent de app/src/ui/texts.ts ;
     les pictogrammes, de app/src/ui/icons.ts. Tout l'écran est dans #screen :
     c'est lui qui tourne d'un quart de tour quand le plein écran ne peut pas
     verrouiller le paysage (ADR 0012). -->
<div id="screen" class="screen">

<header class="topbar">
  <!-- Logo de la charte (docs/identite/logo/, copié dans icons/ par make
       site), version sombre en thème sombre (choix par app.css). -->
  <h1 class="brand">
    <a id="home-link" href="#/accueil" class="brand-link">
      <img class="logo-light" src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
      <img class="logo-dark" src="icons/logo-horizontal-sombre.svg" alt="Ustagammon">
    </a>
  </h1>
  <!-- Ce qui mène à un autre écran est un lien vers son adresse (ADR 0013,
       amendement) ; les actions sont des boutons. -->
  <a id="help-button" href="#/aide" class="icon-button labelled"></a>
  <button id="fullscreen-button" type="button" class="icon-button labelled"></button>
  <a id="menu-button" href="#/menu" class="icon-button labelled"></a>
</header>

<main id="game" class="game">
  <!-- Dans un match : « Match en 5 points », et la partie Crawford. -->
  <p id="match-line" class="match-line overline" hidden></p>
  <div id="strip-computer" class="strip">
    <span class="mini mini-computer"></span>
    <span class="who"></span>
    <span class="lead"></span>
    <span class="match-score" hidden></span>
    <button type="button" class="count"></button>
  </div>
  <div class="board-box">
    <svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
    <div id="pip-bubble" class="bubble" role="dialog" aria-labelledby="pip-bubble-term" hidden>
      <p id="pip-bubble-term" class="bubble-term"></p>
      <p class="bubble-text"></p>
      <a class="link-button" href="#/glossaire"></a>
    </div>
  </div>
  <div id="strip-player" class="strip">
    <span class="mini mini-player"></span>
    <span class="who"></span>
    <span class="lead"></span>
    <span class="match-score" hidden></span>
    <button type="button" class="count"></button>
  </div>
  <!-- Ligne du maître ou du dernier coup : après une décision du joueur,
       le conseil du maître (un lien vers sa feuille d'explication) prend la
       place du texte du dernier coup. -->
  <div class="infoline">
    <p id="info" class="info" aria-live="polite"></p>
    <a id="advice-line" class="advice-line" href="#/" hidden></a>
    <button id="replay" type="button" class="icon-button replay" hidden></button>
    <button id="copy-link" type="button" class="icon-button copy-link" hidden></button>
  </div>
  <p id="prompt" class="prompt" aria-live="polite"></p>
  <div class="spacer"></div>
  <div id="actions" class="actions">
    <div class="slot">
      <button id="double" type="button" class="secondary" hidden></button>
      <button id="cancel" type="button" class="secondary" hidden></button>
      <button id="drop" type="button" class="secondary" hidden></button>
    </div>
    <div class="slot primary">
      <button id="roll" type="button" hidden></button>
      <button id="confirm" type="button" hidden></button>
      <button id="skip" type="button" hidden></button>
      <button id="take" type="button" hidden></button>
      <button id="again" type="button" hidden></button>
      <p id="move-hint" class="move-hint" hidden></p>
    </div>
  </div>
  <noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
</main>

<!-- L'accueil (#/accueil) et le tutoriel (#/tutoriel/...) : leur contenu
     est construit par app/src/ui/home-view.ts et tutorial-view.ts. -->
<section id="home" class="home page" hidden></section>
<section id="tutorial" class="tutorial page" hidden></section>
<!-- Les leçons (#/lecons, #/lecons/<n>/...) : la liste, construite par
     app/src/ui/lessons-view.ts, et les écrans d'une leçon, construits par
     tutorial-view.ts comme ceux du tutoriel. -->
<section id="lessons" class="lessons page" hidden></section>
<section id="lesson" class="tutorial page" hidden></section>

<!-- Le choix d'une nouvelle partie (#/nouvelle-partie), construit par
     app/src/ui/new-game-view.ts. -->
<section id="new-game" class="new-game page" hidden></section>

<!-- L'analyse d'une partie (#/parties/<id>/analyse/<coup>), construite par
     app/src/ui/analysis-view.ts. -->
<section id="analysis" class="analysis page" hidden></section>

<!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
<section id="help" class="help page" hidden>
  <!-- La barre haute de l'aide reste en vue quand la page défile. -->
  <div id="help-bar" class="help-bar">
    <a id="help-back" href="#/" class="button secondary"></a>
    <nav id="help-tabs" class="help-tabs">
      <a href="#/aide" data-screen="help"></a>
      <a href="#/glossaire" data-screen="glossary"></a>
      <a href="#/a-propos" data-screen="about"></a>
    </nav>
  </div>
  <div id="help-content"></div>
</section>

<!-- Une position partagée (#/position/<Position ID>/<Match ID>), non
     jouable. En portrait, de haut en bas ; en paysage, le plateau à gauche
     sur toute la hauteur, le reste dans une colonne à droite. -->
<section id="position-view" class="position-view page" aria-labelledby="position-title" hidden>
  <h2 id="position-title" class="position-title"></h2>
  <p id="position-message" class="position-message" role="status"></p>
  <svg id="position-board" class="board position-board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
  <p id="position-detail" class="position-detail"></p>
  <div class="position-actions">
    <button id="position-play" type="button"></button>
    <button id="position-copy" type="button" class="secondary"></button>
    <a id="position-back" href="#/" class="button secondary"></a>
  </div>
</section>

<!-- Menu : une feuille qui monte du bas. -->
<div id="menu-veil" class="veil sheet-veil" hidden>
  <div id="menu" class="sheet" role="dialog" aria-modal="true" aria-labelledby="menu-title">
    <div class="sheet-head">
      <span class="grip" aria-hidden="true"></span>
      <h2 id="menu-title" class="sheet-title"></h2>
      <button id="menu-close" type="button" class="icon-button"></button>
    </div>
    <a id="menu-new-game" href="#/nouvelle-partie" class="item"></a>
    <a id="menu-games" href="#/parties" class="item"></a>
    <a id="menu-home" href="#/accueil" class="item"></a>
    <a id="menu-tutorial" href="#/tutoriel/1" class="item"></a>
    <a id="menu-lessons" href="#/lecons" class="item"></a>
    <button id="menu-copy-link" type="button" class="item"></button>
    <button id="menu-fullscreen" type="button" class="item"></button>
    <a id="menu-help" href="#/aide" class="item"></a>
    <button id="menu-install" type="button" class="item"></button>
    <button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></span></button>
    <button id="menu-advice" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
    <button id="menu-vibrations" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
    <button id="menu-screen-on" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
    <button id="menu-update" type="button" class="item"></button>
  </div>
</div>

<!-- L'explication du maître (#/explication/<événement>) : une feuille,
     construite par app/src/ui/advice-view.ts. -->
<div id="explain-veil" class="veil sheet-veil" hidden></div>

<!-- Le bilan de fin de partie (#/parties/<id>/bilan) : un panneau centré,
     construit par app/src/ui/summary-view.ts. -->
<div id="summary-veil" class="veil summary-veil" hidden></div>

<!-- Le prompt pour une IA (…/ia), depuis l'analyse ou le glossaire : une
     feuille, construite par app/src/ui/ask-ai.ts (depuis la feuille du
     maître ou le bilan, il prend leur place). -->
<div id="prompt-veil" class="veil sheet-veil prompt-veil" hidden></div>

<!-- La marche à suivre pour installer (#/installer) : une feuille. -->
<div id="install-veil" class="veil sheet-veil" hidden>
  <div id="install-sheet" class="sheet" role="dialog" aria-modal="true" aria-labelledby="install-title">
    <div class="sheet-head">
      <span class="grip" aria-hidden="true"></span>
      <img class="install-symbol" src="icons/symbole-couleur.svg" alt="">
      <h2 id="install-title" class="sheet-title"></h2>
      <button id="install-close" type="button" class="icon-button"></button>
    </div>
    <p id="install-lead" class="install-lead"></p>
    <ol id="install-steps" class="install-steps"></ol>
    <button id="install-done" type="button" class="secondary install-done"></button>
  </div>
</div>

<!-- Confirmation avant de doubler : la seule question posée au joueur. -->
<div id="double-veil" class="veil" hidden>
  <div id="double-dialog" class="panel" role="dialog" aria-modal="true" aria-labelledby="double-question">
    <p id="double-question"></p>
    <div class="panel-actions">
      <button id="double-cancel" type="button" class="secondary"></button>
      <button id="double-confirm" type="button"></button>
    </div>
  </div>
</div>

<!-- Fin de partie, et double de l'ordinateur en paysage : un panneau centré
     sur un voile. -->
<div id="panel-veil" class="veil" hidden>
  <div id="panel" class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-text">
    <p id="panel-overline" class="overline"></p>
    <p id="panel-text" class="panel-title"></p>
    <p id="panel-detail" class="panel-detail"></p>
    <div class="panel-actions">
      <button id="panel-secondary" type="button" class="secondary"></button>
      <button id="panel-primary" type="button"></button>
    </div>
    <a id="panel-settings" class="panel-link" href="#/nouvelle-partie" hidden></a>
  </div>
</div>

<!-- « Nouvelle partie commencée. Reprendre l'ancienne », 10 s. -->
<div id="banner" class="banner" role="status" hidden>
  <span id="banner-text"></span>
  <button id="resume-old" type="button" class="secondary"></button>
  <span class="banner-timer" aria-hidden="true"></span>
</div>

<!-- « Nouvelle version prête. » : en bas, comme « Reprendre l'ancienne »,
     seulement entre deux tours. -->
<div id="update-banner" class="banner update-banner" role="status" hidden>
  <span id="update-text"></span>
  <button id="update-apply" type="button" class="secondary"></button>
</div>

</div>
</body>
</html>