From 44a479de707db8ebe62609efc7931a4a5e3f1e9a Mon Sep 17 00:00:00 2001 From: Wenhao Ji Date: Tue, 10 Dec 2024 19:38:00 -0800 Subject: [PATCH] Changed the system logs shown on message bar --- src/components/MessageBar.tsx | 57 ++++++------ .../texas-holdem/TexasHoldemGameRoom.test.ts | 4 +- src/lib/texas-holdem/TexasHoldemGameRoom.ts | 5 +- src/lib/texas-holdem/useEventLogs.ts | 93 ++++++++++--------- src/lib/texas-holdem/useTexasHoldem.ts | 4 +- 5 files changed, 83 insertions(+), 80 deletions(-) diff --git a/src/components/MessageBar.tsx b/src/components/MessageBar.tsx index 89cc61d..0a9334a 100644 --- a/src/components/MessageBar.tsx +++ b/src/components/MessageBar.tsx @@ -1,8 +1,8 @@ import {EventLog, EventLogs} from "../lib/texas-holdem/useEventLogs"; import {Message, Messages} from "../lib/useChatRoom"; import React, {useCallback, useEffect, useMemo, useRef, useState} from "react"; -import {convertToUnicode} from "../lib/rules"; import PlayerAvatar from "./PlayerAvatar"; +import {rankDescription} from "phe"; function EventOrMessage(props: { myPlayerId: string; @@ -24,33 +24,6 @@ function EventOrMessage(props: {
{em.text}
); - case 'board': - return ( -
- Board: { - em.board - .map(card => { - const cardUnicode = convertToUnicode(card); - return {cardUnicode} - }) - } -
- ); - case 'hole': - return ( -
- { - em.hole - .map(card => { - const cardUnicode = convertToUnicode(card); - return {cardUnicode} - }) - } - { - props.myPlayerId === em.playerId && (private) - } -
- ); case 'newRound': return (
Round {em.round} started
@@ -76,6 +49,34 @@ function EventOrMessage(props: { checked ); + case 'winner': + return ( +
+ { + em.result.how === 'LastOneWins' ? ( + <> + : won. + + ) : ( + <> + { + em.result.showdown[0].players.map(p => ) + } + : won ({rankDescription[em.result.showdown[0].handValue]}). + + ) + } +
+ ); + case 'fund': + return ( +
+ 's fund updated: ${em.currentAmount}  + {em.previousAmount && <> + ({(em.currentAmount - em.previousAmount >= 0) ? '+' : '-'}${Math.abs(em.currentAmount - em.previousAmount)}) + } +
+ ); } } diff --git a/src/lib/texas-holdem/TexasHoldemGameRoom.test.ts b/src/lib/texas-holdem/TexasHoldemGameRoom.test.ts index 7dafd14..d3663d5 100644 --- a/src/lib/texas-holdem/TexasHoldemGameRoom.test.ts +++ b/src/lib/texas-holdem/TexasHoldemGameRoom.test.ts @@ -88,14 +88,14 @@ describe('TexasHoldemGameRoom', () => { }); }); const fundOfAPromise = new Promise(resolve => { - texasHoldemGameRoom.listener.on('fund', (fund, whose) => { + texasHoldemGameRoom.listener.on('fund', (fund, previousFund, whose) => { if (whose === 'A') { resolve(fund); } }); }); const fundOfBPromise = new Promise(resolve => { - texasHoldemGameRoom.listener.on('fund', (fund, whose) => { + texasHoldemGameRoom.listener.on('fund', (fund, previousFund, whose) => { if (whose === 'B') { resolve(fund); } diff --git a/src/lib/texas-holdem/TexasHoldemGameRoom.ts b/src/lib/texas-holdem/TexasHoldemGameRoom.ts index a310a7f..5ade944 100644 --- a/src/lib/texas-holdem/TexasHoldemGameRoom.ts +++ b/src/lib/texas-holdem/TexasHoldemGameRoom.ts @@ -46,7 +46,7 @@ export interface TexasHoldemGameRoomEvents { whoseTurn: (round: number, whose: string | null, actionMeta?: {callAmount: number}) => void; allSet: (round: number) => void; - fund: (fund: number, whose: string) => void; + fund: (fund: number, previousFund: number | undefined, whose: string) => void; winner: (result: WinningResult) => void; } @@ -499,8 +499,9 @@ export class TexasHoldemGameRoom { } private updateFundOfPlayer(whose: string, amount: number) { + const previousAmount = this.funds.get(whose); this.funds.set(whose, amount); - this.emitter.emit('fund', amount, whose); + this.emitter.emit('fund', amount, previousAmount, whose); } private async continueUnlessAllSet(round: number, roundData: TexasHoldemRound, whosePreviousTurn: string) { diff --git a/src/lib/texas-holdem/useEventLogs.ts b/src/lib/texas-holdem/useEventLogs.ts index 56aacf9..eca89f9 100644 --- a/src/lib/texas-holdem/useEventLogs.ts +++ b/src/lib/texas-holdem/useEventLogs.ts @@ -1,7 +1,6 @@ -import {Board, Hole} from "../rules"; import {useCallback, useEffect, useState} from "react"; import {TexasHoldem} from "../setup"; -import {TexasHoldemGameRoomEvents} from "./TexasHoldemGameRoom"; +import {TexasHoldemGameRoomEvents, WinningResult} from "./TexasHoldemGameRoom"; export interface NewRoundEventLog { type: 'newRound' @@ -10,19 +9,6 @@ export interface NewRoundEventLog { timestamp: number; } -export interface HoleEventLog { - type: 'hole'; - playerId: string; - hole: Hole; - timestamp: number; -} - -export interface BoardEventLog { - type: 'board' - board: Board; - timestamp: number; -} - export interface CheckEventLog { type: 'check'; playerId: string; @@ -43,13 +29,27 @@ export interface FoldEventLog { timestamp: number; } +export interface WinnerEventLog { + type: 'winner'; + result: WinningResult; + timestamp: number; +} + +export interface FundEventLog { + type: 'fund'; + playerId: string; + previousAmount?: number; + currentAmount: number; + timestamp: number; +} + export type EventLog = | NewRoundEventLog - | HoleEventLog - | BoardEventLog | CheckEventLog | RaiseEventLog | FoldEventLog + | WinnerEventLog + | FundEventLog ; export type EventLogs = EventLog[]; @@ -75,35 +75,6 @@ export default function useEventLogs(): EventLogs { }; }, [appendLog]); - useEffect(() => { - const holeListener: TexasHoldemGameRoomEvents['hole'] = (round, whose, hole) => { - appendLog({ - type: 'hole', - playerId: whose, - hole, - timestamp: Date.now(), - }); - }; - TexasHoldem.listener.on('hole', holeListener); - return () => { - TexasHoldem.listener.off('hole', holeListener); - }; - }, [appendLog]); - - useEffect(() => { - const boardListener: TexasHoldemGameRoomEvents['board'] = (round, board) => { - appendLog({ - type: 'board', - board, - timestamp: Date.now(), - }); - }; - TexasHoldem.listener.on('board', boardListener); - return () => { - TexasHoldem.listener.off('board', boardListener); - }; - }, [appendLog]); - useEffect(() => { const betListener: TexasHoldemGameRoomEvents['bet'] = (round, amount, who, allin) => { if (amount === 0) { @@ -142,5 +113,35 @@ export default function useEventLogs(): EventLogs { }; }, [appendLog]); + useEffect(() => { + const winnerListener: TexasHoldemGameRoomEvents['winner'] = (result) => { + appendLog({ + type: 'winner', + result, + timestamp: Date.now(), + }); + }; + TexasHoldem.listener.on('winner', winnerListener); + return () => { + TexasHoldem.listener.off('winner', winnerListener); + }; + }, [appendLog]); + + useEffect(() => { + const fundListener: TexasHoldemGameRoomEvents['fund'] = (currentAmount, previousAmount, playerId) => { + appendLog({ + type: 'fund', + playerId, + currentAmount, + previousAmount, + timestamp: Date.now(), + }); + }; + TexasHoldem.listener.on('fund', fundListener); + return () => { + TexasHoldem.listener.off('fund', fundListener); + }; + }, [appendLog]); + return logs; } diff --git a/src/lib/texas-holdem/useTexasHoldem.ts b/src/lib/texas-holdem/useTexasHoldem.ts index 8f8bae0..87c73dc 100644 --- a/src/lib/texas-holdem/useTexasHoldem.ts +++ b/src/lib/texas-holdem/useTexasHoldem.ts @@ -2,7 +2,7 @@ import {useCallback, useEffect, useMemo, useState} from "react"; import {GameRoomStatus} from "../GameRoom"; import {TexasHoldem} from "../setup"; import {Board, Hole} from "../rules"; -import {WinningResult} from "./TexasHoldemGameRoom"; +import {TexasHoldemGameRoomEvents, WinningResult} from "./TexasHoldemGameRoom"; import { v4 as uuidv4 } from 'uuid'; function useMyPlayerId() { @@ -73,7 +73,7 @@ function useGameSetup() { function useBankrolls() { const [bankrolls, setBankrolls] = useState>(new Map()); useEffect(() => { - const fundListener = (fund: number, whose: string) => { + const fundListener: TexasHoldemGameRoomEvents['fund'] = (fund, previousFund, whose) => { setBankrolls(prev => { const newBankrolls = new Map(prev); newBankrolls.set(whose, fund);