ui/api/game.api.ts

@@ -1,18 +1,20 @@
 import wretch from "wretch";
 import { Cell } from "../types";
 
-const USER_ID_HEADER = 'Player-id';
+const USER_ID_HEADER = "Player-id";
 
 export const fetchGameState = async (
   playerId: string,
   gameId: number
-): Promise<Cell[]> => {
+): Promise<{ cells: Cell[]; cellWidth: number }> => {
-  const response = await wretch(`/game/${gameId}`)
+  const response: { board: Cell[][] } = await wretch(`/api/game/${gameId}`)
     .headers({
-      USER_ID_HEADER: playerId
+      [USER_ID_HEADER]: playerId,
     })
     .get()
     .json();
-  console.log(response);
+  return {
-  return [];
+    cells: response.board.flat(),
+    cellWidth: response.board[0].length,
+  };
 };

ui/components/board.tsx

@@ -16,7 +16,7 @@ const Board = (props: BoardProps) => {
       }}
     >
       {props.cells.map((cell) => (
-        <div className={styles.gridCell}>{cell.terrainType}</div>
+        <div className={styles.gridCell}>{cell.piece}</div>
       ))}
     </div>
   );

ui/components/game.tsx

@@ -1,32 +1,26 @@
 import React, { useState, useEffect } from "react";
 import { fetchGameState } from "../api/game.api";
+import { Cell } from "../types";
 import Board from "./board";
 
-const Game = () => {
+interface GameProps {
+  gameId: number;
+}
+
+const Game = (props: GameProps) => {
   const [isLoading, setLoading] = useState(false);
   const [cellWidth, setCellWidth] = useState(4);
-  const [cells, setCells] = useState([
+  const [cells, setCells] = useState([] as Cell[]);
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-    { terrainType: 1 },
-  ]);
   useEffect(() => {
     setLoading(true);
-    fetchGameState("red", 1).then(console.log);
+    fetchGameState("red", props.gameId).then(
-  });
+      ({ cells: cellList, cellWidth: width }) => {
+        setCellWidth(width);
+        setCells(cellList);
+        setLoading(false);
+      }
+    );
+  }, [props.gameId]);
 
   return <Board cellWidth={cellWidth} cells={cells} />;
 };

ui/pages/index.tsx

@@ -11,7 +11,7 @@ const Home: NextPage = () => (
       <link rel="icon" href="/favicon.ico" />
     </Head>
     <main>
-      <Game />
+      <Game gameId={1} />
     </main>
   </div>
 );

ui/styles/board.module.css

@@ -4,5 +4,5 @@
 
 .gridCell {
   border: 1px solid black;
-  padding-top: 91%; /* 100% is supposed to be 1:1 aspect ratio but it doesn't look like it */ 
+  padding-top: 100%; /* 100% is supposed to be 1:1 aspect ratio but it doesn't look like it */ 
 }

ui/types.ts

@@ -1,9 +1,6 @@
-export interface Piece {
-  rank: number;
-  owner: number;
-}
-
 export interface Cell {
-  piece?: Piece;
+  piece?: string;
-  terrainType: number;
+  terrain: boolean;
+  hidden: boolean;
+  empty: boolean;
 }