diff --git a/src/features/game/Game.tsx b/src/features/game/Game.tsx index 9c77412..ac17844 100644 --- a/src/features/game/Game.tsx +++ b/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() {
{genGrid(grid, gridInfo, phase)}
- {selectedUnit && } + {selectedUnit && } + {hoveredUnit && }
diff --git a/src/features/game/GridCell.tsx b/src/features/game/GridCell.tsx index 60d82a6..c0c7a45 100644 --- a/src/features/game/GridCell.tsx +++ b/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 ( -
+
{unitHead && unit && unit.stats.icon} {moveIcon}
diff --git a/src/features/game/UnitInfo.tsx b/src/features/game/UnitInfo.tsx index 1503479..4a96cc2 100644 --- a/src/features/game/UnitInfo.tsx +++ b/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) => (
-

{unit.stats.name}

+

{`${header} : ${unit.stats.name}`}

diff --git a/src/features/game/gameSlice.ts b/src/features/game/gameSlice.ts index 8933f11..c30d3a0 100644 --- a/src/features/game/gameSlice.ts +++ b/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) => { } } +const hoverAction = (state: GameState, action: PayloadAction) =>{ + 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) => { 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(