pierre/Ustagammon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Une adresse pour chaque écran, de vrais liens pour y aller

Browse Source 
Routeur pur (fragment vers écran et inversement) et navigation sur
hashchange : aide et ses questions, glossaire et ses termes, à propos,
menu, mes parties et chaque partie, vue d'une position avec « Jouer à
partir d'ici » et « Retour à ma partie », « Copier le lien de la
position ».

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
2026-11-03 21:21:45 +01:00
co-authored by Claude Opus 5.5
parent 43031d1ec6
commit f4914b30ab
11 changed files with 1441 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+31 -7
View File
@@ -29,9 +29,11 @@
<img class="logo-light" src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
<img class="logo-dark" src="icons/logo-horizontal-sombre.svg" alt="Ustagammon">
</h1>
<button id="help-button" type="button" class="icon-button labelled"></button>
<!-- 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>
<button id="menu-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">
@@ -46,7 +48,7 @@
<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>
<button type="button" class="link-button"></button>
<a class="link-button" href="#/glossaire"></a>
</div>
</div>
<div id="strip-player" class="strip">
@@ -58,6 +60,7 @@
<div class="infoline">
<p id="info" class="info" aria-live="polite"></p>
<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>
@@ -79,11 +82,31 @@
<noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
</main>
<section id="help" class="help" hidden>
<button id="help-back" type="button" class="secondary"></button>
<!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
<section id="help" class="help page" hidden>
<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 id="help-content"></div>
</section>
<!-- Une position partagée (#/position/<Position ID>/<Match ID>), non
jouable. -->
<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">
<a id="position-back" href="#/" class="button secondary"></a>
<button id="position-play" type="button"></button>
</div>
<button id="position-copy" type="button" class="secondary position-copy"></button>
</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">
@@ -93,9 +116,10 @@
<button id="menu-close" type="button" class="icon-button"></button>
</div>
<button id="menu-new-game" type="button" class="item"></button>
<button id="menu-games" type="button" class="item"></button>
<a id="menu-games" href="#/parties" class="item"></a>
<button id="menu-copy-link" type="button" class="item"></button>
<button id="menu-fullscreen" type="button" class="item"></button>
<button id="menu-help" type="button" class="item"></button>
<a id="menu-help" href="#/aide" class="item"></a>
<button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></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>