add description in game actions table

stackrlabs · Aug 8, 2024 · a203391 · a203391
1 parent 29ee721
commit a203391
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/game/src/app/game/[slug]/page.tsx b/game/src/app/game/[slug]/page.tsx
@@ -202,7 +202,7 @@ export default function Game(props: GameProps) {
       </div>
       <div className="flex flex-1 flex-col w-full gap-4">
         <h1 className="text-2xl">Actions</h1>
-        <GameActions slug={slug} />
+        <GameActions slug={slug} white={w} black={b} />
       </div>
     </div>
   );

diff --git a/game/src/components/footer.tsx b/game/src/components/footer.tsx
@@ -7,7 +7,7 @@ export const Footer = () => {
   const { resolvedTheme } = useTheme();
   const image = resolvedTheme === "dark" ? "light" : "dark";
   return (
-    <footer className="flex items-center justify-center">
+    <footer className="flex items-center justify-center pt-6 pb-4">
       Powered By
       <Image
         src={`https://assets.stackrlabs.xyz/${image}.svg`}

diff --git a/game/src/components/game-actions/game-actions.tsx b/game/src/components/game-actions/game-actions.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { getGameActions } from "@/api/api";
+import { getGameActions, MRUAction } from "@/api/api";
 import L1Hash from "./l1-hash";
 import ViewMetadata from "./view-metadata";
 import {
@@ -14,13 +14,15 @@ import {
 import { formatAddress } from "@/lib/utils";
 import useSWR from "swr";
 
-const tableHeads = ["Action", "Player", "L1 & DA Stats"];
+const tableHeads = ["Action", "Player", "Description", "L1 & DA Stats"];
 
 interface GameActionsProps {
   slug: string;
+  white: string;
+  black: string;
 }
 
-export const GameActions = ({ slug }: GameActionsProps) => {
+export const GameActions = ({ slug, white, black }: GameActionsProps) => {
   const {
     data: mruActions = [],
     isLoading,
@@ -29,6 +31,27 @@ export const GameActions = ({ slug }: GameActionsProps) => {
     refreshInterval: 4000,
   });
 
+  const getActionSubtext = ({
+    name,
+    payload,
+  }: Pick<MRUAction, "name" | "payload">): string => {
+    let text = "...";
+    switch (name) {
+      case "createGame":
+        text = `Playing as white`;
+        break;
+      case "joinGame":
+        text = `Playing as black`;
+        break;
+      case "move":
+        text = `Played ${payload.move}`;
+        break;
+      default:
+        break;
+    }
+    return text;
+  };
+
   return (
     <Table className="overflow-y-scroll">
       {isLoading && <TableCaption>Loading game actions...</TableCaption>}
@@ -43,10 +66,15 @@ export const GameActions = ({ slug }: GameActionsProps) => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {mruActions.map(({ name, hash, msgSender, blockInfo }) => (
+        {mruActions.map(({ name, hash, payload, msgSender, blockInfo }) => (
           <TableRow key={hash} className="font-mono">
             <TableCell>{name}</TableCell>
-            <TableCell>{formatAddress(msgSender)}</TableCell>
+            <TableCell>
+              {formatAddress(msgSender)} ({msgSender === white ? "w" : "b"})
+            </TableCell>
+            <TableCell>
+              <i>{getActionSubtext({ name, payload })}</i>
+            </TableCell>
             <TableCell align="right">
               <div className="flex gap-2 content-center">
                 <L1Hash l1txHash={blockInfo?.l1TxHash as string} />