From 0e2eb9ac3d9597afa5c1142f6bd236b1368cd88a Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Tue, 21 Nov 2023 15:23:52 +0100
Subject: [PATCH 01/10] chore: review .releaserc

---
 .releaserc | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/.releaserc b/.releaserc
index cdff3ca..eed8234 100644
--- a/.releaserc
+++ b/.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",

From 45e18560fe19328ff286beff9c3169a2e6021f64 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Tue, 21 Nov 2023 16:34:04 +0100
Subject: [PATCH 02/10] style: review line-item and framer-motion on entry

---
 package-lock.json                      | 75 ++++++++++++++++++++++++++
 package.json                           |  1 +
 src/app.scss                           |  8 +--
 src/components/timeline/line-item.scss | 55 +++++++++++--------
 src/components/timeline/line-item.tsx  | 11 +++-
 src/components/timeline/timeline.scss  | 27 ++++++----
 src/components/timeline/timeline.tsx   | 22 +++++---
 src/styles/colors.scss                 |  1 +
 8 files changed, 157 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 14dc852..07ea2f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.4.0",
       "dependencies": {
         "classnames": "2.3.2",
+        "framer-motion": "^10.16.5",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -660,6 +661,21 @@
       "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
       "dev": true
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.15.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.9.tgz",
@@ -4628,6 +4644,34 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.16.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz",
+      "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -14521,6 +14565,21 @@
       "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
       "dev": true
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "@esbuild/android-arm": {
       "version": "0.15.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.9.tgz",
@@ -17382,6 +17441,22 @@
         "mime-types": "^2.1.12"
       }
     },
+    "framer-motion": {
+      "version": "10.16.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz",
+      "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        }
+      }
+    },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
diff --git a/package.json b/package.json
index 55f5e0c..52cd59e 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/app.scss b/src/app.scss
index e890134..37b6e60 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,5 +1,6 @@
+@use '/src/styles/colors.scss';
 #root {
-  background-color: #fff;
+  background-color: colors.$white;
 
   .game {
     display: grid;
@@ -32,11 +33,10 @@
   .player-hand {
     grid-area: player-hand;
   }
-
 }
 
-
-.clickable, .expansible {
+.clickable,
+.expansible {
   cursor: pointer;
 }
 
diff --git a/src/components/timeline/line-item.scss b/src/components/timeline/line-item.scss
index 8d90118..5732b1e 100644
--- a/src/components/timeline/line-item.scss
+++ b/src/components/timeline/line-item.scss
@@ -1,43 +1,41 @@
-@use '/src/styles/colors.scss';
+@use "/src/styles/colors.scss";
 
-$line-item-size: 42px;
-$content-size: 20px;
+$ITEM_SIZE: 42px;
+$CONTENT_SIZE: 22px;
 
 .line-item {
-  position: relative;
-  top: 35px;
+  position: relative; // to .timeline__section__line
+  top: 50%;
+  transform: translateY(-50%);
 
   display: flex;
   justify-content: center;
   align-items: center;
 
-  width: $line-item-size;
-  height: $line-item-size;
+  width: $ITEM_SIZE;
+  height: $ITEM_SIZE;
   border-radius: 50%;
-  border: 2px solid black;
-  background-color: colors.$base-grey;
+  background-color: colors.$white;
 
   &--pending {
-    border: 3px dotted colors.$darkest-grey;
+    border: 2px dotted colors.$darkest-grey;
+  }
+
+  &--commited {
+    border: 2px solid colors.$darkest-grey;
   }
 
   &__content {
-    width: $content-size;
-    height: $content-size;
+    width: $CONTENT_SIZE;
+    height: $CONTENT_SIZE;
     border-radius: 50%;
 
+    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
+
     &--player {
       background-color: colors.$player-primary;
     }
 
-    // FIXME: move :hover{} to .line-item (instead of .line-item__content)
-    &--player:hover {
-      width: 100%;
-      height: 100%;
-
-      // TODO change background image to card icon
-    }
-
     &--enemy1 {
       background-color: colors.$enemy1-primary;
     }
@@ -49,8 +47,21 @@ $content-size: 20px;
     &--enemy3 {
       background-color: colors.$enemy3-primary;
     }
+  }
+}
+
+.line-item.expansible:hover {
+  .line-item__content {
+    width: 100%;
+    height: 100%;
+  }
+}
 
-    transition: width 0.25s ease-out,
-    height 0.25s ease-out;
+@keyframes border-solid {
+  0% {
+    border-style: dotted;
+  }
+  100% {
+    border-style: solid;
   }
 }
diff --git a/src/components/timeline/line-item.tsx b/src/components/timeline/line-item.tsx
index 333c9d3..36672c3 100644
--- a/src/components/timeline/line-item.tsx
+++ b/src/components/timeline/line-item.tsx
@@ -9,7 +9,16 @@ type Props = {
 
 export function ActionLineItem({ card, commited }: Props): JSX.Element {
   return (
-    <div className={c("line-item", card.owner === "player" && "expansible", !commited && 'line-item--pending')}>
+    <div
+      className={c(
+        "line-item",
+        card.owner === "player" &&
+          "line-item--player" &&
+          "player" &&
+          "expansible",
+        commited ? "line-item--commited" : "line-item--pending"
+      )}
+    >
       <div
         className={c("line-item__content", `line-item__content--${card.owner}`)}
       />
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 45f92b5..053af17 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -2,33 +2,41 @@
 @use '/src/styles/fonts.scss';
 
 .timeline {
-  height: 92px;
+  grid-area: timeline;
+  height: 13vh;
 
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap; // single line
 
   &__next {
-    flex-grow: 3;
+    flex-grow: 1;
     background-color: colors.$base-grey;
   }
 
   &__future {
-    flex-grow: 2;
+    flex-grow: 1;
     background-color: colors.$dark-grey;
   }
 
   &__section {
     position: relative;
     display: flex;
-    padding: 0 20px 0 80px;
+    padding: 0 20px;
     border-radius: 0px 0px 12px 12px;
 
+    &:hover {
+      .timeline__section__name {
+        opacity: 0.4;
+        transition: opacity 0.5s ease-in-out;
+      }
+    }
+
     &__name {
-      position: absolute;
-      top: 24px;
+      position: absolute; // relative to timeline__section
+      top: 18px;
       left: 12px;
-
+      opacity: 0;
       @include fonts.heading();
     }
 
@@ -47,9 +55,10 @@
         width: 100%;
 
         position: absolute;
-        top: 55px; // from timeline__section
+        top: 50%;
+        transform: translateY(-50%);
 
-        border-top: 2px solid black;
+        border-top: 2px solid colors.$darkest-grey;
       }
     }
   }
diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
index 9fe488f..798a3d1 100644
--- a/src/components/timeline/timeline.tsx
+++ b/src/components/timeline/timeline.tsx
@@ -1,5 +1,6 @@
 import { logRender } from "utils/console";
 import { ActionLineItem } from "./line-item";
+import { motion } from "framer-motion";
 
 import "./timeline.scss";
 
@@ -15,7 +16,18 @@ export function Timeline({ next, future }: Props): JSX.Element {
     return section.map(({ card, commited }) => {
       if (card.cardType === "actionCard")
         return (
-          <ActionLineItem key={card.cardId} card={card} commited={commited} />
+          <motion.div
+            key={card.cardId}
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{
+              opacity: [0, 0.9, 0.9, 1, 1, 1, 1],
+              scale: [0, 1.3, 0.8, 1.2, 0.9, 1.1, 1],
+            }}
+            exit={{ opacity: 0, scale: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <ActionLineItem card={card} commited={commited} />
+          </motion.div>
         );
     });
   };
@@ -24,15 +36,11 @@ export function Timeline({ next, future }: Props): JSX.Element {
     <div className="timeline">
       <div className="timeline__next timeline__section">
         <span className="timeline__section__name">NEXT</span>
-        <div className="timeline__section__line">
-          {renderLineItems(next)}
-        </div>
+        <div className="timeline__section__line">{renderLineItems(next)}</div>
       </div>
       <div className="timeline__future timeline__section">
         <span className="timeline__section__name">FUTURE</span>
-        <div className="timeline__section__line">
-          {renderLineItems(future)}
-        </div>
+        <div className="timeline__section__line">{renderLineItems(future)}</div>
       </div>
     </div>
   );
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 29cdd03..98378b2 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -14,6 +14,7 @@ $base-grey: #CED4DA;
 $dark-grey: #ADB5BD;
 $darkest-grey: #3f4347;
 $selected-tile: #fff8ae1e;
+$white: #fffffa;
 
 // ---
 

From 9624395cb395614d30329c6dd28389784e18df72 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Tue, 21 Nov 2023 16:40:05 +0100
Subject: [PATCH 03/10] style: layout animation on <Timeline />

---
 src/components/timeline/timeline.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
index 798a3d1..f02e867 100644
--- a/src/components/timeline/timeline.tsx
+++ b/src/components/timeline/timeline.tsx
@@ -18,6 +18,7 @@ export function Timeline({ next, future }: Props): JSX.Element {
         return (
           <motion.div
             key={card.cardId}
+            layout
             initial={{ opacity: 0, scale: 0 }}
             animate={{
               opacity: [0, 0.9, 0.9, 1, 1, 1, 1],

From e45499be09a8a78f9152115ac449d6ea12d90f3a Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 12:25:27 +0100
Subject: [PATCH 04/10] style(layout): board height fit content

---
 src/app.scss                    | 2 +-
 src/components/board/board.scss | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 37b6e60..1603224 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -5,7 +5,7 @@
   .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:
diff --git a/src/components/board/board.scss b/src/components/board/board.scss
index b5e0cd0..73e4795 100644
--- a/src/components/board/board.scss
+++ b/src/components/board/board.scss
@@ -9,7 +9,9 @@ $row-left-space: calc($TILE_SIZE / 2);
   position: relative;
   width: -moz-fit-content;
   width: fit-content;
-
+  height: -moz-fit-content;
+  height: fit-content;
+  
   &__row {
     display: flex;
     position: relative;

From b03b49eececed12cd43f9ecf3a8e6eba4712dd19 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 12:39:35 +0100
Subject: [PATCH 05/10] style(player-hand): up animation on hover

---
 src/components/player-hand/player-hand.scss | 8 +++++++-
 src/components/player-hand/player-hand.tsx  | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/player-hand/player-hand.scss b/src/components/player-hand/player-hand.scss
index c6a9c89..ffbb179 100644
--- a/src/components/player-hand/player-hand.scss
+++ b/src/components/player-hand/player-hand.scss
@@ -1,8 +1,14 @@
 .player-hand {
+  grid-area: player-hand;
+
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
 
-  padding: 10px;
+  transition: transform 0.2s ease-in-out;
+
+  &--expansible:hover {
+    transform: translateY(-51%);
+  }
 }
diff --git a/src/components/player-hand/player-hand.tsx b/src/components/player-hand/player-hand.tsx
index 30e361d..f124ed3 100644
--- a/src/components/player-hand/player-hand.tsx
+++ b/src/components/player-hand/player-hand.tsx
@@ -1,5 +1,6 @@
 import { Card } from "components/cards/card";
 import { logRender } from "utils/console";
+import c from "classnames";
 
 import "./player-hand.scss";
 
@@ -23,7 +24,7 @@ export function PlayerHand({
   };
 
   return (
-    <div className="player-hand">
+    <div className={c("player-hand", isActive && "player-hand--expansible")}>
       {player &&
         cards.map(({ card, status }) => {
           return (

From e17e051db646e34f3cc98c01b715ecfd63e2ca2b Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 13:02:09 +0100
Subject: [PATCH 06/10] style(layout): center the board and render an empty
 Marketplace

---
 src/app.scss                                | 13 ++++++++-----
 src/components/board/board-controller.tsx   |  4 ++--
 src/components/board/board.scss             |  7 +++----
 src/components/index.ts                     |  2 +-
 src/components/marketplace/marketplace.scss | 19 ++++++++++++++++++-
 src/components/marketplace/marketplace.tsx  |  4 +---
 src/components/player-hand/player-hand.scss |  2 --
 src/components/timeline/timeline.scss       |  2 --
 8 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 1603224..1f053c3 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -22,8 +22,11 @@
     grid-area: timeline;
   }
 
-  .board {
+  .board-container {
     grid-area: board;
+    display: flex;
+    justify-content: center;
+    
   }
 
   .marketplace {
@@ -45,17 +48,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;
 }
diff --git a/src/components/board/board-controller.tsx b/src/components/board/board-controller.tsx
index ffd0539..d827afc 100644
--- a/src/components/board/board-controller.tsx
+++ b/src/components/board/board-controller.tsx
@@ -179,7 +179,7 @@ export function BoardController() {
   };
 
   return (
-    <>
+    <div className="board-container">
       <Board state={board} onTileClick={onTileClick} />
       {buildingTile && (
         <BuildDialog
@@ -207,6 +207,6 @@ export function BoardController() {
           }}
         />
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/components/board/board.scss b/src/components/board/board.scss
index 73e4795..c0fca20 100644
--- a/src/components/board/board.scss
+++ b/src/components/board/board.scss
@@ -4,14 +4,13 @@ $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;
     position: relative;
@@ -35,5 +34,5 @@ $row-left-space: calc($TILE_SIZE / 2);
   }
 
   // debug
-  border: 1px solid red;
+  // border: 1px solid red;
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 6e7b6f0..4607d70 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
 export { BoardController as Board } from "./board/board-controller";
 export { CurrentPhaseController as CurrentPhase } from "./current-phase/current-phase-controller";
-export { default as Marketplace } from "./marketplace/marketplace";
+export { Marketplace } from "./marketplace/marketplace";
 export { Menu } from "./menu/menu";
 export { PlayerHandController as PlayerHand } from "./player-hand/player-hand-controller";
 export { default as RoundSummary } from "./round-summary/round-summary";
diff --git a/src/components/marketplace/marketplace.scss b/src/components/marketplace/marketplace.scss
index 7ee8cc6..a8adb39 100644
--- a/src/components/marketplace/marketplace.scss
+++ b/src/components/marketplace/marketplace.scss
@@ -1 +1,18 @@
-.marketplace {}
+@use "/src/styles/colors.scss";
+
+.marketplace {
+  width: 100%;
+  height: 100%;
+  background-color: colors.$base-grey;
+
+  position: relative;
+
+  &::before {
+    content: "MARKETPLACE";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+}
diff --git a/src/components/marketplace/marketplace.tsx b/src/components/marketplace/marketplace.tsx
index 9c1479c..4760ba4 100644
--- a/src/components/marketplace/marketplace.tsx
+++ b/src/components/marketplace/marketplace.tsx
@@ -1,7 +1,5 @@
 import "./marketplace.scss";
 
-function Marketplace(): JSX.Element {
+export function Marketplace() {
   return <div className="marketplace"></div>;
 }
-
-export default Marketplace;
diff --git a/src/components/player-hand/player-hand.scss b/src/components/player-hand/player-hand.scss
index ffbb179..c1eb95c 100644
--- a/src/components/player-hand/player-hand.scss
+++ b/src/components/player-hand/player-hand.scss
@@ -1,6 +1,4 @@
 .player-hand {
-  grid-area: player-hand;
-
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 053af17..f630fdf 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -2,9 +2,7 @@
 @use '/src/styles/fonts.scss';
 
 .timeline {
-  grid-area: timeline;
   height: 13vh;
-
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap; // single line

From 6ed1adc8c9fe7d22083468246ee6b6c561d4c7ae Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 14:38:49 +0100
Subject: [PATCH 07/10] style(timeline): independent layout group (motion) for
 each timeline

---
 src/components/timeline/timeline.scss |  5 +++--
 src/components/timeline/timeline.tsx  | 14 ++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f630fdf..6e9d129 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -7,13 +7,14 @@
   flex-direction: row;
   flex-wrap: nowrap; // single line
 
+
   &__next {
-    flex-grow: 1;
+    flex: 1;
     background-color: colors.$base-grey;
   }
 
   &__future {
-    flex-grow: 1;
+    flex: 1;
     background-color: colors.$dark-grey;
   }
 
diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
index f02e867..7627cba 100644
--- a/src/components/timeline/timeline.tsx
+++ b/src/components/timeline/timeline.tsx
@@ -1,6 +1,6 @@
 import { logRender } from "utils/console";
 import { ActionLineItem } from "./line-item";
-import { motion } from "framer-motion";
+import { LayoutGroup, motion } from "framer-motion";
 
 import "./timeline.scss";
 
@@ -9,7 +9,7 @@ type Props = {
   future: TimelineCard[];
 };
 
-export function Timeline({ next, future }: Props): JSX.Element {
+export function Timeline({ next, future }: Props) {
   logRender("Timeline");
 
   const renderLineItems = (section: TimelineCard[]) => {
@@ -37,11 +37,17 @@ export function Timeline({ next, future }: Props): JSX.Element {
     <div className="timeline">
       <div className="timeline__next timeline__section">
         <span className="timeline__section__name">NEXT</span>
-        <div className="timeline__section__line">{renderLineItems(next)}</div>
+        <div className="timeline__section__line">
+          <LayoutGroup id="next-timeline">{renderLineItems(next)}</LayoutGroup>
+        </div>
       </div>
       <div className="timeline__future timeline__section">
         <span className="timeline__section__name">FUTURE</span>
-        <div className="timeline__section__line">{renderLineItems(future)}</div>
+        <div className="timeline__section__line">
+          <LayoutGroup id="future-timeline">
+            {renderLineItems(future)}
+          </LayoutGroup>
+        </div>
       </div>
     </div>
   );

From 3aa1462b95ae823c523ec96c37c9c1eefa163d21 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 15:29:32 +0100
Subject: [PATCH 08/10] style(action-phase): glowing animation for active card

---
 src/@types/storming.d.ts                      |  3 +-
 src/app.scss                                  |  4 +-
 src/components/cards/card.scss                | 76 +++++++++++--------
 src/components/cards/card.tsx                 | 66 ++++++++--------
 .../current-phase/current-phase.tsx           |  6 +-
 src/components/timeline/line-item.scss        |  9 ---
 src/styles/animations.scss                    | 12 +++
 7 files changed, 98 insertions(+), 78 deletions(-)
 create mode 100644 src/styles/animations.scss

diff --git a/src/@types/storming.d.ts b/src/@types/storming.d.ts
index 1d62347..6e073bd 100644
--- a/src/@types/storming.d.ts
+++ b/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
diff --git a/src/app.scss b/src/app.scss
index 1f053c3..668efd1 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,4 +1,6 @@
 @use '/src/styles/colors.scss';
+@use "/src/styles/animations.scss";
+
 #root {
   background-color: colors.$white;
 
@@ -26,7 +28,7 @@
     grid-area: board;
     display: flex;
     justify-content: center;
-    
+
   }
 
   .marketplace {
diff --git a/src/components/cards/card.scss b/src/components/cards/card.scss
index 91e0e7e..991791f 100644
--- a/src/components/cards/card.scss
+++ b/src/components/cards/card.scss
@@ -1,18 +1,18 @@
-@use '/src/styles/fonts.scss';
-@use '/src/styles/shadows.scss';
-@use '/src/styles/colors.scss';
+@use "/src/styles/fonts.scss";
+@use "/src/styles/shadows.scss";
+@use "/src/styles/colors.scss";
 
 $card-text-content-width: 120px;
 
 @mixin card-icon($action, $owner) {
-  background-image: url('./assets/' + $action + '-icn--' + $owner + '.svg');
+  background-image: url("./assets/" + $action + "-icn--" + $owner + ".svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 
 @mixin card-water-mark($action) {
-  background-image: url('./assets/' + $action + '-bg.svg');
+  background-image: url("./assets/" + $action + "-bg.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -22,11 +22,25 @@ $card-text-content-width: 120px;
   width: 180px;
   height: 280px;
   padding: 36px 24px;
-  background: #FFFFFF;
+  background: colors.$white;
   margin-top: 2vh;
   margin-bottom: 2vh;
   @include shadows.simple-box-shadow();
+}
 
+.action-card {
+  &--player {
+    --playerColor: #{colors.$player-primary};
+  }
+  &--enemy1 {
+    --playerColor: #{colors.$enemy1-primary};
+  }
+  &--enemy2 {
+    --playerColor: #{colors.$enemy2-primary};
+  }
+  &--enemy3 {
+    --playerColor: #{colors.$enemy3-primary};
+  }
 }
 
 .card {
@@ -36,14 +50,14 @@ $card-text-content-width: 120px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: left;
 
-  // border: 3px none transparent;
+  &--active {
+    animation: glow 2s ease-in-out infinite alternate;
+  }
 
   &--played {
-
     // to every children
-    &>* {
+    & > * {
       opacity: 0.3;
     }
   }
@@ -53,73 +67,72 @@ $card-text-content-width: 120px;
   }
 
   .action-card {
-
     &__icon {
       width: 70px;
       height: 55px;
 
       &--build-player {
-        @include card-icon('build', 'player')
+        @include card-icon("build", "player");
       }
 
       &--build-enemy1 {
-        @include card-icon('build', 'enemy1')
+        @include card-icon("build", "enemy1");
       }
 
       &--build-enemy2 {
-        @include card-icon('build', 'enemy2')
+        @include card-icon("build", "enemy2");
       }
 
       &--build-enemy3 {
-        @include card-icon('build', 'enemy3')
+        @include card-icon("build", "enemy3");
       }
 
       &--diplo-player {
-        @include card-icon('diplo', 'player')
+        @include card-icon("diplo", "player");
       }
 
       &--diplo-enemy1 {
-        @include card-icon('diplo', 'enemy1')
+        @include card-icon("diplo", "enemy1");
       }
 
       &--diplo-enemy2 {
-        @include card-icon('diplo', 'enemy2')
+        @include card-icon("diplo", "enemy2");
       }
 
       &--diplo-enemy3 {
-        @include card-icon('diplo', 'enemy3')
+        @include card-icon("diplo", "enemy3");
       }
 
       &--move-player {
-        @include card-icon('move', 'player')
+        @include card-icon("move", "player");
       }
 
       &--move-enemy1 {
-        @include card-icon('move', 'enemy1')
+        @include card-icon("move", "enemy1");
       }
 
       &--move-enemy2 {
-        @include card-icon('move', 'enemy2')
+        @include card-icon("move", "enemy2");
       }
 
       &--move-enemy3 {
-        @include card-icon('move', 'enemy3')
+        @include card-icon("move", "enemy3");
       }
 
       &--recruit-player {
-        @include card-icon('recruit', 'player')
+        @include card-icon("recruit", "player");
       }
 
       &--recruit-enemy1 {
-        @include card-icon('recruit', 'enemy1')
+        @include card-icon("recruit", "enemy1");
       }
 
       &--recruit-enemy2 {
-        @include card-icon('recruit', 'enemy2')
+        @include card-icon("recruit", "enemy2");
       }
 
       &--recruit-enemy3 {
-        @include card-icon('recruit', 'enemy3')
+        @include card-icon("recruit", "enemy3");
       }
     }
 
@@ -147,21 +160,20 @@ $card-text-content-width: 120px;
       height: 60%;
 
       &--build {
-        @include card-water-mark('build');
+        @include card-water-mark("build");
       }
 
       &--diplo {
-        @include card-water-mark('diplo');
+        @include card-water-mark("diplo");
       }
 
       &--move {
-        @include card-water-mark('move');
+        @include card-water-mark("move");
       }
 
       &--recruit {
-        @include card-water-mark('recruit');
+        @include card-water-mark("recruit");
       }
     }
   }
-
 }
diff --git a/src/components/cards/card.tsx b/src/components/cards/card.tsx
index 3e54666..9bf6c01 100644
--- a/src/components/cards/card.tsx
+++ b/src/components/cards/card.tsx
@@ -1,9 +1,39 @@
 import c from "classnames";
+import { isActionCard } from "models/new-card";
 import CARD_TEXT from "./card-text.json";
 
 import "./card.scss";
 
-function ActionCard({ card }: { card: ActionCard }): JSX.Element {
+type Props = {
+  card: Card;
+  status?: PlayerHandCardStatus | CardStatus;
+  onClick?: () => void;
+};
+
+export function Card({ card, status = "available", onClick }: Props) {
+  return (
+    <div
+      className={c(
+        "card",
+        `card--${status}`,
+        isActionCard(card) ? "action-card" : "event-card",
+        isActionCard(card) && `action-card--${card.owner}`,
+        onClick && status === "available" && "clickable"
+      )}
+      key={card.cardId}
+      onClick={onClick}
+      aria-disabled={!onClick}
+    >
+      {card.cardType === "actionCard" ? (
+        <ActionCardContents card={card} />
+      ) : (
+        <EventCardContents card={card} />
+      )}
+    </div>
+  );
+}
+
+function ActionCardContents({ card }: { card: ActionCard }) {
   const { action, owner } = card;
   return (
     <>
@@ -25,39 +55,7 @@ function ActionCard({ card }: { card: ActionCard }): JSX.Element {
   );
 }
 
-function EventCard({ card }: { card: EventCard }): JSX.Element {
+function EventCardContents({ card }: { card: EventCard }) {
   // TODO: Alpha
   return <div></div>;
 }
-
-type Props = {
-  card: Card;
-  status?: PlayerHandCardStatus;
-  onClick?: () => void;
-};
-
-export function Card({
-  card,
-  status = "available",
-  onClick,
-}: Props): JSX.Element {
-  return (
-    <div
-      className={c(
-        "card",
-        status === "played" && "card--played",
-        status === "selected" && "card--selected",
-        onClick && status === "available" && "clickable"
-      )}
-      key={card.cardId}
-      onClick={onClick}
-      aria-disabled={!onClick}
-    >
-      {card.cardType === "actionCard" ? (
-        <ActionCard card={card} />
-      ) : (
-        <EventCard card={card} />
-      )}
-    </div>
-  );
-}
diff --git a/src/components/current-phase/current-phase.tsx b/src/components/current-phase/current-phase.tsx
index ad1a31b..0355b04 100644
--- a/src/components/current-phase/current-phase.tsx
+++ b/src/components/current-phase/current-phase.tsx
@@ -43,9 +43,13 @@ export function CurrentPhase(props: ActionPhaseProps | PlanningPhaseProps) {
 }
 
 function ActionPhase({ activeCard, mustSkip, onSkip }: ActionPhaseProps) {
+  if (!activeCard) {
+    return <>ERROR</>;
+  }
+
   return (
     <div className="current-phase__action">
-      <IconCard card={activeCard} />
+      <Card card={activeCard} status="active" />
       <Button disabled={!mustSkip} onClick={onSkip}>
         SKIP
       </Button>
diff --git a/src/components/timeline/line-item.scss b/src/components/timeline/line-item.scss
index 5732b1e..7e2efa7 100644
--- a/src/components/timeline/line-item.scss
+++ b/src/components/timeline/line-item.scss
@@ -56,12 +56,3 @@ $CONTENT_SIZE: 22px;
     height: 100%;
   }
 }
-
-@keyframes border-solid {
-  0% {
-    border-style: dotted;
-  }
-  100% {
-    border-style: solid;
-  }
-}
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
new file mode 100644
index 0000000..0839ab6
--- /dev/null
+++ b/src/styles/animations.scss
@@ -0,0 +1,12 @@
+// --playerColor
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 3px var(--playerColor), 0 0 6px var(--playerColor);
+  }
+  50% {
+    box-shadow: 0 0 12px var(--playerColor), 0 0 24px var(--playerColor);
+  }
+  100% {
+    box-shadow: 0 0 3px var(--playerColor), 0 0 6px var(--playerColor);
+  }
+}

From 24a211599bced8b040f6c0a7da3503764b91c105 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 15:30:39 +0100
Subject: [PATCH 09/10] test: update snapshots

---
 .../__snapshots__/current-phase.test.tsx.snap | 23 +++++++++-----
 .../__snapshots__/timeline.test.tsx.snap      | 30 +++++++++++++------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/components/current-phase/__snapshots__/current-phase.test.tsx.snap b/src/components/current-phase/__snapshots__/current-phase.test.tsx.snap
index 1c9da09..3b3c23c 100644
--- a/src/components/current-phase/__snapshots__/current-phase.test.tsx.snap
+++ b/src/components/current-phase/__snapshots__/current-phase.test.tsx.snap
@@ -19,16 +19,25 @@ exports[`<CurrentPhase /> render: match snapshot - action 1`] = `
         class="current-phase__action"
       >
         <div
-          class="icon-card icon-card--player"
+          aria-disabled="true"
+          class="card card--active action-card action-card--player"
         >
           <div
-            class="icon-card__image icon-card__image--move"
+            class="action-card__icon action-card__icon--move-player"
           />
-          <span
-            class="icon-card__text"
+          <div
+            class="action-card__title"
           >
             move
-          </span>
+          </div>
+          <div
+            class="action-card__text"
+          >
+            Move up to two different Units
+          </div>
+          <div
+            class="action-card__water-mark action-card__water-mark--move"
+          />
         </div>
         <button
           class="button"
@@ -122,7 +131,7 @@ exports[`<CurrentPhase /> render: match snapshot - planification with cards 1`]
       >
         <div
           aria-disabled="true"
-          class="card"
+          class="card card--available action-card action-card--player"
         >
           <div
             class="action-card__icon action-card__icon--move-player"
@@ -143,7 +152,7 @@ exports[`<CurrentPhase /> render: match snapshot - planification with cards 1`]
         </div>
         <div
           aria-disabled="true"
-          class="card"
+          class="card card--available action-card action-card--player"
         >
           <div
             class="action-card__icon action-card__icon--recruit-player"
diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap
index 8e8ce8e..9efea1b 100644
--- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap
+++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap
@@ -17,25 +17,37 @@ exports[`<Timeline /> render: match snapshot 1`] = `
         class="timeline__section__line"
       >
         <div
-          class="line-item"
+          style="opacity: 0; transform: scale(0) translateZ(0);"
         >
           <div
-            class="line-item__content line-item__content--enemy1"
-          />
+            class="line-item line-item--commited"
+          >
+            <div
+              class="line-item__content line-item__content--enemy1"
+            />
+          </div>
         </div>
         <div
-          class="line-item"
+          style="opacity: 0; transform: scale(0) translateZ(0);"
         >
           <div
-            class="line-item__content line-item__content--enemy2"
-          />
+            class="line-item line-item--commited"
+          >
+            <div
+              class="line-item__content line-item__content--enemy2"
+            />
+          </div>
         </div>
         <div
-          class="line-item"
+          style="opacity: 0; transform: scale(0) translateZ(0);"
         >
           <div
-            class="line-item__content line-item__content--enemy3"
-          />
+            class="line-item line-item--commited"
+          >
+            <div
+              class="line-item__content line-item__content--enemy3"
+            />
+          </div>
         </div>
       </div>
     </div>

From b95dac93938084d8e91e874ef92e27e8d46260f7 Mon Sep 17 00:00:00 2001
From: Manu Artero Anguita <manutero.developer@gmail.com>
Date: Wed, 22 Nov 2023 16:16:38 +0100
Subject: [PATCH 10/10] fix(board): highlight available tiles for move with
 player's color

---
 src/components/board/board-controller.tsx | 10 +++--
 src/components/board/board.test.tsx       |  2 +-
 src/components/board/board.tsx            |  6 +--
 src/components/board/tile.scss            | 45 ++++++++++++-----------
 src/components/board/tile.tsx             | 16 ++++++--
 5 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/components/board/board-controller.tsx b/src/components/board/board-controller.tsx
index d827afc..161d060 100644
--- a/src/components/board/board-controller.tsx
+++ b/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:
@@ -180,7 +180,11 @@ export function BoardController() {
 
   return (
     <div className="board-container">
-      <Board state={board} onTileClick={onTileClick} />
+      <Board
+        state={board}
+        activePlayer={gameContext.activePlayer}
+        onTileClick={onTileClick}
+      />
       {buildingTile && (
         <BuildDialog
           onWallOption={() => {
diff --git a/src/components/board/board.test.tsx b/src/components/board/board.test.tsx
index 5cbf91f..8e076ee 100644
--- a/src/components/board/board.test.tsx
+++ b/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", () => {
diff --git a/src/components/board/board.tsx b/src/components/board/board.tsx
index a6c1d9a..a44a5b4 100644
--- a/src/components/board/board.tsx
+++ b/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);
 }
diff --git a/src/components/board/tile.scss b/src/components/board/tile.scss
index 691d84e..30e3f4a 100644
--- a/src/components/board/tile.scss
+++ b/src/components/board/tile.scss
@@ -1,5 +1,5 @@
-@use '/src/styles/colors.scss';
-@use 'tile-size.scss' as *;
+@use "/src/styles/colors.scss";
+@use "tile-size.scss" as *;
 
 $forbidden-tile: rgba(190, 88, 88, 0.5);
 
@@ -8,14 +8,17 @@ $horizontal-padding: calc($TILE_SIZE/ 30);
 $tile-stroke: 3px;
 $default-opacity: 0.7;
 
-@mixin setStroke($player, $color) {
-
-  // tile__available--player
-  &__#{$player} {
-    path {
-      stroke: $color;
-    }
-  }
+.tile--player {
+  --playerColor: #{colors.$player-primary};
+}
+.tile--enemy1 {
+  --playerColor: #{colors.$enemy1-primary};
+}
+.tile--enemy2 {
+  --playerColor: #{colors.$enemy2-primary};
+}
+.tile--enemy3 {
+  --playerColor: #{colors.$enemy3-primary};
 }
 
 @mixin setBackgroundImage($element, $image) {
@@ -23,7 +26,7 @@ $default-opacity: 0.7;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url('./assets/#{$image}');
+    background-image: url("./assets/#{$image}");
   }
 }
 
@@ -46,11 +49,9 @@ $default-opacity: 0.7;
 
   &--available {
     opacity: 1;
-
-    @include setStroke(player, colors.$player-primary, );
-    @include setStroke(enemy1, colors.$enemy1-primary, );
-    @include setStroke(enemy2, colors.$enemy2-primary, );
-    @include setStroke(enemy3, colors.$enemy3-primary, );
+    path {
+      stroke: var(--playerColor) !important;
+    }
   }
 
   /* debug: turn on at tile.tsx */
@@ -61,7 +62,8 @@ $default-opacity: 0.7;
     z-index: 1;
   }
 
-  &__content {}
+  &__content {
+  }
 
   &__building {
     // make it relative to $TILE_SIZE
@@ -71,10 +73,10 @@ $default-opacity: 0.7;
     position: absolute;
     bottom: 1vh; // building in the bottom
 
-    @include setBackgroundImage('player', 'castle--player.png');
-    @include setBackgroundImage('enemy1', 'castle--enemy1.png');
-    @include setBackgroundImage('enemy2', 'castle--enemy2.png');
-    @include setBackgroundImage('enemy3', 'castle--enemy3.png');
+    @include setBackgroundImage("player", "castle--player.png");
+    @include setBackgroundImage("enemy1", "castle--enemy1.png");
+    @include setBackgroundImage("enemy2", "castle--enemy2.png");
+    @include setBackgroundImage("enemy3", "castle--enemy3.png");
   }
 
   &__hexagon {
@@ -82,6 +84,7 @@ $default-opacity: 0.7;
 
     path {
       stroke-width: $tile-stroke;
+      stroke: colors.$base-grey;
     }
 
     &--forbidden {
diff --git a/src/components/board/tile.tsx b/src/components/board/tile.tsx
index 67c6a43..8712cd6 100644
--- a/src/components/board/tile.tsx
+++ b/src/components/board/tile.tsx
@@ -7,32 +7,40 @@ import { coordinates } from "models/tiles";
 
 import "./tile.scss";
 
-interface Props {
+type Props = {
   id: TileID;
   status?: TileStatus;
   terrain?: TerrainType;
   building?: BuildingType;
   owner?: PlayerType;
+  activePlayer?: PlayerType;
   children?: React.ReactNode;
   onClick: (tileID: Coordinates) => void;
-}
+};
 
 export function Tile({
   id,
   terrain,
   building,
   owner,
+  activePlayer,
   status,
   children,
   onClick,
-}: Props): JSX.Element {
+}: Props) {
   const tileID = coordinates(id);
 
   /* debug: turn on debug ID */
   const debugTileID = false;
 
   return (
-    <div className={c("tile", status === "available" && "tile--available")}>
+    <div
+      className={c(
+        "tile",
+        status && `tile--${status}`,
+        activePlayer && status === "available" && `tile--${activePlayer}`
+      )}
+    >
       {debugTileID && <span className="tile__id">{id}</span>}
       {terrain === "mountain" && (
         <MountainSvg className={c("tile__terrain", "tile__terrain-mountain")} />