[-] Remove the unnecessary clz shorthand

AquaNet/src/components/StatusOverlays.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
   import { fade } from 'svelte/transition'
-  import { clz } from "../libs/ui";
   import type { ConfirmProps } from "../libs/generalTypes";
   import { DISCORD_INVITE } from "../libs/config";
   import Icon from "@iconify/svelte";
@@ -29,7 +28,7 @@
             confirm = null
           }}>Cancel</button>
         {/if}
-        <button on:click={() => confirm && confirm.confirm()} class={clz({error: confirm.dangerous})}>Confirm</button>
+        <button on:click={() => confirm && confirm.confirm()} class:error={confirm.dangerous}>Confirm</button>
       </div>
     </div>
   </div>

AquaNet/src/libs/ui.ts

@@ -89,15 +89,3 @@ export const CHARTJS_OPT: ChartOptions<'line'> = {
     }
   },
 }
-
-/**
- * Convert object keys to classes depending on their values
- *
- * @param obj Dictionary object {classname: truthy}
- * @param others Other classes to add
- */
-export function clz(obj: any, others?: string) {
-  let cls = Object.keys(obj).filter(key => obj[key]).join(' ')
-  if (others) cls += ' ' + others
-  return cls
-}

AquaNet/src/pages/Home/LinkCard.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
   import { slide, fade } from "svelte/transition"
-  import { clz } from "../../libs/ui";
   import type { Card, CardSummary, CardSummaryGame, ConfirmProps, UserMe } from "../../libs/generalTypes";
   import { CARD, USER } from "../../libs/sdk";
   import moment from "moment"
@@ -218,7 +217,7 @@
   {#if me}
     <div class="existing-cards" transition:slide>
       {#each me.cards as card (card.luid)}
-        <div class={clz({ghost: card.ghost}, 'existing card')} transition:fade|global>
+        <div class:ghost={card.ghost} class='existing card' transition:fade|global>
           <span class="type">{card.ghost ? "Account Card" : cardType(card.luid)}</span>
           <span class="register">Registered: {moment(card.registerTime).format("YYYY MMM DD")}</span>
           <span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span>
@@ -245,7 +244,7 @@
            }}
            bind:value={inputAC}
            on:input={inputACChange}
-           class={clz({error: (inputAC && (!inputACRegex.test(inputAC) || errorAC))})}>
+           class:error={inputAC && (!inputACRegex.test(inputAC) || errorAC)}>
     {#if inputAC.length > 0}
       <button transition:slide={{axis: 'x'}} on:click={() => link('AC')}>Link</button>
     {/if}
@@ -268,7 +267,7 @@
            }}
            bind:value={inputSN}
            on:input={inputSNChange}
-           class={clz({error: (inputSN && (!inputSNRegex.test(inputSN) || errorSN))})}>
+           class:error={inputSN && (!inputSNRegex.test(inputSN) || errorSN)}>
     {#if inputSN.length > 0}
       <button transition:slide={{axis: 'x'}} on:click={() => link('SN')}>Link</button>
     {/if}

AquaNet/src/pages/Ranking.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { clz, title } from "../libs/ui";
+  import { title } from "../libs/ui";
   import { GAME } from "../libs/sdk";
   import type { GenericRanking } from "../libs/generalTypes";
   import StatusOverlays from "../components/StatusOverlays.svelte";
@@ -30,7 +30,7 @@
         <span class="ap">AP</span>
       </div>
       {#each d.users as user, i (user.rank)}
-        <div class={clz({ alternate: i % 2 === 1 }, "lb-user")}>
+        <div class="lb-user" class:alternate={i % 2 === 1}>
           <span class="rank">#{user.rank}</span>
           {#if user.username !== ""}
           <a class="name" href="/u/{user.username}">{user.name}</a>

AquaNet/src/pages/UserHome.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {CHARTJS_OPT, clz, registerChart, renderCal, title} from "../libs/ui";
+  import {CHARTJS_OPT, registerChart, renderCal, title} from "../libs/ui";
   import type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry } from "../libs/generalTypes";
   import {DATA_HOST} from "../libs/config";
   import 'cal-heatmap/cal-heatmap.css';
@@ -168,7 +168,7 @@
       <h2>Recent Scores</h2>
       <div class="scores">
         {#each d.recent as r, i}
-          <div class={clz({alt: i % 2 === 0})}>
+          <div class:alt={i % 2 === 0}>
             <img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt=""
                   on:error={coverNotFound} />
             <div class="info">
@@ -182,7 +182,7 @@
                   <span class="rank-num">{(r.achievement / 10000).toFixed(2)}%</span>
                 </span>
                 {#if game === 'mai2'}
-                  <span class={"dx-change " + clz({increased: r.afterRating - r.beforeRating > 0})}>
+                  <span class:increased={r.afterRating - r.beforeRating > 0} class="dx-change">
                     {r.afterRating - r.beforeRating}
                   </span>
                 {/if}