Refond l'application en parcours multi-pages
This commit is contained in:
340
index.html
340
index.html
@@ -5,72 +5,62 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Application officielle de suivi de match pour ChessCubing Twice et ChessCubing Time."
|
||||
content="Configuration de match pour ChessCubing Arena sur téléphone et tablette."
|
||||
/>
|
||||
<title>ChessCubing Arena</title>
|
||||
<title>ChessCubing Arena | Configuration</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<body data-page="setup">
|
||||
<div class="ambient ambient-left"></div>
|
||||
<div class="ambient ambient-right"></div>
|
||||
<div class="layout">
|
||||
<header class="hero">
|
||||
|
||||
<div class="setup-shell">
|
||||
<header class="hero hero-setup">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Application officielle de match</p>
|
||||
<h1>ChessCubing Arena</h1>
|
||||
<p class="lead">
|
||||
Une web app pensée pour l'arbitrage sur téléphone et tablette,
|
||||
directement dérivée des règlements de
|
||||
<strong>ChessCubing Twice</strong> et
|
||||
<strong>ChessCubing Time</strong>.
|
||||
Une version mobile et tablette organisée par phases : configuration,
|
||||
page chrono ultra lisible, puis page cube dédiée.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<button class="button primary" data-scroll-target="setupPanel">
|
||||
Configurer une rencontre
|
||||
</button>
|
||||
<button class="button secondary" data-scroll-target="rulesPanel">
|
||||
Voir la synthèse du règlement
|
||||
</button>
|
||||
</div>
|
||||
<div class="hero-pills">
|
||||
<span>Mobile-first</span>
|
||||
<span>Pages séparées</span>
|
||||
<span>Face-à-face téléphone</span>
|
||||
<span>Twice + Time</span>
|
||||
<span>Arbitrage en direct</span>
|
||||
<span>Fonctionne hors build</span>
|
||||
<span>Arbitrage tactile</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-preview">
|
||||
<div class="preview-card">
|
||||
<p class="preview-label">Ce que l'application gère</p>
|
||||
<ul class="preview-list">
|
||||
<li>Blocks de 180 s et quotas FAST / FREEZE / MASTERS</li>
|
||||
<li>Temps par coup de 20 s</li>
|
||||
<li>Phase cube, égalité, gagnant et block suivant</li>
|
||||
<li>Mode Time avec chronos cumulés et blocs - / +</li>
|
||||
</ul>
|
||||
<p class="micro-label">Flux de match</p>
|
||||
<ol class="phase-list">
|
||||
<li>Configurer la rencontre</li>
|
||||
<li>Passer à la page chrono</li>
|
||||
<li>Basculer automatiquement sur la page cube</li>
|
||||
<li>Revenir sur la page chrono pour le block suivant</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="preview-banner">
|
||||
<span class="mini-chip">Block 1</span>
|
||||
<strong id="heroModeHint">Twice ou Time, selon la configuration</strong>
|
||||
<span class="mini-chip">Téléphone</span>
|
||||
<strong>Un joueur en haut, un joueur en bas</strong>
|
||||
<p>
|
||||
L'app sert de chef d'orchestre pendant la partie sans imposer un
|
||||
échiquier numérique.
|
||||
La zone du haut s'inverse automatiquement pour que les deux
|
||||
joueurs se fassent face autour de l'appareil.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<main class="workspace">
|
||||
<section class="panel" id="setupPanel">
|
||||
<main class="setup-grid">
|
||||
<section class="panel">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Préparer la rencontre</p>
|
||||
<h2>Configuration de match</h2>
|
||||
<p class="eyebrow">Nouvelle rencontre</p>
|
||||
<h2>Configuration</h2>
|
||||
</div>
|
||||
<p class="section-copy">
|
||||
Lancement rapide pour club, démo ou tournoi. Les choix pilotent le
|
||||
tableau d'arbitrage en direct.
|
||||
Les réglages ci-dessous préparent les pages chrono et cube.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -92,16 +82,16 @@
|
||||
<input type="radio" name="mode" value="twice" checked />
|
||||
<strong>ChessCubing Twice</strong>
|
||||
<span>
|
||||
Le gagnant du cube commence le block suivant et peut obtenir
|
||||
un double coup selon la règle V2.
|
||||
Le gagnant du cube ouvre le block suivant et peut obtenir un
|
||||
double coup V2.
|
||||
</span>
|
||||
</label>
|
||||
<label class="option-card">
|
||||
<input type="radio" name="mode" value="time" />
|
||||
<strong>ChessCubing Time</strong>
|
||||
<span>
|
||||
Même structure de blocks, avec deux chronos cumulés et un
|
||||
impact cube en bloc - / +.
|
||||
Même structure de blocks, avec chronos cumulés et alternance
|
||||
bloc - / bloc +.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -113,41 +103,29 @@
|
||||
<label class="option-card">
|
||||
<input type="radio" name="preset" value="fast" checked />
|
||||
<strong>FAST</strong>
|
||||
<span>6 coups par joueur et par block</span>
|
||||
<span>6 coups par joueur</span>
|
||||
</label>
|
||||
<label class="option-card">
|
||||
<input type="radio" name="preset" value="freeze" />
|
||||
<strong>FREEZE</strong>
|
||||
<span>8 coups par joueur et par block</span>
|
||||
<span>8 coups par joueur</span>
|
||||
</label>
|
||||
<label class="option-card">
|
||||
<input type="radio" name="preset" value="masters" />
|
||||
<strong>MASTERS</strong>
|
||||
<span>10 coups par joueur et par block</span>
|
||||
<span>10 coups par joueur</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<label class="field">
|
||||
<span>Joueur blanc</span>
|
||||
<input
|
||||
name="whiteName"
|
||||
type="text"
|
||||
maxlength="40"
|
||||
placeholder="Blanc"
|
||||
required
|
||||
/>
|
||||
<input name="whiteName" type="text" maxlength="40" placeholder="Blanc" required />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Joueur noir</span>
|
||||
<input
|
||||
name="blackName"
|
||||
type="text"
|
||||
maxlength="40"
|
||||
placeholder="Noir"
|
||||
required
|
||||
/>
|
||||
<input name="blackName" type="text" maxlength="40" placeholder="Noir" required />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
@@ -166,243 +144,77 @@
|
||||
name="eventName"
|
||||
type="text"
|
||||
maxlength="60"
|
||||
placeholder="Club local, tournoi, démonstration"
|
||||
placeholder="Club, tournoi, démonstration"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field span-2">
|
||||
<span>Notes de mise en place</span>
|
||||
<span>Notes</span>
|
||||
<textarea
|
||||
name="notes"
|
||||
rows="3"
|
||||
placeholder="Tirage au sort effectué, app lancée, cubes vérifiés..."
|
||||
placeholder="Tirage au sort effectué, 8 cubes vérifiés, variante prête..."
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<div class="setup-summary span-2" id="setupSummary"></div>
|
||||
<div id="setupSummary" class="setup-summary span-2"></div>
|
||||
|
||||
<div class="setup-actions span-2">
|
||||
<button class="button primary" type="submit">
|
||||
Lancer le match
|
||||
Ouvrir la page chrono
|
||||
</button>
|
||||
<button class="button ghost" type="button" id="loadDemoButton">
|
||||
<button class="button secondary" id="loadDemoButton" type="button">
|
||||
Charger une démo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel live-panel hidden" id="livePanel">
|
||||
<aside class="panel side-panel">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Direction de match</p>
|
||||
<h2 id="matchTitle">Rencontre en direct</h2>
|
||||
<p class="eyebrow">Match en mémoire</p>
|
||||
<h2>Reprise rapide</h2>
|
||||
</div>
|
||||
<div class="status-badge" id="phaseBadge">Prêt</div>
|
||||
</div>
|
||||
|
||||
<div class="live-grid">
|
||||
<article class="panel inset score-panel">
|
||||
<div class="score-head">
|
||||
<div>
|
||||
<p class="micro-label" id="blockLabel">Block 1</p>
|
||||
<h3 id="modeLabel">ChessCubing Twice</h3>
|
||||
<p class="section-copy" id="blockMeta">
|
||||
Les Blancs commencent le block 1.
|
||||
</p>
|
||||
</div>
|
||||
<button class="button ghost small" id="resetMatchButton">
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
<div id="resumeCard" class="resume-card empty">
|
||||
<p>Aucun match en cours pour l'instant.</p>
|
||||
</div>
|
||||
|
||||
<div class="timer-grid">
|
||||
<div class="timer-card emphasized">
|
||||
<span>Chrono du block</span>
|
||||
<strong id="blockTimer">03:00</strong>
|
||||
<p id="blockStatusText">En attente du démarrage.</p>
|
||||
</div>
|
||||
<div class="timer-card">
|
||||
<span>Temps par coup</span>
|
||||
<strong id="moveTimer">00:20</strong>
|
||||
<p id="turnLabel">Trait : Blanc</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-grid">
|
||||
<section class="player-card white-seat" id="whiteCard">
|
||||
<div class="player-name-row">
|
||||
<span class="player-color">Blanc</span>
|
||||
<strong id="whiteNameDisplay">Blanc</strong>
|
||||
</div>
|
||||
<p id="whiteMoveCount">0 / 6 coups</p>
|
||||
<p id="whiteClockLabel" class="muted"></p>
|
||||
<p id="whiteCubeLabel" class="muted"></p>
|
||||
</section>
|
||||
|
||||
<section class="player-card black-seat" id="blackCard">
|
||||
<div class="player-name-row">
|
||||
<span class="player-color">Noir</span>
|
||||
<strong id="blackNameDisplay">Noir</strong>
|
||||
</div>
|
||||
<p id="blackMoveCount">0 / 6 coups</p>
|
||||
<p id="blackClockLabel" class="muted"></p>
|
||||
<p id="blackCubeLabel" class="muted"></p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="rules-stack">
|
||||
<article class="rule-card">
|
||||
<span class="micro-label">Page chrono</span>
|
||||
<strong>Gros boutons uniquement</strong>
|
||||
<p>
|
||||
Chaque joueur dispose d'une grande zone tactile pour signaler la
|
||||
fin de son coup, avec le haut de l'écran inversé sur téléphone.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="panel inset">
|
||||
<h3>Commandes d'arbitrage</h3>
|
||||
<div class="action-grid">
|
||||
<button class="button primary" id="startPauseButton">
|
||||
Démarrer le block
|
||||
</button>
|
||||
<button class="button secondary" id="confirmBlockButton">
|
||||
Clore le block
|
||||
</button>
|
||||
<button class="button secondary" id="moveActionButton">
|
||||
Coup compté
|
||||
</button>
|
||||
<button class="button secondary" id="reliefMoveButton">
|
||||
Coup hors quota
|
||||
</button>
|
||||
<button class="button secondary" id="timeoutMoveButton">
|
||||
Dépassement 20 s
|
||||
</button>
|
||||
<button class="button ghost" id="switchTurnButton">
|
||||
Corriger le trait
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="notice-card" id="contextNotice"></div>
|
||||
<div class="double-card" id="doubleCard"></div>
|
||||
|
||||
<div class="result-grid">
|
||||
<button class="button ghost" id="whiteWinButton">
|
||||
Blanc gagne
|
||||
</button>
|
||||
<button class="button ghost" id="blackWinButton">
|
||||
Noir gagne
|
||||
</button>
|
||||
<button class="button ghost danger" id="drawStopButton">
|
||||
Abandon / arrêt
|
||||
</button>
|
||||
</div>
|
||||
<article class="rule-card">
|
||||
<span class="micro-label">Page cube</span>
|
||||
<strong>Une page dédiée</strong>
|
||||
<p>
|
||||
Le cube désigné, le chrono commun et les arrêts Blanc / Noir
|
||||
sont isolés sur leur propre écran.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="panel inset">
|
||||
<h3>Phase cube</h3>
|
||||
<div class="cube-head">
|
||||
<div>
|
||||
<span class="micro-label">Cube désigné</span>
|
||||
<strong id="cubeNumber">-</strong>
|
||||
</div>
|
||||
<button class="button secondary" id="startCubeButton">
|
||||
Démarrer la phase cube
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="cube-clock">
|
||||
<strong id="cubeElapsed">00:00.0</strong>
|
||||
<p id="cubeStatusText">
|
||||
La phase cube se déclenche à la fin du block.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="capture-grid">
|
||||
<button class="button capture" id="captureWhiteCubeButton">
|
||||
Arrêt Blanc
|
||||
</button>
|
||||
<button class="button capture" id="captureBlackCubeButton">
|
||||
Arrêt Noir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="cube-results">
|
||||
<div>
|
||||
<span>Blanc</span>
|
||||
<strong id="whiteCubeResult">--</strong>
|
||||
<small id="whiteCubeCap"></small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Noir</span>
|
||||
<strong id="blackCubeResult">--</strong>
|
||||
<small id="blackCubeCap"></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-grid compact">
|
||||
<button class="button primary" id="applyCubeButton">
|
||||
Appliquer et préparer le block suivant
|
||||
</button>
|
||||
<button class="button ghost" id="redoCubeButton">
|
||||
Rejouer la phase cube
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel inset">
|
||||
<h3>Historique</h3>
|
||||
<ul class="history-list" id="historyList"></ul>
|
||||
</article>
|
||||
|
||||
<article class="panel inset" id="rulesPanel">
|
||||
<h3>Synthèse règlementaire</h3>
|
||||
<div class="rules-grid">
|
||||
<div class="rule-card">
|
||||
<span class="micro-label">Twice</span>
|
||||
<strong>Blocks et cube</strong>
|
||||
<p>
|
||||
Block de 180 s, 20 s max par coup, phase cube obligatoire
|
||||
entre chaque block, gagnant du cube au départ suivant.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rule-card">
|
||||
<span class="micro-label">Twice</span>
|
||||
<strong>Double coup V2</strong>
|
||||
<p>
|
||||
Accordé si le gagnant du cube n'a pas joué le dernier coup
|
||||
du block précédent. Premier coup gratuit sans échec,
|
||||
deuxième coup compté.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rule-card">
|
||||
<span class="micro-label">Time</span>
|
||||
<strong>Impact cube</strong>
|
||||
<p>
|
||||
Block impair : le temps cube est retiré de son propre
|
||||
chrono. Block pair : il est ajouté au chrono adverse, avec
|
||||
plafond de 120 s pris en compte.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rule-card">
|
||||
<span class="micro-label">Arbitrage</span>
|
||||
<strong>Vérifications clés</strong>
|
||||
<p>
|
||||
Huit cubes, caches numérotés, mélanges identiques,
|
||||
application lancée, variante choisie, tirage au sort fait,
|
||||
aucun coup pendant la phase cube.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<article class="rule-card">
|
||||
<span class="micro-label">Sources</span>
|
||||
<strong>Règlements intégrés</strong>
|
||||
<p>
|
||||
<a href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank"
|
||||
>Règlement ChessCubing Twice</a
|
||||
>
|
||||
<br />
|
||||
<a href="ChessCubing_Time_Reglement_Officiel_V1-1.pdf" target="_blank"
|
||||
>Règlement ChessCubing Time</a
|
||||
>
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p>
|
||||
Sources intégrées :
|
||||
<a href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank"
|
||||
>règlement ChessCubing Twice</a
|
||||
>
|
||||
et
|
||||
<a href="ChessCubing_Time_Reglement_Officiel_V1-1.pdf" target="_blank"
|
||||
>règlement ChessCubing Time</a
|
||||
>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module" src="app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user