From d8ba5a5e9b3305c382d0796c04eed534b6a57dd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ta=C5=84czyk?= <fb@tanczyk.pl>
Date: Tue, 15 Oct 2024 02:11:12 +0200
Subject: [PATCH] command selector

---
 .../src/screens/designer/designer-screen.tsx  |  9 ++-
 .../src/screens/designer/designer-types.ts    |  2 +-
 .../src/screens/designer/unit-info-panel.tsx  | 59 +++++++++++++++++--
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/games/masterplan/src/screens/designer/designer-screen.tsx b/games/masterplan/src/screens/designer/designer-screen.tsx
index 8b714058..3f863fb7 100644
--- 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;
-`;
+`;
\ No newline at end of file
diff --git a/games/masterplan/src/screens/designer/designer-types.ts b/games/masterplan/src/screens/designer/designer-types.ts
index 83bfc5a3..0377a6a7 100644
--- 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,
   }));
-}
+}
\ No newline at end of file
diff --git a/games/masterplan/src/screens/designer/unit-info-panel.tsx b/games/masterplan/src/screens/designer/unit-info-panel.tsx
index 745ae286..6113d861 100644
--- 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;
+  }
+`;