From 98a4bcbc69446790b273522d4a40994b9d7e0d0d Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Thu, 11 Jan 2024 02:30:56 -0500
Subject: [PATCH] Client homepage facelift, part 1

---
 .../src/components/ui/Column.svelte           |  25 +++++
 .../src/components/ui/ColumnTable.svelte      |  32 ++++++
 .../src/components/ui/HorizontalGap.svelte    |  21 ++++
 .../src/components/ui/VerticalRule.svelte     |  29 +++++
 starkingdoms-client/src/css/form.scss         |   4 +-
 starkingdoms-client/src/pages/Home.svelte     | 100 +++++++++++-------
 6 files changed, 170 insertions(+), 41 deletions(-)
 create mode 100644 starkingdoms-client/src/components/ui/Column.svelte
 create mode 100644 starkingdoms-client/src/components/ui/ColumnTable.svelte
 create mode 100644 starkingdoms-client/src/components/ui/HorizontalGap.svelte
 create mode 100644 starkingdoms-client/src/components/ui/VerticalRule.svelte

diff --git a/starkingdoms-client/src/components/ui/Column.svelte b/starkingdoms-client/src/components/ui/Column.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c5d405e77f94f6cba91dc07c319c00b975069708
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/Column.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let style = "";
+</script>
+
+<div
+  {id}
+  class="svcmp-Column {clazz}"
+  {style}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .svcmp-Column {
+    display: block;
+    background: transparent;
+    color: var(--text);
+    padding: 0;
+    border: 0;
+    margin: 0;
+    flex: 1 1 0;
+  }
+</style>
diff --git a/starkingdoms-client/src/components/ui/ColumnTable.svelte b/starkingdoms-client/src/components/ui/ColumnTable.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..bc0b6a091ff870765211165123a92beb52e21f5f
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/ColumnTable.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let style = "";
+</script>
+
+<div
+  {id}
+  class="svcmp-ColumnTable {clazz}"
+  {style}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .svcmp-ColumnTable {
+    display: flex;
+    width: 100%;
+    background: transparent;
+    color: var(--text);
+    padding: 0;
+    border: 0;
+    margin: 0;
+  }
+
+  //@media (max-width: 800px) {
+  //  .svcmp-ColumnTable {
+  //    flex-direction: column;
+  //    max-width: 300px;
+  //  }
+  //}
+</style>
diff --git a/starkingdoms-client/src/components/ui/HorizontalGap.svelte b/starkingdoms-client/src/components/ui/HorizontalGap.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..be0cf1f2072dda084c403a31eeb3aa6148b68966
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/HorizontalGap.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let style = "";
+</script>
+
+<div
+  {id}
+  class="svcmp-HorizontalGap {clazz}"
+  {style}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .svcmp-HorizontalGap {
+    display: block;
+    background: transparent;
+    margin-top: .625em;
+  }
+</style>
diff --git a/starkingdoms-client/src/components/ui/VerticalRule.svelte b/starkingdoms-client/src/components/ui/VerticalRule.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c9e615348a43ea970aa59e7c61c421b8f4759fee
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/VerticalRule.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let style = "";
+</script>
+
+<div
+  {id}
+  class="svcmp-VerticalRule {clazz}"
+  {style}>
+</div>
+
+<style lang="scss">
+  .svcmp-VerticalRule {
+    width: 1px; 
+    padding: 0;
+    background-color: var(--body);
+    margin: 0.5rem 1rem 0.5rem 1rem;
+    flex: 0 0 1px;
+  }
+  //@media (max-width: 800px) {
+  //  .svcmp-VerticalRule {
+  //    width: unset;
+  //    height: 1px;
+  //    margin: 1rem 0.5rem 1rem 0.5rem;
+  //  }
+  //}
+</style>
diff --git a/starkingdoms-client/src/css/form.scss b/starkingdoms-client/src/css/form.scss
index c8074f2b941c3ef11171fe366960066c9e38dc54..69278952620698638b7131102be742fccc479c17 100644
--- a/starkingdoms-client/src/css/form.scss
+++ b/starkingdoms-client/src/css/form.scss
@@ -3,10 +3,10 @@
 .form {
   input,
   select {
-    margin-bottom: 0.75em;
+    margin-bottom: 0.75rem;
   }
   button {
-    margin-top: 0.25em;
+    margin-top: 0.5rem;
   }
 }
 
diff --git a/starkingdoms-client/src/pages/Home.svelte b/starkingdoms-client/src/pages/Home.svelte
index d7fc15f7dcc926c793b5d1910754943a37230d81..b4023a4f518814b51b9028ebf86d2f387043b354 100644
--- a/starkingdoms-client/src/pages/Home.svelte
+++ b/starkingdoms-client/src/pages/Home.svelte
@@ -9,6 +9,10 @@
   import Popup from "../components/ui/Popup.svelte";
   import Button from "../components/ui/Button.svelte";
   import TextInput from "../components/ui/TextInput.svelte";
+  import ColumnTable from "../components/ui/ColumnTable.svelte";
+  import Column from "../components/ui/Column.svelte";
+  import VerticalRule from "../components/ui/VerticalRule.svelte";
+  import HorizontalGap from "../components/ui/HorizontalGap.svelte";
 
   let config = DEFAULT_CONFIG;
   // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
@@ -57,36 +61,61 @@
   }
 </script>
 
-<Popup title="StarKingdoms" centered style="max-width: 300px;" id="title-popup">
-  <h2>Join Game</h2>
-
-  <form id="join-fm" class="form" on:submit|preventDefault={playGame}>
-    <label for="username" class="label">Username</label>
-    <TextInput
-      style="width: 100%; max-width: 100%;"
-      bind:value={username}
-      id="username"
-      required
-      autocomplete="off" />
-
-    <label class="label" for="select">Server</label>
-    <select
-      bind:value={server}
-      on:change={updateNonprodWarning}
-      id="select"
-      class="select"
-      autocomplete="off">
-      {#each Object.entries(config.servers) as [server_id, server]}
-        {#if server.isDevelopment && !is_development}
-          <!-- Ignore. Dev server and we arent dev -->
-        {:else}
-          <option value={server_id}>{server.name}</option>
-        {/if}
-      {/each}
-    </select>
-
-    <Button style="width: 100%; max-width: 100%;">Launch!</Button>
-
+<Popup title="StarKingdoms" centered id="title-popup" style="max-width: 800px;">
+  <ColumnTable>
+    <Column>
+      <h2></h2>
+      test!
+    </Column>
+    <VerticalRule/>
+    <Column>
+      <h2>Join Game</h2>
+
+      <form id="join-fm" class="form" on:submit|preventDefault={playGame}>
+        <label for="username" class="label">Username</label>
+        <TextInput
+          style="width: 100%; max-width: 100%;"
+          bind:value={username}
+          id="username"
+          required
+          autocomplete="off" />
+
+        <label class="label" for="select">Server</label>
+        <select
+          bind:value={server}
+          on:change={updateNonprodWarning}
+          id="select"
+          class="select"
+          autocomplete="off">
+          <option disabled required selected value="">
+            <em>Choose a server..</em>
+          </option>
+          {#each Object.entries(config.servers) as [server_id, server]}
+            {#if server.isDevelopment && !is_development}
+              <!-- Ignore. Dev server and we arent dev -->
+            {:else}
+              <option value={server_id}>{server.name}</option>
+            {/if}
+          {/each}
+        </select>
+
+        <Button style="width: 100%; max-width: 100%;">Launch!</Button>
+
+      </form>
+    </Column>
+    <VerticalRule/>
+    <Column>
+      <h2>Tools & Options</h2>
+      <Button style="width: 100%;" disabled>Options (soon!)</Button>
+      <HorizontalGap />
+      {#if window.localStorage.getItem("save") !== null}
+        <a href="/shipeditor/" style="color: var(--text)">
+          <Button style="width: 100%;">Ship Editor</Button>
+        </a>
+      {/if}
+    </Column>
+  </ColumnTable>
+  <div>
     <span bind:this={nonprod_warning} class="server-danger hidden">
       <WarningIcon class="server-danger-icon" />
       Here be dragons! You have a
@@ -98,6 +127,7 @@
       {#if is_logged_in}
         Logged in as {token_username}! Saves will be stored in your browser
         during the alpha, but will be stored on the server soon!
+        <!-- TODO: Make this not a <a> (messing with styles) -->
         <a
           href="#"
           on:click={() => {
@@ -114,17 +144,9 @@
         to save your data on the server and sync it between devices.
       {/if}
     </span>
-  </form>
+  </div>
 </Popup>
 
-{#if window.localStorage.getItem("save") !== null}
-  <span
-    style="position: absolute; right: 0.5rem; top: 0.5rem; background-color: var(--bg-secondary-1);">
-    <a href="/shipeditor/" style="color: var(--text)">
-      <Button>Ship Editor</Button>
-    </a>
-  </span>
-{/if}
 
 <span class="footer-left">
   StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})