6 files changed, 170 insertions(+), 41 deletions(-)

A starkingdoms-client/src/components/ui/Column.svelte
A starkingdoms-client/src/components/ui/ColumnTable.svelte
A starkingdoms-client/src/components/ui/HorizontalGap.svelte
A starkingdoms-client/src/components/ui/VerticalRule.svelte
M starkingdoms-client/src/css/form.scss
M starkingdoms-client/src/pages/Home.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>

@@ 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>

@@ 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>

@@ 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>

@@ 3,10 3,10 @@
 .form {
   input,
   select {
-    margin-bottom: 0.75em;
+    margin-bottom: 0.75rem;
   }
   button {
-    margin-top: 0.25em;
+    margin-top: 0.5rem;
   }
 }
 

@@ 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})