From 75431afaa9772bd60f99d995169c2c706900c092 Mon Sep 17 00:00:00 2001 From: David Frymoyer Date: Sun, 6 Mar 2022 10:45:35 -0500 Subject: [PATCH] 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