stryan/freego_api
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Board that corresponds to what the api gives us #4

Merged
fry merged 3 commits from better-board into master 2022-03-16 21:46:20 -04:00
Conversation 0 Commits 3 Files Changed 11 +89 -15
7 changed files with 89 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 75431afaa9 - Show all commits

5
ui/.prettierrc Normal file
View File

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

26
ui/components/board.tsx
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 = () => ( interface BoardProps {
<input/> cells: Cell[];
) cellWidth: number;
}
const Board = (props: BoardProps) => {
return (
<div
className={styles.gridContainer}
style={{
gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
}}
>
{props.cells.map((cell) => (
<div className={styles.gridCell}>{cell.terrainType}</div>
))}
</div>
);
};
export default Board; export default Board;

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

@ -0,0 +1,30 @@
import React from "react";
import Board from "./board";
const Game = () => {
return (
<Board
cellWidth={4}
cells={[
{ 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 },
]}
/>
);
};
export default Game;

9
ui/components/types.ts Normal file
View File

@ -0,0 +1,9 @@
export interface Piece {
rank: number;
owner: number;
}
export interface Cell {
piece?: Piece;
terrainType: number;
}

20
ui/pages/index.tsx
View File

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

4
ui/styles/BoardPage.module.css Normal file
View File

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

8
ui/styles/board.module.css Normal file
View File

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