Style Review (v0.4.0) (#6)

.releaserc

@@ -3,8 +3,64 @@
     "main"
   ],
   "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "parserOpts": {
+          "noteKeywords": [
+            "BREAKING CHANGE",
+            "BREAKING CHANGES",
+            "BREAKING"
+          ]
+        },
+        "releaseRules": [
+          {
+            "type": "chore",
+            "release": "patch"
+          },
+          {
+            "type": "style",
+            "release": "patch"
+          }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "angular",
+        "parserOpts": {
+          "noteKeywords": [
+            "BREAKING CHANGE",
+            "BREAKING CHANGES",
+            "BREAKING"
+          ]
+        },
+        "presetConfig": {
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Fixes"
+            },
+            {
+              "type": "style",
+              "section": "Visual",
+              "hidden": false
+            },
+            {
+              "type": "chore",
+              "section": "Internal",
+              "hidden": false
+            }
+          ]
+        }
+      }
+    ],
     "@semantic-release/changelog",
     [
       "@semantic-release/npm",

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "classnames": "2.3.2",
+    "framer-motion": "^10.16.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

src/@types/storming.d.ts

@@ -8,7 +8,8 @@ type PlayerType =
   | "enemy2" /* blue */
   | "enemy3" /* green */;
 
-type PlayerHandCardStatus = "selected" | "available" | "played";
+type PlayerHandCardStatus = "selected" | "available" | "played" | "active";
+type CardStatus = "active"
 
 /**
  * ```ts

src/app.scss

@@ -1,10 +1,13 @@
+@use '/src/styles/colors.scss';
+@use "/src/styles/animations.scss";
+
 #root {
-  background-color: #fff;
+  background-color: colors.$white;
 
   .game {
     display: grid;
     grid-template-columns: 0.5fr 2fr 0.5fr;
-    grid-template-rows: 0.2fr 2fr 0.8fr;
+    grid-template-rows: auto;
     gap: 0px 0px;
     grid-auto-flow: row;
     grid-template-areas:
@@ -21,8 +24,11 @@
     grid-area: timeline;
   }
 
-  .board {
+  .board-container {
     grid-area: board;
+    display: flex;
+    justify-content: center;
+
   }
 
   .marketplace {
@@ -32,11 +38,10 @@
   .player-hand {
     grid-area: player-hand;
   }
-
 }
 
-
-.clickable, .expansible {
+.clickable,
+.expansible {
   cursor: pointer;
 }
 
@@ -45,17 +50,17 @@
 }
 
 .player {
-  background-color: #fffaaf;
+  background-color: colors.$player-secondary;
 }
 
 .enemy1 {
-  background-color: #ffafaf;
+  background-color: colors.$enemy1-secondary;
 }
 
 .enemy2 {
-  background-color: #afafff;
+  background-color: colors.$enemy2-secondary;
 }
 
 .enemy3 {
-  background-color: #afffaf;
+  background-color: colors.$enemy3-secondary;
 }

src/components/board/board-controller.tsx

@@ -1,11 +1,11 @@
 import { useGameContext } from "game-context";
+import { NewBuilding } from "models/new-building";
 import { useState } from "react";
 import { warnInconsistentState } from "utils/console";
-import Board from "./board";
+import { Board } from "./board";
 import BuildDialog from "./build-dialog";
 import { inferVisualBoardFromGameContext } from "./infer-visual-board";
 import { RecruitDialog } from "./recruit-dialog";
-import { NewBuilding } from "models/new-building";
 
 /**
  * Defines visual board from GameContext:
@@ -179,8 +179,12 @@ export function BoardController() {
   };
 
   return (
-    <>
-      <Board state={board} onTileClick={onTileClick} />
+    <div className="board-container">
+      <Board
+        state={board}
+        activePlayer={gameContext.activePlayer}
+        onTileClick={onTileClick}
+      />
       {buildingTile && (
         <BuildDialog
           onWallOption={() => {
@@ -207,6 +211,6 @@ export function BoardController() {
           }}
         />
       )}
-    </>
+    </div>
   );
 }

src/components/board/board.scss

@@ -4,11 +4,12 @@ $collapse-rows-y: calc($TILE_SIZE / 5); // 22px aprox
 $row-left-space: calc($TILE_SIZE / 2);
 
 .board {
-  grid-area: board;
-
   position: relative;
+
   width: -moz-fit-content;
   width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 
   &__row {
     display: flex;
@@ -33,5 +34,5 @@ $row-left-space: calc($TILE_SIZE / 2);
   }
 
   // debug
-  border: 1px solid red;
+  // border: 1px solid red;
 }

src/components/board/board.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import Board from "./board";
+import { Board } from "./board";
 
 describe("<Board />", () => {
   test("render: match snapshot", () => {

src/components/board/board.tsx

@@ -7,10 +7,11 @@ import "./board.scss";
 
 type Props = {
   state: VisualBoard;
+  activePlayer?: PlayerType;
   onTileClick: (titleID: Coordinates) => void;
 };
 
-function Board({ state, onTileClick }: Props) {
+export function Board({ state, activePlayer, onTileClick }: Props) {
   logRender("Board");
 
   const renderRow = (n: -3 | -2 | -1 | 0 | 1 | 2 | 3) =>
@@ -24,6 +25,7 @@ function Board({ state, onTileClick }: Props) {
           terrain={s.terrain}
           building={s.building?.type}
           owner={s.building?.owner || s.piece?.owner}
+          activePlayer={activePlayer}
           onClick={onTileClick}
         >
           {s.piece && <Piece type={s.piece.type} owner={s.piece.owner} />}
@@ -44,8 +46,6 @@ function Board({ state, onTileClick }: Props) {
   );
 }
 
-export default Board;
-
 function row(n: -3 | -2 | -1 | 0 | 1 | 2 | 3): TileID[] {
   return TILES.filter((id) => coordinates(id).y === n);
 }