656 lines
30 KiB
HTML
656 lines
30 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="fr" dir="ltr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Variation 03 — Dark Modern · Dock de contrôle</title>
|
|||
|
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
|||
|
|
<style>
|
|||
|
|
/* ══════════════════════════════════════════════════════════════════
|
|||
|
|
Variation 03: Dark Modern
|
|||
|
|
─────────────────────────────────────────────────────────────────
|
|||
|
|
Design language:
|
|||
|
|
• Dark slate background (no wood grain)
|
|||
|
|
• Frosted-glass panels with thin bright borders
|
|||
|
|
• Clean sans-serif typography throughout
|
|||
|
|
• Brighter, more saturated accent colours
|
|||
|
|
|
|||
|
|
Layout differences from baseline:
|
|||
|
|
1. Compact horizontal player strip above the board
|
|||
|
|
(turn indicator + bredouille inline, no separate status row)
|
|||
|
|
2. .scoring-panel is absolutely overlaid on the board area
|
|||
|
|
(top-left, floats over the board corner — NEVER pushes board)
|
|||
|
|
3. Dice + game-status + board-actions live in a bottom dock bar
|
|||
|
|
below the board (no die in the board bar)
|
|||
|
|
4. Responsive: dock goes vertical on narrow viewports
|
|||
|
|
══════════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
/* ── Dark mode token overrides ───────────────────────────────────── */
|
|||
|
|
:root {
|
|||
|
|
--board-felt: #0d1f10;
|
|||
|
|
--board-rail: #07090a;
|
|||
|
|
--checker-ring: #6ecf6e;
|
|||
|
|
|
|||
|
|
/* Dark glass panels */
|
|||
|
|
--ui-parchment: #1c1c28;
|
|||
|
|
--ui-parchment-dark: #14141e;
|
|||
|
|
--ui-ink: #e0e0f0;
|
|||
|
|
--ui-gold: #e4b830;
|
|||
|
|
--ui-gold-dark: #a07a10;
|
|||
|
|
--ui-green-accent: #40c840;
|
|||
|
|
--ui-red-accent: #e04060;
|
|||
|
|
|
|||
|
|
--surface: rgba(255,255,255,0.055);
|
|||
|
|
--surface-border: rgba(255,255,255,0.10);
|
|||
|
|
--surface-border-hi: rgba(255,255,255,0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Base: dark background, no wood grain ────────────────────────── */
|
|||
|
|
body {
|
|||
|
|
background: #0d0d14;
|
|||
|
|
background-image: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Suppress baseline elements ──────────────────────────────────── */
|
|||
|
|
.score-area { display: none !important; }
|
|||
|
|
.board-bar { width: 5px; overflow: hidden; }
|
|||
|
|
.bar-die-slot { display: none; }
|
|||
|
|
.zone-labels-row { display: none; }
|
|||
|
|
.game-bottom-strip { display: none; }
|
|||
|
|
|
|||
|
|
/* ── Game overlay: dark ───────────────────────────────────────────── */
|
|||
|
|
.game-overlay {
|
|||
|
|
background: #0d0d14;
|
|||
|
|
background-image: none;
|
|||
|
|
}
|
|||
|
|
.game-container { gap: 0.5rem; }
|
|||
|
|
|
|||
|
|
/* ── Sidebar: darker ─────────────────────────────────────────────── */
|
|||
|
|
.game-sidebar { background: #0a0a0f; border-right-color: rgba(255,255,255,0.08); }
|
|||
|
|
.game-sidebar-brand { color: var(--ui-gold); }
|
|||
|
|
.game-sidebar-link { color: rgba(224,224,240,0.75); }
|
|||
|
|
.lang-switcher button { color: rgba(224,224,240,0.6); border-color: rgba(255,255,255,0.15); }
|
|||
|
|
.lang-switcher button.lang-active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #e0e0f0; }
|
|||
|
|
.game-hamburger { background: #14141e; border-color: rgba(255,255,255,0.12); }
|
|||
|
|
.site-nav-version { color: rgba(255,255,255,0.2); }
|
|||
|
|
|
|||
|
|
/* ── Board: darker rail, same felt ───────────────────────────────── */
|
|||
|
|
.board { border-color: #07090a; }
|
|||
|
|
.board-center-bar { background: #07090a; }
|
|||
|
|
|
|||
|
|
/* ── Checkers: keep their warm gradient, just tweak the ring ─────── */
|
|||
|
|
/* (Already fine, no override needed) */
|
|||
|
|
|
|||
|
|
/* ── Die face: higher contrast on dark background ─────────────────── */
|
|||
|
|
.die-face rect { fill: #f5f0e0; stroke: #181008; }
|
|||
|
|
.die-face circle { fill: #181008; }
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════════════
|
|||
|
|
PLAYER STRIP — compact one-row header
|
|||
|
|
════════════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
.v03-strip {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
background: var(--surface);
|
|||
|
|
border: 1px solid var(--surface-border);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 0.5rem 0.85rem;
|
|||
|
|
gap: 0.6rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Player half */
|
|||
|
|
.v03-player {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
.v03-player-right { flex-direction: row-reverse; }
|
|||
|
|
|
|||
|
|
/* Avatar circle */
|
|||
|
|
.v03-avatar {
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
.v03-avatar-me { background: rgba(64,200,64,0.18); border: 1.5px solid #40c840; color: #40c840; }
|
|||
|
|
.v03-avatar-opp { background: rgba(224,64,96,0.18); border: 1.5px solid #e04060; color: #e04060; }
|
|||
|
|
|
|||
|
|
/* Name + tag */
|
|||
|
|
.v03-name {
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #d8d8ec;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
max-width: 110px;
|
|||
|
|
}
|
|||
|
|
.v03-you-tag {
|
|||
|
|
font-size: 0.6rem;
|
|||
|
|
color: rgba(216,216,236,0.4);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.v03-name-block { display: flex; flex-direction: column; min-width: 0; }
|
|||
|
|
.v03-player-right .v03-name-block { align-items: flex-end; }
|
|||
|
|
|
|||
|
|
/* Dot peg track */
|
|||
|
|
.v03-dots {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 2.5px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.v03-dot {
|
|||
|
|
width: 9px;
|
|||
|
|
height: 9px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255,255,255,0.08);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.14);
|
|||
|
|
transition: background 0.25s, border-color 0.25s;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.v03-dot.on-me { background: #40c840; border-color: #30a830; box-shadow: 0 0 4px rgba(64,200,64,0.5); }
|
|||
|
|
.v03-dot.on-opp { background: #e04060; border-color: #b02840; box-shadow: 0 0 4px rgba(224,64,96,0.5); }
|
|||
|
|
|
|||
|
|
/* Score */
|
|||
|
|
.v03-score {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
font-variant-numeric: tabular-nums;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.v03-score-num {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 1.55rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #e0e0f0;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.v03-score-max {
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.58rem;
|
|||
|
|
color: rgba(224,224,240,0.35);
|
|||
|
|
display: block;
|
|||
|
|
margin-top: -3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Bredouille badge */
|
|||
|
|
.v03-bred {
|
|||
|
|
font-size: 0.72rem;
|
|||
|
|
color: var(--ui-gold);
|
|||
|
|
opacity: 0.65;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Center divider: VS + turn */
|
|||
|
|
.v03-strip-center {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.15rem;
|
|||
|
|
padding: 0 0.85rem;
|
|||
|
|
border-left: 1px solid var(--surface-border);
|
|||
|
|
border-right: 1px solid var(--surface-border);
|
|||
|
|
}
|
|||
|
|
.v03-vs {
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.55rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.16em;
|
|||
|
|
color: rgba(224,224,240,0.28);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
.v03-game-info {
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.65rem;
|
|||
|
|
color: rgba(224,224,240,0.25);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.v03-turn-pill {
|
|||
|
|
font-family: var(--font-ui);
|
|||
|
|
font-size: 0.62rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #40c840;
|
|||
|
|
background: rgba(64,200,64,0.12);
|
|||
|
|
border: 1px solid rgba(64,200,64,0.28);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 0.1em 0.6em;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════════════
|
|||
|
|
BOARD WRAP — relative, holds floating scoring panel
|
|||
|
|
════════════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
.v03-board-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Floating scoring panel: top-left corner of the board wrap ─────
|
|||
|
|
It overlaps the board (absolute) so it NEVER displaces the board.
|
|||
|
|
The panel grows downward, overlapping the board corner, which is
|
|||
|
|
visually acceptable (it is transparent for events on that area
|
|||
|
|
while a scoring animation plays). */
|
|||
|
|
.v03-scoring-float {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 20;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.v03-scoring-float .scoring-panel-wrapper {
|
|||
|
|
pointer-events: auto;
|
|||
|
|
animation: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dark-mode scoring panel */
|
|||
|
|
.v03-scoring-float .scoring-panel {
|
|||
|
|
background: rgba(14,14,22,0.92);
|
|||
|
|
border: 1px solid rgba(64,200,64,0.3);
|
|||
|
|
border-left: 3px solid #40c840;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
|||
|
|
color: #d8d8ec;
|
|||
|
|
width: 280px;
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
}
|
|||
|
|
.v03-scoring-float .scoring-total { color: #40c840; }
|
|||
|
|
.v03-scoring-float .jan-label { color: #c8c8e0; }
|
|||
|
|
.v03-scoring-float .jan-tag { color: rgba(200,200,224,0.55); background: rgba(255,255,255,0.06); }
|
|||
|
|
.v03-scoring-float .jan-pts { color: #40c840; }
|
|||
|
|
.v03-scoring-float .scoring-collapse-btn { color: rgba(255,255,255,0.3); }
|
|||
|
|
.v03-scoring-float .scoring-collapse-btn:hover { color: rgba(255,255,255,0.65); }
|
|||
|
|
.v03-scoring-float .scoring-expand-btn {
|
|||
|
|
background: rgba(14,14,22,0.9);
|
|||
|
|
border-color: rgba(64,200,64,0.35);
|
|||
|
|
color: #40c840;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════════════
|
|||
|
|
BOTTOM DOCK — dice · status · actions
|
|||
|
|
════════════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
.v03-dock {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
background: var(--surface);
|
|||
|
|
border: 1px solid var(--surface-border);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 0.6rem 1rem;
|
|||
|
|
gap: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dice section */
|
|||
|
|
.v03-dock-dice {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding-right: 1rem;
|
|||
|
|
border-right: 1px solid var(--surface-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Status + actions section */
|
|||
|
|
.v03-dock-status {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.3rem;
|
|||
|
|
padding: 0 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v03-dock .game-status {
|
|||
|
|
color: #d8d8ec;
|
|||
|
|
text-shadow: none;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
padding: 0;
|
|||
|
|
width: auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.v03-dock .board-actions {
|
|||
|
|
min-height: 0;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dark mode buttons */
|
|||
|
|
.v03-dock .btn-primary { background: rgba(64,200,64,0.2); border: 1px solid rgba(64,200,64,0.4); color: #7de87d; }
|
|||
|
|
.v03-dock .btn-primary:hover { background: rgba(64,200,64,0.3); }
|
|||
|
|
.v03-dock .btn-secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(224,224,240,0.7); }
|
|||
|
|
.v03-dock .btn-secondary:hover { background: rgba(255,255,255,0.1); }
|
|||
|
|
|
|||
|
|
/* Free-mode toggle section */
|
|||
|
|
.v03-dock-extra {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding-left: 1rem;
|
|||
|
|
border-left: 1px solid var(--surface-border);
|
|||
|
|
}
|
|||
|
|
.v03-dock .free-mode-toggle {
|
|||
|
|
color: rgba(224,224,240,0.4);
|
|||
|
|
font-size: 0.72rem;
|
|||
|
|
}
|
|||
|
|
.v03-dock .free-mode-help { border-color: rgba(224,224,240,0.2); color: rgba(224,224,240,0.3); }
|
|||
|
|
|
|||
|
|
/* ════════════════════════════════════════════════════════════════════
|
|||
|
|
RESPONSIVE
|
|||
|
|
════════════════════════════════════════════════════════════════════ */
|
|||
|
|
|
|||
|
|
/* Below 900px: dock switches to a 2-row layout */
|
|||
|
|
@media (max-width: 900px) {
|
|||
|
|
.v03-dock {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.v03-dock-dice {
|
|||
|
|
border-right: none;
|
|||
|
|
border-bottom: 1px solid var(--surface-border);
|
|||
|
|
padding-right: 0;
|
|||
|
|
padding-bottom: 0.5rem;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.v03-dock-extra {
|
|||
|
|
border-left: none;
|
|||
|
|
border-top: 1px solid var(--surface-border);
|
|||
|
|
padding-left: 0;
|
|||
|
|
padding-top: 0.5rem;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Narrow strip: hide dots on very small screens */
|
|||
|
|
@media (max-width: 680px) {
|
|||
|
|
.v03-dots { display: none; }
|
|||
|
|
.v03-strip-center { padding: 0 0.4rem; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- ── Left navigation sidebar (dark themed) ─────────────────────────── -->
|
|||
|
|
<button class="game-hamburger game-hamburger-open" aria-label="Menu">
|
|||
|
|
<span class="hb-bar hb-top"></span>
|
|||
|
|
<span class="hb-bar hb-mid"></span>
|
|||
|
|
<span class="hb-bar hb-bot"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="game-sidebar game-sidebar-open">
|
|||
|
|
<div class="game-sidebar-header">
|
|||
|
|
<span class="game-sidebar-brand">Trictrac</span>
|
|||
|
|
<div class="lang-switcher">
|
|||
|
|
<button>EN</button>
|
|||
|
|
<button class="lang-active">FR</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="game-sidebar-section">
|
|||
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M304 70.1C313.1 61.9 326.9 61.9 336 70.1L568 278.1C577.9 286.9 578.7 302.1 569.8 312C560.9 321.9 545.8 322.7 535.9 313.8L527.9 306.6L527.9 511.9C527.9 547.2 499.2 575.9 463.9 575.9L175.9 575.9C140.6 575.9 111.9 547.2 111.9 511.9L111.9 306.6L103.9 313.8C94 322.6 78.9 321.8 70 312C61.1 302.2 62 287 71.8 278.1L304 70.1zM320 120.2L160 263.7L160 512C160 520.8 167.2 528 176 528L224 528L224 424C224 384.2 256.2 352 296 352L344 352C383.8 352 416 384.2 416 424L416 528L464 528C472.8 528 480 520.8 480 512L480 263.7L320 120.3zM272 528L368 528L368 424C368 410.7 357.3 400 344 400L296 400C282.7 400 272 410.7 272 424L272 528z"></path></svg>
|
|||
|
|
<a href="#" class="game-sidebar-link">Nouvelle partie</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="game-sidebar-section">
|
|||
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M416 160L480 160C497.7 160 512 174.3 512 192L512 448C512 465.7 497.7 480 480 480L416 480C398.3 480 384 494.3 384 512C384 529.7 398.3 544 416 544L480 544C533 544 576 501 576 448L576 192C576 139 533 96 480 96L416 96C398.3 96 384 110.3 384 128C384 145.7 398.3 160 416 160zM406.6 342.6C419.1 330.1 419.1 309.8 406.6 297.3L278.6 169.3C266.1 156.8 245.8 156.8 233.3 169.3C220.8 181.8 220.8 202.1 233.3 214.6L306.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L306.7 352L233.3 425.4C220.8 437.9 220.8 458.2 233.3 470.7C245.8 483.2 266.1 483.2 278.6 470.7L406.6 342.7z"></path></svg>
|
|||
|
|
<a href="#" class="game-sidebar-link">Se connecter</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="sidebar-footer">
|
|||
|
|
<div><span class="site-nav-version">v0.2.15</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── Portal behind the overlay ─────────────────────────────────────── -->
|
|||
|
|
<main>
|
|||
|
|
<div style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh" class="portal-main">
|
|||
|
|
<div class="login-card">
|
|||
|
|
<div class="login-card-header"><div class="login-board-stripe"></div></div>
|
|||
|
|
<div class="login-card-body">
|
|||
|
|
<h1 class="login-title">Trictrac</h1>
|
|||
|
|
<p class="login-subtitle"><em>Une interprétation numérique</em></p>
|
|||
|
|
<div class="login-ornament">✦</div>
|
|||
|
|
<div class="login-actions">
|
|||
|
|
<button class="login-btn login-btn-secondary">Jouer contre le bot</button>
|
|||
|
|
<button class="login-btn login-btn-primary">Inviter un adversaire</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- ══════════════════════════════════════════════════════════════════════
|
|||
|
|
GAME OVERLAY
|
|||
|
|
══════════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="game-overlay">
|
|||
|
|
<div class="game-container">
|
|||
|
|
|
|||
|
|
<!-- ══════════════════════════════════════════════════════════════════
|
|||
|
|
PLAYER STRIP — compact one-row header
|
|||
|
|
══════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="v03-strip">
|
|||
|
|
|
|||
|
|
<!-- Player 1 (me) ───────────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-player">
|
|||
|
|
<div class="v03-avatar v03-avatar-me">A</div>
|
|||
|
|
<div class="v03-name-block">
|
|||
|
|
<span class="v03-name">Anonyme</span>
|
|||
|
|
<span class="v03-you-tag">(vous)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="v03-dots">
|
|||
|
|
<div class="v03-dot on-me"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="v03-bred" title="Bredouille armée">⚜</span>
|
|||
|
|
<div class="v03-score">
|
|||
|
|
<span class="v03-score-num">6</span>
|
|||
|
|
<span class="v03-score-max">/12</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Center ──────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-strip-center">
|
|||
|
|
<span class="v03-vs">VS</span>
|
|||
|
|
<span class="v03-game-info">jeu en 12 trous</span>
|
|||
|
|
<span class="v03-turn-pill">votre tour</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Player 2 (opponent) ─────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-player v03-player-right">
|
|||
|
|
<div class="v03-avatar v03-avatar-opp">B</div>
|
|||
|
|
<div class="v03-name-block">
|
|||
|
|
<span class="v03-name">Bot</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="v03-dots">
|
|||
|
|
<div class="v03-dot on-opp"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div><div class="v03-dot"></div>
|
|||
|
|
<div class="v03-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="v03-score">
|
|||
|
|
<span class="v03-score-num">2</span>
|
|||
|
|
<span class="v03-score-max">/12</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div><!-- /.v03-strip -->
|
|||
|
|
|
|||
|
|
<!-- ══════════════════════════════════════════════════════════════════
|
|||
|
|
BOARD WRAP — holds the board + floating scoring panel
|
|||
|
|
══════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="v03-board-wrap">
|
|||
|
|
|
|||
|
|
<!-- Scoring panel: absolutely positioned top-left corner of the board.
|
|||
|
|
Growing tall only overlaps the board, never pushes it down. -->
|
|||
|
|
<div class="v03-scoring-float">
|
|||
|
|
<div class="scoring-panel-wrapper">
|
|||
|
|
<button class="scoring-expand-btn" title="Show scoring">+</button>
|
|||
|
|
<div class="scoring-panel">
|
|||
|
|
<div class="scoring-panel-head">
|
|||
|
|
<div class="scoring-total">+4 pts</div>
|
|||
|
|
<button class="scoring-collapse-btn">−</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="scoring-jan-row">
|
|||
|
|
<span class="jan-label">Battage à vrai (petit jan)</span>
|
|||
|
|
<span class="jan-tag">simple</span>
|
|||
|
|
<span class="jan-tag">×1</span>
|
|||
|
|
<span class="jan-pts">+4</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Board ────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="board-wrapper">
|
|||
|
|
<div class="board">
|
|||
|
|
|
|||
|
|
<!-- top row ──────────────────────────────────────────────── -->
|
|||
|
|
<div class="board-row top-row">
|
|||
|
|
<div class="board-quarter">
|
|||
|
|
<div class="field zone-opponent corner" id="field-13"><span class="field-num">13</span></div>
|
|||
|
|
<div class="field zone-opponent" id="field-14"><span class="field-num">14</span></div>
|
|||
|
|
<div class="field zone-opponent" id="field-15">
|
|||
|
|
<span class="field-num">15</span>
|
|||
|
|
<div class="checker-stack">
|
|||
|
|
<div class="checker black"></div><div class="checker black"></div><div class="checker black"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field zone-opponent" id="field-16"><span class="field-num">16</span></div>
|
|||
|
|
<div class="field zone-opponent" id="field-17"><span class="field-num">17</span></div>
|
|||
|
|
<div class="field zone-opponent" id="field-18"><span class="field-num">18</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="board-bar"></div>
|
|||
|
|
<div class="board-quarter">
|
|||
|
|
<div class="field zone-retour" id="field-19">
|
|||
|
|
<span class="field-num">19</span>
|
|||
|
|
<div class="hit-ripple hit-ripple-top"></div>
|
|||
|
|
<div class="checker-stack"><div class="checker black"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field zone-retour" id="field-20"><span class="field-num">20</span></div>
|
|||
|
|
<div class="field zone-retour" id="field-21"><span class="field-num">21</span></div>
|
|||
|
|
<div class="field zone-retour" id="field-22"><span class="field-num">22</span></div>
|
|||
|
|
<div class="field zone-retour point-no-bredouille" id="field-23"><span class="field-num">23</span></div>
|
|||
|
|
<div class="field zone-retour point-no-bredouille" id="field-24">
|
|||
|
|
<span class="field-num">24</span>
|
|||
|
|
<div class="checker-stack">
|
|||
|
|
<div class="checker black"></div><div class="checker black"></div>
|
|||
|
|
<div class="checker black"></div><div class="checker black">11</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="board-center-bar"></div>
|
|||
|
|
|
|||
|
|
<!-- bottom row ───────────────────────────────────────────── -->
|
|||
|
|
<div class="board-row bot-row">
|
|||
|
|
<div class="board-quarter">
|
|||
|
|
<div class="field zone-grand corner corner-available clickable dest" id="field-12"
|
|||
|
|
title="Coin de repos — must enter and leave with 2 checkers">
|
|||
|
|
<span class="field-num">12</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="field zone-grand clickable dest" id="field-11"><span class="field-num">11</span></div>
|
|||
|
|
<div class="field zone-grand" id="field-10"><span class="field-num">10</span></div>
|
|||
|
|
<div class="field zone-grand" id="field-9">
|
|||
|
|
<span class="field-num">9</span>
|
|||
|
|
<div class="checker-stack"><div class="checker white"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field zone-grand" id="field-8">
|
|||
|
|
<span class="field-num">8</span>
|
|||
|
|
<div class="checker-stack"><div class="checker white"></div><div class="checker white"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field zone-grand selected clickable" id="field-7">
|
|||
|
|
<span class="field-num">7</span>
|
|||
|
|
<div class="checker-stack"><div class="checker white"></div><div class="checker white"></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="board-bar"></div>
|
|||
|
|
<div class="board-quarter">
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-6"><span class="field-num">6</span></div>
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-5"><span class="field-num">5</span></div>
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-4"><span class="field-num">4</span></div>
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-3"><span class="field-num">3</span></div>
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-2"><span class="field-num">2</span></div>
|
|||
|
|
<div class="field zone-petit point-no-bredouille" id="field-1">
|
|||
|
|
<span class="field-num">1</span>
|
|||
|
|
<div class="checker-stack">
|
|||
|
|
<div class="checker white">10</div><div class="checker white"></div>
|
|||
|
|
<div class="checker white"></div><div class="checker white"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<svg style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible" width="761" height="388"></svg>
|
|||
|
|
|
|||
|
|
</div><!-- /.board -->
|
|||
|
|
</div><!-- /.board-wrapper -->
|
|||
|
|
|
|||
|
|
</div><!-- /.v03-board-wrap -->
|
|||
|
|
|
|||
|
|
<!-- ══════════════════════════════════════════════════════════════════
|
|||
|
|
BOTTOM DOCK — dice | status + actions | free-mode
|
|||
|
|
══════════════════════════════════════════════════════════════════ -->
|
|||
|
|
<div class="v03-dock">
|
|||
|
|
|
|||
|
|
<!-- Dice ─────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-dock-dice">
|
|||
|
|
<!-- Die 1 — 6 (active) -->
|
|||
|
|
<svg class="die-face" width="52" height="52" viewBox="0 0 48 48">
|
|||
|
|
<rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"></rect>
|
|||
|
|
<circle cx="13" cy="13" r="4.5"></circle>
|
|||
|
|
<circle cx="35" cy="13" r="4.5"></circle>
|
|||
|
|
<circle cx="13" cy="24" r="4.5"></circle>
|
|||
|
|
<circle cx="35" cy="24" r="4.5"></circle>
|
|||
|
|
<circle cx="13" cy="35" r="4.5"></circle>
|
|||
|
|
<circle cx="35" cy="35" r="4.5"></circle>
|
|||
|
|
</svg>
|
|||
|
|
<!-- Die 2 — 4 (used) -->
|
|||
|
|
<svg class="die-face die-used" width="52" height="52" viewBox="0 0 48 48">
|
|||
|
|
<rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7"></rect>
|
|||
|
|
<circle cx="13" cy="13" r="4.5"></circle>
|
|||
|
|
<circle cx="35" cy="13" r="4.5"></circle>
|
|||
|
|
<circle cx="13" cy="35" r="4.5"></circle>
|
|||
|
|
<circle cx="35" cy="35" r="4.5"></circle>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Status + actions ─────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-dock-status">
|
|||
|
|
<div class="game-status">Déplacez une dame (1 sur 2)</div>
|
|||
|
|
<div class="board-actions">
|
|||
|
|
<button class="btn btn-secondary">Passer</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Free-mode toggle ─────────────────────────────────────────── -->
|
|||
|
|
<div class="v03-dock-extra">
|
|||
|
|
<label class="free-mode-toggle">
|
|||
|
|
<input type="checkbox">Mode libre
|
|||
|
|
<span class="free-mode-help" title="Sélectionnez n'importe quelle dame et tentez de trouver un coup valide vous-même.">?</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div><!-- /.v03-dock -->
|
|||
|
|
|
|||
|
|
</div><!-- /.game-container -->
|
|||
|
|
</div><!-- /.game-overlay -->
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|