From 34036fab4568a330980f265aa9e8664a20558011 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ta=C5=84czyk?= <fb@tanczyk.pl>
Date: Sat, 26 Oct 2024 19:46:21 +0200
Subject: [PATCH] fix dimensions on designer

---
 games/masterplan/src/global-styles.ts           |  2 +-
 .../src/screens/battle/battle-styles.ts         |  4 ++--
 games/masterplan/src/screens/battle/states.ts   |  6 +++---
 .../src/screens/designer/canvas-grid.tsx        | 10 +++++-----
 .../canvas/grid-interaction-handler.tsx         |  1 -
 .../components/info-panel-container.tsx         |  4 ++--
 .../src/screens/designer/opposition-plan.tsx    | 15 +--------------
 .../src/screens/designer/utils/ui-utils.ts      | 17 ++++++++---------
 .../src/screens/intro/intro-screen.tsx          |  2 +-
 9 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/games/masterplan/src/global-styles.ts b/games/masterplan/src/global-styles.ts
index 619acc57..53d00a50 100644
--- a/games/masterplan/src/global-styles.ts
+++ b/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%);
diff --git a/games/masterplan/src/screens/battle/battle-styles.ts b/games/masterplan/src/screens/battle/battle-styles.ts
index f523fdd5..03c27562 100644
--- a/games/masterplan/src/screens/battle/battle-styles.ts
+++ b/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;
diff --git a/games/masterplan/src/screens/battle/states.ts b/games/masterplan/src/screens/battle/states.ts
index 0aaeaa2c..8c175c9b 100644
--- a/games/masterplan/src/screens/battle/states.ts
+++ b/games/masterplan/src/screens/battle/states.ts
@@ -24,14 +24,14 @@ 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;
@@ -39,7 +39,7 @@ export function updateState(eventType: number, eventObject?: unknown) {
 
   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;
diff --git a/games/masterplan/src/screens/designer/canvas-grid.tsx b/games/masterplan/src/screens/designer/canvas-grid.tsx
index 82f60cf4..a85eb2ae 100644
--- a/games/masterplan/src/screens/designer/canvas-grid.tsx
+++ b/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%;
 `;
diff --git a/games/masterplan/src/screens/designer/components/canvas/grid-interaction-handler.tsx b/games/masterplan/src/screens/designer/components/canvas/grid-interaction-handler.tsx
index 6266781f..651169a2 100644
--- a/games/masterplan/src/screens/designer/components/canvas/grid-interaction-handler.tsx
+++ b/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);
   }
 
diff --git a/games/masterplan/src/screens/designer/components/info-panel-container.tsx b/games/masterplan/src/screens/designer/components/info-panel-container.tsx
index 33f66fec..d1b4f7e3 100644
--- a/games/masterplan/src/screens/designer/components/info-panel-container.tsx
+++ b/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>
           ))}
diff --git a/games/masterplan/src/screens/designer/opposition-plan.tsx b/games/masterplan/src/screens/designer/opposition-plan.tsx
index cddb9628..e79eb988 100644
--- a/games/masterplan/src/screens/designer/opposition-plan.tsx
+++ b/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;
-`;
\ No newline at end of file
+`;
diff --git a/games/masterplan/src/screens/designer/utils/ui-utils.ts b/games/masterplan/src/screens/designer/utils/ui-utils.ts
index 9ae3153e..809d8183 100644
--- a/games/masterplan/src/screens/designer/utils/ui-utils.ts
+++ b/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
 
diff --git a/games/masterplan/src/screens/intro/intro-screen.tsx b/games/masterplan/src/screens/intro/intro-screen.tsx
index 076ebde8..f07da68b 100644
--- a/games/masterplan/src/screens/intro/intro-screen.tsx
+++ b/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%;