cleanup client & update file structure

linomp · Aug 10, 2024 · cfaa48f · cfaa48f
1 parent e934054
commit cfaa48f
Show file tree

Hide file tree

Showing 45 changed files with 811 additions and 933 deletions.
diff --git a/mvp/client/.editorconfig b/mvp/client/.editorconfig
diff --git a/mvp/client/Jenkinsfile b/mvp/client/Jenkinsfile
diff --git a/mvp/client/README.md b/mvp/client/README.md
diff --git a/mvp/client/ui/package.json b/mvp/client/ui/package.json
@@ -10,7 +10,7 @@
     "check:dev": "npm run check -- --watch",
     "test": "vitest run",
     "test:dev": "vitest watch",
-    "generate": "openapi --input http://127.0.0.1:8000/openapi.json --output ./src/api/generated"
+    "generate": "openapi --input http://127.0.0.1:8000/openapi.json --output ./src/shared/api"
   },
   "browserslist": [
     "> 0.5%",

diff --git a/mvp/client/ui/src/App.svelte b/mvp/client/ui/src/App.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
   import {onMount} from "svelte";
   import {Route, Router} from "svelte-navigator";
-  import {GameParametersService} from "./api/generated/";
-  import {globalSettings} from "src/stores/stores";
+  import {GameParametersService} from "src/shared/api";
+  import {globalSettings} from "src/shared/stores";
   import {isUndefinedOrNull} from "src/shared/utils";
-  import HomePage from "src/pages/HomePage.svelte";
+  import HomePage from "src/components/HomePage.svelte";
   import Spinner from "src/components/Spinner.svelte";
   import Preloader from "src/components/Preloader.svelte";
 
   onMount(() => {
-    GameParametersService.getParametersGameParametersGet()
-      .then((response) => {
-        globalSettings.set(response);
-      })
-      .catch((error) => {
-        alert(
-          "Error fetching game settings or connecting to MQTT broker. Please refresh the page.",
-        );
-      });
-  });
+        GameParametersService.getParametersGameParametersGet()
+            .then((response) => {
+                globalSettings.set(response);
+            })
+            .catch((error) => {
+                alert(
+                    "Error fetching game settings or connecting to MQTT broker. Please refresh the page.",
+                );
+            });
+    });
 </script>
 
 <svelte:head>
-  <title>The Predictive Maintenance Game</title>
+    <title>The Predictive Maintenance Game</title>
 </svelte:head>
 
 <Router primary={false}>
-  <Preloader/>
-  {#if isUndefinedOrNull($globalSettings)}
-    <div class="spinner-container">
-      <Spinner/>
-    </div>
-  {:else}
-    <div>
-      <Route path="/" component={HomePage}/>
-    </div>
-  {/if}
+    <Preloader/>
+    {#if isUndefinedOrNull($globalSettings)}
+        <div class="spinner-container">
+            <Spinner/>
+        </div>
+    {:else}
+        <div>
+            <Route path="/" component={HomePage}/>
+        </div>
+    {/if}
 </Router>
 
 <style>
-  .spinner-container {
-    width: 5%;
-    margin: 0 auto;
-  }
+    .spinner-container {
+        width: 5%;
+        margin: 0 auto;
+    }
 </style>
diff --git a/mvp/client/ui/src/components/GameOver.svelte b/mvp/client/ui/src/components/GameOver.svelte
@@ -1,97 +1,97 @@
 <script lang="ts">
-  import {gameOver, gameOverReason, gameSession} from "src/stores/stores";
-  import {ApiError, LeaderboardService} from "src/api/generated";
+  import {gameOver, gameOverReason, gameSession} from "src/shared/stores";
+  import {ApiError, LeaderboardService} from "src/shared/api";
 
   export let cleanupGameSession: () => void;
-  let nickName = "";
-  let submitDisabled = false;
+    let nickName = "";
+    let submitDisabled = false;
 
-  const onSubmit = async () => {
-    if (!$gameSession?.id) {
-      console.error("Game session id is not defined");
-      return;
-    }
+    const onSubmit = async () => {
+        if (!$gameSession?.id) {
+            console.error("Game session id is not defined");
+            return;
+        }
 
-    try {
-      submitDisabled = true;
+        try {
+            submitDisabled = true;
 
-      await LeaderboardService.postScoreLeaderboardScorePost($gameSession?.id, {
-        nickname: nickName,
-      });
+            await LeaderboardService.postScoreLeaderboardScorePost($gameSession?.id, {
+                nickname: nickName,
+            });
 
-      if (import.meta.env.VITE_DEBUG) {
-        console.log("Score submitted: ", nickName, $gameSession);
-      }
-      cleanupGameSession();
-      nickName = "";
-      // TODO: show a toast on success, if easy
-    } catch (error) {
-      if (error instanceof ApiError && error.status === 422) {
-        alert("Nickname cannot not be empty!");
-      }
-    } finally {
-      submitDisabled = false;
-    }
-  };
+            if (import.meta.env.VITE_DEBUG) {
+                console.log("Score submitted: ", nickName, $gameSession);
+            }
+            cleanupGameSession();
+            nickName = "";
+            // TODO: show a toast on success, if easy
+        } catch (error) {
+            if (error instanceof ApiError && error.status === 422) {
+                alert("Nickname cannot not be empty!");
+            }
+        } finally {
+            submitDisabled = false;
+        }
+    };
 </script>
 
 {#if $gameSession && $gameOver}
-  <div class="container">
-    <h3>Game Over</h3>
-    <p>{$gameOverReason}</p>
-    <form on:submit|preventDefault={onSubmit}>
-      <div class="score-field">
-        <label for="score">Your score:</label>
-        <input value={$gameSession.final_score} disabled/>
-      </div>
-      <div class="nickname-field">
-        <label for="nickname">Nickname:</label>
-        <input bind:value={nickName} maxlength="10"/>
-      </div>
-      <button type="submit" disabled={submitDisabled}>Save Score</button>
-    </form>
-  </div>
+    <div class="container">
+        <h3>Game Over</h3>
+        <p>{$gameOverReason}</p>
+        <form on:submit|preventDefault={onSubmit}>
+            <div class="score-field">
+                <label for="score">Your score:</label>
+                <input value={$gameSession.final_score} disabled/>
+            </div>
+            <div class="nickname-field">
+                <label for="nickname">Nickname:</label>
+                <input bind:value={nickName} maxlength="10"/>
+            </div>
+            <button type="submit" disabled={submitDisabled}>Save Score</button>
+        </form>
+    </div>
 {/if}
 
 <style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1em;
-  }
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1em;
+    }
 
-  form {
-    display: flex;
-    flex-direction: column;
-  }
+    form {
+        display: flex;
+        flex-direction: column;
+    }
 
-  .score-field > input {
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: none;
-    font-weight: bold;
-    color: black;
-    background: white;
-  }
+    .score-field > input {
+        padding: 0.5rem;
+        font-size: 1rem;
+        border: none;
+        font-weight: bold;
+        color: black;
+        background: white;
+    }
 
-  .nickname-field > input {
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: none;
-    border-bottom: 1px solid black;
-  }
+    .nickname-field > input {
+        padding: 0.5rem;
+        font-size: 1rem;
+        border: none;
+        border-bottom: 1px solid black;
+    }
 
-  button {
-    padding: 0.5rem;
-    font-size: 1rem;
-    margin-top: 1.5em;
-  }
+    button {
+        padding: 0.5rem;
+        font-size: 1rem;
+        margin-top: 1.5em;
+    }
 
-  .nickname-field {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-    align-items: center;
-  }
+    .nickname-field {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+    }
 </style>