Low iq attempt at mobile layout responsiveness

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

@@ -85,9 +85,11 @@
       {/each}
     </div>
     <div class="rul-display">
-      {"Remaining Useful Life"}: {$gameSession?.machine_state?.predicted_rul
-      ? `${$gameSession.machine_state?.predicted_rul} steps`
-      : "???"}
+      <span> {"Remaining Useful Life"}: </span>
+      <span>{$gameSession?.machine_state?.predicted_rul
+        ? `${$gameSession.machine_state?.predicted_rul} steps`
+        : "???"}
+      </span>
       <span
         hidden={isNotUndefinedNorNull(
           $gameSession?.machine_state?.predicted_rul,
@@ -115,14 +117,16 @@
   .sensors-display {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
-    justify-content: center; /* Center contents horizontally */
+    gap: 1rem;
+    justify-content: center;
   }
 
   .rul-display {
+    margin-top: 1em;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    align-items: center; /* Center contents vertically */
+    align-items: center;
   }
 </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,6 +48,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+  }
+
+  .margin-mobile {
+    margin: 0;
+  }
+
+  .margin-desktop {
     margin: 1em;
   }
 
@@ -56,6 +63,6 @@
   }
 
   .display {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
   }
 </style>

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

@@ -6,6 +6,7 @@
     gameOver,
     gameSession,
     globalSettings,
+    isOnNarrowScreen,
     maintenanceButtonDisabled,
     performedMaintenanceInThisTurn,
   } from "src/stores/stores";
@@ -67,7 +68,7 @@
   <div class="session-data">
     <p>Current Step: {$gameSession?.current_step}</p>
     <p>Available Funds: {formatNumber($gameSession?.available_funds)}</p>
-    <div class="session-controls">
+    <div class={`session-controls ${$isOnNarrowScreen ? "flex-row" : "flex-col"}`}>
       <button on:mousedown={advanceToNextDay} disabled={$dayInProgress}>
         Advance to next day
       </button>
@@ -85,7 +86,14 @@
 
   .session-controls {
     display: flex;
-    flex-direction: column;
     gap: 0.75rem;
   }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
 </style>

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

@@ -1,12 +1,22 @@
 <script lang="ts">
-  import {Chart, LineSeries, PriceLine, TimeScale,} from "svelte-lightweight-charts";
+  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;
 </script>
 
-<Chart width={280} height={250}>
+<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/global.css

@@ -4,6 +4,9 @@
 
 html {
   margin: 1em;
+
+  /*TODO: this works with everything except the chart, maybe need to adjust that separately*/
+  /*background-color: #FCFCFC;*/
 }
 
 button:disabled:hover {

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,15 +108,16 @@
   }
 
   .title {
-    margin-bottom: 1em;
+    margin-bottom: 2em;
     text-align: center;
   }
 
   .game-area {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 5em;
+    justify-content: center;
+    gap: 2em;
     flex-wrap: wrap;
   }
 

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);