From 24fc1df1b92c3c9439b3bd8fb5a4043f64b7d5f1 Mon Sep 17 00:00:00 2001
From: Jessica Mulein <jessica@digitaldefiance.org>
Date: Wed, 23 Oct 2024 20:38:23 +0000
Subject: [PATCH] improve game log readability

---
 src/components/ColoredPlayerName.tsx | 29 ++++++++++++++++++++++++++++
 src/components/GameLogEntry.tsx      | 21 ++++++++++----------
 2 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ColoredPlayerName.tsx

diff --git a/src/components/ColoredPlayerName.tsx b/src/components/ColoredPlayerName.tsx
new file mode 100644
index 0000000..3c864ce
--- /dev/null
+++ b/src/components/ColoredPlayerName.tsx
@@ -0,0 +1,29 @@
+import { IPlayer } from '@/game/interfaces/player';
+import { Typography } from '@mui/material';
+import React from 'react';
+
+interface ColoredPlayerNameProps {
+  player: IPlayer;
+  marginDirection?: 'left' | 'right';
+}
+
+const ColoredPlayerName: React.FC<ColoredPlayerNameProps> = ({
+  player,
+  marginDirection = 'right',
+}) => {
+  return (
+    <Typography
+      component="span"
+      sx={{
+        color: player.color,
+        fontWeight: 'bold',
+        marginRight: marginDirection === 'right' ? '4px' : '0',
+        marginLeft: marginDirection === 'left' ? '4px' : '0',
+      }}
+    >
+      &lt;{player.name}&gt;
+    </Typography>
+  );
+};
+
+export default ColoredPlayerName;
diff --git a/src/components/GameLogEntry.tsx b/src/components/GameLogEntry.tsx
index ac8e8e9..6619410 100644
--- a/src/components/GameLogEntry.tsx
+++ b/src/components/GameLogEntry.tsx
@@ -24,6 +24,7 @@ import { canUndoAction, undoAction } from '@/game/dominion-lib-undo';
 import { getTimeSpanFromStartGame, logEntryToString } from '@/game/dominion-lib-log';
 import { GameLogActionWithCount } from '@/game/enumerations/game-log-action-with-count';
 import { AdjustmentActions } from '@/game/constants';
+import ColoredPlayerName from '@/components/ColoredPlayerName';
 
 interface GameLogEntryProps {
   logIndex: number;
@@ -66,6 +67,10 @@ const GameLogEntry: React.FC<GameLogEntryProps> = ({ logIndex, entry, isCurrentP
   const isNewTurn = entry.action === GameLogActionWithCount.NEXT_TURN;
   const isAttributeChange = AdjustmentActions.includes(entry.action);
   const isAttributeChangeOutOfTurn = isAttributeChange && !isActivePlayer;
+  const isNotTriggeredByPlayer = [
+    GameLogActionWithCount.SELECT_PLAYER,
+    GameLogActionWithCount.NEXT_TURN,
+  ].includes(entry.action);
 
   if (entry.playerIndex > -1 && !gameState.players[entry.playerIndex]) {
     console.warn(`Player not found for index ${entry.playerIndex}`, {
@@ -106,17 +111,8 @@ const GameLogEntry: React.FC<GameLogEntryProps> = ({ logIndex, entry, isCurrentP
               />
             )}
             <Box display="flex" alignItems="center" flexGrow={1}>
-              {relevantPlayer !== undefined && (
-                <Typography
-                  component="span"
-                  sx={{
-                    color: relevantPlayer.color,
-                    fontWeight: 'bold',
-                    marginRight: '4px',
-                  }}
-                >
-                  &lt;{relevantPlayer.name}&gt;:
-                </Typography>
+              {relevantPlayer !== undefined && !isNotTriggeredByPlayer && (
+                <ColoredPlayerName player={relevantPlayer} marginDirection="right" />
               )}
               <Typography
                 variant="body2"
@@ -128,6 +124,9 @@ const GameLogEntry: React.FC<GameLogEntryProps> = ({ logIndex, entry, isCurrentP
               >
                 {actionText}
               </Typography>
+              {isNotTriggeredByPlayer && relevantPlayer !== undefined && (
+                <ColoredPlayerName player={relevantPlayer} marginDirection="left" />
+              )}
               {isAttributeChangeOutOfTurn && (
                 <ChangeCircleIcon
                   fontSize="small"