From 1fd030f909d4443f1afcee54c2a6e0d6ee35f878 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 22 Apr 2024 10:29:55 -0400
Subject: [PATCH] [+] User card

---
 AquaNet/src/components/UserCard.svelte | 55 ++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 AquaNet/src/components/UserCard.svelte

diff --git a/AquaNet/src/components/UserCard.svelte b/AquaNet/src/components/UserCard.svelte
new file mode 100644
index 00000000..6d404f45
--- /dev/null
+++ b/AquaNet/src/components/UserCard.svelte
@@ -0,0 +1,55 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import type { GenericGameSummary } from "../libs/generalTypes";
+  import { GAME } from "../libs/sdk";
+  import type { GameName } from "../libs/scoring";
+  import { pfp, pfpNotFound } from "../libs/ui";
+
+  export let username: string
+  export let game: GameName
+
+  let data: GenericGameSummary
+  let error = ""
+  let loading = true
+
+  GAME.userSummary(username, game).then(d => data = d).catch(e => error = e).finally(_ => loading = false)
+</script>
+
+{#if loading}
+  <div>Loading...</div>
+{:else if error}
+  <div>Error: {error}</div>
+{:else}
+  <div class="user-card">
+    <img use:pfp={data.aquaUser} alt="Profile Picture" />
+    <div class="details">
+      <span class="in-game-name">{data.name}</span>
+      <span class="username">@{username}</span>
+    </div>
+  </div>
+{/if}
+
+<style lang="sass">
+@import "../vars"
+
+.user-card
+  display: flex
+  align-items: center
+  gap: $gap
+
+  .details
+    display: flex
+    flex-direction: column
+    justify-content: center
+
+    .username
+      font-size: 0.8em
+
+  img
+    width: 50px
+    height: 50px
+    border-radius: 50%
+    object-fit: cover
+    object-position: center
+</style>