Update dependencies, add CORS headers, and enhance Auction model (#158)

Update ESLint configuration and VSCode settings for better auto-fixing. Introduce CORS headers for the favicon and enhance the Auction model with a new property. Implement a collapsible section for minion upgrades on the profile page.
DarthGigi · Jan 9, 2025 · 8d99323 · 8d99323
2 parents a52e1ea + 9fa077c
commit 8d99323
Show file tree

Hide file tree

Showing 16 changed files with 755 additions and 688 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "always",
+    "source.fixAll.eslint": "always",
     "source.organizeImports": "explicit"
   },
   "files.associations": {

diff --git a/eslint.config.js b/eslint.config.js
@@ -4,7 +4,7 @@ import svelte from "eslint-plugin-svelte";
 import globals from "globals";
 import ts from "typescript-eslint";
 
-/** @type { import("eslint").Linter.FlatConfig } */
+/** @type { import("eslint").Linter.Config } */
 export default [
   js.configs.recommended,
   ...ts.configs.recommended,

diff --git a/package.json b/package.json
@@ -23,14 +23,15 @@
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@jill64/universal-sanitizer": "^1.3.3",
-    "@sveltejs/adapter-vercel": "^5.4.5",
-    "@sveltejs/kit": "^2.7.2",
+    "@number-flow/svelte": "^0.3.1",
+    "@sveltejs/adapter-vercel": "^5.4.6",
+    "@sveltejs/kit": "^2.7.3",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@types/cookie": "^0.6.0",
-    "@types/node": "^22.7.7",
-    "@vercel/analytics": "^1.3.1",
+    "@types/node": "^22.8.1",
+    "@vercel/analytics": "^1.3.2",
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.21.16",
     "cmdk-sv": "^0.0.18",
@@ -46,7 +47,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "shiki": "^1.22.0",
+    "shiki": "^1.22.1",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.5",
     "svelte-headless-table": "^0.18.2",
@@ -60,7 +61,7 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
     "vaul-svelte": "^0.3.2",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "zod": "^3.23.8"
   },
   "type": "module",
@@ -74,23 +75,23 @@
     "@prisma/extension-accelerate": "^1.2.1",
     "@sentry/svelte": "^8.35.0",
     "@sentry/sveltekit": "^8.35.0",
-    "@tiptap/core": "^2.8.0",
-    "@tiptap/extension-bubble-menu": "^2.8.0",
-    "@tiptap/extension-character-count": "^2.8.0",
-    "@tiptap/extension-image": "^2.8.0",
-    "@tiptap/extension-placeholder": "^2.8.0",
-    "@tiptap/extension-underline": "^2.8.0",
-    "@tiptap/pm": "^2.8.0",
-    "@tiptap/starter-kit": "^2.8.0",
-    "@vercel/speed-insights": "^1.0.12",
+    "@tiptap/core": "^2.9.1",
+    "@tiptap/extension-bubble-menu": "^2.9.1",
+    "@tiptap/extension-character-count": "^2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-placeholder": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@vercel/speed-insights": "^1.0.14",
     "arctic": "^2.0.1",
     "cloudinary": "^2.5.1",
     "clsx": "^2.1.1",
     "css-tree": "^3.0.0",
     "date-fns": "^4.1.0",
     "fast-average-color-node": "^3.1.0",
-    "firebase": "^11.0.0",
-    "firebase-admin": "^12.6.0",
+    "firebase": "^11.0.1",
+    "firebase-admin": "^12.7.0",
     "headview3d": "^3.0.2",
     "lucia": "^3.2.2",
     "numerable": "^0.3.15",
@@ -107,8 +108,8 @@
     "tailwind-variants": "^0.2.1"
   },
   "engines": {
-    "node": ">=20",
-    "pnpm": ">=9.4",
+    "node": "^20",
+    "pnpm": "^9",
     "npm": "forbidden, use pnpm instead",
     "yarn": "forbidden, use pnpm instead",
     "bun": "forbidden, use pnpm instead"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -94,6 +94,7 @@ model Auction {
   user        User     @relation(fields: [user_id], references: [id], onDelete: Cascade)
   minion      Minion   @relation(fields: [minion_id], references: [id], onDelete: Cascade)
   hasInfusion Boolean  @default(false)
+  hasFreeWill Boolean  @default(false)
   price       Float
   amount      Int
   timeCreated DateTime @default(now()) @updatedAt

diff --git a/src/lib/components/NumberFlowTicker.svelte b/src/lib/components/NumberFlowTicker.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn } from "$lib/utils";
+  import NumberFlow from "@number-flow/svelte";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  export let value = 100;
+  export let duration = 6000;
+
+  let className: string = "";
+  export { className as class };
+
+  const numr = writable<number>(0);
+
+  onMount(() => {
+    numr.set(value);
+  });
+</script>
+
+<NumberFlow
+  value={$numr}
+  class={cn("inline-block tracking-normal", className)}
+  {...$$restProps}
+  transformTiming={{
+    duration,
+    // Make sure to keep this minified:
+    easing: `linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)`
+  }} />
diff --git a/src/lib/components/card/card-item-minion.svelte b/src/lib/components/card/card-item-minion.svelte
@@ -4,14 +4,15 @@
   import * as Tooltip from "$lib/components/ui/tooltip";
   import { searchSignal } from "$lib/stores/signals";
   import type { Seller } from "$lib/types";
-  import { formatNumber } from "$lib/utilities";
+  import NumberFlow from "@number-flow/svelte";
   import { formatDistanceToNow } from "date-fns";
   import { toZonedTime } from "date-fns-tz";
   import * as headview3d from "headview3d";
   import Info from "lucide-svelte/icons/info";
   import Search from "lucide-svelte/icons/search";
   import { getContext } from "svelte";
   import { createPress } from "svelte-interactions";
+  import { derived, writable } from "svelte/store";
 
   const minion = getContext<Seller>("minion");
   const isHome = getContext<boolean>("isHome");
@@ -59,14 +60,25 @@
     }, 300);
   };
 
-  let minionisOpen = false;
+  const minionisOpen = writable(false);
+  const cost = derived(
+    minionisOpen,
+    ($minionisOpen, set) => {
+      if ($minionisOpen) {
+        setTimeout(() => set(minion.minion.craftCost), 0);
+      } else {
+        set(0);
+      }
+    },
+    0
+  );
 
-  $: if (!minionisOpen && minionViewer) {
+  $: if (!$minionisOpen && minionViewer) {
     destroyViewer(minionViewer);
   }
 </script>
 
-<HoverCard.Root openDelay={150} closeDelay={150} bind:open={minionisOpen}>
+<HoverCard.Root openDelay={150} closeDelay={150} bind:open={$minionisOpen}>
   <HoverCard.Trigger href={`https://hypixel-skyblock.fandom.com/wiki/${minion.minion.name.replace(/ [IVX]+$/, "").replace(/ /g, "_")}`} target="_blank" rel="noopener" class="my-2 flex flex-col items-center truncate rounded p-1 transition-all duration-500">
     <Avatar.Root class="h-12 w-12 flex-shrink-0 rounded-full ">
       <Avatar.Image class="pointer-events-none h-full w-full bg-accent p-1" src={`https://res.cloudinary.com/minionah/image/upload/f_auto,q_auto/v1/minions/head/${minion.minion.id}`} alt={minion.minion.name} />
@@ -92,7 +104,7 @@
           })}
           <Tooltip.Root openDelay={100} closeDelay={0}>
             <Tooltip.Trigger class="cursor-help text-[#FEFF55]">
-              <p class="text-wrap text-left">Raw Craft Cost: <span class="text-[#FEAB00]">{formatNumber(minion.minion.craftCost)} coins</span></p>
+              <p class="text-wrap text-left">Raw Craft Cost: <NumberFlow class="inline text-[#FEAB00]" format={{ notation: "compact", maximumFractionDigits: 2, roundingMode: "halfCeil" }} value={$cost} suffix=" coins" /></p>
             </Tooltip.Trigger>
             <Tooltip.Content class="border-accent bg-muted text-primary">
               <p>Raw Craft Cost is <span class="underline">not</span> 100% accurate.</p>

diff --git a/src/lib/components/card/card-minion-price.svelte b/src/lib/components/card/card-minion-price.svelte
@@ -1,22 +1,19 @@
 <script lang="ts">
   import type { Auction } from "$lib/types";
-  import { formatNumber } from "$lib/utilities";
+  import NumberFlow from "@number-flow/svelte";
   import { getContext } from "svelte";
-  import { fade } from "svelte/transition";
+
+  export let hovering: boolean;
+
   const minion = getContext<Auction>("minion");
   const enableHoverEffects = getContext<boolean>("enableHoverEffects");
-  export let hovering: boolean;
 </script>
 
 <div class="relative -ml-px inline-flex w-0 flex-1 overflow-hidden">
   <span class="relative z-10 inline-flex w-0 flex-1 items-center justify-center overflow-hidden py-4 text-sm font-medium transition-all duration-300 group-hover:translate-y-0 group-hover:scale-125" class:group-hover:translate-y-0={minion.amount ? minion.amount > 1 : false}>
     <img class="pointer-events-none absolute left-4 top-1/2 h-6 w-6 -translate-y-1/2 transition-opacity duration-500 group-hover:opacity-0" src="/assets/images/coin.png" alt="Hypixel SkyBlock Coin" />
-    <div class="grid basis-10 transition-all duration-300 group-hover:translate-y-0" class:-translate-y-2.5={minion.amount ? minion.amount > 1 : false}>
-      {#if hovering && enableHoverEffects}
-        <span transition:fade class="text-center text-primary transition-colors duration-500 [grid-area:1/1] group-hover:text-muted">{formatNumber(minion.price * (minion.amount ?? 1))}</span>
-      {:else}
-        <span transition:fade class="text-center text-primary transition-colors duration-500 [grid-area:1/1] group-hover:text-muted">{formatNumber(minion.price)}</span>
-      {/if}
+    <div class="mx-auto transition-all duration-300 group-hover:translate-y-0" class:-translate-y-2.5={minion.amount ? minion.amount > 1 : false}>
+      <NumberFlow class="text-center text-primary transition-colors duration-500 group-hover:text-muted" format={{ notation: "compact" }} value={hovering && enableHoverEffects ? minion.price * (minion.amount ?? 1) : minion.price} />
     </div>
     {#if minion.amount ? minion.amount > 1 : false}
       <span class="absolute -bottom-1 pt-1 text-sm text-primary/50 transition-all duration-300" class:group-hover:opacity-0={enableHoverEffects} class:-translate-y-2.5={minion.amount ? minion.amount > 1 : false}>/each</span>

diff --git a/src/lib/components/card/cardminion.svelte b/src/lib/components/card/cardminion.svelte
@@ -4,6 +4,7 @@
   import * as Tooltip from "$lib/components/ui/tooltip";
   import { chatSignal } from "$lib/stores/signals";
   import type { Seller } from "$lib/types";
+  import { cn } from "$lib/utils";
   import Eye from "lucide-svelte/icons/eye";
   import Trash2 from "lucide-svelte/icons/trash-2";
   import { createEventDispatcher, setContext } from "svelte";
@@ -83,6 +84,16 @@
       </Tooltip.Content>
     </Tooltip.Root>
   {/if}
+  {#if minion.hasFreeWill}
+    <Tooltip.Root openDelay={100} closeDelay={0}>
+      <Tooltip.Trigger class={cn("absolute right-2 m-0 flex items-center justify-center rounded-lg !border-0 bg-accent p-1.5 transition-all duration-300 group-hover:bg-opacity-0", minion.hasInfusion ? "top-12" : "top-2")}>
+        <img class="pointer-events-none h-full w-5" src="/assets/images/freewill.png" alt="Free Will" />
+      </Tooltip.Trigger>
+      <Tooltip.Content class="border-border bg-popover text-popover-foreground">
+        <p>Free Will</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  {/if}
   {#if showButtons}
     {#if $page.url.pathname === "/profile"}
       <Button class="group absolute left-12 top-2 h-auto rounded-lg !border-0 bg-accent p-1.5 text-sm text-muted-foreground transition-all duration-300 hover:bg-destructive hover:text-destructive-foreground focus:outline-none focus:ring-4 focus:ring-transparent group-hover:opacity-100" type="button" on:click={() => openModal(minion.id)} aria-label="Delete minion">

diff --git a/src/lib/components/magicui/number-ticker.svelte b/src/lib/components/magicui/number-ticker.svelte
diff --git a/src/routes/(main)/(protected)/profile/(profile)/+page.server.ts b/src/routes/(main)/(protected)/profile/(profile)/+page.server.ts
@@ -82,6 +82,7 @@ export const actions = {
           amount: formCreate.data.amount,
           price: Number(formCreate.data.price),
           hasInfusion: formCreate.data.infusion,
+          hasFreeWill: formCreate.data["free-will"],
           user: {
             connect: {
               id: user!.id

diff --git a/src/routes/(main)/(protected)/profile/(profile)/+page.svelte b/src/routes/(main)/(protected)/profile/(profile)/+page.svelte
@@ -8,19 +8,20 @@
   import * as AlertDialog from "$lib/components/ui/alert-dialog";
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import * as Collapsible from "$lib/components/ui/collapsible";
   import * as Form from "$lib/components/ui/form";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import { Switch } from "$lib/components/ui/switch";
-  import { formatNumber } from "$lib/utilities";
+  import NumberFlow, { NumberFlowGroup } from "@number-flow/svelte";
   import type { Auction, Minion, User } from "@prisma/client";
   import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
   import LoaderCircle from "lucide-svelte/icons/loader-circle";
-  import { parse } from "numerable";
   import * as skinview3d from "skinview3d";
   import { onMount } from "svelte";
   import { toast } from "svelte-sonner";
   import { writable } from "svelte/store";
+  import { slide } from "svelte/transition";
   import { superForm } from "sveltekit-superforms";
   import { zodClient } from "sveltekit-superforms/adapters";
   import type { PageData } from "../$types";
@@ -298,26 +299,50 @@
                           }} />
 
                         {#if Number($formDataCreate.price) >= 1000}
-                          <Form.Description>{parse($formDataCreate.price)} = {formatNumber($formDataCreate.price)}</Form.Description>
+                          <div transition:slide>
+                            <Form.Description>
+                              <NumberFlowGroup>
+                                <NumberFlow value={$formDataCreate.price} format={{ notation: "standard" }} suffix=" =" />
+                                <NumberFlow value={$formDataCreate.price} format={{ notation: "compact", maximumFractionDigits: 2, roundingMode: "halfCeil" }} />
+                              </NumberFlowGroup>
+                            </Form.Description>
+                          </div>
                         {/if}
-
                         <Form.FieldErrors />
                       </Form.Control>
                     </Form.Field>
                   </div>
                 </div>
               </div>
-              <div class="flex gap-4">
-                <Form.Field form={formCreate} name="infusion" class="flex flex-row items-center justify-between gap-6 rounded-lg border border-input bg-background p-4">
-                  <Form.Control let:attrs>
-                    <div class="select-none space-y-0.5">
-                      <Form.Label>Mithril Infused</Form.Label>
-                      <Form.Description><a href="https://hypixel-skyblock.fandom.com/wiki/Mithril_Infusion" target="_blank" class="underline underline-offset-2">Mithril Infusion</a> is a minion upgrade which <br /> increases a minion's speed by 10% permanently.</Form.Description>
-                    </div>
-                    <Switch includeInput {...attrs} bind:checked={$formDataCreate.infusion} />
-                  </Form.Control>
-                </Form.Field>
-              </div>
+              <Collapsible.Root class="flex flex-col items-center gap-y-2">
+                <Collapsible.Trigger class="flex items-center justify-between gap-2 rounded-lg border border-border px-6 py-2 transition-colors duration-300 hover:bg-background ">
+                  Minion Upgrades <ChevronsUpDown class="size-5" />
+                </Collapsible.Trigger>
+                <Collapsible.Content class="mt-4 flex w-full flex-col items-center justify-center gap-4">
+                  <div class="flex gap-4">
+                    <Form.Field form={formCreate} name="infusion" class="flex flex-row items-center justify-between gap-6 rounded-lg border border-input bg-background p-4">
+                      <Form.Control let:attrs>
+                        <div class="select-none space-y-0.5">
+                          <Form.Label>Mithril Infused</Form.Label>
+                          <Form.Description><a href="https://hypixel-skyblock.fandom.com/wiki/Mithril_Infusion" target="_blank" class="underline underline-offset-2">Mithril Infusion</a> is a minion upgrade which <br /> increases a minion's speed by 10% permanently.</Form.Description>
+                        </div>
+                        <Switch includeInput {...attrs} bind:checked={$formDataCreate.infusion} />
+                      </Form.Control>
+                    </Form.Field>
+                  </div>
+                  <div class="flex gap-4">
+                    <Form.Field form={formCreate} name="free-will" class="flex flex-row items-center justify-between gap-6 rounded-lg border border-input bg-background p-4">
+                      <Form.Control let:attrs>
+                        <div class="select-none space-y-0.5">
+                          <Form.Label>Free Will</Form.Label>
+                          <Form.Description><a href="https://hypixel-skyblock.fandom.com/wiki/Free_Will" target="_blank" class="underline underline-offset-2">Free Will</a> is a minion upgrade which <br /> increases a minion's speed by 10% permanently.</Form.Description>
+                        </div>
+                        <Switch includeInput {...attrs} bind:checked={$formDataCreate["free-will"]} />
+                      </Form.Control>
+                    </Form.Field>
+                  </div>
+                </Collapsible.Content>
+              </Collapsible.Root>
             </div>
           </Card.Content>
           <Card.Footer class="justify-end">

diff --git a/src/routes/(main)/(protected)/profile/(profile)/schema.ts b/src/routes/(main)/(protected)/profile/(profile)/schema.ts
@@ -19,7 +19,8 @@ export const formSchemaCreate = z.object({
     .min(1, "Minion's price can't be lower than 1 coin")
     .max(10000000000000, "Minion's price can't be higher than 10000000000000 coins")
     .default("" as unknown as number),
-  infusion: z.boolean()
+  infusion: z.boolean(),
+  "free-will": z.boolean()
 });
 
 export const formSchemaDelete = z.object({