Added ability to see enemy stats on hover

src/features/game/Game.tsx

@@ -15,6 +15,7 @@ import {
     selectGridInfo,
     aiTurn,
     selectActivePlayerUnits,
+    selectHoveredUnit,
 } from './gameSlice'
 import { Grid, gridDimensions, positionOfGrid } from './Grid'
 import { GridCell } from './GridCell'
@@ -33,6 +34,7 @@ export function Game() {
     const grid = useSelector((state: RootState) => state.game.grid)
     const phase = useSelector((state: RootState) => state.game.phase)
     const selectedUnit = useSelector(selectSelectedUnit)
+    const hoveredUnit = useSelector(selectHoveredUnit)
     const activePlayer = useSelector(selectActivePlayer)
     const gridInfo = useSelector(selectGridInfo)
     return (
@@ -73,7 +75,8 @@ export function Game() {
 
             <div id={styles.mapAndInfo}>
                 <div className={styles.wrapper}>{genGrid(grid, gridInfo, phase)}</div>
-                {selectedUnit && <UnitInfo unit={selectedUnit} />}
+                {selectedUnit && <UnitInfo unit={selectedUnit} header={"Selected"} />}
+                {hoveredUnit && <UnitInfo unit={hoveredUnit} header={"Info"} />}
             </div>
             <button onClick={() => dispatch(reset())}>reset</button>
         </React.Fragment>

src/features/game/GridCell.tsx

@@ -1,4 +1,4 @@
-import { attack, move, select, Phase, GridInfo } from './gameSlice'
+import { attack, move, select, hoverUnit, Phase, GridInfo } from './gameSlice'
 import { useAppDispatch } from '../../app/hooks'
 import * as d3 from 'd3-color'
 
@@ -91,6 +91,17 @@ export const GridCell = ({ gridInfo, phase }: Props) => {
         }
     }
 
+    const handleMouseEnter = ()=>{
+        if (unit && unitType ==="enemy"){
+            dispatch(hoverUnit(position));
+        }
+    }
+
+    //TODO: Hmm, can I be assured that the mouseLeave fires before the mouseEnter of a neighboring square?
+    const handleMouseLeave = ()=>{
+        dispatch(hoverUnit(undefined));
+    }
+
     // A square is clickable if it is a valid attack square, a unit, or a valid movement space.
     // It should be a cursor if its your unit or a move square
     // it should be a cross hair if its a targetable enemy unit
@@ -110,7 +121,7 @@ export const GridCell = ({ gridInfo, phase }: Props) => {
         cursor: cursorStyle,
     }
     return (
-        <div style={style} onClick={handleClick}>
+        <div style={style} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
             {unitHead && unit && unit.stats.icon}
             {moveIcon}
         </div>

src/features/game/UnitInfo.tsx

@@ -1,9 +1,14 @@
 import Unit from '../unit/Unit'
 import styles from './Game.module.css'
 
-const UnitInfo = ({ unit }: { unit: Unit }) => (
+type Props = {
+    unit : Unit,
+    header: string, 
+}
+
+const UnitInfo = ({ unit, header }: Props) => (
     <div className={styles.unitInfo}>
-        <h2 style={{ color: unit.stats.headColor }}>{unit.stats.name}</h2>
+        <h2 style={{ color: unit.stats.headColor }}>{`${header} : ${unit.stats.name}`}</h2>
         <table>
             <tbody>
                 <tr>

src/features/game/gameSlice.ts

@@ -5,6 +5,7 @@ import { generateGridInfo, targetInRange, aiSubTurn } from '../search/Brain'
 import { Grid, inGrid, rectGridConstructor } from './Grid'
 import * as d3 from 'd3-color'
 import { RootState } from '../../app/store'
+import { stat } from 'fs'
 
 const UNIT_LIGHTNESS = 0.6 // 0 to 1
 const UNIT_SATURATION = 1 // 0 to 2
@@ -31,6 +32,7 @@ export interface GameState {
     turn: number
     units: { [key: string]: Unit }
     selectedUnit?: string
+    hoveredUnit?: string
     grid: Grid
     winner?: string
     phase: Phase
@@ -255,6 +257,18 @@ const moveAction = (state: GameState, action: PayloadAction<Position>) => {
     }
 }
 
+const hoverAction = (state: GameState, action: PayloadAction<Position|undefined>) =>{
+    const enemyUnits = getEnemyUnits(state);
+    if (action.payload){
+        const hoveredUnit = unitAt(action.payload, enemyUnits);
+        if (hoveredUnit){
+            state.hoveredUnit = hoveredUnit.stats.id;
+        }
+    }else{
+        state.hoveredUnit=undefined;
+    }
+}
+
 const selectAction = (state: GameState, action: PayloadAction<Position>) => {
     const activeUnits = getActivePlayerUnits(state)
     const selectedUnit = unitAt(action.payload, activeUnits)
@@ -321,6 +335,7 @@ export const gameSlice = createSlice({
         },
         move: moveAction,
         select: selectAction,
+        hoverUnit:hoverAction,
         reset: () => {
             return initialState
         },
@@ -341,7 +356,7 @@ export const gameSlice = createSlice({
     },
 })
 
-export const { aiTurn, move, select, attack, reset, endTurn, clickMove, clickAttack } =
+export const { aiTurn, move, select, hoverUnit, attack, reset, endTurn, clickMove, clickAttack } =
     gameSlice.actions
 
 // Getters
@@ -350,6 +365,7 @@ const getActivePlayerUnits = (state: GameState) => getUnitsForPlayer(state, getA
 const getUnitsForPlayer = (state: GameState, player: Player) =>
     player.unitIds.map((unitId) => state.units[unitId]).filter((unit) => unit !== undefined)
 const getActivePlayer = (state: GameState) => state.players[state.turn % state.players.length]
+const getHoveredUnit = (state: GameState) => state.hoveredUnit ? state.units[state.hoveredUnit] : undefined; 
 const getSelectedUnit = (state: GameState) =>
     state.selectedUnit ? state.units[state.selectedUnit] : undefined
 const getEnemyUnits = (state: GameState) => {
@@ -370,6 +386,7 @@ export const selectActivePlayerUnits = (state: RootState) => getActivePlayerUnit
 export const selectActivePlayer = (state: RootState) => getActivePlayer(state.game)
 export const selectSelectedUnit = (state: RootState) => getSelectedUnit(state.game)
 export const selectEnemyUnits = (state: RootState) => getEnemyUnits(state.game)
+export const selectHoveredUnit =  (state: RootState) => getHoveredUnit(state.game)
 
 // Cached Selectors
 export const selectGridInfo = createSelector(