[+] Show aqua net pfp instead of in-game pfp

AquaNet/src/App.svelte

@@ -6,7 +6,7 @@
   import Home from "./pages/Home.svelte";
   import Ranking from "./pages/Ranking.svelte";
   import { USER } from "./libs/sdk";
-  import type { UserMe } from "./libs/generalTypes";
+  import type { AquaNetUser } from "./libs/generalTypes";
   import Settings from "./pages/User/Settings.svelte";
   import { pfp } from "./libs/ui"
 
@@ -22,7 +22,7 @@
      -webkit-text-fill-color: transparent;`)
 
   export let url = "";
-  let me: UserMe
+  let me: AquaNetUser
 
   if (USER.isLoggedIn()) USER.me().then(m => me = m).catch(e => console.error(e))
 

AquaNet/src/libs/generalTypes.ts

@@ -12,7 +12,7 @@ export interface Card {
   ghost: boolean
 }
 
-export interface UserMe {
+export interface AquaNetUser {
   username: string
   email: string
   displayName: string
@@ -80,6 +80,7 @@ export interface RankCount {
 export interface GenericGameSummary {
   name: string
   iconId: number
+  aquaUser?: AquaNetUser
   serverRank: number
   accuracy: number
   rating: number

AquaNet/src/libs/sdk.ts

@@ -6,7 +6,7 @@ import type {
   GenericGameSummary,
   GenericRanking,
   TrendEntry,
-  UserMe
+  AquaNetUser
 } from "./generalTypes";
 import type { GameName } from "./scoring";
 
@@ -111,7 +111,7 @@ export const USER = {
   login,
   confirmEmail: (token: string) =>
     post('/api/v2/user/confirm-email', { token }),
-  me: (): Promise<UserMe> => {
+  me: (): Promise<AquaNetUser> => {
     ensureLoggedIn()
     return post('/api/v2/user/me', {})
   },

AquaNet/src/libs/ui.ts

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

AquaNet/src/pages/Home.svelte

@@ -4,13 +4,13 @@
   import SetupInstructions from "./Home/SetupInstructions.svelte";
   import { DISCORD_INVITE, FADE_IN, FADE_OUT } from "../libs/config";
   import { USER } from "../libs/sdk.js";
-  import type { UserMe } from "../libs/generalTypes";
+  import type { AquaNetUser } from "../libs/generalTypes";
   import StatusOverlays from "../components/StatusOverlays.svelte";
   import ActionCard from "../components/ActionCard.svelte";
 
   USER.ensureLoggedIn();
 
-  let me: UserMe
+  let me: AquaNetUser
   let error = ""
 
   let tab = 0;

AquaNet/src/pages/Home/LinkCard.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import { fade, slide } from "svelte/transition"
-  import type { Card, CardSummary, CardSummaryGame, ConfirmProps, UserMe } from "../../libs/generalTypes";
+  import type { Card, CardSummary, CardSummaryGame, ConfirmProps, AquaNetUser } from "../../libs/generalTypes";
   import { CARD, USER } from "../../libs/sdk";
   import moment from "moment"
   import Icon from "@iconify/svelte";
@@ -13,7 +13,7 @@
   let showConfirm: ConfirmProps | null = null
 
   let error: string = ""
-  let me: UserMe | null = null
+  let me: AquaNetUser | null = null
   let accountCardSummary: CardSummary | null = null
 
   // Fetch data for current user

AquaNet/src/pages/Home/SetupInstructions.svelte

@@ -3,11 +3,11 @@
 <script lang="ts">
   import { fade, slide } from "svelte/transition";
   import { USER } from "../../libs/sdk";
-  import type { UserMe } from "../../libs/generalTypes";
+  import type { AquaNetUser } from "../../libs/generalTypes";
   import { codeToHtml } from 'shiki'
   import { AQUA_CONNECTION, DISCORD_INVITE, FADE_IN, FADE_OUT } from "../../libs/config";
 
-  let user: UserMe
+  let user: AquaNetUser
   let keychip: string;
   let keychipCode: string;
   let getStartedRequesting = false;

AquaNet/src/pages/User/Settings.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import { slide } from "svelte/transition";
-  import type { UserMe } from "../../libs/generalTypes";
+  import type { AquaNetUser } from "../../libs/generalTypes";
   import { USER } from "../../libs/sdk";
   import StatusOverlays from "../../components/StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
@@ -10,7 +10,7 @@
 
   USER.ensureLoggedIn()
 
-  let me: UserMe;
+  let me: AquaNetUser;
   let error: string;
   let submitting = ""
 
@@ -25,7 +25,7 @@
   // Fetch user data
   const getMe = () => USER.me().then(m => {
     me = m
-    values = fields.map(([field]) => me[field as keyof UserMe])
+    values = fields.map(([field]) => me[field as keyof AquaNetUser])
   }).catch(e => error = e.message)
   getMe()
 

AquaNet/src/pages/UserHome.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { CHARTJS_OPT, coverNotFound, pfpNotFound, registerChart, renderCal, title, tooltip } from "../libs/ui";
+  import { CHARTJS_OPT, coverNotFound, pfpNotFound, registerChart, renderCal, title, tooltip, pfp } from "../libs/ui";
-  import type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry, UserMe } from "../libs/generalTypes";
+  import type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry, AquaNetUser } from "../libs/generalTypes";
   import { DATA_HOST } from "../libs/config";
   import 'cal-heatmap/cal-heatmap.css';
   import { Line } from 'svelte-chartjs';
@@ -17,7 +17,7 @@
   export let game: GameName = "mai2"
   let calElement: HTMLElement
   let error: string;
-  let me: UserMe
+  let me: AquaNetUser
   title(`User ${username}`)
 
   interface MusicAndPlay extends MusicMeta, GenericGamePlaylog {}
@@ -56,7 +56,7 @@
 <main id="user-home" class="content">
   {#if d}
     <div class="user-pfp">
-      <img src={`${DATA_HOST}/d/${game}/assetbundle/icon/${d.user.iconId.toString().padStart(6, "0")}.png`} alt="" class="pfp" on:error={pfpNotFound}>
+      <img use:pfp={d.user.aquaUser} alt="" class="pfp" on:error={pfpNotFound}>
       <div class="name-box">
         <h2>{d.user.name}</h2>
         {#if me && me.username === username}