Merge 16a8218 into ae8fc69

catanatron_core/catanatron/json.py

@@ -73,6 +73,7 @@ def default(self, obj):
                     {"coordinate": coordinate, "tile": self.default(tile)}
                     for coordinate, tile in obj.state.board.map.tiles.items()
                 ],
+                "adjacent_tiles": obj.state.board.map.adjacent_tiles,
                 "nodes": nodes,
                 "edges": list(edges.values()),
                 "actions": [self.default(a) for a in obj.state.actions],

ui/src/components/LeftDrawer.js

@@ -37,7 +37,7 @@ function DrawerContent({ gameState }) {
           .reverse()
           .map((action, i) => (
             <div key={i} className={cn("action foreground", action)}>
-              {humanizeAction(action, gameState.bot_colors)}
+              {humanizeAction(gameState, action)}
             </div>
           ))}
       </div>

ui/src/components/LeftDrawer.scss

@@ -4,7 +4,7 @@ $dark-divider: rgb(0 0 0 / 80%);
 
 .left-drawer {
   .MuiDrawer-paper {
-    width: 250px;
+    width: 280px;
     background: $dark-gray;
   }
 

ui/src/components/Prompt.js

@@ -3,7 +3,28 @@ import { isPlayersTurn } from "../utils/stateUtils";
 
 import "./Prompt.scss";
 
-export function humanizeAction(action, botColors) {
+function findTileByCoordinate(gameState, coordinate) {
+  for (const tile of Object.values(gameState.tiles)) {
+    if (JSON.stringify(tile.coordinate) == JSON.stringify(coordinate)) {
+      return tile;
+    }
+  }
+}
+
+function findTileById(gameState, tileId) {
+  return gameState.tiles[tileId];
+}
+
+function getTileString(tile) {
+  return `${tile.tile.number} ${tile.tile.resource}`;
+}
+
+function getShortTileString(tileTile) {
+  return tileTile.number || tileTile.type;
+}
+
+export function humanizeAction(gameState, action) {
+  const botColors = gameState.bot_colors;
   const player = botColors.includes(action[0]) ? "BOT" : "YOU";
   switch (action[1]) {
     case "ROLL":
@@ -16,12 +37,21 @@ export function humanizeAction(action, botColors) {
     case "BUILD_CITY": {
       const parts = action[1].split("_");
       const building = parts[parts.length - 1];
-      const tile = action[2];
-      return `${player} BUILT ${building} ON ${tile}`;
+      const tileId = action[2];
+      const tiles = gameState.adjacent_tiles[tileId];
+      const tileString = tiles.map(getShortTileString).join("-");
+      return `${player} BUILT ${building} ON ${tileString}`;
     }
     case "BUILD_ROAD": {
       const edge = action[2];
-      return `${player} BUILT ROAD ON ${edge}`;
+      const a = gameState.adjacent_tiles[edge[0]].map((t) => t.id);
+      const b = gameState.adjacent_tiles[edge[1]].map((t) => t.id);
+      const intersection = a.filter((t) => b.includes(t));
+      const tiles = intersection.map(
+        (tileId) => findTileById(gameState, tileId).tile
+      );
+      const edgeString = tiles.map(getShortTileString).join("-");
+      return `${player} BUILT ROAD ON ${edgeString}`;
     }
     case "PLAY_KNIGHT_CARD": {
       return `${player} PLAYED KNIGHT CARD`;
@@ -30,8 +60,9 @@ export function humanizeAction(action, botColors) {
       return `${player} YEAR OF PLENTY ${action[2]}`;
     }
     case "MOVE_ROBBER": {
-      const tile = action[2];
-      return `${player} ROBBED ${tile}`;
+      const tile = findTileByCoordinate(gameState, action[2][0]);
+      const tileString = getTileString(tile);
+      return `${player} ROBBED ${tileString} (STOLE ${action[2][2]})`;
     }
     case "MARITIME_TRADE": {
       const label = humanizeTradeAction(action);

ui/src/components/Snackbar.js

@@ -18,13 +18,10 @@ export const snackbarActions = (closeSnackbar) => (key) =>
   );
 
 export function dispatchSnackbar(enqueueSnackbar, closeSnackbar, gameState) {
-  enqueueSnackbar(
-    humanizeAction(gameState.actions.slice(-1)[0], gameState.bot_colors),
-    {
-      action: snackbarActions(closeSnackbar),
-      onClick: () => {
-        closeSnackbar();
-      },
-    }
-  );
+  enqueueSnackbar(humanizeAction(gameState, gameState.actions.slice(-1)[0]), {
+    action: snackbarActions(closeSnackbar),
+    onClick: () => {
+      closeSnackbar();
+    },
+  });
 }

ui/src/pages/GameScreen.scss

@@ -8,6 +8,12 @@ h6.MuiTypography-h6 {
   font-family: "Bungee Inline", sans-serif;
 }
 
+@media (min-width: 600px) {
+  #root .snackbar-container {
+    display: none;
+  }
+}
+
 // For Snackbar
 #root .snackbar-container {
   z-index: 1200;
@@ -90,6 +96,6 @@ main {
 
 @media (min-width: $md-breakpoint) {
   main {
-    padding-left: 250px;
+    padding-left: 280px;
   }
 }

ui/src/pages/ZoomableBoard.js

@@ -134,7 +134,7 @@ export default function ZoomableBoard({ replayMode }) {
 
   // TODO: Keep in sync with CSS
   const containerHeight = height - 144 - 38 - 40;
-  const containerWidth = matches ? width - 250 : width;
+  const containerWidth = matches ? width - 280 : width;
   const center = [containerWidth / 2, containerHeight / 2];
   const size = computeDefaultSize(containerWidth, containerHeight);