From 9a54c0957744be458929c0c84dd095da7bf98e50 Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Fri, 28 Jun 2024 21:31:48 +0200
Subject: [PATCH 1/8] initial caveman mode impl.

---
 .../ui/src/components/TimeSeriesChart.svelte  | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/mvp/client/ui/src/components/TimeSeriesChart.svelte b/mvp/client/ui/src/components/TimeSeriesChart.svelte
index 2c4ac52..bf8926f 100644
--- a/mvp/client/ui/src/components/TimeSeriesChart.svelte
+++ b/mvp/client/ui/src/components/TimeSeriesChart.svelte
@@ -1,12 +1,32 @@
 <script lang="ts">
-  import {Chart, LineSeries, PriceLine, TimeScale,} from "svelte-lightweight-charts";
+  import {onMount} from "svelte";
+  import {Chart, LineSeries, PriceLine, TimeScale} from "svelte-lightweight-charts";
   import type {TimeSeriesPoint} from "src/shared/types";
 
   export let data: TimeSeriesPoint[];
   export let warningLevel: number;
+
+  let chartWidth: number;
+  let chartHeight: number;
+
+  const setChartDimensions = () => {
+    if (window.innerWidth <= 768) {  // Mobile breakpoint
+      chartWidth = 300;
+      chartHeight = 100;
+    } else {
+      chartWidth = 280;
+      chartHeight = 250;
+    }
+  };
+
+  onMount(() => {
+    setChartDimensions();
+    window.addEventListener("resize", setChartDimensions);
+    return () => window.removeEventListener("resize", setChartDimensions);
+  });
 </script>
 
-<Chart width={280} height={250}>
+<Chart width={chartWidth} height={chartHeight}>
   <LineSeries {data}>
     <PriceLine
       title="!"

From 95b209083cea6d84f56723571a6ea732e5750e4b Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sat, 29 Jun 2024 13:17:55 +0200
Subject: [PATCH 2/8] adjust margins & sizes for mobile & decent web layout

---
 mvp/client/ui/src/components/MachineData.svelte   | 15 +++++++++------
 mvp/client/ui/src/components/Sensor.svelte        |  4 ++--
 .../ui/src/components/TimeSeriesChart.svelte      |  4 ++--
 mvp/client/ui/src/global.css                      |  3 +++
 mvp/client/ui/src/pages/HomePage.svelte           |  3 ++-
 mvp/server/core/constants.py                      |  2 +-
 mvp/server/core/game/GameSession.py               |  4 ++--
 7 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/mvp/client/ui/src/components/MachineData.svelte b/mvp/client/ui/src/components/MachineData.svelte
index f76e98e..9c0e196 100644
--- a/mvp/client/ui/src/components/MachineData.svelte
+++ b/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,15 @@
   .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>
diff --git a/mvp/client/ui/src/components/Sensor.svelte b/mvp/client/ui/src/components/Sensor.svelte
index 0d14146..3d4bb96 100644
--- a/mvp/client/ui/src/components/Sensor.svelte
+++ b/mvp/client/ui/src/components/Sensor.svelte
@@ -48,7 +48,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 1em;
+    margin: 0;
   }
 
   .title {
@@ -56,6 +56,6 @@
   }
 
   .display {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
   }
 </style>
diff --git a/mvp/client/ui/src/components/TimeSeriesChart.svelte b/mvp/client/ui/src/components/TimeSeriesChart.svelte
index bf8926f..640610f 100644
--- a/mvp/client/ui/src/components/TimeSeriesChart.svelte
+++ b/mvp/client/ui/src/components/TimeSeriesChart.svelte
@@ -10,8 +10,8 @@
   let chartHeight: number;
 
   const setChartDimensions = () => {
-    if (window.innerWidth <= 768) {  // Mobile breakpoint
-      chartWidth = 300;
+    if (window.innerWidth <= 950) {  // Mobile breakpoint
+      chartWidth = 320;
       chartHeight = 100;
     } else {
       chartWidth = 280;
diff --git a/mvp/client/ui/src/global.css b/mvp/client/ui/src/global.css
index e6ed118..ae8a25a 100644
--- a/mvp/client/ui/src/global.css
+++ b/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 {
diff --git a/mvp/client/ui/src/pages/HomePage.svelte b/mvp/client/ui/src/pages/HomePage.svelte
index 86c9b9c..6a6866c 100644
--- a/mvp/client/ui/src/pages/HomePage.svelte
+++ b/mvp/client/ui/src/pages/HomePage.svelte
@@ -103,7 +103,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 5em;
+    justify-content: center;
+    gap: 2em;
     flex-wrap: wrap;
   }
 
diff --git a/mvp/server/core/constants.py b/mvp/server/core/constants.py
index 85b4a1e..e3c0f38 100644
--- a/mvp/server/core/constants.py
+++ b/mvp/server/core/constants.py
@@ -21,7 +21,7 @@
 MECHANICAL_WEAR_REDUCTION_FACTOR_ON_MAINTENANCE = 100
 
 # Financials
-INITIAL_CASH = 0
+INITIAL_CASH = 10000
 REVENUE_PER_DAY = 20
 MAINTENANCE_COST = 40
 SENSOR_COST = 30
diff --git a/mvp/server/core/game/GameSession.py b/mvp/server/core/game/GameSession.py
index 555112c..e30dcca 100644
--- a/mvp/server/core/game/GameSession.py
+++ b/mvp/server/core/game/GameSession.py
@@ -113,9 +113,9 @@ def do_maintenance(self) -> bool:
         if self.available_funds < MAINTENANCE_COST:
             return False
 
-        self.current_step += 1
         self.available_funds -= MAINTENANCE_COST
         self.machine_state.do_maintenance()
+        self.current_step += 1
         self.update_rul_prediction()
 
         return True
@@ -124,9 +124,9 @@ def purchase_sensor(self, sensor: str) -> bool:
         if self.available_funds < SENSOR_COST:
             return False
 
-        self.current_step += 1
         self.available_funds -= SENSOR_COST
         self.available_sensors[sensor] = True
+        self.current_step += 1
         self.update_rul_prediction()
 
         return True

From 51c5ae1472a2f541c204f41b1b254d93b4ffe706 Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sat, 29 Jun 2024 13:18:24 +0200
Subject: [PATCH 3/8] reset initial cash

---
 mvp/server/core/constants.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mvp/server/core/constants.py b/mvp/server/core/constants.py
index e3c0f38..85b4a1e 100644
--- a/mvp/server/core/constants.py
+++ b/mvp/server/core/constants.py
@@ -21,7 +21,7 @@
 MECHANICAL_WEAR_REDUCTION_FACTOR_ON_MAINTENANCE = 100
 
 # Financials
-INITIAL_CASH = 10000
+INITIAL_CASH = 0
 REVENUE_PER_DAY = 20
 MAINTENANCE_COST = 40
 SENSOR_COST = 30

From d6574d387e5718b32bbafc701e199009a4f0529d Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sat, 29 Jun 2024 13:21:44 +0200
Subject: [PATCH 4/8] update TODOs

---
 mvp/client/ui/src/components/MachineData.svelte | 3 +++
 mvp/server/core/constants.py                    | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/mvp/client/ui/src/components/MachineData.svelte b/mvp/client/ui/src/components/MachineData.svelte
index 9c0e196..cf3d6d4 100644
--- a/mvp/client/ui/src/components/MachineData.svelte
+++ b/mvp/client/ui/src/components/MachineData.svelte
@@ -128,4 +128,7 @@
     gap: 0.5rem;
     align-items: center;
   }
+
+  /*TODO: sensors & buttons look too compact in web. increase margins conditionally or something...*/
 </style>
+
diff --git a/mvp/server/core/constants.py b/mvp/server/core/constants.py
index 85b4a1e..e3c0f38 100644
--- a/mvp/server/core/constants.py
+++ b/mvp/server/core/constants.py
@@ -21,7 +21,7 @@
 MECHANICAL_WEAR_REDUCTION_FACTOR_ON_MAINTENANCE = 100
 
 # Financials
-INITIAL_CASH = 0
+INITIAL_CASH = 10000
 REVENUE_PER_DAY = 20
 MAINTENANCE_COST = 40
 SENSOR_COST = 30

From 9ef8b2c517b388d9da111e8740b95dc6aad8d97b Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sun, 30 Jun 2024 15:18:32 +0200
Subject: [PATCH 5/8] improve window resize handling with global store & make
 sensor display margins dynamic too

---
 .../ui/src/components/HighScoreList.svelte    |  2 +-
 .../ui/src/components/MachineData.svelte      |  2 --
 mvp/client/ui/src/components/Sensor.svelte    | 13 ++++++--
 .../ui/src/components/TimeSeriesChart.svelte  | 32 +++++++------------
 mvp/client/ui/src/pages/HomePage.svelte       | 15 ++++++++-
 mvp/client/ui/src/shared/constants.ts         |  8 ++++-
 mvp/client/ui/src/stores/stores.ts            |  9 +++---
 7 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/mvp/client/ui/src/components/HighScoreList.svelte b/mvp/client/ui/src/components/HighScoreList.svelte
index 42b55d1..b3dc40d 100644
--- a/mvp/client/ui/src/components/HighScoreList.svelte
+++ b/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";
 
diff --git a/mvp/client/ui/src/components/MachineData.svelte b/mvp/client/ui/src/components/MachineData.svelte
index cf3d6d4..ba8b677 100644
--- a/mvp/client/ui/src/components/MachineData.svelte
+++ b/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>
 
diff --git a/mvp/client/ui/src/components/Sensor.svelte b/mvp/client/ui/src/components/Sensor.svelte
index 3d4bb96..abd7794 100644
--- a/mvp/client/ui/src/components/Sensor.svelte
+++ b/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;
   }
diff --git a/mvp/client/ui/src/components/TimeSeriesChart.svelte b/mvp/client/ui/src/components/TimeSeriesChart.svelte
index 640610f..9a3f84b 100644
--- a/mvp/client/ui/src/components/TimeSeriesChart.svelte
+++ b/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="!"
diff --git a/mvp/client/ui/src/pages/HomePage.svelte b/mvp/client/ui/src/pages/HomePage.svelte
index 6a6866c..6abdb85 100644
--- a/mvp/client/ui/src/pages/HomePage.svelte
+++ b/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;
   }
 
diff --git a/mvp/client/ui/src/shared/constants.ts b/mvp/client/ui/src/shared/constants.ts
index 7bc5da6..41e2220 100644
--- a/mvp/client/ui/src/shared/constants.ts
+++ b/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"
\ No newline at end of file
+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;
diff --git a/mvp/client/ui/src/stores/stores.ts b/mvp/client/ui/src/stores/stores.ts
index cdd0c42..b8aa9c9 100644
--- a/mvp/client/ui/src/stores/stores.ts
+++ b/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);

From dd647b17cc05e1fb8f0bba5846f07d8a0894c758 Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sun, 30 Jun 2024 15:23:01 +0200
Subject: [PATCH 6/8] toggle flex direction based on mobile

---
 mvp/client/ui/src/components/SessionData.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/mvp/client/ui/src/components/SessionData.svelte b/mvp/client/ui/src/components/SessionData.svelte
index cfb6247..1cfaec4 100644
--- a/mvp/client/ui/src/components/SessionData.svelte
+++ b/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>

From 09189c28645be0990af19c685dcafd535a4fc82c Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sun, 30 Jun 2024 15:23:24 +0200
Subject: [PATCH 7/8] reset initial cash

---
 mvp/server/core/constants.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mvp/server/core/constants.py b/mvp/server/core/constants.py
index e3c0f38..85b4a1e 100644
--- a/mvp/server/core/constants.py
+++ b/mvp/server/core/constants.py
@@ -21,7 +21,7 @@
 MECHANICAL_WEAR_REDUCTION_FACTOR_ON_MAINTENANCE = 100
 
 # Financials
-INITIAL_CASH = 10000
+INITIAL_CASH = 0
 REVENUE_PER_DAY = 20
 MAINTENANCE_COST = 40
 SENSOR_COST = 30

From 3b7457ba07513cb394b145f246f028048b4db902 Mon Sep 17 00:00:00 2001
From: linomp <linomp95@hotmail.com>
Date: Sun, 30 Jun 2024 15:24:13 +0200
Subject: [PATCH 8/8] undo changes in GameSession.py

---
 mvp/server/core/game/GameSession.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/mvp/server/core/game/GameSession.py b/mvp/server/core/game/GameSession.py
index e30dcca..555112c 100644
--- a/mvp/server/core/game/GameSession.py
+++ b/mvp/server/core/game/GameSession.py
@@ -113,9 +113,9 @@ def do_maintenance(self) -> bool:
         if self.available_funds < MAINTENANCE_COST:
             return False
 
+        self.current_step += 1
         self.available_funds -= MAINTENANCE_COST
         self.machine_state.do_maintenance()
-        self.current_step += 1
         self.update_rul_prediction()
 
         return True
@@ -124,9 +124,9 @@ def purchase_sensor(self, sensor: str) -> bool:
         if self.available_funds < SENSOR_COST:
             return False
 
+        self.current_step += 1
         self.available_funds -= SENSOR_COST
         self.available_sensors[sensor] = True
-        self.current_step += 1
         self.update_rul_prediction()
 
         return True