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>
This commit is contained in:
fry 2022-03-16 21:46:20 -04:00
parent 74ee26c8d6
commit 209a4f5caf
11 changed files with 120 additions and 17 deletions

5
ui/.prettierrc Normal file
View File

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

View File

@ -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

20
ui/api/game.api.ts Normal file
View File

@ -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,
};
};

View File

@ -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;

28
ui/components/game.tsx Normal file
View File

@ -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;

13
ui/package-lock.json generated
View File

@ -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

View File

@ -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",

View File

@ -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;

View File

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

View File

@ -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 */
}

6
ui/types.ts Normal file
View File

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