command selector

gamedevpl · Oct 15, 2024 · d8ba5a5 · d8ba5a5
1 parent 6e65b01
commit d8ba5a5
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 9 deletions.
diff --git a/games/masterplan/src/screens/designer/designer-screen.tsx b/games/masterplan/src/screens/designer/designer-screen.tsx
@@ -9,7 +9,7 @@ import { DESIGN_FIELD_WIDTH, DESIGN_FIELD_HEIGHT, SOLDIER_WIDTH, SOLDIER_HEIGHT
 import { UnitInfoPanel } from './unit-info-panel';
 import { calculatePanelPosition } from './utils/ui-utils';
 import { OppositionPlan } from './opposition-plan';
-import { rotateUnits, Unit } from './designer-types';
+import { rotateUnits, Unit, CommandType } from './designer-types';
 import { balancedAssault } from './plans';
 import { generateTerrain, TerrainData } from '../battle/game/terrain/terrain-generator';
 
@@ -113,7 +113,10 @@ export const DesignerScreen: React.FC<DesignerScreenProps> = ({ onStartBattle, i
   );
 };
 
-const DEFAULT_UNITS: Unit[] = rotateUnits(balancedAssault.units);
+const DEFAULT_UNITS: Unit[] = rotateUnits(balancedAssault.units.map(unit => ({
+  ...unit,
+  command: 'advance-wait' as CommandType // Set a default command
+})));
 
 const DesignerContainer = styled.div`
   position: absolute;
@@ -143,4 +146,4 @@ const StartBattleButton = styled.button`
   border: none;
   border-radius: 5px;
   cursor: pointer;
-`;
+`;
diff --git a/games/masterplan/src/screens/designer/designer-types.ts b/games/masterplan/src/screens/designer/designer-types.ts
@@ -18,4 +18,4 @@ export function rotateUnits(units: Unit[]): Unit[] {
     col: -unit.col,
     row: -unit.row,
   }));
-}
+}
diff --git a/games/masterplan/src/screens/designer/unit-info-panel.tsx b/games/masterplan/src/screens/designer/unit-info-panel.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Unit } from './designer-types';
+import { Unit, CommandType } from './designer-types';
 import { UNIT_ASSET_PATHS } from '../battle/assets';
 
 interface UnitInfoPanelProps {
@@ -10,9 +10,9 @@ interface UnitInfoPanelProps {
 }
 
 export const UnitInfoPanel: React.FC<UnitInfoPanelProps> = ({ unit, position, onModifyUnit }) => {
-  const [expandedIcon, setExpandedIcon] = useState<'type' | 'formation' | null>(null);
+  const [expandedIcon, setExpandedIcon] = useState<'type' | 'formation' | 'command' | null>(null);
 
-  const handleIconClick = (iconType: 'type' | 'formation') => {
+  const handleIconClick = (iconType: 'type' | 'formation' | 'command') => {
     setExpandedIcon(expandedIcon === iconType ? null : iconType);
   };
 
@@ -26,6 +26,11 @@ export const UnitInfoPanel: React.FC<UnitInfoPanelProps> = ({ unit, position, on
     setExpandedIcon(null);
   };
 
+  const handleCommandChange = (newCommand: CommandType) => {
+    onModifyUnit(unit.id, { command: newCommand });
+    setExpandedIcon(null);
+  };
+
   return (
     <PanelContainer style={{ left: position.x, top: position.y }}>
       <IconWrapper onClick={() => handleIconClick('type')}>
@@ -55,6 +60,18 @@ export const UnitInfoPanel: React.FC<UnitInfoPanelProps> = ({ unit, position, on
           </ExpandedOptions>
         )}
       </IconWrapper>
+      <IconWrapper onClick={() => handleIconClick('command')}>
+        <CommandIcon>{unit.command}</CommandIcon>
+        {expandedIcon === 'command' && (
+          <ExpandedOptions>
+            {(['advance-wait', 'advance', 'wait-advance', 'flank-left', 'flank-right'] as const).map((command) => (
+              <CommandOption key={command} onClick={() => handleCommandChange(command)}>
+                {command}
+              </CommandOption>
+            ))}
+          </ExpandedOptions>
+        )}
+      </IconWrapper>
     </PanelContainer>
   );
 };
@@ -117,12 +134,25 @@ const FormationIcon = styled.div`
   color: black;
 `;
 
+const CommandIcon = styled.div`
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ddd;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: bold;
+  color: black;
+  text-align: center;
+`;
+
 const ExpandedOptions = styled.div`
   position: absolute;
-  top: 100%;
+  bottom: 100%;
   left: 0;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(1, 1fr);
   gap: 5px;
   padding: 5px;
   background-color: white;
@@ -172,3 +202,22 @@ const FormationOption = styled.div`
     background-color: #ddd;
   }
 `;
+
+const CommandOption = styled.div`
+  width: 120px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #eee;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  color: black;
+
+  &:hover {
+    background-color: #ddd;
+  }
+`;