stubbed out move api

This commit is contained in:
fry 2022-03-16 23:03:15 -04:00
parent 209a4f5caf
commit 52523fccdc
10 changed files with 115 additions and 21 deletions

View File

@ -5,6 +5,7 @@ COPY package-lock.json .
RUN npm install
FROM base as dependencies
COPY utils /utils
COPY pages /pages
COPY public /public
COPY styles /styles

View File

@ -1,5 +1,5 @@
import wretch from "wretch";
import { Cell } from "../types";
import { Cell, Position } from "../types";
const USER_ID_HEADER = "Player-id";
@ -18,3 +18,27 @@ export const fetchGameState = async (
cellWidth: response.board[0].length,
};
};
export const submitMove = async (
playerId: string,
gameId: number,
piecePosition: Position,
movePosition: Position
): Promise<{ cells: Cell[] }> => {
console.log(piecePosition, movePosition);
const response: { board: Cell[][] } = await wretch(`/api/game/${gameId}/move`)
.headers({
[USER_ID_HEADER]: playerId,
})
.body({
pieceRow: piecePosition.row,
pieceColumn: piecePosition.column,
moveRow: movePosition.row,
moveColumn: movePosition.column,
})
.post()
.json();
return {
cells: response.board.flat(),
};
};

View File

@ -1,25 +1,33 @@
import React from "react";
import React, { useState } from "react";
import cn from "classnames";
import { Cell } from "../types";
import styles from "../styles/board.module.css";
interface BoardProps {
cells: Cell[];
cellWidth: number;
focusedCellIndex?: number;
onCellClick: (index: number) => void;
}
const Board = (props: BoardProps) => {
return (
<div
className={styles.gridContainer}
style={{
gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
}}
>
{props.cells.map((cell) => (
<div className={styles.gridCell}>{cell.piece}</div>
))}
</div>
);
};
const Board = (props: BoardProps) => (
<div
className={styles.gridContainer}
style={{
gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
}}
>
{props.cells.map((cell, i) => (
<button
className={cn(styles.gridCell, {
[styles.cellClicked]: i === props.focusedCellIndex,
})}
onClick={() => props.onCellClick(i)}
>
{cell.piece}
</button>
))}
</div>
);
export default Board;

View File

@ -1,19 +1,42 @@
import React, { useState, useEffect } from "react";
import { fetchGameState } from "../api/game.api";
import { fetchGameState, submitMove } from "../api/game.api";
import { convertIndexToPosition } from "../utils/position";
import { Cell } from "../types";
import Board from "./board";
const DEFAULT_CLICKED_CELL = -1;
interface GameProps {
gameId: number;
playerId: string;
}
const Game = (props: GameProps) => {
const [isLoading, setLoading] = useState(false);
const [cellWidth, setCellWidth] = useState(4);
const [cellWidth, setCellWidth] = useState(0);
const [cells, setCells] = useState([] as Cell[]);
const [focusedCellIndex, setFocusedCellIndex] =
useState(DEFAULT_CLICKED_CELL);
const onCellClicked = (cellIndex: number): void => {
if (cellIndex === focusedCellIndex) {
setFocusedCellIndex(DEFAULT_CLICKED_CELL);
return;
} else if (focusedCellIndex === DEFAULT_CLICKED_CELL) {
setFocusedCellIndex(cellIndex);
return;
}
submitMove(
props.playerId,
props.gameId,
convertIndexToPosition(focusedCellIndex, cellWidth),
convertIndexToPosition(cellIndex, cellWidth)
);
};
useEffect(() => {
setLoading(true);
fetchGameState("red", props.gameId).then(
fetchGameState(props.playerId, props.gameId).then(
({ cells: cellList, cellWidth: width }) => {
setCellWidth(width);
setCells(cellList);
@ -22,7 +45,14 @@ const Game = (props: GameProps) => {
);
}, [props.gameId]);
return <Board cellWidth={cellWidth} cells={cells} />;
return (
<Board
cellWidth={cellWidth}
cells={cells}
focusedCellIndex={focusedCellIndex}
onCellClick={onCellClicked}
/>
);
};
export default Game;

11
ui/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "ui",
"version": "0.1.0",
"dependencies": {
"classnames": "^2.3.1",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
@ -528,6 +529,11 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"node_modules/color-convert": {
"version": "2.0.1",
"dev": true,
@ -2842,6 +2848,11 @@
"supports-color": "^7.1.0"
}
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"color-convert": {
"version": "2.0.1",
"dev": true,

View File

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"classnames": "^2.3.1",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",

View File

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

View File

@ -5,4 +5,9 @@
.gridCell {
border: 1px solid black;
padding-top: 100%; /* 100% is supposed to be 1:1 aspect ratio but it doesn't look like it */
background: 0;
}
.cellClicked {
border: 1px solid red;
}

View File

@ -4,3 +4,8 @@ export interface Cell {
hidden: boolean;
empty: boolean;
}
export interface Position {
row: number;
column: number;
}

9
ui/utils/position.ts Normal file
View File

@ -0,0 +1,9 @@
import { Position } from "../types";
export const convertIndexToPosition = (
index: number,
cellWidth: number
): Position => ({
row: Math.floor(index / cellWidth),
column: index % cellWidth,
});