From de01f5d5e7b08ff69791776b359ea22f67e493fd Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Thu, 23 Dec 2021 22:02:38 +0100
Subject: [PATCH] feat: Initial UI design

---
 src/ui/public/global.css                      |  2 +
 src/ui/src/App.svelte                         |  4 +-
 src/ui/src/components/HelloWorld.svelte       | 81 -------------------
 src/ui/src/components/Main.svelte             | 39 +++++++++
 .../src/components/resources/Resources.svelte | 45 +++++++++++
 5 files changed, 88 insertions(+), 83 deletions(-)
 delete mode 100644 src/ui/src/components/HelloWorld.svelte
 create mode 100644 src/ui/src/components/Main.svelte
 create mode 100644 src/ui/src/components/resources/Resources.svelte

diff --git a/src/ui/public/global.css b/src/ui/public/global.css
index 8a06963..055f781 100644
--- a/src/ui/public/global.css
+++ b/src/ui/public/global.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
 * {
   margin: 0;
   padding: 0;
diff --git a/src/ui/src/App.svelte b/src/ui/src/App.svelte
index 3f3e759..7614e93 100644
--- a/src/ui/src/App.svelte
+++ b/src/ui/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import VisibilityProvider from './providers/VisibilityProvider.svelte';
-  import HelloWorld from './components/HelloWorld.svelte';
+  import Main from './components/Main.svelte';
   import { debugData } from './utils/debugData';
 
   debugData([
@@ -13,6 +13,6 @@
 
 <main>
   <VisibilityProvider>
-    <HelloWorld />
+    <Main />
   </VisibilityProvider>
 </main>
diff --git a/src/ui/src/components/HelloWorld.svelte b/src/ui/src/components/HelloWorld.svelte
deleted file mode 100644
index 84e92eb..0000000
--- a/src/ui/src/components/HelloWorld.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { visibility } from '../store/stores';
-  import { fetchNui } from '../utils/fetchNui';
-
-  interface ReturnData {
-    x: number;
-    y: number;
-    z: number;
-  }
-
-  let clientData: ReturnData;
-
-  const handleClientData = () => {
-    fetchNui('getClientData')
-      .then((returnData) => {
-        clientData = returnData;
-      })
-      .catch((e) => {
-        clientData = { x: 100, y: 100, z: 100 };
-      });
-  };
-
-  const closeDialog = () => {
-    visibility.set(false);
-    fetchNui('hideUI');
-  };
-</script>
-
-<div class="container">
-  <h2>Svelte NUI Popup!</h2>
-  <div style="margin: 0.3vh 0;">Player coords: {JSON.stringify(clientData) || ''}</div>
-  <div class="btn-wrapper">
-    <button on:click={handleClientData}> Get client coords </button>
-    <button on:click={closeDialog}>Close popup</button>
-  </div>
-  <span>Or press the escape key!</span>
-</div>
-
-<style>
-  .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    border-radius: 5px;
-    width: 17%;
-    height: 17%;
-    font-size: 1.5vh;
-    color: white;
-    background-color: #ff3c04;
-    user-select: none;
-  }
-
-  .btn-wrapper {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    align-content: center;
-    width: 100%;
-  }
-
-  button {
-    flex: 0 45%;
-    padding: 0.8vh;
-    background-color: white;
-    color: black;
-    font-family: 'Segoe UI';
-    border: none;
-    border-radius: 5px;
-  }
-
-  button:hover {
-    background-color: rgb(212, 212, 212);
-  }
-</style>
diff --git a/src/ui/src/components/Main.svelte b/src/ui/src/components/Main.svelte
new file mode 100644
index 0000000..5f18cca
--- /dev/null
+++ b/src/ui/src/components/Main.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Resources from './resources/Resources.svelte';
+</script>
+
+<div class="container">
+  <Resources />
+  <div class="content-wrapper">
+    <div class="content-container">Some Data here</div>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 55%;
+    height: 65%;
+    background-color: rgb(44, 62, 80);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 0.25vh;
+  }
+
+  .content-wrapper {
+    margin-left: 18vh;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  .content-container {
+    width: 80vh;
+    height: 55vh;
+    background-color: #34495e;
+    border-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+  }
+</style>
diff --git a/src/ui/src/components/resources/Resources.svelte b/src/ui/src/components/resources/Resources.svelte
new file mode 100644
index 0000000..d2dd0cd
--- /dev/null
+++ b/src/ui/src/components/resources/Resources.svelte
@@ -0,0 +1,45 @@
+<script>
+  const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
+</script>
+
+<div class="container">
+  {#each executingResources as resource}
+    <div class="resource-wrapper">
+      <div class="resource">
+        {resource}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    width: 18vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #34495e;
+    height: 100%;
+    border-top-left-radius: 0.25vh;
+    border-bottom-left-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+    user-select: none;
+  }
+
+  .resource-wrapper {
+    padding: 1vh;
+  }
+
+  .resource {
+    font-family: 'Inter', sans-serif;
+    font-size: 2.2vh;
+    width: 100%;
+    height: 5%;
+    display: block;
+  }
+
+  .resource-wrapper:hover {
+    background-color: grey;
+  }
+</style>