411 lines
15 KiB
HTML
411 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<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."
|
|
/>
|
|
<title>ChessCubing Arena</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="ambient ambient-left"></div>
|
|
<div class="ambient ambient-right"></div>
|
|
<div class="layout">
|
|
<header class="hero">
|
|
<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>.
|
|
</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>Twice + Time</span>
|
|
<span>Arbitrage en direct</span>
|
|
<span>Fonctionne hors build</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>
|
|
</div>
|
|
<div class="preview-banner">
|
|
<span class="mini-chip">Block 1</span>
|
|
<strong id="heroModeHint">Twice ou Time, selon la configuration</strong>
|
|
<p>
|
|
L'app sert de chef d'orchestre pendant la partie sans imposer un
|
|
échiquier numérique.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<section class="panel" id="setupPanel">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Préparer la rencontre</p>
|
|
<h2>Configuration de match</h2>
|
|
</div>
|
|
<p class="section-copy">
|
|
Lancement rapide pour club, démo ou tournoi. Les choix pilotent le
|
|
tableau d'arbitrage en direct.
|
|
</p>
|
|
</div>
|
|
|
|
<form id="setupForm" class="setup-form">
|
|
<label class="field span-2">
|
|
<span>Nom de la rencontre</span>
|
|
<input
|
|
name="matchLabel"
|
|
type="text"
|
|
maxlength="80"
|
|
placeholder="Open ChessCubing de Paris"
|
|
/>
|
|
</label>
|
|
|
|
<fieldset class="field span-2">
|
|
<legend>Mode officiel</legend>
|
|
<div class="option-grid mode-grid">
|
|
<label class="option-card">
|
|
<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.
|
|
</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 - / +.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="field span-2">
|
|
<legend>Cadence du block</legend>
|
|
<div class="option-grid preset-grid">
|
|
<label class="option-card">
|
|
<input type="radio" name="preset" value="fast" checked />
|
|
<strong>FAST</strong>
|
|
<span>6 coups par joueur et par block</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>
|
|
</label>
|
|
<label class="option-card">
|
|
<input type="radio" name="preset" value="masters" />
|
|
<strong>MASTERS</strong>
|
|
<span>10 coups par joueur et par block</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<label class="field">
|
|
<span>Joueur blanc</span>
|
|
<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
|
|
/>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Arbitre</span>
|
|
<input
|
|
name="arbiterName"
|
|
type="text"
|
|
maxlength="40"
|
|
placeholder="Arbitre principal"
|
|
/>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Club / événement</span>
|
|
<input
|
|
name="eventName"
|
|
type="text"
|
|
maxlength="60"
|
|
placeholder="Club local, tournoi, démonstration"
|
|
/>
|
|
</label>
|
|
|
|
<label class="field span-2">
|
|
<span>Notes de mise en place</span>
|
|
<textarea
|
|
name="notes"
|
|
rows="3"
|
|
placeholder="Tirage au sort effectué, app lancée, cubes vérifiés..."
|
|
></textarea>
|
|
</label>
|
|
|
|
<div class="setup-summary span-2" id="setupSummary"></div>
|
|
|
|
<div class="setup-actions span-2">
|
|
<button class="button primary" type="submit">
|
|
Lancer le match
|
|
</button>
|
|
<button class="button ghost" type="button" id="loadDemoButton">
|
|
Charger une démo
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel live-panel hidden" id="livePanel">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Direction de match</p>
|
|
<h2 id="matchTitle">Rencontre en direct</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 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>
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
</body>
|
|
</html>
|