Révision UX : portrait stable, bandeaux, menu, paysage plateau = écran, vibrations
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
2be5bdcb4f
commit
c6649f94c0
+102
-34
@@ -2,7 +2,7 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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>
|
||||
@@ -16,47 +16,66 @@
|
||||
<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 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) : horizontal, ou symbole seul quand la place manque (téléphone
|
||||
étroit, colonne du mode paysage) ; version sombre en thème sombre. -->
|
||||
site), version sombre en thème sombre (choix par app.css). -->
|
||||
<h1 class="brand">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark) and (max-width: 24.5rem), (prefers-color-scheme: dark) and (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-sombre.svg">
|
||||
<source media="(max-width: 24.5rem), (orientation: landscape) and (max-height: 40rem)" srcset="icons/symbole-couleur.svg">
|
||||
<source media="(prefers-color-scheme: dark)" srcset="icons/logo-horizontal-sombre.svg">
|
||||
<img src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
|
||||
</picture>
|
||||
<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="secondary"></button>
|
||||
<button id="new-game" type="button" class="secondary"></button>
|
||||
<button id="help-button" type="button" class="icon-button labelled"></button>
|
||||
<button id="fullscreen-button" type="button" class="icon-button labelled"></button>
|
||||
<button id="menu-button" type="button" class="icon-button labelled"></button>
|
||||
</header>
|
||||
|
||||
<main id="game">
|
||||
<svg id="board" class="board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
|
||||
<p id="pips" class="pips"></p>
|
||||
<p id="info" class="info" aria-live="polite"></p>
|
||||
<p id="prompt" class="prompt" aria-live="polite"></p>
|
||||
<div class="actions">
|
||||
<button id="roll" type="button" hidden></button>
|
||||
<button id="double" type="button" class="secondary" hidden></button>
|
||||
<button id="take" type="button" hidden></button>
|
||||
<button id="drop" type="button" class="secondary" hidden></button>
|
||||
<button id="confirm" type="button" hidden></button>
|
||||
<button id="cancel" type="button" class="secondary" hidden></button>
|
||||
<button id="skip" type="button" hidden></button>
|
||||
<button id="replay" type="button" class="secondary" hidden></button>
|
||||
<button id="again" type="button" hidden></button>
|
||||
<main id="game" class="game">
|
||||
<div id="strip-computer" class="strip">
|
||||
<span class="mini mini-computer"></span>
|
||||
<span class="who"></span>
|
||||
<span class="lead"></span>
|
||||
<button type="button" class="count"></button>
|
||||
</div>
|
||||
<!-- Confirmation avant de doubler (ouverte par app/ui/app.js). -->
|
||||
<dialog id="double-dialog" class="confirm" aria-labelledby="double-question">
|
||||
<p id="double-question"></p>
|
||||
<div class="confirm-actions">
|
||||
<button id="double-confirm" type="button"></button>
|
||||
<button id="double-cancel" type="button" class="secondary"></button>
|
||||
<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>
|
||||
<button type="button" class="link-button"></button>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
<div id="strip-player" class="strip">
|
||||
<span class="mini mini-player"></span>
|
||||
<span class="who"></span>
|
||||
<span class="lead"></span>
|
||||
<button type="button" class="count"></button>
|
||||
</div>
|
||||
<div class="infoline">
|
||||
<p id="info" class="info" aria-live="polite"></p>
|
||||
<button id="replay" type="button" class="icon-button replay" 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>
|
||||
|
||||
@@ -64,5 +83,54 @@
|
||||
<button id="help-back" type="button" class="secondary"></button>
|
||||
<div id="help-content"></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>
|
||||
<button id="menu-new-game" type="button" class="item"></button>
|
||||
<button id="menu-fullscreen" type="button" class="item"></button>
|
||||
<button id="menu-help" 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-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>
|
||||
</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-text"></p>
|
||||
<div class="panel-actions">
|
||||
<button id="panel-secondary" type="button" class="secondary"></button>
|
||||
<button id="panel-primary" type="button"></button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user