new log fixes

src/background/onLabel/MatchGameRoomStateChangedEvent.ts

@@ -87,6 +87,8 @@ export default function onLabelMatchGameRoomStateChangedEvent(
 
   // Now only when a match begins
   if (gameRoom.stateType == "MatchGameRoomStateType_Playing") {
+    globalStore.currentActionLog.lines = [];
+    globalStore.currentActionLog.players = [];
     actionLog({
       seat: -1,
       type: "START",

src/components/action-log-v2/LineAbility.tsx

@@ -5,11 +5,11 @@ import { ActionLogLineProps } from "./types";
 export default function LineAbility(props: ActionLogLineProps) {
   const { line } = props;
 
-  if (line.type !== "ZONE_PUT") return <></>;
+  if (line.type !== "ABILITY") return <></>;
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         <LogCard grpId={line.sourceGrpId} />
         &apos;s&nbsp;
         {line.abilityId ? <LogAbility abId={line.abilityId} /> : "ability"}

src/components/action-log-v2/LineAttack.tsx

@@ -8,9 +8,9 @@ export default function LineAttack(props: ActionLogLineProps) {
   if (line.type !== "ATTACK") return <></>;
 
   return (
-    <div className="log-line">
+    <div className={`log-line seat-${line.seat}`}>
       {getPlayerBySeat(line.seat, players)}
-      &nbsp;attacked with &nbsp;
+      &nbsp;attacked with&nbsp;
       {line.grpIds.map((grpId, index) => {
         const len = line.grpIds.length;
         return (

src/components/action-log-v2/LineCast.tsx

@@ -11,7 +11,7 @@ export default function LineCast(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {playerName}&nbsp;cast&nbsp;
         {line.grpId ? <LogCard grpId={line.grpId} /> : "a spell"}
       </div>

src/components/action-log-v2/LineConceded.tsx

@@ -10,7 +10,9 @@ export default function LineConceded(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line result">{playerName}&nbsp;conceded.</div>
+      <div className={`log-line seat-${line.seat} result`}>
+        {playerName}&nbsp;conceded.
+      </div>
     </>
   );
 }

src/components/action-log-v2/LineCountered.tsx

@@ -9,7 +9,7 @@ export default function LineCountered(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {line.abilityId ? (
           <>
             <LogCard grpId={line.sourceGrpId} />

src/components/action-log-v2/LineDamageDealt.tsx

@@ -9,7 +9,7 @@ export default function LineDamageDealt(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         <LogCard grpId={line.sourceGrpId} />
         &nbsp;dealt&nbsp;{line.amount}&nbsp;damage to&nbsp;
         {line.targetType === "PLAYER" ? (

src/components/action-log-v2/LineDestroyed.tsx

@@ -9,7 +9,7 @@ export default function LineDestroyed(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {line.abilityId ? (
           <>
             <LogCard grpId={line.sourceGrpId} />

src/components/action-log-v2/LineDiscard.tsx

@@ -11,7 +11,7 @@ export default function LineDiscard(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {playerName}&nbsp;discarded&nbsp;
         {line.grpId ? <LogCard grpId={line.grpId} /> : "a card"}
       </div>

src/components/action-log-v2/LineDraw.tsx

@@ -11,7 +11,7 @@ export default function LineDraw(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {playerName}&nbsp;drew&nbsp;
         {line.grpId ? <LogCard grpId={line.grpId} /> : "a card"}
       </div>

src/components/action-log-v2/LineExile.tsx

@@ -9,7 +9,7 @@ export default function LineExile(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {line.abilityId ? (
           <>
             <LogCard grpId={line.sourceGrpId} />

src/components/action-log-v2/LineModifiedLife.tsx

@@ -0,0 +1,19 @@
+import getPlayerBySeat from "./getPlayerBySeat";
+import { ActionLogLineProps } from "./types";
+
+export default function LineModifiedLife(props: ActionLogLineProps) {
+  const { line, players } = props;
+
+  if (line.type !== "MODIFIED_LIFE") return <></>;
+
+  const playerName = getPlayerBySeat(line.seat || 0, players);
+
+  return (
+    <>
+      <div className={`log-line seat-${line.seat}`}>
+        {playerName}&nbsp;{line.delta < 0 ? "lost" : "gained"}&nbsp;
+        {Math.abs(line.delta)}&nbsp;life ({line.total}).
+      </div>
+    </>
+  );
+}

src/components/action-log-v2/LinePlay.tsx

@@ -11,7 +11,7 @@ export default function LinePlay(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {playerName}&nbsp;played&nbsp;
         {line.grpId ? <LogCard grpId={line.grpId} /> : "a land"}
       </div>

src/components/action-log-v2/LineTimedOut.tsx

@@ -10,7 +10,9 @@ export default function LineTimedOut(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line result">{playerName}&nbsp;timed out.</div>
+      <div className={`log-line seat-${line.seat} result`}>
+        {playerName}&nbsp;timed out.
+      </div>
     </>
   );
 }

src/components/action-log-v2/LineTurnInfo.tsx

@@ -1,3 +1,4 @@
+import { toMMSS } from "../../utils/dateTo";
 import getPlayerBySeat from "./getPlayerBySeat";
 import { ActionLogLineProps } from "./types";
 
@@ -11,15 +12,20 @@ const phasesMap: Record<string, string> = {
 };
 
 export default function LineTurnInfo(props: ActionLogLineProps) {
-  const { line, players } = props;
+  const { line, players, timeStart } = props;
 
   if (line.type !== "TURN_INFO") return <></>;
 
+  const timeDiff = toMMSS(Math.round((line.timestamp - timeStart) / 1000));
+
   return (
     <>
       {line.subType === "BEGIN" && (
         <div className="turn-info begin">
-          <div>Turn {line.turnNumber}</div>
+          <div>
+            Turn {line.turnNumber}
+            <span className="time">+{timeDiff}</span>
+          </div>
           <div className="name">
             {getPlayerBySeat(line.activePlayer || 0, players)}
           </div>

src/components/action-log-v2/LineWon.tsx

@@ -10,7 +10,9 @@ export default function LineWin(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line winner">{playerName}&nbsp;won!</div>
+      <div className={`log-line seat-${line.seat} winner`}>
+        {playerName}&nbsp;won!
+      </div>
     </>
   );
 }

src/components/action-log-v2/LineZonePut.tsx

@@ -9,7 +9,7 @@ export default function LineZonePut(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {line.abilityId ? (
           <>
             <LogCard grpId={line.sourceGrpId} />

src/components/action-log-v2/LineZoneReturn.tsx

@@ -9,7 +9,7 @@ export default function LineZoneReturn(props: ActionLogLineProps) {
 
   return (
     <>
-      <div className="log-line">
+      <div className={`log-line seat-${line.seat}`}>
         {line.abilityId ? (
           <>
             <LogCard grpId={line.sourceGrpId} />

src/components/action-log-v2/index.tsx

@@ -8,6 +8,7 @@ import LineDestroyed from "./LineDestroyed";
 import LineDiscard from "./LineDiscard";
 import LineDraw from "./LineDraw";
 import LineExile from "./LineExile";
+import LineModifiedLife from "./LineModifiedLife";
 import LinePlay from "./LinePlay";
 import LineTimedOut from "./LineTimedOut";
 import LineTurnInfo from "./LineTurnInfo";
@@ -66,6 +67,9 @@ function getLineComponent(type: ActionLogLineType) {
     case "ABILITY":
       lineComponent = LineAbility;
       break;
+    case "MODIFIED_LIFE":
+      lineComponent = LineModifiedLife;
+      break;
     case "DAMAGE_DEALT":
       lineComponent = LineDamageDealt;
       break;
@@ -109,6 +113,7 @@ export default function ActionLog(props: ActionLogProps): JSX.Element {
           <LineComponent
             key={`log-line-${line.timestamp}`}
             line={line}
+            timeStart={actionLog.lines[0].timestamp}
             players={actionLog.players}
           />
         );

src/components/action-log-v2/types.ts

@@ -199,4 +199,5 @@ export type ActionLogV2 = {
 export interface ActionLogLineProps {
   line: ActionLogLine;
   players: ActionLogPlayer[];
+  timeStart: number;
 }

src/components/views/history/MatchView.tsx

@@ -436,7 +436,7 @@ export default function MatchView(): JSX.Element {
 
         <Section
           style={{
-            padding: "16px 10px",
+            padding: "16px",
             maxHeight: "78px",
             flexDirection: "column",
             gridArea: "buttons",

src/info.json

@@ -1 +1 @@
-{"version":"6.5.3","branch":"action-logs-v2","timestamp":1704517285209}
+{"version":"6.5.3","branch":"action-logs-v2","timestamp":1704554092068}

src/scss/actionLog.scss

@@ -81,8 +81,29 @@
 
   .log-line {
     margin-top: 8px;
-    margin-left: 16px;
     display: flex;
+    font-family: var(--main-font-name-it);
+    flex-wrap: wrap;
+
+    &.seat-1 {
+      &::before {
+        margin-right: 8px;
+        content: "";
+        width: 5px;
+        background-color: var(--color-g);
+        border-radius: 0 3px 3px 0;
+      }
+    }
+
+    &.seat-2 {
+      &::before {
+        margin-right: 8px;
+        content: "";
+        width: 5px;
+        background-color: var(--color-r);
+        border-radius: 0 3px 3px 0;
+      }
+    }
   }
 
   .result {
@@ -107,6 +128,12 @@
     margin-top: 12px;
     display: flex;
     justify-content: space-between;
+    font-family: var(--sub-font-name-it);
+
+    .time {
+      color: var(--color-text-dark);
+      margin-left: 8px;
+    }
 
     .name {
       color: var(--color-text-dark);