diff --git a/src/lib/components/misc/Navbar.svelte b/src/lib/components/misc/Navbar.svelte
index a8c8f9ca7..70544c67a 100644
--- a/src/lib/components/misc/Navbar.svelte
+++ b/src/lib/components/misc/Navbar.svelte
@@ -4,6 +4,7 @@
import { getInternalState, getPreferences, getProfileContext } from "$ctx";
import ScrollAreaPrimitive from "$lib/components/ScrollAreaPrimitive.svelte";
import type { SectionName } from "$lib/sections/types";
+ import { getSectionDisplayName } from "$lib/shared/april-fools";
import { cn } from "$lib/shared/utils";
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
import ChevronRight from "@lucide/svelte/icons/chevron-right";
@@ -132,7 +133,9 @@
{#each filteredSectionOrderPreferences as section, index (index)}
handleSectionClick(section.name)}>
- {section.name?.replaceAll("_", " ")}
+
+
+ {getSectionDisplayName(section.name)}
{/each}
@@ -150,14 +153,16 @@
{#if previousSection}
handleSectionClick(previousSection.name ?? filteredSectionOrderPreferences[0].name)}>
- {previousSection.name.replaceAll("_", " ")}
+
+ {getSectionDisplayName(previousSection.name)}
{:else}
{/if}
{#if nextSection}
handleSectionClick(nextSection.name ?? filteredSectionOrderPreferences[filteredSectionOrderPreferences.length - 1].name)}>
- {nextSection.name.replaceAll("_", " ")}
+
+ {getSectionDisplayName(nextSection.name)}
{/if}
diff --git a/src/lib/components/stats/CardBuilder.svelte b/src/lib/components/stats/CardBuilder.svelte
new file mode 100644
index 000000000..558bcd80f
--- /dev/null
+++ b/src/lib/components/stats/CardBuilder.svelte
@@ -0,0 +1,271 @@
+
+
+{#snippet triggerButton(props: TriggerProps)}
+
+
+ Card
+
+{/snippet}
+
+{#snippet presetCards()}
+
+
Preset
+
+ {#each cardPresets as preset (preset.id)}
+
selectPreset(preset.id)} class={cn("flex flex-col gap-1.5 rounded-lg border-2 p-2 transition-all", selectedPreset.id === preset.id ? "border-icon bg-icon/10" : "border-text/10 bg-text/5 hover:border-text/20 hover:bg-text/10")}>
+
+
+
+
+
+
+
+ {#each Array(5) as _, i (i)}
+
+ {/each}
+
+
+ {#each Array(2) as _, i (i)}
+
+ {/each}
+ {#each Array(3) as _, i (i)}
+
+ {/each}
+
+
+
+ {#each Array(5) as _, i (i)}
+
+ {/each}
+
+
+
+
+ {/each}
+
+
+{/snippet}
+
+{#snippet optionGroups()}
+ {#each selectedPreset.schema as group (group.groupName)}
+
+
+
+ {group.groupName}
+
+
+ {#each group.options as option (option.key)}
+ {#if option.type === "checkbox"}
+
+ {option.label}
+ updateSetting(option.key, checked)}>
+
+
+
+ {:else if option.type === "color"}
+
+ {option.label}
+ updateSetting(option.key, e.currentTarget.value)} class="size-8 cursor-pointer rounded-md border border-text/10 bg-transparent p-0.5" />
+
+ {:else if option.type === "text"}
+
+ {option.label}
+ updateSetting(option.key, e.currentTarget.value)} class="w-full max-w-40 rounded-md border border-text/10 bg-text/5 px-2 py-1 text-sm text-text focus:border-icon focus:outline-none" />
+
+ {:else if option.type === "number"}
+
+ {option.label}
+ updateSetting(option.key, Number(e.currentTarget.value))} class="w-full max-w-24 rounded-md border border-text/10 bg-text/5 px-2 py-1 text-sm text-text focus:border-icon focus:outline-none" />
+
+ {/if}
+ {/each}
+
+
+ {/each}
+{/snippet}
+
+{#snippet resetButton()}
+
+{/snippet}
+
+{#snippet imagePreview()}
+
+
+
Preview
+
+
+
+ URL
+
+
+
+ BBCode
+
+
+
+ Image
+
+
+
+
+ {#if isImagePending}
+
+
+
+ {/if}
+
+ Card Preview
+
+
+{/snippet}
+
+{#if isHover.current}
+
+
+ {#snippet child({ props })}
+ {@render triggerButton(props)}
+ {/snippet}
+
+
+
+ {#snippet child({ props, open })}
+ {#if open}
+
+ {/if}
+ {/snippet}
+
+
+ {#snippet child({ props, open })}
+ {#if open}
+
+
+ {@render presetCards()}
+ {@render optionGroups()}
+ {@render resetButton()}
+ {@render imagePreview()}
+
+
+{:else}
+
+
+ {#snippet child({ props })}
+ {@render triggerButton(props)}
+ {/snippet}
+
+
+
+
+
+
+ {@render presetCards()}
+ {@render optionGroups()}
+ {@render resetButton()}
+ {@render imagePreview()}
+
+
+{/if}
diff --git a/src/lib/layouts/stats/PlayerProfile.svelte b/src/lib/layouts/stats/PlayerProfile.svelte
index ff3b03438..ff8ad46e0 100644
--- a/src/lib/layouts/stats/PlayerProfile.svelte
+++ b/src/lib/layouts/stats/PlayerProfile.svelte
@@ -2,7 +2,9 @@
import { resolve } from "$app/paths";
import { getFavorites, getHoverContext, getPreferences, getProfileContext } from "$ctx";
import { APINotice } from "$lib/components/notices";
+ import { getAprilFoolsProfileBadge, isAprilFoolsActive } from "$lib/shared/april-fools";
import { cn, flyAndScale } from "$lib/shared/utils";
+ import CardBuilder from "$src/lib/components/stats/CardBuilder.svelte";
import Ban from "@lucide/svelte/icons/ban";
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
import ChevronRight from "@lucide/svelte/icons/chevron-right";
@@ -29,6 +31,7 @@
const favorites = getFavorites();
const apiSettings = $derived(Object.entries(profile?.apiSettings ?? {}).filter(([_, value]) => !value));
+ const aprilFoolsBadge = $derived(getAprilFoolsProfileBadge(profile?.uuid ?? profile?.username ?? profile?.displayName ?? "skycrypt"));
const iconMapper: Record
= {
TWITTER: "x-twitter.svg",
@@ -168,7 +171,7 @@
{#if apiSettings.length}
(noticeOpen = true)}>
-
+
@@ -189,6 +192,11 @@