refactor: minor renamings

src/@types/storming.d.ts

@@ -23,9 +23,9 @@ interface MovePieceAction {
   to: TileID;
 }
 
-interface SelectPieceAction {
-  type: "select-piece";
+interface SelectTileAction {
+  type: "select-tile";
   tile: TileID;
 }
 
-type BoardStateAction = MovePieceAction | SelectPieceAction;
+type BoardStateAction = MovePieceAction | SelectTileAction;

src/components/board/board-controller.tsx

@@ -1,7 +1,7 @@
 import { useReducer } from "react";
 import Board from "./board";
 import { boardStateReducer, initialBoardState } from "./state";
-import boardModel from "../../models/board";
+import boardModel from "models/board";
 
 function BoardController(): JSX.Element {
   const [boardState, dispatchBoardAction] = useReducer(
@@ -11,19 +11,17 @@ function BoardController(): JSX.Element {
 
   const board = boardModel(boardState);
 
-  const onTileClick = (tileID: Coordinates) => {
+  const onTileClick = ({ str }: Coordinates) => {
     console.debug("onTileClick()");
-    if (board.hasASelectedPiece() && !boardState[tileID.str].piece) {
-      const selectedTileId = board.getSelectedTileID();
+    if (board.hasAnySelectedPiece()) {
+      const selectedTileId = board.getSelectedTile();
       return dispatchBoardAction({
         type: "move-piece",
         from: selectedTileId,
-        to: tileID.str,
+        to: str,
       });
     }
-    if (boardState[tileID.str].piece) {
-      return dispatchBoardAction({ type: "select-piece", tile: tileID.str });
-    }
+    return dispatchBoardAction({ type: "select-tile", tile: str });
   };
 
   return <Board state={boardState} onTileClick={onTileClick} />;

src/components/board/state/board-state-reducer.ts

@@ -1,24 +1,30 @@
+import boardModel from "models/board";
 import { getAvailableMovements } from "models/movements";
 
 function boardStateReducer(
   state: BoardState,
   action: BoardStateAction
 ): BoardState {
   console.debug(`boardStateReducer(${action.type})`);
+  // const board = boardModel(state);
+
   switch (action.type) {
-    case "select-piece": {
+    case "select-tile": {
       if (!action.tile) {
-        throw Error(
-          'Inconsistent state: "select-piece" action requires "tile"'
-        );
+        throw Error('Inconsistent state: "select-tile" action requires "tile"');
       }
-      const t = state[action.tile];
-      t.status = "selected";
-      if (t.piece && t.piece?.type === "soldier") {
+      // if (board.hasAnySelectedTile()) {
+      //   state[board.getSelectedTile()].status = "idle";
+      // }
+      const tile = state[action.tile];
+      tile.status = "selected";
+
+      if (tile.piece && tile.piece?.type === "soldier") {
         getAvailableMovements(action.tile).forEach((availableTile) => {
           state[availableTile].status = "available";
         });
       }
+
       return {
         ...state,
       };
@@ -31,8 +37,8 @@ function boardStateReducer(
         );
         return { ...state };
       }
-      const piece = state[action.from].piece;
 
+      const piece = state[action.from].piece;
       if (!piece) {
         console.warn(
           'Inconsistent state: "move-piece" action requires a piece at "action.from"'

src/models/board.ts

@@ -1,21 +1,25 @@
 function boardModel(b: BoardState) {
   return {
-    hasASelectedPiece() {
+    hasAnySelectedTile() {
+      return Object.values(b).some((tile) => tile.status === "selected");
+    },
+
+    hasAnySelectedPiece() {
       return Object.values(b).some(
         (tile) => tile.status === "selected" && tile.piece
       );
     },
 
-    getSelectedTileID() {
-      const selectedTileID = Object.entries(b).find(
+    getSelectedTile() {
+      const selectedTile = Object.entries(b).find(
         ([, tile]) => tile.status === "selected"
       )?.[0];
-      if (!selectedTileID) {
+      if (!selectedTile) {
         throw new Error(
           'Inconsistent state: "getSelectedTileID" was unable to find any selected tile'
         );
       }
-      return selectedTileID as TileID;
+      return selectedTile as TileID;
     },
   };
 }

src/models/movements.ts

@@ -1,13 +1,13 @@
 import { asTileID, coordinates } from "models/tiles";
 
-export function getAvailableMovements(t: TileID, range = 1) {
-  console.debug(`getAvailableMovements(${t})`);
-  const tileID = coordinates(t);
+export function getAvailableMovements(tile: TileID, range = 1) {
+  console.debug(`getAvailableMovements(${tile})`);
+  const { x, y } = coordinates(tile);
 
   // TODO use range param instead of fixed array
   // TODO avoid fixed arrays?
   const range1Movements =
-    tileID.y % 2 === 0
+    y % 2 === 0
       ? [
           [0, -1],
           [+1, -1],
@@ -27,8 +27,8 @@ export function getAvailableMovements(t: TileID, range = 1) {
 
   return range1Movements.flatMap((variance) => {
     const tileIdStr = asTileID({
-      x: tileID.x + variance[0],
-      y: tileID.y + variance[1],
+      x: x + variance[0],
+      y: y + variance[1],
     });
     return tileIdStr ? [tileIdStr] : [];
   });