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