fix dimensions on designer

games/masterplan/src/global-styles.ts

@@ -26,7 +26,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   background-color: #242424;
   overscroll-behavior: none;
   background: radial-gradient(ellipse at center, #6B8E23 0%, #6B8E23 64%, #5b791e 100%);

games/masterplan/src/screens/battle/battle-styles.ts

@@ -215,8 +215,8 @@ export const BattleStyles = createGlobalStyle`
 }
 
 canvas#layer-default {
-  max-width: 100vw;
-  max-height: 100vh;
+  max-width: 100%;
+  max-height: 100%;
   position: absolute;
   pointer-events: none;
   z-index: 1;

games/masterplan/src/screens/battle/states.ts

@@ -24,22 +24,22 @@ type StateHandler<T = unknown> = (eventType: number, eventObject: T) => StateHan
 /**
  * Event processing
  */
-let currentState: StateHandler;
+let currentState: StateHandler | undefined;
 
 export function initCurrentState() {
   currentState = stateInit() as StateHandler;
 }
 
 export function updateState(eventType: number, eventObject?: unknown) {
-  const nextState = currentState(eventType, eventObject);
+  const nextState = currentState?.(eventType, eventObject);
 
   if (!nextState) {
     return;
   }
 
   if (nextState !== currentState) {
     if (DEBUG) {
-      console.log('Transition from ' + currentState.name + ' to ' + nextState.name);
+      console.log('Transition from ' + currentState?.name + ' to ' + nextState.name);
     }
 
     currentState = nextState;

games/masterplan/src/screens/designer/canvas-grid.tsx

@@ -134,16 +134,16 @@ export const CanvasGrid: React.FC<CanvasGridProps> = React.memo(
 CanvasGrid.displayName = 'CanvasGrid';
 
 const CanvasContainer = styled.canvas`
-  position: absolute;
+  position: fixed;
   &[data-is-player-area='false'] {
     transform: translateX(-50%);
-    bottom: 0;
+    bottom: 50%;
   }
   &[data-is-player-area='true'] {
     transform: translateX(-50%);
-    top: 0;
+    top: 50%;
   }
   left: 50%;
-  max-width: 90vw;
-  max-height: 50vh;
+  max-width: 100%;
+  max-height: 50%;
 `;

games/masterplan/src/screens/designer/components/canvas/grid-interaction-handler.tsx

@@ -125,7 +125,6 @@ export class GridInteractionHandler {
     event: React.TouchEvent<HTMLCanvasElement>,
     handler: (event: React.TouchEvent<HTMLCanvasElement>) => void,
   ): void {
-    event.preventDefault();
     handler(event);
   }
 

games/masterplan/src/screens/designer/components/info-panel-container.tsx

@@ -116,8 +116,8 @@ export const InfoPanelContainer: React.FC<InfoPanelContainerProps> = ({ unit, on
       <PanelSection>
         <Label>Fomration:</Label>
         <Select value={unit.command} onChange={handleFormationChange}>
-          {getFormations(unit.sizeCol, unit.sizeRow).map((formation) => (
-            <option value={`${formation.sizeCol}x${formation.sizeRow}`}>
+          {getFormations(unit.sizeCol, unit.sizeRow).map((formation, idx) => (
+            <option key={idx} value={`${formation.sizeCol}x${formation.sizeRow}`}>
               {formation.sizeCol}x{formation.sizeRow}
             </option>
           ))}

games/masterplan/src/screens/designer/opposition-plan.tsx

@@ -61,19 +61,6 @@ const OppositionOverlay = styled.div`
   justify-content: center;
   align-items: center;
   pointer-events: none;
-  animation: pulseRed 2s infinite;
-
-  @keyframes pulseRed {
-    0% {
-      background: rgba(255, 0, 0, 0.1);
-    }
-    50% {
-      background: rgba(255, 0, 0, 0.2);
-    }
-    100% {
-      background: rgba(255, 0, 0, 0.1);
-    }
-  }
 `;
 
 const OverlayText = styled.div`
@@ -83,4 +70,4 @@ const OverlayText = styled.div`
   background: rgba(0, 0, 0, 0.7);
   padding: 16px 32px;
   border-radius: 8px;
-`;
+`;

games/masterplan/src/screens/designer/utils/ui-utils.ts

@@ -30,26 +30,25 @@ export function calculatePanelPosition(
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
 
-  const scaleX = rect.width / canvas.width;
-  const scaleY = rect.height / canvas.height;
+  const scale = viewportWidth > viewportHeight ? rect.width / canvas.width : rect.height / canvas.height;
 
   // Calculate unit center position in screen coordinates
-  const unitCenterX = (unit.col + MAX_COL / 2 + unit.sizeCol / 2) * cellWidth * scaleX;
-  const unitCenterY = (unit.row + MAX_ROW / 2 + unit.sizeRow / 2) * cellHeight * scaleY;
+  const unitCenterX = (unit.col + MAX_COL / 2 + unit.sizeCol / 2) * cellWidth * scale;
+  const unitCenterY = (unit.row + MAX_ROW / 2 + unit.sizeRow / 2) * cellHeight * scale;
   const screenX = rect.left + unitCenterX;
   const screenY = rect.top + unitCenterY;
 
   // Determine if unit is on the left or right half of the screen
   const isUnitOnLeftHalf = screenX < viewportWidth / 2;
-  const isUnitOnAboveHalf = screenY < viewportHeight * 0.75;
+  const isUnitOnAboveHalf = screenY < viewportHeight / 2;
 
   // Calculate x position based on which half the unit is on
-  const x = isUnitOnLeftHalf
-    ? screenX + (unit.sizeCol / 2) * cellWidth * scaleX + MARGIN // Right side
-    : screenX - (unit.sizeCol / 2) * cellWidth * scaleX - panelDimensions.width - MARGIN; // Left side
+  const x = !isUnitOnLeftHalf
+    ? screenX + (unit.sizeCol / 2) * cellWidth * scale + MARGIN // Right side
+    : screenX - (unit.sizeCol / 2) * cellWidth * scale - panelDimensions.width - MARGIN; // Left side
 
   // Calculate y position at bottom with margin)
-  const y = isUnitOnAboveHalf
+  const y = !isUnitOnAboveHalf
     ? screenY + panelDimensions.height // Below
     : screenY - panelDimensions.height; // Above
 

games/masterplan/src/screens/intro/intro-screen.tsx

@@ -6,7 +6,7 @@ const IntroContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   background-color: #242424;
   color: #ffffff;
   width: 100%;