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
6 changed files with 30 additions and 37 deletions
Showing only changes of commit abdca1984b - Show all commits

View File

@ -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<Cell[]> => {
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,
};
};

View File

@ -16,7 +16,7 @@ const Board = (props: BoardProps) => {
}}
>
{props.cells.map((cell) => (
<div className={styles.gridCell}>{cell.terrainType}</div>
<div className={styles.gridCell}>{cell.piece}</div>
))}
</div>
);

View File

@ -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 <Board cellWidth={cellWidth} cells={cells} />;
};

View File

@ -11,7 +11,7 @@ const Home: NextPage = () => (
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<Game />
<Game gameId={1} />
</main>
</div>
);

View File

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

View File

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