diff --git a/JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml b/JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml index 56ea9ed..7b6ada2 100644 --- a/JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml +++ b/JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml @@ -153,6 +153,12 @@

Give each chip color a value, then count chips on a seat instead of typing a total.

+ + diff --git a/JoshHeaps.Net/wwwroot/css/casino/holdem.css b/JoshHeaps.Net/wwwroot/css/casino/holdem.css index 57b44ee..cbb7273 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/holdem.css +++ b/JoshHeaps.Net/wwwroot/css/casino/holdem.css @@ -1145,6 +1145,30 @@ button, line-height: 1.4; } +/* Each stack and the chips that make it, laid out like the shortcut legend below — + the thing being named on one line, the answer under it, so a dealer with a rack in + one hand reads down rather than across. */ +.colourUpList { + margin: 0.2rem 0 0; +} + +.colourUpWho { + color: #ddd; + font-size: 0.78rem; + font-variant-numeric: tabular-nums; +} + +.colourUpChips { + margin: 0 0 0.45rem; + color: #9fb8a6; + font-size: 0.74rem; + font-variant-numeric: tabular-nums; +} + +.colourUpChips:last-child { + margin-bottom: 0; +} + /* The shortcut legend. A touch device has no keys to press, so it doesn't get a panel telling it about them — the same pointer question the touch-target rules ask. */ @media (pointer: coarse) { diff --git a/JoshHeaps.Net/wwwroot/js/casino/holdem/render.js b/JoshHeaps.Net/wwwroot/js/casino/holdem/render.js index 6426453..87838cf 100644 --- a/JoshHeaps.Net/wwwroot/js/casino/holdem/render.js +++ b/JoshHeaps.Net/wwwroot/js/casino/holdem/render.js @@ -667,6 +667,49 @@ const Render = { list.appendChild(row); }); + + this.renderColourUp(); + }, + + // Each stack as the chips that make it. + // + // The legend has only ever read chips *into* an amount — counting what's in front + // of somebody. Colouring up at the end of a level is the same question backwards, + // and it's the one the dealer has to answer with a rack in one hand: $205 is four + // fifties and a five. So is counting a stack out for a player who's leaving. + // + // Only when there's a legend to work from and a stack to break down; a table that + // never set its chip colours up gets nothing, which is what it had before. + renderColourUp() { + const host = document.getElementById("colourUp"); + const list = document.getElementById("colourUpList"); + if (!host || !list) return; + + const legend = this.state.chipLegend || []; + const rows = this.state.seats + .map((player, index) => ({ player, index })) + .filter(({ player }) => Betting.round(Number(player.stack) || 0) > 0) + .map(({ player, index }) => ({ + name: HoldemState.displayName(player, index), + stack: Betting.round(Number(player.stack) || 0), + chips: Money.formatChipBreakdown(Number(player.stack) || 0, legend), + })) + .filter(row => row.chips); + + host.hidden = rows.length === 0; + if (host.hidden) return; + + list.innerHTML = ""; + rows.forEach(row => { + const term = document.createElement("dt"); + term.className = "colourUpWho"; + term.textContent = `${row.name} — ${Money.format(row.stack)}`; + const detail = document.createElement("dd"); + detail.className = "colourUpChips"; + detail.textContent = row.chips; + list.appendChild(term); + list.appendChild(detail); + }); }, // ---- Pot breakdown ----