Board that corresponds to what the api gives us (#4)

Display what the API gives us as the board + pieces.

Co-authored-by: David Frymoyer <david.frymoyer@gmail.com>
Reviewed-on: #4
Co-authored-by: fry <david.frymoyer@gmail.com>
Co-committed-by: fry <david.frymoyer@gmail.com>

ui/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true
+}

ui/Dockerfile

@@ -8,9 +8,11 @@ FROM base as dependencies
 COPY pages /pages
 COPY public /public
 COPY styles /styles
+COPY api /api
 COPY components /components
 COPY next* /
 COPY tsconfig.json /
+COPY types.ts /
 
 EXPOSE 3000
 RUN npm run build

ui/api/game.api.ts

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

ui/components/board.tsx

@@ -1,7 +1,25 @@
-import React from 'react'
+import React from "react";
+import { Cell } from "../types";
+import styles from "../styles/board.module.css";
 
-const Board = () => (
-  <input/>
-)
+interface BoardProps {
+  cells: Cell[];
+  cellWidth: number;
+}
 
-export default Board;
+const Board = (props: BoardProps) => {
+  return (
+    <div
+      className={styles.gridContainer}
+      style={{
+        gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
+      }}
+    >
+      {props.cells.map((cell) => (
+        <div className={styles.gridCell}>{cell.piece}</div>
+      ))}
+    </div>
+  );
+};
+
+export default Board;

ui/components/game.tsx

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

ui/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "12.1.0",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "wretch": "^1.7.9"
       },
       "devDependencies": {
         "@types/node": "17.0.21",
@@ -2527,6 +2528,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/wretch": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/wretch/-/wretch-1.7.9.tgz",
+      "integrity": "sha512-uUSze1Z72RiQjyoqr7r1KW+05WDNeqqKOeyJDPhw6EVEaOgp9RQNrr8AQt3OF7qylQbh2iVtT9r0nXIHlbJgqQ=="
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "dev": true,
@@ -4060,6 +4066,11 @@
       "version": "1.0.2",
       "dev": true
     },
+    "wretch": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/wretch/-/wretch-1.7.9.tgz",
+      "integrity": "sha512-uUSze1Z72RiQjyoqr7r1KW+05WDNeqqKOeyJDPhw6EVEaOgp9RQNrr8AQt3OF7qylQbh2iVtT9r0nXIHlbJgqQ=="
+    },
     "yallist": {
       "version": "4.0.0",
       "dev": true

ui/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "12.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "wretch": "^1.7.9"
   },
   "devDependencies": {
     "@types/node": "17.0.21",

ui/pages/index.tsx

@@ -1,19 +1,19 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import Board from '../components/board'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import Game from "../components/game";
+import styles from "../styles/BoardPage.module.css";
 
 const Home: NextPage = () => (
-  <>
+  <div className={styles.main}>
     <Head>
       <title>Free Go Game</title>
       <link rel="icon" href="/favicon.ico" />
     </Head>
     <main>
-      <Board />
+      <Game gameId={1} />
     </main>
-  </>
-)
+  </div>
+);
 
-export default Home
+export default Home;

ui/styles/BoardPage.module.css

@@ -0,0 +1,4 @@
+.main {
+  max-width: 900px;
+  margin: auto;
+}

ui/styles/board.module.css

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

ui/types.ts

@@ -0,0 +1,6 @@
+export interface Cell {
+  piece?: string;
+  terrain: boolean;
+  hidden: boolean;
+  empty: boolean;
+}