Merge pull request #531 from Kaggle/repeated-poker-moar-tweaks

[Repeated Poker] Minor style improvements, better labels, and hand tracking

Author: develra

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/default/src/main.ts

@@ -1,4 +1,4 @@
-import { Player, GameAdapter, ReplayData, ChessStep } from '@kaggle-environments/core';
+import { createReplayVisualizer, GameAdapter, ReplayData, ChessStep } from '@kaggle-environments/core';
 import { renderer } from './chess_renderer';
 import { render } from 'preact';
 
@@ -48,5 +48,10 @@ class LegacyAdapter implements GameAdapter {
 
 const app = document.getElementById('app');
 if (app) {
-  new Player(app, new LegacyAdapter());
+  // Set up an HMR boundary for development
+  if (import.meta.env?.DEV && import.meta.hot) {
+    import.meta.hot.accept();
+  }
+
+  createReplayVisualizer(app, new LegacyAdapter());
 }

kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/repeated_poker_renderer.ts

@@ -344,23 +344,10 @@ export function renderer(options: RendererOptions): void {
   function _renderPokerTableUI(data: RepeatedPokerStep): void {
     if (!elements.pokerTable || !data || !elements.legend) return;
 
-    // TODO: [TYPE_MISMATCH] The 'RepeatedPokerStep' type is missing many properties
-    // that the original JS code expects.
-    const {
-      players, // This exists in BaseGameStep
-      communityCards, // This is a string in RepeatedPokerStep, but JS expects string[]
-      stepType,
-      pot,
-      winOdds,
-      bestFiveCardHands,
-      bestHandRankTypes,
-    } = data;
+    const { players, communityCards, stepType, pot, winOdds, bestFiveCardHands, bestHandRankTypes, currentHandIndex } =
+      data;
 
     // TODO: [TYPE_MISMATCH] Manually defining missing properties from the type.
-    const isTerminal = false; // 'isTerminal' is not in RepeatedPokerStep
-    const handCount = 0; // 'handCount' is not in RepeatedPokerStep
-    const winProb = winOdds; // 'winProb' is not in type, mapping 'winOdds'
-    const handRank = bestHandRankTypes;
     const leaderInfo: any = null; // 'leaderInfo' is not in type. Using 'any' to allow compilation.
 
     // Update legend
@@ -372,7 +359,7 @@ export function renderer(options: RendererOptions): void {
     legendTitle.innerHTML = ''; // Clear existing content
 
     const handSpan = document.createElement('span');
-    handSpan.textContent = `Hand: ${handCount !== undefined && handCount !== null ? handCount + 1 : 'Standby'}`;
+    handSpan.textContent = `Hand: ${currentHandIndex != null ? currentHandIndex + 1 : 'Standby'}`;
     legendTitle.appendChild(handSpan);
 
     if (leaderInfo) {
@@ -481,7 +468,7 @@ export function renderer(options: RendererOptions): void {
         playerCardsContainer.innerHTML = '';
 
         // In heads-up, we show both hands at the end.
-        const showCards = isTerminal || (playerData.cards && !playerData.cards.includes(null!));
+        const showCards = playerData.cards && !playerData.cards.includes(null!);
 
         // TODO: [TYPE_MISMATCH] 'playerData.cards' is a string, but code expects an array - move this to the transformer
         const playerCardsArray = playerData.cards ? playerData.cards.match(/.{1,2}/g) : [null, null];
@@ -543,27 +530,28 @@ export function renderer(options: RendererOptions): void {
           }
         }
 
-        // TODO: swap this out bestHandRankType
         const handRankElement = playerInfoArea.querySelector('.player-hand-rank') as HTMLElement;
-        if (handRankElement && handRank && handRank[index]) {
-          handRankElement.textContent = handRank[index];
+        if (handRankElement && bestHandRankTypes && bestHandRankTypes[index]) {
+          handRankElement.textContent = bestHandRankTypes[index];
         } else if (handRankElement) {
           handRankElement.textContent = '';
         }
 
         const playerOddsElement = playerInfoArea.querySelector('.player-odds') as HTMLElement;
-        if (playerOddsElement && winProb && winProb[index] && !isTerminal) {
-          let oddsString = `WIN: ${winProb[index].toLocaleString(undefined, {
+        // WinOdds is an array like [P0WinOdds, P0TieOdds, P1WinOdds, P1TieOdds] - our index is either 0 or 1, so
+        // for the P1 case just set the index to 2
+        const winOddsIndex = index === 0 ? 0 : 2;
+        if (playerOddsElement && winOdds && winOdds[winOddsIndex] != undefined) {
+          const winOddsStringForPlayer = `WIN: ${winOdds[winOddsIndex].toLocaleString(undefined, {
+            style: 'percent',
+            minimumFractionDigits: 2,
+          })}`;
+          const tieOddsStringForPlayer = `TIE: ${winOdds[winOddsIndex + 1].toLocaleString(undefined, {
             style: 'percent',
             minimumFractionDigits: 2,
           })}`;
 
-          if (winProb[index + 2]) {
-            oddsString = `${oddsString} · TIE: ${winProb[index + 1].toLocaleString(undefined, {
-              style: 'percent',
-              minimumFractionDigits: 2,
-            })}`;
-          }
+          const oddsString = `${winOddsStringForPlayer} · ${tieOddsStringForPlayer}`;
 
           playerOddsElement.textContent = oddsString;
         } else if (playerOddsElement) {

pnpm-lock.yaml

@@ -33,6 +33,7 @@ const defaultGetGameStepDescription = (gameStep: BaseGameStep) => {
 export const processEpisodeData = (environment: any, gameName: string): BaseGameStep[] => {
   switch (gameName) {
     case 'repeated_poker':
+      console.log('trasnsforming the entire thing');
       return repeatedPokerTransformerV2(environment);
     case 'chess':
       return chessTransformer(environment);

web/core/src/transformers.ts

@@ -1,9 +1,9 @@
-import { RepeatedPokerStep } from '../v2/poker-steps-types';
+import { RepeatedPokerStep, RepeatedPokerStepPlayer } from '../v2/poker-steps-types';
 import { getActionStringsFromACPC } from './buildTimeline';
 
 // const _parseRoundState = (currentStateHistory: string) => {
 //   const currentState = JSON.parse(JSON.parse(currentStateHistory).current_universal_poker_json).acpc_state;
-// 
+//
 //   /**
 //    * Example lines:
 //    * STATE:0:r5c/cr9c/:Ks4s|5hAs/2dJs7s/Qh
@@ -14,13 +14,13 @@ import { getActionStringsFromACPC } from './buildTimeline';
 //     return '';
 //   }
 //   const stateParts = lines[0].split(':');
-// 
+//
 //   const currentCardString = stateParts[stateParts.length - 1]; // example: "6cKd|AsJc/7hQh6d/2c"
 //   // Grab the hand and board blocks
 //   const currentCardSegments = currentCardString.split('|');
 //   // Split card string by '/' to separate hand and board blocks
 //   const currentCommunitySegments = currentCardSegments.length > 1 ? currentCardSegments[1].split('/') : [];
-// 
+//
 //   if (currentCommunitySegments.length === 2) {
 //     return '### Flop';
 //   } else if (currentCommunitySegments.length === 3) {
@@ -32,7 +32,6 @@ import { getActionStringsFromACPC } from './buildTimeline';
 //   }
 // };
 
-
 const _isStateHistoryAgentAction = (stateHistoryEntry: string): boolean =>
   JSON.parse(JSON.parse(stateHistoryEntry).current_universal_poker_json).current_player !== -1;
 const _isStateHistoryEntryInitial = (stateHistoryEntry: string): boolean => {
@@ -192,13 +191,13 @@ const _getEndCondition = (
       // for now, fold + tie = impossible state
       handConclusion: 'fold',
       winner: -1,
-      bestFiveCardHands: []
+      bestFiveCardHands: [],
     };
   }
   let next_prev_universal_poker_json = {
     acpc_state: '',
     best_five_card_hands: ['', ''],
-    best_hand_rank_types: ['', '']
+    best_hand_rank_types: ['', ''],
   };
   // since the current_universal_poker_json does not contain the end move in it's history,
   // we need to go to the prev_universal_poker_json of the next one
@@ -216,70 +215,75 @@ const _getEndCondition = (
   if (moves.pop() === 'f') {
     return {
       handConclusion: 'fold',
-      winner: current_player === 0 ? 1 : 0
+      winner: current_player === 0 ? 1 : 0,
     };
   }
   // Showdown case
   return {
     handConclusion: 'showdown',
     winner: current_player === 0 ? 1 : 0,
     bestFiveCardHands: next_prev_universal_poker_json.best_five_card_hands,
-    bestHandRankType: next_prev_universal_poker_json.best_hand_rank_types
+    bestHandRankType: next_prev_universal_poker_json.best_hand_rank_types,
   };
 };
 
 export const getPokerStepLabel = (gameStep: RepeatedPokerStep) => {
-  let pokerStepLabel = `TODO - label ${gameStep.stepType}`;
-  if(gameStep.stepType === 'player-action') {
-    pokerStepLabel = gameStep.players[gameStep.currentPlayer].actionDisplayText ?? "";
+  const currentHandNumber = gameStep.currentHandIndex + 1;
+  switch (gameStep.stepType) {
+    case 'player-action':
+      return `**Decision**: ${gameStep.players[gameStep.currentPlayer].actionDisplayText ?? ''}`;
+    case 'deal-player-hands':
+      return `**Hand ${currentHandNumber}**: Dealing...`;
+    case 'deal-flop':
+      return `**Hand ${currentHandNumber}**: Flop`;
+    case 'deal-turn':
+      return `**Hand ${currentHandNumber}**: Turn`;
+    case 'deal-river':
+      return `**Hand ${currentHandNumber}**: River`;
+    case 'big-blind-post':
+      return `**Hand ${currentHandNumber}**: Post Big Blind`;
+    case 'small-blind-post':
+      return `**Hand ${currentHandNumber}**: Post Small Blind`;
+    case 'final': {
+      const winningPlayer = (gameStep.players as RepeatedPokerStepPlayer[]).find((p) => p.isWinner);
+      return `**Hand ${currentHandNumber}**: 🎉 ${winningPlayer?.name} wins ${winningPlayer?.reward}! 🎉`;
+    }
+    default: {
+      // If you missed a case, TypeScript will complain here because
+      // it cannot assign the missed type to 'never'.
+      const _exhaustiveCheck: never = gameStep.stepType;
+      return `Unknown step: ${_exhaustiveCheck}`;
+    }
   }
-
-  return pokerStepLabel;
 };
 
 export const getPokerStepDescription = (gameStep: RepeatedPokerStep) => {
-  let pokerStepDescription = `TODO - description ${gameStep.stepType}`;
-  if(gameStep.stepType === 'player-action') {
-    pokerStepDescription = gameStep.players[gameStep.currentPlayer].thoughts ?? "";
-  }
-
-  return pokerStepDescription;
-
-  /* if (gameStep.step?.action?.thoughts) {
-    return gameStep.step.action.thoughts;
-  } else if (gameStep.isEndState && gameStep.winner !== undefined) {
-    if (gameStep.winner === -1) {
-      return `
-### ${playerNames.join(' and ')} tie
-`;
-    }
-
-    const loser = gameStep.winner.toString() === '0' ? 1 : 0;
-    if (gameStep.handConclusion === 'showdown') {
-      return `
-###🎉 ${playerNames[gameStep.winner]} wins round ${gameStep.hand + 1}
-#### ${gameStep.bestHandRankType?.join(' and ')}
-`;
-    } else {
-      return `
-###🎉 ${playerNames[gameStep.winner]} wins round ${gameStep.hand + 1}
-#### ${playerNames[loser]} folds
-`;
+  switch (gameStep.stepType) {
+    case 'player-action':
+      return gameStep.players[gameStep.currentPlayer].thoughts ?? '';
+    case 'deal-player-hands':
+      return '';
+    case 'deal-flop':
+      return '';
+    case 'deal-turn':
+      return '';
+    case 'deal-river':
+      return '';
+    case 'big-blind-post':
+      return '';
+    case 'small-blind-post':
+      return '';
+    case 'final':
+      return '';
+    default: {
+      // If you missed a case, TypeScript will complain here because
+      // it cannot assign the missed type to 'never'.
+      const _exhaustiveCheck: never = gameStep.stepType;
+      return `Unknown step: ${_exhaustiveCheck}`;
     }
   }
-
-  return _parseRoundState(gameStep.stateHistory); */
-  return 'TODO - get Step Description if needed'
 };
 
-/* interface TimelineEvent {
-  stateIndex: number | undefined;
-  highlightPlayer: number | null;
-  actionText: string;
-  hideHoleCards: boolean;
-  hideCommunity: boolean;
-} */
-
 export const getPokerStepsWithEndStates = (environment: any): any[] => {
   const stepsWithEndStates: any[] = [];
   let handCount = 0;
@@ -379,7 +383,7 @@ export const getPokerStepsWithEndStates = (environment: any): any[] => {
             actingPlayer,
             actingPlayerName: getPlayerName(actingPlayer),
             currentPlayer,
-            currentPlayerName: getPlayerName(currentPlayer)
+            currentPlayerName: getPlayerName(currentPlayer),
           });
 
           lastActionPointer = preActionPointer;
@@ -403,7 +407,7 @@ export const getPokerStepsWithEndStates = (environment: any): any[] => {
               actingPlayer,
               actingPlayerName: getPlayerName(actingPlayer),
               currentPlayer: postActionCurrentPlayer,
-              currentPlayerName: getPlayerName(postActionCurrentPlayer)
+              currentPlayerName: getPlayerName(postActionCurrentPlayer),
             });
           }
 
@@ -437,7 +441,7 @@ export const getPokerStepsWithEndStates = (environment: any): any[] => {
         stateHistoryIndex: lastActionPointer,
         currentPlayer: endStateCurrentPlayer,
         currentPlayerName: getPlayerName(endStateCurrentPlayer),
-        ...endState
+        ...endState,
       });
 
       handCount++;
@@ -470,7 +474,7 @@ export const getPokerStepsWithEndStates = (environment: any): any[] => {
       // Return a new step with action strings added
       return {
         ...step,
-        actionText: nextPlayerIndex ? playerActionStrings[nextPlayerIndex] : undefined
+        actionText: nextPlayerIndex ? playerActionStrings[nextPlayerIndex] : undefined,
       };
     } catch (error) {
       console.error('Error adding action strings to step:', error);
@@ -539,5 +543,5 @@ export const getPokerStepsWithEndStates = (environment: any): any[] => {
 
 export const __testing = {
   _getMovesFromBettingStringACPC,
-  _getReadableMovesFromBettingStringACPC
+  _getReadableMovesFromBettingStringACPC,
 };

web/core/src/transformers/repeated_poker/v1/repeatedPokerTransformer.ts

@@ -1,4 +1,4 @@
-import { BaseGamePlayer, BaseGameStep } from "../../../types";
+import { BaseGamePlayer, BaseGameStep } from '../../../types';
 
 export type RepeatedPokerStepType =
   | 'small-blind-post'
@@ -18,6 +18,7 @@ export interface RepeatedPokerStep extends BaseGameStep {
   bestFiveCardHands: string[];
   bestHandRankTypes: string[];
   currentPlayer: number;
+  currentHandIndex: number;
 }
 
 export interface RepeatedPokerStepPlayer extends BaseGamePlayer {