Refined how MessageBar displays system events

predatorray · Dec 10, 2024 · 60fc7f7 · 60fc7f7
1 parent e86e35c
commit 60fc7f7
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 20 deletions.
diff --git a/src/App.css b/src/App.css
@@ -504,6 +504,11 @@
   justify-content: flex-end;
 }
 
+.message-bar .message .private-message {
+  margin-left: 2px;
+  color: #666;
+}
+
 .message-bar .message .card-char {
   font-size: 30px;
   color: black;
@@ -524,8 +529,20 @@
   margin-bottom: 5px;
 }
 
-.message-bar .message .message-text {
-  margin-left: 4px;
+.message-bar .message.system-notification {
+  justify-content: center;
+  font-size: 10px;
+  color: #666;
+}
+
+.message-bar .message.system-notification::before {
+  content: '(';
+  margin-right: auto;
+}
+
+.message-bar .message.system-notification::after {
+  content: ')';
+  margin-left: auto;
 }
 
 .message-bar .message-input {

diff --git a/src/components/MessageBar.tsx b/src/components/MessageBar.tsx
@@ -9,21 +9,24 @@ function EventOrMessage(props: {
   eventOrMessage: EventLog | Message;
 }) {
   const em = props.eventOrMessage;
+
+  const AvatarOrMe = (subProps: { whose: string }) => {
+    return subProps.whose === props.myPlayerId
+        ? <b>Me:&nbsp;</b>
+        : <><PlayerAvatar playerId={subProps.whose}/>:&nbsp;</>
+  }
+
   switch (em.type) {
     case 'message':
       return (
         <div className={em.whose === props.myPlayerId ? "message mime" : "message"}>
-          {
-            em.whose === props.myPlayerId
-              ? <b>Me:</b>
-              : <><PlayerAvatar playerId={em.whose}/>:</>
-          }
+          <AvatarOrMe whose={em.whose}/>
           <div className="message-text">{em.text}</div>
         </div>
       );
     case 'board':
       return (
-        <div className="message">
+        <div className="message system-notification">
           <b>Board:</b> {
             em.board
               .map(card => {
@@ -35,18 +38,44 @@ function EventOrMessage(props: {
       );
     case 'hole':
       return (
-        <div className="message">
-          <PlayerAvatar playerId={em.playerId} />: {
-          em.hole
-            .map(card => {
-              const cardUnicode = convertToUnicode(card);
-              return <span className={`card-char ${card.suit.toLowerCase()}`}>{cardUnicode}</span>
-            })
-        }
+        <div className={em.playerId === props.myPlayerId ? "message mime system-notification" : "message system-notification"}>
+          <AvatarOrMe whose={em.playerId}/> {
+            em.hole
+              .map(card => {
+                const cardUnicode = convertToUnicode(card);
+                return <span className={`card-char ${card.suit.toLowerCase()}`}>{cardUnicode}</span>
+              })
+          }
+          {
+            props.myPlayerId === em.playerId && <i className="private-message">(private)</i>
+          }
+        </div>
+      );
+    case 'newRound':
+      return (
+        <div className="message system-notification">Round {em.round} started</div>
+      );
+    case 'raise':
+      return (
+        <div className={em.playerId === props.myPlayerId ? "message mime system-notification" : "message system-notification"}>
+          <AvatarOrMe whose={em.playerId}/>raised / called ${em.raisedAmount}
+          {
+            em.allin && <b>&nbsp;ALL-IN</b>
+          }
+        </div>
+      );
+    case 'fold':
+      return (
+        <div className={em.playerId === props.myPlayerId ? "message mime system-notification" : "message system-notification"}>
+          <AvatarOrMe whose={em.playerId}/>fold
+        </div>
+      );
+    case 'check':
+      return (
+        <div className={em.playerId === props.myPlayerId ? "message mime system-notification" : "message system-notification"}>
+          <AvatarOrMe whose={em.playerId}/>checked
         </div>
       );
-    case "newRound":
-      return <></>; // TODO
   }
 }
 
@@ -99,7 +128,7 @@ export default function MessageBar(props: {
       return;
     }
     messagesDiv.scrollTo(0, messagesDiv.scrollHeight);
-  }, [messages]);
+  }, [messages, eventLogs]);
 
   return (
     <div className={collapsed ? "message-bar collapsed" :  "message-bar"}>

diff --git a/src/lib/texas-holdem/useEventLogs.ts b/src/lib/texas-holdem/useEventLogs.ts
@@ -23,10 +23,34 @@ export interface BoardEventLog {
   timestamp: number;
 }
 
+export interface CheckEventLog {
+  type: 'check';
+  playerId: string;
+  timestamp: number;
+}
+
+export interface RaiseEventLog {
+  type: 'raise';
+  playerId: string;
+  raisedAmount: number;
+  allin: boolean;
+  timestamp: number;
+}
+
+export interface FoldEventLog {
+  type: 'fold';
+  playerId: string;
+  timestamp: number;
+}
+
 export type EventLog =
   | NewRoundEventLog
   | HoleEventLog
-  | BoardEventLog;
+  | BoardEventLog
+  | CheckEventLog
+  | RaiseEventLog
+  | FoldEventLog
+;
 
 export type EventLogs = EventLog[];
 
@@ -80,5 +104,43 @@ export default function useEventLogs(): EventLogs {
     };
   }, [appendLog]);
 
+  useEffect(() => {
+    const betListener: TexasHoldemGameRoomEvents['bet'] = (round, amount, who, allin) => {
+      if (amount === 0) {
+        appendLog({
+          type: 'check',
+          playerId: who,
+          timestamp: Date.now(),
+        });
+      } else {
+        appendLog({
+          type: 'raise',
+          raisedAmount: amount,
+          playerId: who,
+          allin,
+          timestamp: Date.now(),
+        });
+      }
+    };
+    TexasHoldem.listener.on('bet', betListener);
+    return () => {
+      TexasHoldem.listener.off('bet', betListener);
+    };
+  }, [appendLog]);
+
+  useEffect(() => {
+    const foldListener: TexasHoldemGameRoomEvents['fold'] = (round, who) => {
+      appendLog({
+        type: 'fold',
+        playerId: who,
+        timestamp: Date.now(),
+      });
+    };
+    TexasHoldem.listener.on('fold', foldListener);
+    return () => {
+      TexasHoldem.listener.off('fold', foldListener);
+    };
+  }, [appendLog]);
+
   return logs;
 }