improve window resize handling with global store & make sensor displa…

…y margins dynamic too

mvp/client/ui/src/components/HighScoreList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte";
-  import type {HighScoreDTO} from "../api/generated/"; // TODO: maybe wrong
+  import type {HighScoreDTO} from "../api/generated/";
   import {LeaderboardService} from "../api/generated/";
   import {formatDatetime, formatNumber} from "src/shared/utils";
 

mvp/client/ui/src/components/MachineData.svelte

@@ -128,7 +128,5 @@
     gap: 0.5rem;
     align-items: center;
   }
-
-  /*TODO: sensors & buttons look too compact in web. increase margins conditionally or something...*/
 </style>
 

mvp/client/ui/src/components/Sensor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {isUndefinedOrNull} from "src/shared/utils";
   import TimeSeriesChart from "./TimeSeriesChart.svelte";
-  import {gameSession, globalSettings} from "src/stores/stores";
+  import {gameSession, globalSettings, isOnNarrowScreen} from "src/stores/stores";
 
   export let parameter: string;
   export let value: number | null;
@@ -16,11 +16,11 @@
       .join(" ");
   };
 
-  // TODO: instead of rerendering the whole chart, update the data using a ref like in this example:
+  // TODO: instead of re-rendering the whole chart, update the data using a ref like in this example:
   // https://svelte.dev/repl/c06c05db84a0466199ddd40c6622903c?version=4.2.12
 </script>
 
-<div class="sensor">
+<div class={`sensor ${$isOnNarrowScreen ? "margin-mobile" : "margin-desktop"}`}>
   <div class="title">
     {formatParameterName(parameter)}
   </div>
@@ -48,9 +48,16 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+  }
+
+  .margin-mobile {
     margin: 0;
   }
 
+  .margin-desktop {
+    margin: 1em;
+  }
+
   .title {
     margin-bottom: 0.5em;
   }

mvp/client/ui/src/components/TimeSeriesChart.svelte

@@ -1,32 +1,22 @@
 <script lang="ts">
-  import {onMount} from "svelte";
   import {Chart, LineSeries, PriceLine, TimeScale} from "svelte-lightweight-charts";
   import type {TimeSeriesPoint} from "src/shared/types";
+  import {
+    TIME_SERIES_DESKTOP_HEIGHT,
+    TIME_SERIES_DESKTOP_WIDTH,
+    TIME_SERIES_MOBILE_HEIGHT,
+    TIME_SERIES_MOBILE_WIDTH
+  } from "src/shared/constants";
+  import {isOnNarrowScreen} from "src/stores/stores";
 
   export let data: TimeSeriesPoint[];
   export let warningLevel: number;
-
-  let chartWidth: number;
-  let chartHeight: number;
-
-  const setChartDimensions = () => {
-    if (window.innerWidth <= 950) {  // Mobile breakpoint
-      chartWidth = 320;
-      chartHeight = 100;
-    } else {
-      chartWidth = 280;
-      chartHeight = 250;
-    }
-  };
-
-  onMount(() => {
-    setChartDimensions();
-    window.addEventListener("resize", setChartDimensions);
-    return () => window.removeEventListener("resize", setChartDimensions);
-  });
 </script>
 
-<Chart width={chartWidth} height={chartHeight}>
+<Chart
+  width={$isOnNarrowScreen ? TIME_SERIES_MOBILE_WIDTH :  TIME_SERIES_DESKTOP_WIDTH}
+  height={$isOnNarrowScreen ? TIME_SERIES_MOBILE_HEIGHT :  TIME_SERIES_DESKTOP_HEIGHT}
+>
   <LineSeries {data}>
     <PriceLine
       title="!"

mvp/client/ui/src/pages/HomePage.svelte

@@ -10,11 +10,14 @@
     gameOverReason,
     gameSession,
     globalSettings,
+    isOnNarrowScreen,
     mqttClient,
     mqttClientUnsubscribe,
   } from "src/stores/stores";
   import type {GameSessionWithTimeSeries} from "src/shared/types";
   import type {GameSessionDTO} from "src/api/generated";
+  import {MOBILE_BREAKPOINT} from "src/shared/constants";
+  import {onMount} from "svelte";
 
   const cleanupGameSession = () => {
     gameSession.set(null);
@@ -63,6 +66,16 @@
       },
     );
   };
+
+  const updateNarrowScreenFlag = () => {
+    isOnNarrowScreen.set(window.innerWidth <= MOBILE_BREAKPOINT);
+  };
+
+  onMount(() => {
+    updateNarrowScreenFlag();
+    window.addEventListener("resize", updateNarrowScreenFlag);
+    return () => window.removeEventListener("resize", updateNarrowScreenFlag);
+  });
 </script>
 
 <div class="homepage">
@@ -95,7 +108,7 @@
   }
 
   .title {
-    margin-bottom: 1em;
+    margin-bottom: 2em;
     text-align: center;
   }
 

mvp/client/ui/src/shared/constants.ts

@@ -1,2 +1,8 @@
 export const RUNNING_MACHINE_SRC = "/img/running_246.gif"
-export const STOPPED_MACHINE_SRC = "/img/stopped.gif"
+export const STOPPED_MACHINE_SRC = "/img/stopped.gif"
+
+export const MOBILE_BREAKPOINT = 950;
+export const TIME_SERIES_MOBILE_WIDTH = 320;
+export const TIME_SERIES_MOBILE_HEIGHT = 125
+export const TIME_SERIES_DESKTOP_WIDTH = 280;
+export const TIME_SERIES_DESKTOP_HEIGHT = 250;

mvp/client/ui/src/stores/stores.ts

@@ -1,7 +1,7 @@
-import { writable } from 'svelte/store';
-import type { GameParametersDTO } from 'src/api/generated';
-import type { GameSessionWithTimeSeries } from 'src/shared/types';
-import type { MqttClient, Packet } from 'mqtt';
+import {writable} from 'svelte/store';
+import type {GameParametersDTO} from 'src/api/generated';
+import type {GameSessionWithTimeSeries} from 'src/shared/types';
+import type {MqttClient} from 'mqtt';
 
 export const globalSettings = writable<GameParametersDTO>();
 export const gameSession = writable<GameSessionWithTimeSeries | null>(null);
@@ -14,3 +14,4 @@ export const dayInProgress = writable(false);
 export const performedMaintenanceInThisTurn = writable(false);
 export const mqttClient = writable<MqttClient>();
 export const mqttClientUnsubscribe = writable<() => void>();
+export const isOnNarrowScreen = writable(false);