doc: design variations
This commit is contained in:
parent
d4a2ea1c53
commit
9db942354c
12 changed files with 6018 additions and 31 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
|
|
@ -305,6 +305,62 @@ a:hover { text-decoration: underline; }
|
||||||
.portal-error { color: var(--ui-red-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
.portal-error { color: var(--ui-red-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
||||||
.portal-success { color: var(--ui-green-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
.portal-success { color: var(--ui-green-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
||||||
|
|
||||||
|
.flash-banner {
|
||||||
|
position: fixed;
|
||||||
|
top: 1.25rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: var(--ui-green-accent);
|
||||||
|
color: #f5edd8;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
max-width: 90vw;
|
||||||
|
animation: flash-in 0.2s ease;
|
||||||
|
}
|
||||||
|
@keyframes flash-in {
|
||||||
|
from { opacity: 0; transform: translateX(-50%) translateY(-0.5rem); }
|
||||||
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||||
|
}
|
||||||
|
.flash-dismiss {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.75;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.flash-dismiss:hover { opacity: 1; }
|
||||||
|
|
||||||
|
.portal-danger-zone {
|
||||||
|
border: 1px solid rgba(122, 30, 42, 0.4);
|
||||||
|
background: rgba(122, 30, 42, 0.04);
|
||||||
|
}
|
||||||
|
.portal-danger-zone h2 {
|
||||||
|
color: var(--ui-red-accent);
|
||||||
|
}
|
||||||
|
.portal-danger-btn {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
background: var(--ui-red-accent);
|
||||||
|
color: #f5edd8;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
.portal-danger-btn:hover { opacity: 0.85; }
|
||||||
|
.portal-danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||||
|
|
||||||
.portal-link {
|
.portal-link {
|
||||||
color: var(--ui-gold);
|
color: var(--ui-gold);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -1799,6 +1855,58 @@ a:hover { text-decoration: underline; }
|
||||||
min-height: 2rem;
|
min-height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Free-play mode ─────────────────────────────────────────────────────── */
|
||||||
|
.free-mode-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #887766;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
}
|
||||||
|
.free-mode-toggle input[type="checkbox"] {
|
||||||
|
accent-color: var(--ui-gold);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 0.85rem;
|
||||||
|
height: 0.85rem;
|
||||||
|
}
|
||||||
|
.free-mode-help {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #a89880;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-style: normal;
|
||||||
|
color: #a89880;
|
||||||
|
cursor: help;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.free-mode-error {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
background: rgba(180, 60, 30, 0.12);
|
||||||
|
border: 1px solid rgba(180, 60, 30, 0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.free-mode-error-msg {
|
||||||
|
flex: 1;
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #8b2000;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Pre-game ceremony overlay ──────────────────────────────────────────── */
|
/* ── Pre-game ceremony overlay ──────────────────────────────────────────── */
|
||||||
.ceremony-overlay {
|
.ceremony-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -2045,6 +2153,7 @@ a:hover { text-decoration: underline; }
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
transition: opacity 0.15s;
|
transition: opacity 0.15s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.game-sidebar-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
|
.game-sidebar-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
|
||||||
|
|
||||||
|
|
@ -2076,3 +2185,121 @@ a:hover { text-decoration: underline; }
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Push the version wrapper to the bottom of the sidebar flex column */
|
||||||
|
.sidebar-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
border-top: 1px solid rgba(200,164,72,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-infolinks {
|
||||||
|
margin: 2em 0 1em;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: rgba(200,164,72,0.4);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-infolinks > a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav-version {
|
||||||
|
margin: 2em 0 1em;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: rgba(200,164,72,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Content pages (markdown-rendered) ─────────────────────────────────────── */
|
||||||
|
|
||||||
|
.content-page h1 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.content-page h2 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
margin: 1.75rem 0 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(200,164,72,0.25);
|
||||||
|
padding-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.content-page h3 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
margin: 1.25rem 0 0.4rem;
|
||||||
|
}
|
||||||
|
.content-page p {
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 0.9rem;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
}
|
||||||
|
.content-page ul,
|
||||||
|
.content-page ol {
|
||||||
|
margin: 0.5rem 0 1rem 1.5rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
}
|
||||||
|
.content-page li {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.content-page a {
|
||||||
|
color: var(--ui-gold-dark);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.content-page a:hover {
|
||||||
|
color: var(--ui-ink);
|
||||||
|
}
|
||||||
|
.content-page code {
|
||||||
|
font-family: monospace;
|
||||||
|
background: rgba(0,0,0,0.07);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0.1em 0.35em;
|
||||||
|
font-size: 0.88em;
|
||||||
|
}
|
||||||
|
.content-page pre {
|
||||||
|
background: rgba(0,0,0,0.07);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.content-page pre code {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.content-page blockquote {
|
||||||
|
border-left: 3px solid rgba(200,164,72,0.5);
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
color: #665544;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.content-page table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.content-page th,
|
||||||
|
.content-page td {
|
||||||
|
border: 1px solid rgba(200,164,72,0.3);
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.content-page th {
|
||||||
|
background: rgba(200,164,72,0.1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
418
doc/design/variations/01-dice-sidebar.html
Normal file
418
doc/design/variations/01-dice-sidebar.html
Normal file
|
|
@ -0,0 +1,418 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Variation 01 — Dés en sidebar droite</title>
|
||||||
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════════════════════
|
||||||
|
Variation 01: move dice + status bar to a right sidebar
|
||||||
|
──────────────────────────────────────────────────────────────────
|
||||||
|
Changes from baseline:
|
||||||
|
• .board-bar → 5px thin wood rail (no dice)
|
||||||
|
• new .game-board-with-sidebar flex wrapper
|
||||||
|
• new .game-right-sidebar with dice panel + status panel
|
||||||
|
• .free-mode-toggle moved under the dice
|
||||||
|
• .game-bottom-strip removed from its original position
|
||||||
|
• removed both zone-labels-row divs
|
||||||
|
══════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* 1 ── Collapse the in-board bar to a 5 px wood rail ────────────── */
|
||||||
|
.board-bar {
|
||||||
|
width: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.bar-die-slot { display: none; }
|
||||||
|
|
||||||
|
/* 2 ── Flex wrapper: board-wrapper left, sidebar right ──────────── */
|
||||||
|
.game-board-with-sidebar {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3 ── Right sidebar ────────────────────────────────────────────── */
|
||||||
|
.game-right-sidebar {
|
||||||
|
width: 152px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
/* stretch to the full height of the board-wrapper */
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dice panel ── bord rail card ── */
|
||||||
|
.sidebar-dice-panel {
|
||||||
|
background: var(--board-rail);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.6rem 0.75rem 0.75rem;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-dice-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status panel ── fills remaining sidebar height below the dice ── */
|
||||||
|
.sidebar-status-panel {
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.65rem 0.75rem 0.75rem;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-status-panel .game-status {
|
||||||
|
color: var(--ui-ink);
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-status-panel .game-sub-prompt {
|
||||||
|
color: #887766;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.67rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-status-panel .board-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-dice-panel .free-mode-toggle {
|
||||||
|
color: var(--ui-parchment);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Left-side navigation sidebar (unchanged) ──────────────────────── -->
|
||||||
|
<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 page behind the overlay (unchanged) ────────────────────── -->
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<!-- ── Score area (unchanged) ─────────────────────────────────────── -->
|
||||||
|
<div class="score-area">
|
||||||
|
<div class="merged-score-panel">
|
||||||
|
<div class="score-row score-row-me">
|
||||||
|
<div class="score-row-name">
|
||||||
|
<span class="player-name">Anonyme</span>
|
||||||
|
<span class="you-tag"> (vous)</span>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-wrap">
|
||||||
|
<div class="pts-ghost-bar-track">
|
||||||
|
<div style="width:50%" class="pts-ghost-bar-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-row">
|
||||||
|
<span class="pts-counter">6</span>
|
||||||
|
<span class="pts-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="peg-track">
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div><div class="peg-hole"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-row-sep"></div>
|
||||||
|
<div class="score-row score-row-opp">
|
||||||
|
<div class="score-row-name">
|
||||||
|
<span class="player-name">Bot</span>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-wrap">
|
||||||
|
<div class="pts-ghost-bar-track">
|
||||||
|
<div style="width:16%" class="pts-ghost-bar-fill pts-ghost-bar-opp"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-row">
|
||||||
|
<span class="pts-counter">2</span>
|
||||||
|
<span class="pts-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="peg-track">
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div><div class="peg-hole peg-opp"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-panels-container">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<button class="scoring-expand-btn" title="Show scoring details">+</button>
|
||||||
|
<div class="scoring-panel">
|
||||||
|
<div class="scoring-panel-head">
|
||||||
|
<div class="scoring-total">+4 pts</div>
|
||||||
|
<button class="scoring-collapse-btn" title="Minimise">−</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>
|
||||||
|
</div><!-- /.score-area -->
|
||||||
|
|
||||||
|
<!-- ══════════════════════════════════════════════════════════════════
|
||||||
|
BOARD + RIGHT SIDEBAR (the variation change starts here)
|
||||||
|
══════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="game-board-with-sidebar">
|
||||||
|
|
||||||
|
<!-- ── Board wrapper (board-bar is now a thin 5px rail) ─────────── -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- thin bar — no die slot -->
|
||||||
|
<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><!-- /.board-row.top-row -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- thin bar — no die slot -->
|
||||||
|
<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><!-- /.board-row.bot-row -->
|
||||||
|
|
||||||
|
<svg style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible" width="761" height="388"></svg>
|
||||||
|
|
||||||
|
</div><!-- /.board -->
|
||||||
|
|
||||||
|
</div><!-- /.board-wrapper -->
|
||||||
|
|
||||||
|
<!-- ── Right sidebar ──────────────────────────────────────────── -->
|
||||||
|
<div class="game-right-sidebar">
|
||||||
|
|
||||||
|
<!-- Dice panel -->
|
||||||
|
<div class="sidebar-dice-panel">
|
||||||
|
<div class="sidebar-dice-row">
|
||||||
|
|
||||||
|
<!-- Die 1 (was in bot-row board-bar) — shows 6 -->
|
||||||
|
<svg class="die-face" width="48" height="48" 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 (was in top-row board-bar) — shows 4 -->
|
||||||
|
<svg class="die-face" width="48" height="48" 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>
|
||||||
|
|
||||||
|
<!-- Free-play toggle -->
|
||||||
|
<label class="free-mode-toggle">
|
||||||
|
<input type="checkbox">Mode jeu 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><!-- /.sidebar-dice-panel -->
|
||||||
|
|
||||||
|
<!-- Status panel (content from .game-bottom-strip) -->
|
||||||
|
<div class="sidebar-status-panel">
|
||||||
|
<div class="game-status">Déplacez une dame (1 sur 2)</div>
|
||||||
|
<p class="game-sub-prompt">Cliquez une flêche soulignée pour déplacer</p>
|
||||||
|
<div class="board-actions"></div>
|
||||||
|
</div><!-- /.sidebar-status-panel -->
|
||||||
|
|
||||||
|
</div><!-- /.game-right-sidebar -->
|
||||||
|
|
||||||
|
</div><!-- /.game-board-with-sidebar -->
|
||||||
|
|
||||||
|
</div><!-- /.game-container -->
|
||||||
|
</div><!-- /.game-overlay -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
628
doc/design/variations/02-horizontal-header.html
Normal file
628
doc/design/variations/02-horizontal-header.html
Normal file
|
|
@ -0,0 +1,628 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Variation 02 — En-tête horizontal · Scoring latéral</title>
|
||||||
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════════════════════
|
||||||
|
Variation 02
|
||||||
|
─────────────────────────────────────────────────────────────────
|
||||||
|
Key changes vs baseline:
|
||||||
|
1. .score-area replaced by .mhdr — one-row match header with
|
||||||
|
both players side by side (inspired by headerNostyle.html).
|
||||||
|
The turn indicator lives here so it doesn't need to be in
|
||||||
|
the status bar.
|
||||||
|
2. .v02-body is a 3-col flex row:
|
||||||
|
[scoring column] [board] [right sidebar]
|
||||||
|
– Scoring column is a normal flex child (align-self: flex-start)
|
||||||
|
so its variable height NEVER displaces the board.
|
||||||
|
– Right sidebar holds dice + status/actions (same idea as
|
||||||
|
variation 01).
|
||||||
|
3. Basic responsive:
|
||||||
|
– ≤ 1180px: scoring column hidden (scoring panel gone)
|
||||||
|
– ≤ 920px : right sidebar hidden, .v02-bottom-strip shown
|
||||||
|
══════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── Suppress baseline elements we are replacing ─────────────────── */
|
||||||
|
.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 container: tighter gap ─────────────────────────────────── */
|
||||||
|
.game-container { gap: 0.45rem; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
MATCH HEADER — both players in a single horizontal strip
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.mhdr {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||||
|
padding: 0.45rem 1rem 0.45rem 0.85rem;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Player half — flex, fills half the header */
|
||||||
|
.mhdr-player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.mhdr-player-right { flex-direction: row-reverse; }
|
||||||
|
|
||||||
|
/* Name + you-tag block */
|
||||||
|
.mhdr-name-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
.mhdr-player-right .mhdr-name-block { align-items: flex-end; }
|
||||||
|
|
||||||
|
.mhdr-player .player-name {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
.mhdr-player .you-tag { font-size: 0.62rem; }
|
||||||
|
|
||||||
|
/* Peg track inside the header */
|
||||||
|
.mhdr-pegs {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.mhdr-pegs .ph {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1.5px solid rgba(138,106,40,0.3);
|
||||||
|
background: rgba(0,0,0,0.06);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
.mhdr-pegs .ph.filled-me {
|
||||||
|
background: #5aab38;
|
||||||
|
border-color: #3a7828;
|
||||||
|
box-shadow: 0 0 4px rgba(90,171,56,0.5);
|
||||||
|
}
|
||||||
|
.mhdr-pegs .ph.filled-opp {
|
||||||
|
background: #c05030;
|
||||||
|
border-color: #8a3018;
|
||||||
|
box-shadow: 0 0 4px rgba(192,80,48,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bredouille indicator */
|
||||||
|
.mhdr-bred {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--ui-gold-dark);
|
||||||
|
opacity: 0.7;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Score block */
|
||||||
|
.mhdr-score {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.mhdr-score-num {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.65rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.mhdr-score-max {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: #998877;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center column: VS + game info + turn */
|
||||||
|
.mhdr-center {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
border-left: 1px solid rgba(138,106,40,0.18);
|
||||||
|
border-right: 1px solid rgba(138,106,40,0.18);
|
||||||
|
}
|
||||||
|
.mhdr-vs {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
color: #998877;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.mhdr-info {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: #aa9980;
|
||||||
|
font-style: italic;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mhdr-turn {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.67rem;
|
||||||
|
color: var(--ui-green-accent);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
3-COLUMN BODY
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v02-body {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Left: scoring column ─────────────────────────────────────────── */
|
||||||
|
.v02-scoring-col {
|
||||||
|
width: 240px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
/* align-self: flex-start (default) means the column is only as tall
|
||||||
|
as its content — it CANNOT displace the board vertically. */
|
||||||
|
}
|
||||||
|
|
||||||
|
.v02-scoring-empty {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgba(242,232,208,0.2);
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
border: 1px dashed rgba(200,164,72,0.12);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scoring panel in the column: take full column width */
|
||||||
|
.v02-scoring-col .scoring-panel {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.v02-scoring-col .scoring-panel-wrapper {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Right: sidebar ───────────────────────────────────────────────── */
|
||||||
|
.game-right-sidebar {
|
||||||
|
width: 152px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-dice-panel {
|
||||||
|
background: var(--board-rail);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.6rem 0.75rem 0.75rem;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.sidebar-dice-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.sidebar-status-panel {
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.65rem 0.75rem 0.75rem;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.sidebar-status-panel .game-status {
|
||||||
|
color: var(--ui-ink);
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.sidebar-status-panel .board-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.sidebar-dice-panel .free-mode-toggle {
|
||||||
|
color: var(--ui-parchment);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile fallback strip (shown when sidebar is hidden) ─────────── */
|
||||||
|
.v02-bottom-strip {
|
||||||
|
display: none;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
|
padding: 0.55rem 1rem;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.v02-bottom-strip-dice {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
border-right: 1px solid rgba(138,106,40,0.2);
|
||||||
|
}
|
||||||
|
.v02-bottom-strip-status {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
.v02-bottom-strip .game-status {
|
||||||
|
color: var(--ui-ink);
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.v02-bottom-strip .board-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
RESPONSIVE BREAKPOINTS
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* Below 1180px: hide left scoring column (board + sidebar still fit) */
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.v02-scoring-col { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Below 920px: collapse right sidebar → bottom strip */
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.game-right-sidebar { display: none !important; }
|
||||||
|
.v02-bottom-strip { display: flex !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Narrow header: hide peg track if needed */
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.mhdr-pegs { display: none; }
|
||||||
|
.mhdr-center { padding: 0 0.5rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Left-side navigation sidebar (unchanged) ──────────────────────── -->
|
||||||
|
<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 page 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">
|
||||||
|
|
||||||
|
<!-- ══════════════════════════════════════════════════════════════════
|
||||||
|
MATCH HEADER — both players side by side
|
||||||
|
══════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="mhdr">
|
||||||
|
|
||||||
|
<!-- Player 1 (me) ───────────────────────────────────────────────── -->
|
||||||
|
<div class="mhdr-player">
|
||||||
|
<div class="mhdr-name-block">
|
||||||
|
<span class="player-name">Anonyme</span>
|
||||||
|
<span class="you-tag">(vous)</span>
|
||||||
|
</div>
|
||||||
|
<div class="mhdr-pegs">
|
||||||
|
<div class="ph filled-me"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div>
|
||||||
|
</div>
|
||||||
|
<span class="mhdr-bred" title="Bredouille armée">⚜</span>
|
||||||
|
<div class="mhdr-score">
|
||||||
|
<span class="mhdr-score-num">6</span>
|
||||||
|
<span class="mhdr-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center ──────────────────────────────────────────────────────── -->
|
||||||
|
<div class="mhdr-center">
|
||||||
|
<span class="mhdr-vs">VS</span>
|
||||||
|
<span class="mhdr-info">jeu en 12 trous</span>
|
||||||
|
<span class="mhdr-turn">à vous de jouer</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Player 2 (opponent) ─────────────────────────────────────────── -->
|
||||||
|
<div class="mhdr-player mhdr-player-right">
|
||||||
|
<div class="mhdr-name-block">
|
||||||
|
<span class="player-name">Bot</span>
|
||||||
|
</div>
|
||||||
|
<div class="mhdr-pegs">
|
||||||
|
<div class="ph filled-opp"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div><div class="ph"></div>
|
||||||
|
<div class="ph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="mhdr-score">
|
||||||
|
<span class="mhdr-score-num">2</span>
|
||||||
|
<span class="mhdr-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /.mhdr -->
|
||||||
|
|
||||||
|
<!-- ══════════════════════════════════════════════════════════════════
|
||||||
|
3-COLUMN BODY: [scoring col] [board] [right sidebar]
|
||||||
|
══════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v02-body">
|
||||||
|
|
||||||
|
<!-- ── Left: scoring column (variable height, never moves board) ── -->
|
||||||
|
<div class="v02-scoring-col">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<button class="scoring-expand-btn" title="Show scoring details">+</button>
|
||||||
|
<div class="scoring-panel">
|
||||||
|
<div class="scoring-panel-head">
|
||||||
|
<div class="scoring-total">+4 pts</div>
|
||||||
|
<button class="scoring-collapse-btn" title="Minimise">−</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>
|
||||||
|
<!-- Shown when no scoring event is active -->
|
||||||
|
<div class="v02-scoring-empty">Aucun événement de marque</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><!-- /.top-row -->
|
||||||
|
|
||||||
|
<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><!-- /.bot-row -->
|
||||||
|
|
||||||
|
<svg style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible" width="761" height="388"></svg>
|
||||||
|
|
||||||
|
</div><!-- /.board -->
|
||||||
|
</div><!-- /.board-wrapper -->
|
||||||
|
|
||||||
|
<!-- ── Right sidebar: dice + status/actions ───────────────────── -->
|
||||||
|
<div class="game-right-sidebar">
|
||||||
|
|
||||||
|
<div class="sidebar-dice-panel">
|
||||||
|
<div class="sidebar-dice-row">
|
||||||
|
<!-- Die 1 — 6 -->
|
||||||
|
<svg class="die-face" width="48" height="48" 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="48" height="48" 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>
|
||||||
|
<label class="free-mode-toggle">
|
||||||
|
<input type="checkbox">Mode jeu 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><!-- /.sidebar-dice-panel -->
|
||||||
|
|
||||||
|
<div class="sidebar-status-panel">
|
||||||
|
<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><!-- /.sidebar-status-panel -->
|
||||||
|
|
||||||
|
</div><!-- /.game-right-sidebar -->
|
||||||
|
|
||||||
|
</div><!-- /.v02-body -->
|
||||||
|
|
||||||
|
<!-- ── Mobile bottom strip (shown below 920px) ────────────────────── -->
|
||||||
|
<div class="v02-bottom-strip">
|
||||||
|
<div class="v02-bottom-strip-dice">
|
||||||
|
<svg class="die-face" width="38" height="38" 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>
|
||||||
|
<svg class="die-face die-used" width="38" height="38" 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>
|
||||||
|
<div class="v02-bottom-strip-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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /.game-container -->
|
||||||
|
</div><!-- /.game-overlay -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
655
doc/design/variations/03-dark-modern.html
Normal file
655
doc/design/variations/03-dark-modern.html
Normal file
|
|
@ -0,0 +1,655 @@
|
||||||
|
<!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>
|
||||||
620
doc/design/variations/04-warm-bottom-scoring.html
Normal file
620
doc/design/variations/04-warm-bottom-scoring.html
Normal file
|
|
@ -0,0 +1,620 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Variation 04 — Warm Classic · Scoring en bas</title>
|
||||||
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════════════════════
|
||||||
|
Variation 04: v03 layout + warm palette + scoring below board
|
||||||
|
─────────────────────────────────────────────────────────────────
|
||||||
|
Differs from 03-dark-modern:
|
||||||
|
• Warm parchment / wood palette (no dark overrides)
|
||||||
|
• .scoring-panel moves to a dedicated row BELOW the board
|
||||||
|
(grows downward → never displaces the board upward)
|
||||||
|
Light green bg when local player scored,
|
||||||
|
light red when opponent scored.
|
||||||
|
• Same compact player strip above the board
|
||||||
|
• Same bottom dock (dice · status · actions)
|
||||||
|
══════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── 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-container { gap: 0.5rem; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
PLAYER STRIP — warm palette
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v04-strip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border: 1px solid var(--ui-gold-dark);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0.5rem 0.85rem;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Player half */
|
||||||
|
.v04-player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.v04-player-right { flex-direction: row-reverse; }
|
||||||
|
|
||||||
|
/* Avatar circle */
|
||||||
|
.v04-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;
|
||||||
|
}
|
||||||
|
.v04-avatar-me {
|
||||||
|
background: rgba(42,107,60,0.12);
|
||||||
|
border: 1.5px solid #2a6b3c;
|
||||||
|
color: #2a6b3c;
|
||||||
|
}
|
||||||
|
.v04-avatar-opp {
|
||||||
|
background: rgba(139,26,26,0.12);
|
||||||
|
border: 1.5px solid #8b1a1a;
|
||||||
|
color: #8b1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name */
|
||||||
|
.v04-name {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 110px;
|
||||||
|
}
|
||||||
|
.v04-you-tag {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: rgba(58,42,10,0.45);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.v04-name-block { display: flex; flex-direction: column; min-width: 0; }
|
||||||
|
.v04-player-right .v04-name-block { align-items: flex-end; }
|
||||||
|
|
||||||
|
/* Dot peg track */
|
||||||
|
.v04-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 2.5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.v04-dot {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(58,42,10,0.08);
|
||||||
|
border: 1px solid rgba(58,42,10,0.18);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.v04-dot.on-me { background: #2a6b3c; border-color: #1e5029; box-shadow: 0 0 3px rgba(42,107,60,0.4); }
|
||||||
|
.v04-dot.on-opp { background: #8b1a1a; border-color: #6a1212; box-shadow: 0 0 3px rgba(139,26,26,0.4); }
|
||||||
|
|
||||||
|
/* Score */
|
||||||
|
.v04-score {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.v04-score-num {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.v04-score-max {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.58rem;
|
||||||
|
color: rgba(58,42,10,0.38);
|
||||||
|
display: block;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bredouille badge */
|
||||||
|
.v04-bred {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--ui-gold);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center: VS + game info + turn pill */
|
||||||
|
.v04-strip-center {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0 0.85rem;
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.15);
|
||||||
|
border-right: 1px solid rgba(58,42,10,0.15);
|
||||||
|
}
|
||||||
|
.v04-vs {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.v04-game-info {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.v04-turn-pill {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2a6b3c;
|
||||||
|
background: rgba(42,107,60,0.10);
|
||||||
|
border: 1px solid rgba(42,107,60,0.28);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.1em 0.6em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the board, in normal flow
|
||||||
|
Grows downward → board position is never affected.
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v04-scoring-row {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override the scoring-panels-container baseline positioning */
|
||||||
|
.v04-scoring-row .scoring-panels-container {
|
||||||
|
position: static;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
z-index: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scoring panel: light green (local player scored) ─────────────── */
|
||||||
|
.v04-scoring-row .scoring-panel {
|
||||||
|
background: #edf7ee;
|
||||||
|
border: 1px solid #a8d4b0;
|
||||||
|
border-left: 3px solid #2d7a3c;
|
||||||
|
box-shadow: 0 2px 8px rgba(42,107,60,0.10);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.v04-scoring-row .scoring-total { color: #1e5829; }
|
||||||
|
.v04-scoring-row .jan-label { color: #2a3d28; }
|
||||||
|
.v04-scoring-row .jan-tag { color: rgba(42,80,42,0.6); background: rgba(42,107,60,0.07); }
|
||||||
|
.v04-scoring-row .jan-pts { color: #1e5829; }
|
||||||
|
.v04-scoring-row .scoring-collapse-btn { color: rgba(42,80,42,0.4); }
|
||||||
|
.v04-scoring-row .scoring-collapse-btn:hover { color: rgba(42,80,42,0.75); }
|
||||||
|
.v04-scoring-row .scoring-expand-btn {
|
||||||
|
background: #edf7ee;
|
||||||
|
border-color: #a8d4b0;
|
||||||
|
color: #2d7a3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Opponent scoring panel: light red ────────────────────────────── */
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored {
|
||||||
|
background: #fceaea;
|
||||||
|
border-color: #dea8a8;
|
||||||
|
border-left-color: #b52b2b;
|
||||||
|
box-shadow: 0 2px 8px rgba(139,26,26,0.10);
|
||||||
|
}
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .scoring-total { color: #7a1e1e; }
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .jan-label { color: #3d2a2a; }
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .jan-tag { color: rgba(100,42,42,0.6); background: rgba(139,26,26,0.07); }
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .jan-pts { color: #7a1e1e; }
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .scoring-collapse-btn { color: rgba(100,42,42,0.4); }
|
||||||
|
.v04-scoring-row .scoring-panel.opp-scored .scoring-expand-btn {
|
||||||
|
background: #fceaea;
|
||||||
|
border-color: #dea8a8;
|
||||||
|
color: #b52b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — warm palette
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v04-dock {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border: 1px solid var(--ui-gold-dark);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v04-dock-dice {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 1rem;
|
||||||
|
border-right: 1px solid rgba(58,42,10,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v04-dock-status {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v04-dock .game-status {
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.v04-dock .board-actions {
|
||||||
|
min-height: 0;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v04-dock-extra {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
RESPONSIVE
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.v04-dock {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.v04-dock-dice {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid rgba(58,42,10,0.12);
|
||||||
|
padding-right: 0;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.v04-dock-extra {
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid rgba(58,42,10,0.12);
|
||||||
|
padding-left: 0;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.v04-dots { display: none; }
|
||||||
|
.v04-strip-center { padding: 0 0.4rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Left navigation sidebar ───────────────────────────────────────── -->
|
||||||
|
<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
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v04-strip">
|
||||||
|
|
||||||
|
<!-- Player 1 (me) ──────────────────────────────────────────────── -->
|
||||||
|
<div class="v04-player">
|
||||||
|
<div class="v04-avatar v04-avatar-me">A</div>
|
||||||
|
<div class="v04-name-block">
|
||||||
|
<span class="v04-name">Anonyme</span>
|
||||||
|
<span class="v04-you-tag">(vous)</span>
|
||||||
|
</div>
|
||||||
|
<div class="v04-dots">
|
||||||
|
<div class="v04-dot on-me"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div>
|
||||||
|
</div>
|
||||||
|
<span class="v04-bred" title="Bredouille armée">⚜</span>
|
||||||
|
<div class="v04-score">
|
||||||
|
<span class="v04-score-num">6</span>
|
||||||
|
<span class="v04-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center ─────────────────────────────────────────────────────── -->
|
||||||
|
<div class="v04-strip-center">
|
||||||
|
<span class="v04-vs">VS</span>
|
||||||
|
<span class="v04-game-info">jeu en 12 trous</span>
|
||||||
|
<span class="v04-turn-pill">votre tour</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Player 2 (opponent) ─────────────────────────────────────────── -->
|
||||||
|
<div class="v04-player v04-player-right">
|
||||||
|
<div class="v04-avatar v04-avatar-opp">B</div>
|
||||||
|
<div class="v04-name-block">
|
||||||
|
<span class="v04-name">Bot</span>
|
||||||
|
</div>
|
||||||
|
<div class="v04-dots">
|
||||||
|
<div class="v04-dot on-opp"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div><div class="v04-dot"></div>
|
||||||
|
<div class="v04-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="v04-score">
|
||||||
|
<span class="v04-score-num">2</span>
|
||||||
|
<span class="v04-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /.v04-strip -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
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 -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the board, in normal flow.
|
||||||
|
Only present when a scoring event occurred this turn.
|
||||||
|
Green panel = local player scored; red panel = opponent scored.
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v04-scoring-row">
|
||||||
|
|
||||||
|
<!-- Local player scored (green) -->
|
||||||
|
<div class="scoring-panels-container">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<button class="scoring-expand-btn" title="Afficher le détail">+</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>
|
||||||
|
|
||||||
|
<!-- Opponent scored (red) — shown when opponent marks points -->
|
||||||
|
<!--
|
||||||
|
<div class="scoring-panels-container">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<div class="scoring-panel opp-scored">
|
||||||
|
<div class="scoring-panel-head">
|
||||||
|
<div class="scoring-total">+2 pts</div>
|
||||||
|
<button class="scoring-collapse-btn">−</button>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-jan-row">
|
||||||
|
<span class="jan-label">Jan de retour</span>
|
||||||
|
<span class="jan-tag">simple</span>
|
||||||
|
<span class="jan-tag">×1</span>
|
||||||
|
<span class="jan-pts">+2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</div><!-- /.v04-scoring-row -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — dice | status + actions | free-mode
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v04-dock">
|
||||||
|
|
||||||
|
<!-- Dice ─────────────────────────────────────────────────────── -->
|
||||||
|
<div class="v04-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="v04-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="v04-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><!-- /.v04-dock -->
|
||||||
|
|
||||||
|
</div><!-- /.game-container -->
|
||||||
|
</div><!-- /.game-overlay -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
582
doc/design/variations/05-warm-sticky-header.html
Normal file
582
doc/design/variations/05-warm-sticky-header.html
Normal file
|
|
@ -0,0 +1,582 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Variation 05 — Warm · Sticky header · Scoring below dock</title>
|
||||||
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════════════════════
|
||||||
|
Variation 05 — built on 04, with three layout changes:
|
||||||
|
1. Player strip: full viewport width, sticky to top edge,
|
||||||
|
left half right-aligned (me → VS), right half left-aligned
|
||||||
|
(VS → opp), scores at the extremes.
|
||||||
|
2. Bottom bar divided: dark-wood dice section (v01 style) |
|
||||||
|
parchment status+actions section.
|
||||||
|
3. Scoring row moved below the dock bar.
|
||||||
|
══════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── 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-container { gap: 0.5rem; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
PLAYER STRIP — full width, sticky, mirror layout
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v05-strip {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-bottom: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.5rem 0.85rem;
|
||||||
|
gap: 0.6rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* no border-radius: strip spans edge to edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Player half — base */
|
||||||
|
.v05-player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Left (me): content right-aligned so avatar sits next to VS */
|
||||||
|
.v05-player-left { justify-content: flex-end; }
|
||||||
|
|
||||||
|
/* Right (opp): content left-aligned so avatar sits next to VS */
|
||||||
|
.v05-player-right { justify-content: flex-start; }
|
||||||
|
|
||||||
|
/* Avatar circle */
|
||||||
|
.v05-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;
|
||||||
|
}
|
||||||
|
.v05-avatar-me { background: rgba(42,107,60,0.12); border: 1.5px solid #2a6b3c; color: #2a6b3c; }
|
||||||
|
.v05-avatar-opp { background: rgba(139,26,26,0.12); border: 1.5px solid #8b1a1a; color: #8b1a1a; }
|
||||||
|
|
||||||
|
/* Name block */
|
||||||
|
.v05-name {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 110px;
|
||||||
|
}
|
||||||
|
.v05-you-tag {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: rgba(58,42,10,0.45);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.v05-name-block { display: flex; flex-direction: column; min-width: 0; }
|
||||||
|
|
||||||
|
/* Left player: name right-aligned inside its block */
|
||||||
|
.v05-player-left .v05-name-block { align-items: flex-end; }
|
||||||
|
|
||||||
|
/* Dot peg track */
|
||||||
|
.v05-dots { display: flex; gap: 2.5px; flex-shrink: 0; }
|
||||||
|
.v05-dot {
|
||||||
|
width: 9px; height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(58,42,10,0.08);
|
||||||
|
border: 1px solid rgba(58,42,10,0.18);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.v05-dot.on-me { background: #2a6b3c; border-color: #1e5029; box-shadow: 0 0 3px rgba(42,107,60,0.4); }
|
||||||
|
.v05-dot.on-opp { background: #8b1a1a; border-color: #6a1212; box-shadow: 0 0 3px rgba(139,26,26,0.4); }
|
||||||
|
|
||||||
|
/* Score */
|
||||||
|
.v05-score { flex-shrink: 0; font-variant-numeric: tabular-nums; line-height: 1; }
|
||||||
|
.v05-score-num {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--ui-ink);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.v05-score-max {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.58rem;
|
||||||
|
color: rgba(58,42,10,0.38);
|
||||||
|
display: block;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
/* Right-align score digits under left player */
|
||||||
|
.v05-player-left .v05-score { text-align: right; }
|
||||||
|
|
||||||
|
/* Bredouille badge */
|
||||||
|
.v05-bred { font-size: 0.72rem; color: var(--ui-gold); flex-shrink: 0; }
|
||||||
|
|
||||||
|
/* Center column: VS + game info + turn pill */
|
||||||
|
.v05-strip-center {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0 0.85rem;
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.15);
|
||||||
|
border-right: 1px solid rgba(58,42,10,0.15);
|
||||||
|
}
|
||||||
|
.v05-vs {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.v05-game-info {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.v05-turn-pill {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2a6b3c;
|
||||||
|
background: rgba(42,107,60,0.10);
|
||||||
|
border: 1px solid rgba(42,107,60,0.28);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.1em 0.6em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — two-section bar: dark wood dice | parchment status
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v05-dock {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--ui-gold-dark);
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden; /* clips children corners */
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Dice section: board-rail dark wood (same as v01 sidebar-dice-panel) */
|
||||||
|
.v05-dock-dice {
|
||||||
|
background: var(--board-rail);
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.65rem 1rem 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v05-dock-dice-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Free-mode toggle on dark background (matches v01 sidebar treatment) */
|
||||||
|
.v05-dock-dice .free-mode-toggle {
|
||||||
|
color: var(--ui-parchment);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
.v05-dock-dice .free-mode-help {
|
||||||
|
border-color: rgba(242,232,208,0.35);
|
||||||
|
color: rgba(242,232,208,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Status + actions section: parchment */
|
||||||
|
.v05-dock-main {
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.18);
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.65rem 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v05-dock-main .game-status {
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v05-dock-main .board-actions {
|
||||||
|
min-height: 0;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the dock, in normal flow
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v05-scoring-row {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v05-scoring-row .scoring-panels-container {
|
||||||
|
position: static;
|
||||||
|
top: auto; left: auto;
|
||||||
|
z-index: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Green panel: local player scored */
|
||||||
|
.v05-scoring-row .scoring-panel {
|
||||||
|
background: #edf7ee;
|
||||||
|
border: 1px solid #a8d4b0;
|
||||||
|
border-left: 3px solid #2d7a3c;
|
||||||
|
box-shadow: 0 2px 8px rgba(42,107,60,0.10);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.v05-scoring-row .scoring-total { color: #1e5829; }
|
||||||
|
.v05-scoring-row .jan-label { color: #2a3d28; }
|
||||||
|
.v05-scoring-row .jan-tag { color: rgba(42,80,42,0.6); background: rgba(42,107,60,0.07); }
|
||||||
|
.v05-scoring-row .jan-pts { color: #1e5829; }
|
||||||
|
.v05-scoring-row .scoring-collapse-btn { color: rgba(42,80,42,0.4); }
|
||||||
|
.v05-scoring-row .scoring-collapse-btn:hover { color: rgba(42,80,42,0.75); }
|
||||||
|
.v05-scoring-row .scoring-expand-btn { background: #edf7ee; border-color: #a8d4b0; color: #2d7a3c; }
|
||||||
|
|
||||||
|
/* Red panel: opponent scored */
|
||||||
|
.v05-scoring-row .scoring-panel.opp-scored {
|
||||||
|
background: #fceaea;
|
||||||
|
border-color: #dea8a8;
|
||||||
|
border-left-color: #b52b2b;
|
||||||
|
}
|
||||||
|
.v05-scoring-row .scoring-panel.opp-scored .scoring-total { color: #7a1e1e; }
|
||||||
|
.v05-scoring-row .scoring-panel.opp-scored .jan-label { color: #3d2a2a; }
|
||||||
|
.v05-scoring-row .scoring-panel.opp-scored .jan-tag { color: rgba(100,42,42,0.6); background: rgba(139,26,26,0.07); }
|
||||||
|
.v05-scoring-row .scoring-panel.opp-scored .jan-pts { color: #7a1e1e; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
RESPONSIVE
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.v05-dock { flex-direction: column; }
|
||||||
|
.v05-dock-dice {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 2px solid var(--ui-gold-dark);
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
.v05-dock-main { border-left: none; border-top: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.v05-dots { display: none; }
|
||||||
|
.v05-strip-center { padding: 0 0.4rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Left navigation sidebar ───────────────────────────────────────── -->
|
||||||
|
<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 — sticky, full width, mirror layout
|
||||||
|
Left half: [score] [⚜] [dots] [name] [avatar] → right-aligned
|
||||||
|
Right half: [avatar] [name] [dots] [score] → left-aligned
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v05-strip">
|
||||||
|
|
||||||
|
<!-- Left: me, right-aligned toward VS ──────────────────────────── -->
|
||||||
|
<div class="v05-player v05-player-left">
|
||||||
|
<div class="v05-score">
|
||||||
|
<span class="v05-score-num">6</span>
|
||||||
|
<span class="v05-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
<span class="v05-bred" title="Bredouille armée">⚜</span>
|
||||||
|
<div class="v05-dots">
|
||||||
|
<div class="v05-dot on-me"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="v05-name-block">
|
||||||
|
<span class="v05-name">Anonyme</span>
|
||||||
|
<span class="v05-you-tag">(vous)</span>
|
||||||
|
</div>
|
||||||
|
<div class="v05-avatar v05-avatar-me">A</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center ─────────────────────────────────────────────────────── -->
|
||||||
|
<div class="v05-strip-center">
|
||||||
|
<span class="v05-vs">VS</span>
|
||||||
|
<span class="v05-game-info">jeu en 12 trous</span>
|
||||||
|
<span class="v05-turn-pill">votre tour</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: opp, left-aligned from VS ───────────────────────────── -->
|
||||||
|
<div class="v05-player v05-player-right">
|
||||||
|
<div class="v05-avatar v05-avatar-opp">B</div>
|
||||||
|
<div class="v05-name-block">
|
||||||
|
<span class="v05-name">Bot</span>
|
||||||
|
</div>
|
||||||
|
<div class="v05-dots">
|
||||||
|
<div class="v05-dot on-opp"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div><div class="v05-dot"></div>
|
||||||
|
<div class="v05-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="v05-score">
|
||||||
|
<span class="v05-score-num">2</span>
|
||||||
|
<span class="v05-score-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /.v05-strip -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
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 -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — [dark wood: dice] | [parchment: status + actions]
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v05-dock">
|
||||||
|
|
||||||
|
<!-- Dark wood dice section (v01 sidebar-dice-panel aesthetic) ── -->
|
||||||
|
<div class="v05-dock-dice">
|
||||||
|
<div class="v05-dock-dice-row">
|
||||||
|
<!-- Die 1 — 6 (active) -->
|
||||||
|
<svg class="die-face" width="48" height="48" 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="48" height="48" 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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Parchment status + actions section ──────────────────────── -->
|
||||||
|
<div class="v05-dock-main">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div><!-- /.v05-dock -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the dock
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v05-scoring-row">
|
||||||
|
<div class="scoring-panels-container">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<button class="scoring-expand-btn" title="Afficher le détail">+</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>
|
||||||
|
</div><!-- /.v05-scoring-row -->
|
||||||
|
|
||||||
|
</div><!-- /.game-container -->
|
||||||
|
</div><!-- /.game-overlay -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
571
doc/design/variations/06-wide-header.html
Normal file
571
doc/design/variations/06-wide-header.html
Normal file
|
|
@ -0,0 +1,571 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Variation 06 — Wide fixed header · Scoring below dock</title>
|
||||||
|
<link rel="stylesheet" href="../snapshots/2026-05-30-d4a2ea1c531827bfbc2410af20a00e349d606c87_files/style.css">
|
||||||
|
<style>
|
||||||
|
/* ══════════════════════════════════════════════════════════════════
|
||||||
|
Variation 06 — from 05, with:
|
||||||
|
1. Player strip: position:fixed, true full viewport width,
|
||||||
|
touches top edge. Element order from VS center outward:
|
||||||
|
pts-counter | peg-track | player-name | avatar circle.
|
||||||
|
Uses v01 HTML/style for pts-counter-wrap, peg-track, name.
|
||||||
|
2. Bottom bar: dark-wood dice (v01 palette) | parchment status.
|
||||||
|
3. Scoring row below the dock.
|
||||||
|
══════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
/* ── 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; }
|
||||||
|
|
||||||
|
/* Push overlay content below the fixed strip (~54px strip height) */
|
||||||
|
.game-overlay { padding-top: calc(1.5rem + 54px) !important; }
|
||||||
|
|
||||||
|
.game-container { gap: 0.5rem; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
PLAYER STRIP — fixed, true full-width
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v06-strip {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 300;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-bottom: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.35rem 1.25rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Player half ── */
|
||||||
|
.v06-player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Left (me): group pushed RIGHT toward VS → last DOM item = pts = closest to VS */
|
||||||
|
.v06-player-left { justify-content: flex-end; }
|
||||||
|
|
||||||
|
/* Right (opp): group pushed LEFT toward VS → first DOM item = pts = closest to VS */
|
||||||
|
.v06-player-right { justify-content: flex-start; }
|
||||||
|
|
||||||
|
/* ── Avatar circle ── */
|
||||||
|
.v06-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;
|
||||||
|
}
|
||||||
|
.v06-avatar-me { background: rgba(42,107,60,0.12); border: 1.5px solid #2a6b3c; color: #2a6b3c; }
|
||||||
|
.v06-avatar-opp { background: rgba(139,26,26,0.12); border: 1.5px solid #8b1a1a; color: #8b1a1a; }
|
||||||
|
|
||||||
|
/* ── Peg holes: same colour logic as merged-score-panel ── */
|
||||||
|
.v06-strip .peg-track { gap: 3px; }
|
||||||
|
.v06-strip .peg-hole { width: 12px; height: 12px; }
|
||||||
|
|
||||||
|
.v06-strip .peg-hole.filled {
|
||||||
|
background: #5aab38;
|
||||||
|
border-color: #3a7828;
|
||||||
|
box-shadow: 0 0 5px rgba(90,171,56,0.55);
|
||||||
|
}
|
||||||
|
.v06-strip .peg-hole.peg-opp.filled {
|
||||||
|
background: #c05030;
|
||||||
|
border-color: #8a3018;
|
||||||
|
box-shadow: 0 0 5px rgba(192,80,48,0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Name block: don't constrain to fixed 120px in the strip ── */
|
||||||
|
.v06-strip .score-row-name { width: auto; }
|
||||||
|
|
||||||
|
/* ── Center column: VS + info + turn pill ── */
|
||||||
|
.v06-strip-center {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0 0.85rem;
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.15);
|
||||||
|
border-right: 1px solid rgba(58,42,10,0.15);
|
||||||
|
}
|
||||||
|
.v06-vs {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.v06-game-info {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
color: rgba(58,42,10,0.28);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.v06-turn-pill {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2a6b3c;
|
||||||
|
background: rgba(42,107,60,0.10);
|
||||||
|
border: 1px solid rgba(42,107,60,0.28);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.1em 0.6em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — [dark wood: dice] | [parchment: status + actions]
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v06-dock {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--ui-gold-dark);
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark wood dice section — matches v01 .sidebar-dice-panel */
|
||||||
|
.v06-dock-dice {
|
||||||
|
background: var(--board-rail);
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
padding: 0.65rem 1rem 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.v06-dock-dice-row { display: flex; gap: 0.55rem; align-items: center; }
|
||||||
|
|
||||||
|
.v06-dock-dice .free-mode-toggle {
|
||||||
|
color: var(--ui-parchment);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
.v06-dock-dice .free-mode-help {
|
||||||
|
border-color: rgba(242,232,208,0.35);
|
||||||
|
color: rgba(242,232,208,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Parchment status + actions section */
|
||||||
|
.v06-dock-main {
|
||||||
|
background: var(--ui-parchment);
|
||||||
|
border-top: 2px solid var(--ui-gold-dark);
|
||||||
|
border-left: 1px solid rgba(58,42,10,0.18);
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.65rem 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
.v06-dock-main .game-status {
|
||||||
|
text-shadow: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.v06-dock-main .board-actions { min-height: 0; gap: 0.5rem; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the dock
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
.v06-scoring-row { width: 100%; }
|
||||||
|
|
||||||
|
.v06-scoring-row .scoring-panels-container {
|
||||||
|
position: static;
|
||||||
|
top: auto; left: auto; z-index: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Green: local player scored */
|
||||||
|
.v06-scoring-row .scoring-panel {
|
||||||
|
background: #edf7ee;
|
||||||
|
border: 1px solid #a8d4b0;
|
||||||
|
border-left: 3px solid #2d7a3c;
|
||||||
|
box-shadow: 0 2px 8px rgba(42,107,60,0.10);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.v06-scoring-row .scoring-total { color: #1e5829; }
|
||||||
|
.v06-scoring-row .jan-label { color: #2a3d28; }
|
||||||
|
.v06-scoring-row .jan-tag { color: rgba(42,80,42,0.6); background: rgba(42,107,60,0.07); }
|
||||||
|
.v06-scoring-row .jan-pts { color: #1e5829; }
|
||||||
|
.v06-scoring-row .scoring-collapse-btn { color: rgba(42,80,42,0.4); }
|
||||||
|
.v06-scoring-row .scoring-expand-btn { background: #edf7ee; border-color: #a8d4b0; color: #2d7a3c; }
|
||||||
|
|
||||||
|
/* Red: opponent scored */
|
||||||
|
.v06-scoring-row .scoring-panel.opp-scored {
|
||||||
|
background: #fceaea;
|
||||||
|
border-color: #dea8a8;
|
||||||
|
border-left-color: #b52b2b;
|
||||||
|
}
|
||||||
|
.v06-scoring-row .scoring-panel.opp-scored .scoring-total { color: #7a1e1e; }
|
||||||
|
.v06-scoring-row .scoring-panel.opp-scored .jan-pts { color: #7a1e1e; }
|
||||||
|
|
||||||
|
/* ════════════════════════════════════════════════════════════════════
|
||||||
|
RESPONSIVE
|
||||||
|
════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.v06-dock { flex-direction: column; }
|
||||||
|
.v06-dock-dice {
|
||||||
|
flex-direction: row; flex-wrap: wrap; justify-content: center;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 2px solid var(--ui-gold-dark);
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
.v06-dock-main { border-left: none; border-top: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.v06-strip .peg-track { display: none; }
|
||||||
|
.v06-strip-center { padding: 0 0.4rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Left navigation sidebar ───────────────────────────────────────── -->
|
||||||
|
<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 — fixed, full viewport width, touches top edge.
|
||||||
|
|
||||||
|
Left half (me): DOM → [avatar][name][pegs][pts]
|
||||||
|
justify-content: flex-end
|
||||||
|
Visual: …[avatar][name][pegs][pts]|VS
|
||||||
|
pts closest to VS, avatar at far left.
|
||||||
|
|
||||||
|
Right half (opp): DOM → [pts][pegs][name][avatar]
|
||||||
|
justify-content: flex-start
|
||||||
|
Visual: VS|[pts][pegs][name][avatar]…
|
||||||
|
pts closest to VS, avatar at far right.
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v06-strip">
|
||||||
|
|
||||||
|
<!-- Left: me, right-aligned ────────────────────────────────────── -->
|
||||||
|
<div class="v06-player v06-player-left">
|
||||||
|
|
||||||
|
<!-- 4. Avatar — outermost (leftmost) -->
|
||||||
|
<div class="v06-avatar v06-avatar-me">A</div>
|
||||||
|
|
||||||
|
<!-- 3. Player name + (vous) -->
|
||||||
|
<div class="score-row-name">
|
||||||
|
<span class="player-name">Anonyme</span>
|
||||||
|
<span class="you-tag">(vous)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Peg hole track — 6 filled of 12 -->
|
||||||
|
<div class="peg-track">
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole filled"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
<div class="peg-hole"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1. Points counter — closest to VS (rightmost) -->
|
||||||
|
<div class="pts-counter-wrap">
|
||||||
|
<div class="pts-ghost-bar-track">
|
||||||
|
<div style="width:50%" class="pts-ghost-bar-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-row">
|
||||||
|
<span class="pts-counter">6</span>
|
||||||
|
<span class="pts-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- /.v06-player-left -->
|
||||||
|
|
||||||
|
<!-- Center ─────────────────────────────────────────────────────── -->
|
||||||
|
<div class="v06-strip-center">
|
||||||
|
<span class="v06-vs">VS</span>
|
||||||
|
<span class="v06-game-info">jeu en 12 trous</span>
|
||||||
|
<span class="v06-turn-pill">votre tour</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: opp, left-aligned ───────────────────────────────────── -->
|
||||||
|
<div class="v06-player v06-player-right">
|
||||||
|
|
||||||
|
<!-- 1. Points counter — closest to VS (leftmost) -->
|
||||||
|
<div class="pts-counter-wrap">
|
||||||
|
<div class="pts-ghost-bar-track">
|
||||||
|
<div style="width:16%" class="pts-ghost-bar-fill pts-ghost-bar-opp"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pts-counter-row">
|
||||||
|
<span class="pts-counter">2</span>
|
||||||
|
<span class="pts-max">/12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Peg hole track — 2 filled of 12 -->
|
||||||
|
<div class="peg-track">
|
||||||
|
<div class="peg-hole peg-opp filled"></div>
|
||||||
|
<div class="peg-hole peg-opp filled"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
<div class="peg-hole peg-opp"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. Player name -->
|
||||||
|
<div class="score-row-name">
|
||||||
|
<span class="player-name">Bot</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. Avatar — outermost (rightmost) -->
|
||||||
|
<div class="v06-avatar v06-avatar-opp">B</div>
|
||||||
|
|
||||||
|
</div><!-- /.v06-player-right -->
|
||||||
|
|
||||||
|
</div><!-- /.v06-strip -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
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 -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
BOTTOM DOCK — [dark wood: dice] | [parchment: status + actions]
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v06-dock">
|
||||||
|
|
||||||
|
<!-- Dark wood dice section -->
|
||||||
|
<div class="v06-dock-dice">
|
||||||
|
<div class="v06-dock-dice-row">
|
||||||
|
<svg class="die-face" width="48" height="48" 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>
|
||||||
|
<svg class="die-face die-used" width="48" height="48" 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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Parchment status + actions section -->
|
||||||
|
<div class="v06-dock-main">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div><!-- /.v06-dock -->
|
||||||
|
|
||||||
|
<!-- ════════════════════════════════════════════════════════════════
|
||||||
|
SCORING ROW — below the dock
|
||||||
|
════════════════════════════════════════════════════════════════ -->
|
||||||
|
<div class="v06-scoring-row">
|
||||||
|
<div class="scoring-panels-container">
|
||||||
|
<div class="scoring-panel-wrapper">
|
||||||
|
<button class="scoring-expand-btn" title="Afficher le détail">+</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>
|
||||||
|
</div><!-- /.v06-scoring-row -->
|
||||||
|
|
||||||
|
</div><!-- /.game-container -->
|
||||||
|
</div><!-- /.game-overlay -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue