cypressf · cypressf · May 19, 2022
diff --git a/src/features/game/GridCell.module.css b/src/features/game/GridCell.module.css
@@ -0,0 +1,34 @@
+.cell {
+    position: relative;
+    transition: 'background-color 0.2s';
+}
+
+.link {
+    position:absolute;
+    width:10px;
+    height:10px;
+}
+
+.left {
+    height:50px;
+    left:-10px;
+    top:0;
+}
+
+.right {
+    height:50px;
+    right:-10px;
+    top:0;
+}
+
+.up {
+    width:50px;
+    top:-10px;
+    left:0;
+}
+
+.down {
+    width:50px;
+    bottom:-10px;
+    left:0;
+}
diff --git a/src/features/game/GridCell.tsx b/src/features/game/GridCell.tsx
@@ -1,6 +1,7 @@
 import { attack, move, select, type Phase, type GridInfo } from './gameSlice'
 import { useAppDispatch } from '../../app/hooks'
 import * as d3 from 'd3-color'
+import styles from './GridCell.module.css'
 
 const SELECTED_COLOR = '#384bfa'
 const VALID_MOVE_POSITION_COLOR = 'rgb(201, 230, 253)'
@@ -24,24 +25,19 @@ export const GridCell = ({ gridInfo, phase }: Props) => {
         unitType,
         unitSelected,
         unitHead,
+        unitLink,
         showMoveHighlight,
         showAttackHighlight,
         showImmediateMove,
     } = gridInfo
     let color: string
     let glowColor: string | undefined = undefined
     if (unit) {
-        const modifiableColor = unitHead
-            ? d3.cubehelix(unit.stats.headColor)!
-            : d3.cubehelix(unit.stats.color)!
+        const modifiableColor = d3.cubehelix(unit.stats.color)
 
         if (unitType === 'enemy') {
-            if (unitHead) {
-                modifiableColor.s *= 0.2
-                modifiableColor.l *= 1.5
-            } else {
-                modifiableColor.s *= 0.2
-            }
+            modifiableColor.s *= 0.2
+            modifiableColor.l *= 1.3
         }
         color = modifiableColor.toString()
         if (unitSelected) {
@@ -102,16 +98,30 @@ export const GridCell = ({ gridInfo, phase }: Props) => {
         cursorStyle = 'crosshair'
     }
 
+    const unitLinkClass = unitLink
+        ? {
+              left: styles.left,
+              right: styles.right,
+              up: styles.up,
+              down: styles.down,
+          }[unitLink]
+        : undefined
+
     const style = {
         backgroundColor: color,
         boxShadow: glowColor ? '0px 0px 10px' + glowColor : undefined,
-        transition: 'background-color 0.2s',
         cursor: cursorStyle,
     }
     return (
-        <div style={style} onClick={handleClick}>
+        <div style={style} onClick={handleClick} className={styles.cell}>
             {unitHead && unit && unit.stats.icon}
             {moveIcon}
+            {unitLink && (
+                <div
+                    className={unitLinkClass + ' ' + styles.link}
+                    style={{ backgroundColor: color }}
+                ></div>
+            )}
         </div>
     )
 }
diff --git a/src/features/game/UnitInfo.tsx b/src/features/game/UnitInfo.tsx
@@ -3,7 +3,7 @@ import styles from './Game.module.css'
 
 const UnitInfo = ({ unit }: { unit: Unit }) => (
     <div className={styles.unitInfo}>
-        <h2 style={{ color: unit.stats.headColor }}>{unit.stats.name}</h2>
+        <h2 style={{ color: unit.stats.color }}>{unit.stats.name}</h2>
         <table>
             <tbody>
                 <tr>

diff --git a/src/features/game/gameSlice.ts b/src/features/game/gameSlice.ts
@@ -13,10 +13,6 @@ const unitColor = (hue: number) => {
     return d3.cubehelix(hue, UNIT_SATURATION, UNIT_LIGHTNESS).toString()
 }
 
-const unitHeadColor = (hue: number) => {
-    return d3.cubehelix(hue, UNIT_SATURATION + 0.2, UNIT_LIGHTNESS - 0.3).toString()
-}
-
 export type PlayerType = 'human' | 'ai'
 
 export type Player = {
@@ -49,7 +45,6 @@ const defaultUnits: Unit[] = [
             movement: 2,
             attack: 1,
             color: unitColor(0),
-            headColor: unitHeadColor(0),
             id: 'a',
             icon: '🐱',
         },
@@ -65,7 +60,6 @@ const defaultUnits: Unit[] = [
             movement: 2,
             attack: 1,
             color: unitColor(30),
-            headColor: unitHeadColor(30),
             id: 'b',
             icon: '🐶',
         },
@@ -81,7 +75,6 @@ const defaultUnits: Unit[] = [
             movement: 2,
             attack: 1,
             color: unitColor(60),
-            headColor: unitHeadColor(60),
             id: 'c',
             icon: '🐷',
         },
@@ -101,7 +94,6 @@ const defaultUnits: Unit[] = [
             movement: 1,
             attack: 1,
             color: unitColor(500),
-            headColor: unitHeadColor(500),
             id: 'x',
             icon: '🥸',
         },
@@ -121,7 +113,6 @@ const defaultUnits: Unit[] = [
             movement: 1,
             attack: 1,
             color: unitColor(530),
-            headColor: unitHeadColor(530),
             id: 'y',
             icon: '🤡',
         },
@@ -141,7 +132,6 @@ const defaultUnits: Unit[] = [
             movement: 1,
             attack: 1,
             color: unitColor(560),
-            headColor: unitHeadColor(560),
             id: 'z',
             icon: '🤖',
         },

diff --git a/src/features/search/Brain.ts b/src/features/search/Brain.ts
@@ -7,6 +7,7 @@ import {
     overlapsAnything,
     type Phase,
     type Player,
+    type Direction,
 } from '../game/gameSlice'
 import { type Grid, inGrid } from '../game/Grid'
 
@@ -75,6 +76,20 @@ const positionsWithinRange = (position: Position, distance: number) => {
     return toReturn
 }
 
+const getDirection = (pos1: Position, pos2: Position): Direction | undefined => {
+    if (pos1.x > pos2.x) {
+        return 'right'
+    } else if (pos1.x < pos2.x) {
+        return 'left'
+    } else if (pos1.y > pos2.y) {
+        return 'down'
+    } else if (pos1.y < pos2.y) {
+        return 'up'
+    } else {
+        return undefined
+    }
+}
+
 const adjacent = (position: Position) => positionsWithinRange(position, 1)
 
 export const aiSubTurn = (
@@ -262,15 +277,15 @@ export const generateGridInfo = (
 
     units.forEach((unit) => {
         const isActivePlayerUnit = activePlayer.unitIds.includes(unit.stats.id)
-        unit.positions.forEach((position) => {
+        unit.positions.forEach((position, i) => {
+            const previous = unit.positions[i - 1]
             gridInfo[posHash(position)] = {
                 position,
                 unit: unit,
                 unitType: isActivePlayerUnit ? 'ally' : 'enemy',
                 unitSelected: isSelected(position, selectedUnit),
                 unitHead: posEquals(head(unit), position),
-                unitLink: undefined, // TODO
-                showImmediateMove: undefined, // TODO
+                unitLink: previous ? getDirection(previous, position) : undefined,
             }
         })
         if (selectedUnit && phase === 'move') {
@@ -289,15 +304,7 @@ export const generateGridInfo = (
                 grid
             )
             immediateMoves.forEach((position) => {
-                if (position.x > unitHead.x) {
-                    gridInfo[posHash(position)].showImmediateMove = 'right'
-                } else if (position.x < unitHead.x) {
-                    gridInfo[posHash(position)].showImmediateMove = 'left'
-                } else if (position.y > unitHead.y) {
-                    gridInfo[posHash(position)].showImmediateMove = 'down'
-                } else if (position.y < unitHead.y) {
-                    gridInfo[posHash(position)].showImmediateMove = 'up'
-                }
+                gridInfo[posHash(position)].showImmediateMove = getDirection(position, unitHead)
             })
         }
         if (selectedUnit && phase === 'attack' && !selectedUnit.attackUsed) {

diff --git a/src/features/unit/Unit.ts b/src/features/unit/Unit.ts
@@ -8,7 +8,6 @@ export default interface Unit {
         readonly attack: number
         readonly name: string
         readonly color: string
-        readonly headColor: string
         readonly id: string
         readonly icon: string
     }