henri/trictrac
1
1
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

fix: die animation

Browse source
This commit is contained in:
Henri Bourcereau 2026-06-20 21:42:11 +02:00
parent cf289fa779
commit 7a760980ba
5 changed files with 26 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

82
clients/web/assets/style.css
View file

@ -839,8 +839,8 @@ a:hover { text-decoration: underline; }
}
.peg-hole {
width: 10px;
height: 10px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(138,106,40,0.45);
background: rgba(0,0,0,0.06);
@ -848,12 +848,6 @@ a:hover { text-decoration: underline; }
transition: background 0.3s ease-out, border-color 0.3s, box-shadow 0.3s;
}
.peg-hole.filled {
background: var(--ui-gold);
border-color: var(--ui-gold-dark);
box-shadow: 0 0 4px rgba(200,164,72,0.6);
}
.bredouille-badge {
font-size: 0.62rem;
font-weight: 500;
@ -868,20 +862,7 @@ a:hover { text-decoration: underline; }
margin: 0.4em;
}
/* ── Merged scoreboard (both players, above board) ──────────────────── */
.merged-score-panel {
background: var(--ui-parchment);
border-radius: 5px;
padding: 0.5rem 1.25rem 0.45rem;
font-size: 0.88rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
width: 100%;
border-top: 2px solid var(--ui-gold-dark);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
/* ── scoreboard (both players, above board) ──────────────────── */
.score-row {
display: flex;
align-items: center;
@ -964,33 +945,6 @@ a:hover { text-decoration: underline; }
padding-bottom: 2px;
}
/* ── Hole pegs — larger and coloured (me = green, opp = red) ─────────── */
.merged-score-panel .peg-track {
gap: 4px;
}
.merged-score-panel .peg-hole {
width: 14px;
height: 14px;
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 ease-out, border-color 0.3s, box-shadow 0.3s;
}
.merged-score-panel .peg-hole.filled {
background: #5aab38;
border-color: #3a7828;
box-shadow: 0 0 5px rgba(90,171,56,0.55);
}
.merged-score-panel .peg-hole.peg-opp.filled {
background: #c05030;
border-color: #8a3018;
box-shadow: 0 0 5px rgba(192,80,48,0.55);
}
/* Peg pop-in animation when a new hole is scored */
@keyframes peg-pop {
0% { transform: scale(0.15); opacity: 0; }
@ -999,10 +953,6 @@ a:hover { text-decoration: underline; }
100% { transform: scale(1.0); opacity: 1; }
}
.merged-score-panel .peg-hole.peg-new {
animation: peg-pop 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
/* Thin separator between the two player rows */
.score-row-sep {
height: 1px;
@ -1010,31 +960,6 @@ a:hover { text-decoration: underline; }
margin: 0.05rem 0;
}
/* ── Non-blocking hole flash (replaces old toast) ───────────────────── */
@keyframes hole-flash-in-out {
0% { opacity: 0; transform: translateY(-3px); }
14% { opacity: 1; transform: translateY(0); }
65% { opacity: 1; }
100% { opacity: 0; transform: translateY(2px); }
}
.hole-flash {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 600;
color: var(--ui-green-accent);
letter-spacing: 0.05em;
animation: hole-flash-in-out 2.5s ease-out forwards;
pointer-events: none;
}
.hole-flash.hole-flash-bredouille {
color: var(--ui-gold-dark);
}
/* ── Game bottom strip — status, hints, buttons on cream ────────────── */
.game-bottom-strip {
background: var(--ui-parchment);
@ -2365,7 +2290,6 @@ a:hover { text-decoration: underline; }
/* Strip peg overrides */
.players-strip .peg-track { gap: 3px; direction: ltr; }
.players-strip .peg-hole { width: 12px; height: 12px; }
.players-strip .peg-hole.filled {
background: #5aab38; border-color: #3a7828;
box-shadow: 0 0 5px rgba(90,171,56,0.55);