[+] Wrapper for pfp path

AquaNet/src/App.svelte

@@ -3,13 +3,12 @@
   import Welcome from "./pages/Welcome.svelte";
   import MaimaiRating from "./pages/MaimaiRating.svelte";
   import UserHome from "./pages/UserHome.svelte";
-  import Icon from '@iconify/svelte';
   import Home from "./pages/Home.svelte";
   import Ranking from "./pages/Ranking.svelte";
   import { USER } from "./libs/sdk";
   import type { UserMe } from "./libs/generalTypes";
-  import { DEFAULT_PFP, IMG_HOST } from "./libs/config";
   import Settings from "./pages/User/Settings.svelte";
+  import { pfp } from "./libs/ui"
 
   console.log(`%c
 ┏━┓         ┳━┓━┓┏━
@@ -42,7 +41,7 @@
   <a href="/ranking">rankings</a>
   {#if me}
     <a href="/u/{me.username}">
-      <img src={me.profilePicture ? `${IMG_HOST}/${me.profilePicture}` : DEFAULT_PFP} alt="profile" class="pfp" />
+      <img alt="profile" class="pfp" use:pfp={me}/>
     </a>
   {/if}
 </nav>

AquaNet/src/libs/ui.ts

@@ -15,7 +15,8 @@ import moment from 'moment/moment'
 import CalHeatmap from 'cal-heatmap'
 // @ts-expect-error Cal-heatmap does not have proper types
 import CalTooltip from 'cal-heatmap/plugins/Tooltip'
-import { DEFAULT_PFP } from "./config";
+import { DEFAULT_PFP, IMG_HOST } from "./config";
+import type { UserMe } from "./generalTypes";
 
 export function title(t: string) {
   document.title = `AquaNet - ${t}`
@@ -152,3 +153,8 @@ export function tooltip(element: HTMLElement, params: { text: string } | string)
     }
   }
 }
+
+export function pfp(node: HTMLImageElement, me: UserMe) {
+  node.src = me.profilePicture ? `${IMG_HOST}/${me.profilePicture}` : DEFAULT_PFP
+  node.onerror = e => pfpNotFound(e as Event)
+}

AquaNet/src/pages/User/Settings.svelte

@@ -7,6 +7,7 @@
   import StatusOverlays from "../../components/StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
   import { IMG_HOST } from "../../libs/config.js";
+  import { pfpNotFound, pfp } from "../../libs/ui";
 
   USER.ensureLoggedIn()
 
@@ -65,7 +66,10 @@
     <label for="profile-upload">Profile Picture</label>
     <div>
       {#if me && me.profilePicture}
-        <img src="{IMG_HOST}/{me?.profilePicture}" alt="Profile" />
+        <div on:click={() => pfpField.click()} on:keydown={e => e.key === 'Enter' && pfpField.click()}
+             role="button" tabindex="0" class="clickable">
+          <img use:pfp={me} alt="Profile" />
+        </div>
       {:else}
         <button on:click={() => pfpField.click()}>
           Upload New
@@ -100,6 +104,7 @@
 </main>
 
 <style lang="sass">
+  @import "../../vars"
 
   .field
     display: flex
@@ -114,4 +119,10 @@
       > input
         flex: 1
 
+    img
+      max-width: 100px
+      max-height: 100px
+      border-radius: $border-radius
+      object-fit: cover
+
 </style>