[+] Home action cards

AquaNet/src/app.sass

@@ -163,7 +163,7 @@ main.content
   flex-direction: column
   gap: 20px
   margin: 100px auto 0
-  padding: 0 32px 128px
+  padding: 32px 32px 128px
   min-height: 100%
   max-width: $w-max
 

AquaNet/src/pages/Home.svelte

@@ -1,28 +1,58 @@
-<script>
-  import { fade } from "svelte/transition";
+<script lang="ts">
+  import {fade} from "svelte/transition";
   import LinkCard from "./Home/LinkCard.svelte";
   import SetupInstructions from "./Home/SetupInstructions.svelte";
   import {FADE_IN, FADE_OUT} from "../libs/config";
+  import {USER} from "../libs/sdk.js";
+  import type { UserMe } from "../libs/generalTypes";
+  import StatusOverlays from "../components/StatusOverlays.svelte";
+  import ActionCard from "../components/ActionCard.svelte";
+
+  USER.ensureLoggedIn();
+
+  let me: UserMe
+  let error = ""
 
   let tab = 0;
   let tabs = ["Portal", "Link Card", "Game Setup"];
+
+  USER.me().then((m) => me = m).catch(e => error = e.message)
 </script>
 
 <main class="content">
-  <h2 class="outer-title">Home</h2>
+<!--  <h2 class="outer-title">&nbsp;</h2>-->
   <nav class="tabs">
     {#each tabs as t, i}
       <div class="clickable"
-        class:active={tab === i}
-        on:click={() => tab = i}
-        on:keydown={(e) => e.key === "Enter" && (tab = i)}
-        role="button" tabindex={i}>{t}
+           class:active={tab === i}
+           on:click={() => tab = i}
+           on:keydown={(e) => e.key === "Enter" && (tab = i)}
+           role="button" tabindex={i}>{t}
       </div>
     {/each}
   </nav>
 
   {#if tab === 0}
-    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+    <div out:fade={FADE_OUT} in:fade={FADE_IN} class="action-cards">
+      <ActionCard color="255, 192, 203" icon="solar:card-bold-duotone" on:click={() => tab = 1}>
+        {#if me && me.cards.length > 1}
+          <h3>Manage Cards</h3>
+          <span>Link, unlink, and manage your cards</span>
+        {:else if me}
+          <h3>Link card</h3>
+          <span>Link your Amusement IC / Aime card to play games.</span>
+        {/if}
+      </ActionCard>
+
+      <ActionCard color="82, 93, 233" icon="ic:baseline-discord" on:click={() => tab = 2}>
+        <h3>Join Discord</h3>
+        <span>Join our Discord server to chat with other players and get help.</span>
+      </ActionCard>
+
+      <ActionCard on:click={() => tab = 2} icon="uil:link-alt">
+        <h3>Setup Connection</h3>
+        <span>If you own a cab or arcade setup, begin setting up the connection.</span>
+      </ActionCard>
     </div>
   {:else if tab === 1}
     <div out:fade={FADE_OUT} in:fade={FADE_IN}>
@@ -35,6 +65,8 @@
   {/if}
 </main>
 
+<StatusOverlays {error} loading={!me}/>
+
 <style lang="sass">
   @import "../vars"
 
@@ -45,4 +77,13 @@
     div
       &.active
         color: $c-main
+
+  h3
+    font-size: 1.3rem
+    margin: 0
+
+  .action-cards
+    display: flex
+    flex-direction: column
+    gap: 1rem
 </style>

AquaNet/src/pages/UserHome.svelte

@@ -207,7 +207,7 @@ $gap: 20px
     display: flex
     align-items: flex-end
     gap: $gap
-    margin-top: -40px
+    margin-top: -72px
 
     h2
       font-size: 2rem

AquaNet/src/vars.sass

@@ -4,6 +4,7 @@ $c-good: #b3ffb9
 $c-darker: #646cff
 $c-bg: #242424
 $c-error: #ff6b6b
+$c-shadow: rgba(0, 0, 0, 0.1)
 
 $ov-light: rgba(white, 0.04)
 $ov-lighter: rgba(white, 0.08)