poker-irongrid 1.3.0 → 1.4.0

package/README.md

@@ -85,6 +85,7 @@ npm install poker-irongrid
 | `defaultColor` | `string` | `'hsl(0, 0%, 100%)'` | Default background color for uncolored hands |
 | `defaultSelectedColor` | `string` | `'hsl(0, 0%, 85%)'` | Default color for selected hands without explicit color |
 | `evaluator` | `boolean` | `false` | Show hero's live equity against the hands on the grid (requires hero cards) |
+| `equityColors` | `boolean` | `true` | With `evaluator`, color villain hands by hero's equity against each combo: equal-width bands, one per color (`colors[0]` = hero's lowest equity). Hands you color yourself keep their color |
 | `subgrid` | `boolean` | `false` | Split the grid into 3x3 blocks (A–T, 9–6, 5–2) with space after the T and 6 rows/columns; spacing set by `--irongrid-subgrid-gap` (default `6px`) |
 | `preflopTableUrl` | `string \| null` | `null` | URL of poker-bitvaljs's `bench/preflop-table.bin` for exact preflop equity (Monte Carlo without it) |
 
@@ -222,7 +223,11 @@ When `evaluator={true}`, hero's equity is calculated live (asynchronously) whene
 board, dead cards or the hands on the grid change; there is no button to press.
 - The summary shows hero vs. villain equity against every selected or colored combo
 - The color buttons' **Eq** mode shows hero's equity against each color's hands
-- Both come from one poker-bitvaljs `compareRangeHands` call: exact on the flop, turn and river
+- With `equityColors` (default), the villain hands are colored by hero's equity against each combo, in
+  one equal-width band per color (6 colors: 0–16.7%, 16.7–33.3%, … 83.3–100%, `colors[0]` lowest), so the
+  color buttons show each band's count, share and equity. Hands you color yourself keep their color; band
+  colors follow the selection and go away without hero cards
+- All of it comes from one poker-bitvaljs `compareRangeHands` call: exact on the flop, turn and river
   (a few ms), Monte Carlo preflop and on 1-2 card boards
 - Pass `preflopTableUrl` for exact, near-instant preflop equity (the table is ~1.1 MB, fetched once):
 

package/dist/poker-grid/PokerGridManager.d.ts

@@ -244,22 +244,43 @@ export class PokerGridManager {
     /**
      * Hero's equity against the villain hands on the grid, overall and per color, from one
      * poker-bitvaljs compareRangeHands call (each villain combo's result against hero's hand).
-     * Villain hands are the combos that are selected or colored; hands holding a dead, board or
-     * hero card are left out.
+     * Villain hands are the combos that are selected or colored by hand (colors in `autoColors`, set by
+     * applyEquityBands, don't count); hands holding a dead, board or hero card are left out.
      * @param {Object} hands - Hands object
      * @param {string[]} heroCards - Hero cards (two)
      * @param {string[]} boardCards - Board cards (0-5)
      * @param {string[]} deadCards - Dead cards (may include hero and board cards)
      * @param {string[]} colors - Colors array
-     * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object}|null>}
-     *   Equities in percent (null when hero meets no villain combo); null without two hero cards.
+     * @param {Map<string, string>|null} autoColors - Colors applyEquityBands set (combo -> color)
+     * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object, byCombo: Object}|null>}
+     *   Equities in percent (null when hero meets no villain combo); byCombo is hero's equity against each
+     *   villain combo. Null without two hero cards.
      */
-    calculateEquity(hands?: any, heroCards?: string[], boardCards?: string[], deadCards?: string[], colors?: string[]): Promise<{
+    calculateEquity(hands?: any, heroCards?: string[], boardCards?: string[], deadCards?: string[], colors?: string[], autoColors?: Map<string, string> | null): Promise<{
         hero: number | null;
         villain: number | null;
         combos: number;
         byColor: any;
+        byCombo: any;
     } | null>;
+    /**
+     * Color villain combos by hero's equity against them: one equal-width band per color, colors[0] for
+     * hero's lowest equity (villain's strongest hands) up to the last color for hero's highest. With 6
+     * colors the bands are 0-16.7%, 16.7-33.3%, ... 83.3-100%.
+     * Only combos without a color, or still holding the color this method gave them, are recolored, so
+     * hand-applied colors stay. Colors this method set are removed from combos that are no longer in
+     * `byCombo` (deselected, dead, or no equity).
+     * @param {Object} hands - Hands object
+     * @param {Object} byCombo - Hero's equity (%) against each villain combo, from calculateEquity
+     * @param {string[]} colors - Colors, one per band
+     * @param {Map<string, string>} autoColors - Colors set by earlier calls (combo -> color)
+     * @returns {{hands: Object, autoColors: Map<string, string>, changed: boolean}}
+     */
+    applyEquityBands(hands: any, byCombo: any, colors: string[], autoColors?: Map<string, string>): {
+        hands: any;
+        autoColors: Map<string, string>;
+        changed: boolean;
+    };
     /**
      * Hero's equity against each color's hands, rounded (0 when a color has no hands).
      * @returns {Promise<Object>} Color equities object

package/dist/poker-grid/PokerGridManager.js

@@ -654,31 +654,38 @@ export class PokerGridManager {
   /**
    * Hero's equity against the villain hands on the grid, overall and per color, from one
    * poker-bitvaljs compareRangeHands call (each villain combo's result against hero's hand).
-   * Villain hands are the combos that are selected or colored; hands holding a dead, board or
-   * hero card are left out.
+   * Villain hands are the combos that are selected or colored by hand (colors in `autoColors`, set by
+   * applyEquityBands, don't count); hands holding a dead, board or hero card are left out.
    * @param {Object} hands - Hands object
    * @param {string[]} heroCards - Hero cards (two)
    * @param {string[]} boardCards - Board cards (0-5)
    * @param {string[]} deadCards - Dead cards (may include hero and board cards)
    * @param {string[]} colors - Colors array
-   * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object}|null>}
-   *   Equities in percent (null when hero meets no villain combo); null without two hero cards.
+   * @param {Map<string, string>|null} autoColors - Colors applyEquityBands set (combo -> color)
+   * @returns {Promise<{hero: number|null, villain: number|null, combos: number, byColor: Object, byCombo: Object}|null>}
+   *   Equities in percent (null when hero meets no villain combo); byCombo is hero's equity against each
+   *   villain combo. Null without two hero cards.
    */
-  async calculateEquity(hands = this.hands, heroCards = this.heroCards, boardCards = this.boardCards, deadCards = this.deadCards, colors = this.colors) {
+  async calculateEquity(hands = this.hands, heroCards = this.heroCards, boardCards = this.boardCards, deadCards = this.deadCards, colors = this.colors, autoColors = null) {
     if (heroCards?.length !== 2) return null;
     const board = boardCards || [];
     const otherDead = (deadCards || []).filter(card => !heroCards.includes(card) && !board.includes(card));
     const blocked = new Set([...heroCards, ...board, ...otherDead]);
 
+    const colorOf = (h) => (hands[h] || []).find(item => typeof item === 'string' && item.startsWith('hsl('));
+    const coloredByHand = (h) => {
+      const color = colorOf(h);
+      return !!color && !(autoColors && autoColors.get(h) === color);
+    };
     const villainHands = Object.keys(hands || {}).filter(h =>
       isCombo(h) &&
-      (this.hasExplicitColor(hands[h]) || this.isSelected(hands[h])) &&
+      (coloredByHand(h) || this.isSelected(hands[h])) &&
       !blocked.has(h.substring(0, 2)) && !blocked.has(h.substring(2, 4))
     );
 
     const byColor = {};
     (colors || []).forEach(c => { byColor[c] = null; });
-    if (villainHands.length === 0) return { hero: null, villain: null, combos: 0, byColor };
+    if (villainHands.length === 0) return { hero: null, villain: null, combos: 0, byColor, byCombo: {} };
 
     // Preflop, wait for the table if one is loading (otherwise the result would be Monte Carlo)
     if (board.length === 0 && preflopTableLoad) await preflopTableLoad;
@@ -708,12 +715,59 @@ export class PokerGridManager {
     };
 
     const hero = heroEquityAgainst(villainHands);
+    const byCombo = {};
+    villainHands.forEach(h => { byCombo[h] = heroEquityAgainst([h]); });
     (colors || []).forEach(color => {
       const colorHands = villainHands.filter(h => hands[h].includes(color));
       byColor[color] = colorHands.length > 0 ? heroEquityAgainst(colorHands) : null;
     });
 
-    return { hero, villain: hero === null ? null : 100 - hero, combos: villainHands.length, byColor };
+    return { hero, villain: hero === null ? null : 100 - hero, combos: villainHands.length, byColor, byCombo };
+  }
+
+  /**
+   * Color villain combos by hero's equity against them: one equal-width band per color, colors[0] for
+   * hero's lowest equity (villain's strongest hands) up to the last color for hero's highest. With 6
+   * colors the bands are 0-16.7%, 16.7-33.3%, ... 83.3-100%.
+   * Only combos without a color, or still holding the color this method gave them, are recolored, so
+   * hand-applied colors stay. Colors this method set are removed from combos that are no longer in
+   * `byCombo` (deselected, dead, or no equity).
+   * @param {Object} hands - Hands object
+   * @param {Object} byCombo - Hero's equity (%) against each villain combo, from calculateEquity
+   * @param {string[]} colors - Colors, one per band
+   * @param {Map<string, string>} autoColors - Colors set by earlier calls (combo -> color)
+   * @returns {{hands: Object, autoColors: Map<string, string>, changed: boolean}}
+   */
+  applyEquityBands(hands, byCombo, colors, autoColors = new Map()) {
+    const next = new Map();
+    const newHands = { ...hands };
+    let changed = false;
+    const colorOf = (values) => (values || []).find(item => typeof item === 'string' && item.startsWith('hsl('));
+    const setColor = (h, color) => {
+      const kept = (newHands[h] || []).filter(item => !(typeof item === 'string' && item.startsWith('hsl(')));
+      newHands[h] = color ? [...kept, color] : kept;
+      changed = true;
+    };
+
+    if (colors && colors.length > 0) {
+      const bandWidth = 100 / colors.length;
+      Object.entries(byCombo || {}).forEach(([h, equity]) => {
+        if (equity === null || equity === undefined || Number.isNaN(equity)) return;
+        const current = colorOf(newHands[h]);
+        if (current && autoColors.get(h) !== current) return; // colored by hand
+        const color = colors[Math.min(colors.length - 1, Math.floor(equity / bandWidth))];
+        next.set(h, color);
+        if (current !== color) setColor(h, color);
+      });
+    }
+
+    // Combos that lost their equity color (no longer villain hands, or no equity)
+    autoColors.forEach((color, h) => {
+      if (next.has(h) || !newHands[h]) return;
+      if (colorOf(newHands[h]) === color) setColor(h, null);
+    });
+
+    return { hands: changed ? newHands : hands, autoColors: next, changed };
   }
 
   /**

package/dist/poker-grid/components/Grid.svelte

@@ -29,6 +29,20 @@
     return index + 1 + (split ? (index >= 5 ? 1 : 0) + (index >= 9 ? 1 : 0) : 0);
   }
 
+  /**
+   * Hairline frame around each 3x3 block (subgrid): inset shadows on the block's edge cells, so cells stay
+   * flush with their neighbours and only the blocks are outlined.
+   */
+  function blockFrame(row, col, split) {
+    if (!split) return '';
+    const shadows = [];
+    if (row === 0 || row === 5 || row === 9) shadows.push(`inset 0 var(--irongrid-border-width) 0 var(--irongrid-color-border)`);
+    if (row === 4 || row === 8 || row === 12) shadows.push(`inset 0 calc(-1 * var(--irongrid-border-width)) 0 var(--irongrid-color-border)`);
+    if (col === 0 || col === 5 || col === 9) shadows.push(`inset var(--irongrid-border-width) 0 0 var(--irongrid-color-border)`);
+    if (col === 4 || col === 8 || col === 12) shadows.push(`inset calc(-1 * var(--irongrid-border-width)) 0 0 var(--irongrid-color-border)`);
+    return shadows.length ? `box-shadow: ${shadows.join(', ')};` : '';
+  }
+
   /** The grid cell under a point (or null), from the cells' own positions, so it works with any spacing. */
   function cellAtPoint(gridElement, x, y) {
     const cells = gridElement.querySelectorAll('[data-row]');
@@ -431,7 +445,7 @@
           <button
             type="button"
             class="grid-cell {isDragging ? 'dragging' : ''} {interactive ? '' : showTips ? 'non-interactive show-tips' : 'non-interactive'}"
-            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
+            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)}; {blockFrame(rowIndex, colIndex, subgrid)}"
             data-row={rowIndex}
             data-col={colIndex}
             onclick={(e) => handleClick(e, cellInfo)}
@@ -446,7 +460,7 @@
         {:else}
           <div
             class="grid-cell non-interactive"
-            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)};"
+            style="background: {gradients[cellInfo.hand]} !important; grid-row: {gridLine(rowIndex, subgrid)}; grid-column: {gridLine(colIndex, subgrid)}; {blockFrame(rowIndex, colIndex, subgrid)}"
             data-row={rowIndex}
             data-col={colIndex}
             role="presentation"

package/dist/poker-grid/components/PokerGridPanel.svelte

@@ -37,6 +37,11 @@
    * Without it, preflop equity is a Monte Carlo estimate.
    */
   export let preflopTableUrl = null;
+  /**
+   * With `evaluator`, color the villain hands by hero's equity against each combo: one equal-width band per
+   * color (colors[0] = hero's lowest equity). Hands you color yourself keep their color.
+   */
+  export let equityColors = true;
   $: if (evaluator && preflopTableUrl) loadPreflopTable(preflopTableUrl);
   /** Predefined ranges for range selection. Array of {name: string, abbreviation: string} */
   export let ranges = [];
@@ -113,27 +118,49 @@
   let lastEquityKey = '';
 
   $: equityKey = evaluator
-    ? JSON.stringify({ heroCards, boardCards, deadCards, hands: visibleHands, colors })
+    ? JSON.stringify({ heroCards, boardCards, deadCards, hands: visibleHands, colors, equityColors })
     : '';
   $: if (equityKey !== lastEquityKey) {
     lastEquityKey = equityKey;
     scheduleEquity();
   }
 
+  /** Colors set by equity banding (combo -> color), so they can be updated or removed later. */
+  let autoColors = new Map();
+
+  /** Apply (or, with no equity, remove) the equity band colors. */
+  function applyEquityColors(byCombo) {
+    if (!equityColors && autoColors.size === 0) return;
+    const result = manager.applyEquityBands(internalHands, equityColors ? byCombo || {} : {}, colors, autoColors);
+    autoColors = result.autoColors;
+    if (result.changed) {
+      internalHands = result.hands;
+      hands = result.hands;
+      dispatch('selectionChange', { hands: result.hands, visibleHands });
+    }
+  }
+
   function scheduleEquity() {
     clearTimeout(equityTimer);
     const request = ++equityRequest;
     if (!evaluator || heroCards?.length !== 2) {
       equity = null;
       equityPending = false;
+      // Remove the band colors outside this reactive update (as results are applied, after it)
+      equityTimer = setTimeout(() => {
+        if (request === equityRequest) applyEquityColors(null);
+      }, 0);
       return;
     }
     equityPending = true;
     // A short debounce coalesces bursts (typing cards, dragging across the grid)
     equityTimer = setTimeout(async () => {
       try {
-        const result = await manager.calculateEquity(visibleHands, heroCards, boardCards, deadCards, colors);
-        if (request === equityRequest) equity = result;
+        const result = await manager.calculateEquity(visibleHands, heroCards, boardCards, deadCards, colors, autoColors);
+        if (request === equityRequest) {
+          equity = result;
+          applyEquityColors(result?.byCombo);
+        }
       } catch (error) {
         if (request === equityRequest) equity = null;
       } finally {
@@ -315,6 +342,7 @@
       on:clearAll={() => {
         internalHands = {};
         hands = {};
+        autoColors = new Map();
       }}
     />
   </div>

package/dist/poker-grid/components/PokerGridPanel.svelte.d.ts

@@ -19,13 +19,14 @@ type PokerGridPanel = SvelteComponent<{
     showControls?: boolean;
     showSummary?: boolean;
     preflopTableUrl?: any;
+    equityColors?: boolean;
     initialHands?: any;
     initialBoard?: any;
     initialDead?: any;
 }, {
     cellClick: CustomEvent<any>;
-    rangeSelected: CustomEvent<any>;
     selectionChange: CustomEvent<any>;
+    rangeSelected: CustomEvent<any>;
     deadCardsChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -52,13 +53,14 @@ declare const PokerGridPanel: $$__sveltets_2_IsomorphicComponent<{
     showControls?: boolean;
     showSummary?: boolean;
     preflopTableUrl?: any;
+    equityColors?: boolean;
     initialHands?: any;
     initialBoard?: any;
     initialDead?: any;
 }, {
     cellClick: CustomEvent<any>;
-    rangeSelected: CustomEvent<any>;
     selectionChange: CustomEvent<any>;
+    rangeSelected: CustomEvent<any>;
     deadCardsChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "poker-irongrid",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/DarraghGeo/poker-irongrid.git"