From 75431afaa9772bd60f99d995169c2c706900c092 Mon Sep 17 00:00:00 2001 From: David Frymoyer Date: Sun, 6 Mar 2022 10:45:35 -0500 Subject: [PATCH 1/3] Add prettier, board renders to something reasonable --- ui/.prettierrc | 5 +++++ ui/components/board.tsx | 28 +++++++++++++++++++++++----- ui/components/game.tsx | 30 ++++++++++++++++++++++++++++++ ui/components/types.ts | 9 +++++++++ ui/pages/index.tsx | 20 ++++++++++---------- ui/styles/BoardPage.module.css | 4 ++++ ui/styles/board.module.css | 8 ++++++++ 7 files changed, 89 insertions(+), 15 deletions(-) create mode 100644 ui/.prettierrc create mode 100644 ui/components/game.tsx create mode 100644 ui/components/types.ts create mode 100644 ui/styles/BoardPage.module.css create mode 100644 ui/styles/board.module.css diff --git a/ui/.prettierrc b/ui/.prettierrc new file mode 100644 index 0000000..a5cd819 --- /dev/null +++ b/ui/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "useTabs": false, + "semi": true +} diff --git a/ui/components/board.tsx b/ui/components/board.tsx index 52086a7..7f1884b 100644 --- a/ui/components/board.tsx +++ b/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 = () => ( - -) +interface BoardProps { + cells: Cell[]; + cellWidth: number; +} -export default Board; \ No newline at end of file +const Board = (props: BoardProps) => { + return ( +
+ {props.cells.map((cell) => ( +
{cell.terrainType}
+ ))} +
+ ); +}; + +export default Board; diff --git a/ui/components/game.tsx b/ui/components/game.tsx new file mode 100644 index 0000000..013c79a --- /dev/null +++ b/ui/components/game.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import Board from "./board"; + +const Game = () => { + return ( + + ); +}; + +export default Game; diff --git a/ui/components/types.ts b/ui/components/types.ts new file mode 100644 index 0000000..4618879 --- /dev/null +++ b/ui/components/types.ts @@ -0,0 +1,9 @@ +export interface Piece { + rank: number; + owner: number; +} + +export interface Cell { + piece?: Piece; + terrainType: number; +} \ No newline at end of file diff --git a/ui/pages/index.tsx b/ui/pages/index.tsx index 3d7c124..d0dc116 100644 --- a/ui/pages/index.tsx +++ b/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 = () => ( - <> +
Free Go Game
- +
- -) +
+); -export default Home \ No newline at end of file +export default Home; diff --git a/ui/styles/BoardPage.module.css b/ui/styles/BoardPage.module.css new file mode 100644 index 0000000..1e69efb --- /dev/null +++ b/ui/styles/BoardPage.module.css @@ -0,0 +1,4 @@ +.main { + max-width: 900px; + margin: auto; +} \ No newline at end of file diff --git a/ui/styles/board.module.css b/ui/styles/board.module.css new file mode 100644 index 0000000..88f52e0 --- /dev/null +++ b/ui/styles/board.module.css @@ -0,0 +1,8 @@ +.gridContainer { + display: grid; +} + +.gridCell { + border: 1px solid black; + padding-top: 91%; /* 100% is supposed to be 1:1 aspect ratio but it doesn't look like it */ +} \ No newline at end of file -- 2.45.2 From 20fc6cf9ed7cc03e696dfd419af8fc228a341b72 Mon Sep 17 00:00:00 2001 From: David Frymoyer Date: Thu, 10 Mar 2022 18:57:15 -0500 Subject: [PATCH 2/3] starting attaching to server --- ui/Dockerfile | 2 ++ ui/api/game.api.ts | 18 +++++++++++++ ui/components/board.tsx | 2 +- ui/components/game.tsx | 52 +++++++++++++++++++----------------- ui/package-lock.json | 13 ++++++++- ui/package.json | 3 ++- ui/{components => }/types.ts | 0 7 files changed, 63 insertions(+), 27 deletions(-) create mode 100644 ui/api/game.api.ts rename ui/{components => }/types.ts (100%) diff --git a/ui/Dockerfile b/ui/Dockerfile index 1a9d0d8..996fb37 100644 --- a/ui/Dockerfile +++ b/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 diff --git a/ui/api/game.api.ts b/ui/api/game.api.ts new file mode 100644 index 0000000..00a0df9 --- /dev/null +++ b/ui/api/game.api.ts @@ -0,0 +1,18 @@ +import wretch from "wretch"; +import { Cell } from "../types"; + +const USER_ID_HEADER = 'Player-id'; + +export const fetchGameState = async ( + playerId: string, + gameId: number +): Promise => { + const response = await wretch(`/game/${gameId}`) + .headers({ + USER_ID_HEADER: playerId + }) + .get() + .json(); + console.log(response); + return []; +}; diff --git a/ui/components/board.tsx b/ui/components/board.tsx index 7f1884b..1e04adb 100644 --- a/ui/components/board.tsx +++ b/ui/components/board.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Cell } from "./types"; +import { Cell } from "../types"; import styles from "../styles/board.module.css"; interface BoardProps { diff --git a/ui/components/game.tsx b/ui/components/game.tsx index 013c79a..facf1a0 100644 --- a/ui/components/game.tsx +++ b/ui/components/game.tsx @@ -1,30 +1,34 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import { fetchGameState } from "../api/game.api"; import Board from "./board"; const Game = () => { - return ( - - ); + const [isLoading, setLoading] = useState(false); + const [cellWidth, setCellWidth] = useState(4); + const [cells, setCells] = useState([ + { 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); + }); + + return ; }; export default Game; diff --git a/ui/package-lock.json b/ui/package-lock.json index 1adaf33..227dea1 100644 --- a/ui/package-lock.json +++ b/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 diff --git a/ui/package.json b/ui/package.json index a9ac96c..fe3cab8 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/components/types.ts b/ui/types.ts similarity index 100% rename from ui/components/types.ts rename to ui/types.ts -- 2.45.2 From abdca1984b8f3ef2646278fd455cef05775cb02c Mon Sep 17 00:00:00 2001 From: David Frymoyer Date: Wed, 16 Mar 2022 21:43:58 -0400 Subject: [PATCH 3/3] Board renders meaningful stuff --- ui/api/game.api.ts | 14 ++++++++------ ui/components/board.tsx | 2 +- ui/components/game.tsx | 36 +++++++++++++++--------------------- ui/pages/index.tsx | 2 +- ui/styles/board.module.css | 2 +- ui/types.ts | 11 ++++------- 6 files changed, 30 insertions(+), 37 deletions(-) diff --git a/ui/api/game.api.ts b/ui/api/game.api.ts index 00a0df9..ca4b769 100644 --- a/ui/api/game.api.ts +++ b/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 => { - const response = await wretch(`/game/${gameId}`) +): Promise<{ cells: Cell[]; cellWidth: number }> => { + 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, + }; }; diff --git a/ui/components/board.tsx b/ui/components/board.tsx index 1e04adb..f6f4537 100644 --- a/ui/components/board.tsx +++ b/ui/components/board.tsx @@ -16,7 +16,7 @@ const Board = (props: BoardProps) => { }} > {props.cells.map((cell) => ( -
{cell.terrainType}
+
{cell.piece}
))} ); diff --git a/ui/components/game.tsx b/ui/components/game.tsx index facf1a0..e6283d4 100644 --- a/ui/components/game.tsx +++ b/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([ - { 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 }, - ]); + const [cells, setCells] = useState([] as Cell[]); 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 ; }; diff --git a/ui/pages/index.tsx b/ui/pages/index.tsx index d0dc116..0b16e8e 100644 --- a/ui/pages/index.tsx +++ b/ui/pages/index.tsx @@ -11,7 +11,7 @@ const Home: NextPage = () => (
- +
); diff --git a/ui/styles/board.module.css b/ui/styles/board.module.css index 88f52e0..ddf1ee2 100644 --- a/ui/styles/board.module.css +++ b/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 */ } \ No newline at end of file diff --git a/ui/types.ts b/ui/types.ts index 4618879..774c563 100644 --- a/ui/types.ts +++ b/ui/types.ts @@ -1,9 +1,6 @@ -export interface Piece { - rank: number; - owner: number; -} - export interface Cell { - piece?: Piece; - terrainType: number; + piece?: string; + terrain: boolean; + hidden: boolean; + empty: boolean; } \ No newline at end of file -- 2.45.2