diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index cfb4b0880562..26504cdd4732 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -18,7 +18,7 @@
@layer custom-styles {
@import "buttons", "404", "ads", "account", "animations", "caret",
"commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
- "nav", "notifications", "popups", "scroll", "settings", "account-settings",
+ "notifications", "popups", "scroll", "settings", "account-settings",
"leaderboards", "test", "loading", "friends", "media-queries";
.chartCanvas {
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index f27fa33e30ad..b3634b288738 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -18,15 +18,6 @@
}
}
}
- header {
- nav {
- .textButton.view-account {
- .text {
- display: none;
- }
- }
- }
- }
.page404 {
.content {
grid-template-columns: 300px;
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index 0dec474c9c7a..d1127446d29f 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -2,13 +2,6 @@
@use "./media.scss" as *;
@include media-query(brown) {
- header {
- nav {
- font-size: 0.8rem;
- line-height: 0.8rem;
- gap: 0.1rem;
- }
- }
.page404 {
.content {
grid-template-columns: 1fr;
diff --git a/frontend/src/styles/media-queries-gray.scss b/frontend/src/styles/media-queries-gray.scss
index 4cdd96e29510..9f311306abaf 100644
--- a/frontend/src/styles/media-queries-gray.scss
+++ b/frontend/src/styles/media-queries-gray.scss
@@ -14,10 +14,4 @@
display: none;
}
}
- header {
- gap: 0.25rem;
- nav .textButton {
- padding: 0.5em 0.25em;
- }
- }
}
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 68e886cf336e..556c9bacb757 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -8,21 +8,6 @@
font-size: 0.7rem;
--horizontalPadding: 0.6em;
}
- header {
- #logo {
- .text {
- font-size: 1.5rem;
- .top {
- display: none;
- }
- }
- }
- nav {
- .textButton.view-account {
- gap: 0.5em;
- }
- }
- }
.pageAccountSettings .main {
gap: 2rem;
.right .tab .section {
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index 3020530eade0..908548af8a6d 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -39,24 +39,6 @@
}
}
}
- header {
- nav {
- font-size: 0.9rem;
- line-height: 0.9rem;
- gap: 0.25rem;
- .view-account {
- .text {
- display: none;
- }
- }
- }
- #logo {
- grid-template-columns: 1fr;
- .text {
- display: none;
- }
- }
- }
.pageLogin {
flex-direction: column;
gap: 4rem;
diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
deleted file mode 100644
index e3c018f55bfe..000000000000
--- a/frontend/src/styles/nav.scss
+++ /dev/null
@@ -1,458 +0,0 @@
-nav {
- font-size: 1rem;
- line-height: 1rem;
- color: var(--sub-color);
- display: flex;
- gap: 0.5rem;
- width: 100%;
-
- .spacer {
- flex-grow: 1;
- }
-
- button.showAlerts {
- position: relative;
- }
-
- .textButton {
- position: relative;
- .text {
- font-size: 0.75em;
- align-self: center;
- .fas {
- margin-left: 0.33em;
- }
- }
-
- .icon,
- .spinner {
- width: 1.25em;
- height: 1.25em;
- display: grid;
- place-content: center center;
- }
- .spinner {
- opacity: 0;
- transition: opacity 0.125s;
- }
- }
-
- .accountButtonAndMenu {
- position: relative;
- .view-account {
- position: relative;
- align-items: center;
- gap: 0.33em;
- display: grid;
- grid-auto-flow: column;
-
- .notificationBubble {
- left: 3em;
- top: 0.5em;
- }
-
- .spinner,
- .avatar {
- grid-column: 1/2;
- grid-row: 1/2;
- place-self: center center;
- }
-
- .discordImage {
- width: 1.25em;
- height: 1.25em;
- }
-
- .levelAndBar {
- transition: 0.125s;
- }
-
- .level {
- width: max-content;
- font-size: 0.65em;
- line-height: 0.65em;
- align-self: center;
- color: var(--bg-color);
- background: var(--sub-color);
- padding: 0.4em 0.4em;
- border-radius: calc(var(--roundness) / 2);
- }
-
- .xpBar {
- z-index: 5;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- height: 0.25em;
- bottom: -0.5em;
- width: 100%;
- min-width: 16ch;
- right: 0;
- background: var(--sub-alt-color);
- border-radius: var(--roundness);
- grid-template-columns: auto 2.5em;
- .bar {
- left: 0;
- width: 0%;
- height: 100%;
- background: var(--main-color);
- border-radius: var(--roundness);
- }
- .xpBreakdown {
- backdrop-filter: blur(1em);
- /*background: linear-gradient(
- 90deg,
- transparent 0%,
- var(--bg-color) 10%
- );*/
- min-width: 100%;
- width: max-content;
- position: absolute;
- color: var(--text-color);
- display: grid;
- // gap: 0.5em;
- //justify-items: center;
- // width: 32ch;
- justify-self: end;
- right: 0;
- padding: 0.5em;
- border-radius: var(--roundness);
-
- .total {
- text-align: right;
- font-size: 1em;
- color: var(--main-color);
- width: max-content;
- justify-self: end;
- }
- .divider {
- width: 100%;
- height: 0.1rem;
- background: var(--sub-alt-color);
- border-radius: var(--roundness);
- opacity: 0.5;
- }
- .list {
- margin-top: 0.5em;
- .line {
- font-size: 0.8em;
- display: grid;
- grid-template-columns: auto 10ch;
- gap: 0.5em;
-
- & div {
- text-align: right;
- }
-
- .positive {
- color: var(--main-color);
- }
- .negative {
- color: var(--error-color);
- }
- .total {
- font-weight: bold;
- }
- }
- }
- }
- }
- &:hover {
- .level {
- background-color: var(--text-color);
- }
- .userFlags {
- color: var(--text-color);
- }
- }
- &:focus-within {
- z-index: 10;
- }
- }
- .menu {
- // display: none;
- pointer-events: none;
- z-index: 5;
- opacity: 0;
- position: absolute;
- top: 99%;
- right: 0;
- font-size: 0.75rem;
- min-width: 23ch;
- width: 100%;
- transition: opacity 0.125s;
-
- .spacer {
- width: 100%;
- height: 0.5em;
- background: transparent;
- }
-
- .items {
- box-shadow: 0 0 0 0.5em var(--bg-color);
- background: var(--sub-alt-color);
- display: grid;
- border-radius: var(--roundness);
- gap: 0.25em;
-
- a,
- button {
- justify-items: start;
- justify-content: left;
- padding-left: 0;
- border-radius: 0;
- gap: 0;
- i {
- margin-right: 0.7em;
- margin-left: 0.9em;
- }
- &:last-child {
- border-radius: 0 0 var(--roundness) var(--roundness);
- }
- &:first-child {
- border-radius: var(--roundness) var(--roundness) 0 0;
- }
- &:focus-visible {
- border-radius: var(--roundness);
- }
- }
-
- & .goToFriends {
- display: grid;
- grid-template-columns: auto 1fr auto;
- text-align: left;
- .notificationBubble {
- margin-right: 0.5em;
- position: unset;
- box-shadow: 0 0 0 0.5em var(--sub-alt-color);
- display: block;
- }
- }
- }
- }
- &:hover,
- &:focus-within {
- & .menu {
- pointer-events: all;
- opacity: 1;
- }
- // .view-account {
- // background: var(--sub-alt-color);
- // }
- }
- }
-
- .separator {
- width: 2px;
- height: 1rem;
- background-color: var(--sub-color);
- }
-}
-
-header {
- grid-template-areas: "logo menu";
- line-height: 2.3rem;
- font-size: 2.3rem;
- /* text-align: center; */
- // transition: 0.25s;
- // padding: 0 5px;
- display: grid;
- grid-auto-flow: column;
- grid-template-columns: auto 1fr;
- z-index: 3;
- align-items: center;
- gap: 0.5rem;
- -webkit-user-select: none;
- user-select: none;
-
- #logo {
- // margin-bottom: 0.6rem;
- cursor: pointer;
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 0.5rem;
- transition: none;
- text-decoration: none;
- color: var(--text-color);
- padding: 0.35rem 0.25rem;
- margin-left: -0.25rem;
- margin-right: -0.25rem;
-
- .icon {
- width: 2.5rem;
- display: grid;
- align-items: center;
- background-color: transparent;
- // margin-bottom: 0.15rem;
- svg path {
- transition: 0.25s;
- fill: var(--main-color);
- }
- }
- .text {
- .top {
- position: absolute;
- left: 0.35em;
- font-size: 0.325em;
- line-height: 0.325em;
- color: var(--sub-color);
- transition:
- color 0.125s,
- opacity 0.125s;
- }
- position: relative;
- font-size: 2rem;
- line-height: 2rem;
- font-family: "Lexend Deca", sans-serif;
- transition: color 0.25s;
- font-weight: unset;
- margin-block-start: unset;
- margin-block-end: unset;
- margin-top: -0.23em;
- }
- white-space: nowrap;
- -webkit-user-select: none;
- user-select: none;
-
- .bottom {
- // margin-left: -0.15rem;
- // color: var(--main-color);
- // transition: 0.25s;
- // cursor: pointer;
- font-size: 0.4em;
- position: absolute;
- right: -10px;
- bottom: -20px;
- color: var(--main-color);
- transform: rotate(-5deg);
- animation: pulse 1.5s infinite;
- }
-
- @keyframes pulse {
- 0% {
- transform: rotate(-5deg) scale(1);
- }
- 50% {
- transform: rotate(-5deg) scale(1.1);
- }
- 100% {
- transform: rotate(-5deg) scale(1);
- }
- }
- &:focus-visible {
- outline: none;
- box-shadow:
- 0 0 0 0.1rem var(--bg-color),
- 0 0 0 0.2rem var(--text-color);
- border-radius: var(--roundness);
- .text .top {
- opacity: 0;
- transition: none;
- }
- }
- }
-
- .config {
- grid-area: config;
- transition: 0.125s;
- .mobileConfig {
- display: none;
- .textButton {
- margin-right: -1rem;
- padding: 0.5rem 1rem;
- font-size: 2rem;
- }
- }
-
- .desktopConfig {
- justify-self: right;
- display: grid;
- // grid-auto-flow: row;
- grid-template-rows: 0.7rem 0.7rem 0.7rem;
- grid-gap: 0.2rem;
- // width: min-content;
- // width: -moz-min-content;
- // transition: 0.25s;
- /* margin-bottom: 0.1rem; */
- justify-items: self-end;
-
- .group {
- // transition: 0.25s;
-
- .title {
- color: var(--sub-color);
- font-size: 0.5rem;
- line-height: 0.5rem;
- margin-bottom: 0.15rem;
- }
-
- .buttons {
- display: flex;
- .textButton {
- font-size: 0.7rem;
- line-height: 0.7rem;
- padding: 0px 0.15rem;
- }
- }
- &.disabled {
- pointer-events: none;
- opacity: 0.25;
- }
- }
-
- .punctuationMode {
- margin-bottom: -0.1rem;
- }
-
- .numbersMode {
- margin-bottom: -0.1rem;
- }
- }
- }
- //top focus
- &.focus {
- color: var(--sub-color) !important;
-
- .notificationBubble {
- opacity: 0;
- }
-
- .result {
- opacity: 0 !important;
- }
-
- .icon svg path {
- fill: var(--sub-color) !important;
- }
-
- #logo .text {
- color: var(--sub-color) !important;
- // opacity: 0 !important;
- }
-
- #logo .top {
- opacity: 0 !important;
- }
-
- #logo .bottom {
- opacity: 0 !important;
- }
-
- .config {
- opacity: 0 !important;
- }
-
- nav {
- color: transparent;
-
- .textButton,
- button {
- color: transparent !important;
- }
- .avatar,
- .levelAndBar {
- opacity: 0 !important;
- }
- }
- }
-}
diff --git a/frontend/src/ts/components/common/Bar.tsx b/frontend/src/ts/components/common/Bar.tsx
new file mode 100644
index 000000000000..2e0a0227d802
--- /dev/null
+++ b/frontend/src/ts/components/common/Bar.tsx
@@ -0,0 +1,46 @@
+import { JSXElement } from "solid-js";
+
+import { Anime } from "./anime";
+
+type Props = {
+ percent: number;
+ fill: "main" | "text";
+ bg: "bg" | "sub-alt";
+ showPercentageOnHover?: boolean;
+ animationDuration?: number;
+ animationEase?: string;
+};
+
+const bgClassMap: Record
+
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index e5b15a9b5b26..16d42da42f09 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -15,10 +15,13 @@ type BaseProps = {
| string
| { text: string; position: "up" | "down" | "left" | "right" };
"router-link"?: true;
+ onClick?: () => void;
+ onMouseEnter?: () => void;
+ onMouseLeave?: () => void;
+ dataset?: Record
+
-
-
-
{(flag) => (
-
+
+
+ (levelEl = el)}
+ animation={flashAnimation()}
+ class={cn(
+ "level rounded-half bg-(--unhoveredcolor) px-[0.5em] py-[0.1em] text-[0.7em] text-bg [--unhoveredcolor:var(--color-sub)]",
+ { "transition-colors duration-125": !isAnimating() },
+ )}
+ >
+ {props.level}
+
+
);
}
diff --git a/frontend/src/ts/components/common/UserFlags.tsx b/frontend/src/ts/components/common/UserFlags.tsx
index ae27505900f7..a5f5d90e38ae 100644
--- a/frontend/src/ts/components/common/UserFlags.tsx
+++ b/frontend/src/ts/components/common/UserFlags.tsx
@@ -7,16 +7,25 @@ import {
UserFlagOptions,
} from "../../controllers/user-flag-controller";
import { Fa } from "./Fa";
-export function UserFlags(props: SupportsFlags & UserFlagOptions): JSXElement {
+export function UserFlags(
+ props: SupportsFlags &
+ UserFlagOptions & {
+ class?: string;
+ },
+): JSXElement {
const flags = (): UserFlag[] => getMatchingFlags(props);
return (
+
+
+ ;
+
+ /**
+ * Callback ref to access the underlying DOM element.
+ */
+ ref?: (el: HTMLElement) => void;
}>;
/**
@@ -166,6 +171,7 @@ export function Anime(props: AnimeProps): JSXElement {
"as",
"class",
"style",
+ "ref",
]);
let element: HTMLElement | undefined = undefined;
@@ -345,6 +351,7 @@ export function Anime(props: AnimeProps): JSXElement {
const setElementRef = (el: unknown): void => {
element = el as HTMLElement;
+ local.ref?.(el as HTMLElement);
};
return (
diff --git a/frontend/src/ts/components/common/anime/AnimeConditional.tsx b/frontend/src/ts/components/common/anime/AnimeConditional.tsx
new file mode 100644
index 000000000000..f3040115a453
--- /dev/null
+++ b/frontend/src/ts/components/common/anime/AnimeConditional.tsx
@@ -0,0 +1,82 @@
+import { Accessor, JSXElement, ParentProps } from "solid-js";
+
+import { Conditional } from "../Conditional";
+import { Anime, AnimeProps } from "./Anime";
+import { AnimePresence } from "./AnimePresence";
+
+/**
+ * A convenience wrapper that renders animated `if/then/else` conditionals.
+ *
+ * Combines `` + `` + `` into a single
+ * component. Both branches are wrapped in `` so they fade in/out
+ * automatically. Use `animeProps` to customise the animation; the fallback
+ * is a quick 125 ms opacity fade.
+ *
+ * @example
+ * ```tsx
+ * (
+ props: ParentProps<{
+ exitBeforeEnter?: boolean;
+ if: T;
+ then: JSXElement | ((value: Accessor>) => JSXElement);
+ else?: JSXElement;
+ animeProps?: AnimeProps;
+ }>,
+): JSXElement {
+ /** Fallback animation used when no `animeProps` are provided. */
+ const defaultAnimeProps = {
+ initial: { opacity: 0 },
+ animate: { opacity: 1, duration: 125 },
+ exit: { opacity: 0, duration: 125 },
+ };
+
+ return (
+
+ (
+
+ {typeof props.then === "function" ? props.then(value) : props.then}
+
+ )}
+ else={
+
+ {props.else}
+
+ }
+ />
+
+ );
+}
diff --git a/frontend/src/ts/components/common/anime/AnimeGroupTest.tsx b/frontend/src/ts/components/common/anime/AnimeGroupTest.tsx
deleted file mode 100644
index 72cdb713cf6e..000000000000
--- a/frontend/src/ts/components/common/anime/AnimeGroupTest.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createSignal, For, JSXElement } from "solid-js";
-
-import { Button } from "../Button";
-import { AnimeGroup } from "./AnimeGroup";
-
-let nextId = 1;
-
-export function AnimeGroupTest(): JSXElement {
- const [items, setItems] = createSignal<{ id: number; label: string }[]>([
- { id: nextId++, label: "Item 1" },
- { id: nextId++, label: "Item 2" },
- { id: nextId++, label: "Item 3" },
- ]);
-
- const addItem = (): void => {
- const id = nextId++;
- setItems((prev) => [...prev, { id, label: `Item ${id}` }]);
- };
-
- const removeItem = (): void => {
- setItems((prev) => prev.slice(0, -1));
- };
-
- return (
-
-
-
- {(item) => (
-
-
-
- );
-}
diff --git a/frontend/src/ts/components/common/anime/AnimeMatch.tsx b/frontend/src/ts/components/common/anime/AnimeMatch.tsx
new file mode 100644
index 000000000000..0fe5cf1a51a3
--- /dev/null
+++ b/frontend/src/ts/components/common/anime/AnimeMatch.tsx
@@ -0,0 +1,55 @@
+import { AnimationParams } from "animejs";
+import { JSXElement, Match, ParentProps, useContext } from "solid-js";
+
+import { Anime } from "./Anime";
+import { AnimeSwitchContext } from "./AnimeSwitch";
+
+/**
+ * A `` wrapper that integrates with `` to apply exit/enter
+ * animations to conditional content inside a `` block.
+ *
+ * Animation props (`initial`, `animate`, `exit`) fall back to whatever was
+ * provided on the parent ``, but can be overridden per-case.
+ *
+ * Must be a direct child of ``.
+ *
+ * @example
+ * ```tsx
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+export function AnimeMatch(
+ props: ParentProps<{
+ when: boolean;
+ initial?: Partial;
+ animate?: AnimationParams;
+ exit?: AnimationParams;
+ duration?: number;
+ }>,
+): JSXElement {
+ const ctx = useContext(AnimeSwitchContext);
+
+ // Fall back to context values from AnimeSwitch when not explicitly provided
+ const initial = () => props.initial ?? ctx?.()?.initial;
+ const animate = () => props.animate ?? ctx?.()?.animate;
+ const exit = () => props.exit ?? ctx?.()?.exit;
+
+ return (
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/frontend/src/ts/components/common/anime/AnimatedShow.tsx b/frontend/src/ts/components/common/anime/AnimeShow.tsx
similarity index 86%
rename from frontend/src/ts/components/common/anime/AnimatedShow.tsx
rename to frontend/src/ts/components/common/anime/AnimeShow.tsx
index 38d440b7682f..cd93227d0408 100644
--- a/frontend/src/ts/components/common/anime/AnimatedShow.tsx
+++ b/frontend/src/ts/components/common/anime/AnimeShow.tsx
@@ -15,26 +15,27 @@ import { AnimePresence } from "./AnimePresence";
*
* @example
* ```tsx
- *
+ *
*
+ *
* ```
*
* @example
* ```tsx
- *
+ *
*
+ *
* ```
*/
-export function AnimatedShow(
+export function AnimeShow(
props: ParentProps<{
when: boolean;
slide?: true;
duration?: number;
+ class?: string;
}>,
): JSXElement {
- const duration = () => props.duration ?? 250;
+ const duration = () => props.duration ?? 125;
return (
}
animate={{ opacity: 1, duration: duration() } as AnimationParams}
exit={{ opacity: 0, duration: duration() } as AnimationParams}
+ class={props.class}
>
{props.children}
@@ -62,6 +64,7 @@ export function AnimatedShow(
}
exit={{ height: 0, duration: duration() } as AnimationParams}
style={{ overflow: "hidden" }}
+ class={props.class}
>
{props.children}
diff --git a/frontend/src/ts/components/common/anime/AnimeSwitch.tsx b/frontend/src/ts/components/common/anime/AnimeSwitch.tsx
new file mode 100644
index 000000000000..3697092e0ca5
--- /dev/null
+++ b/frontend/src/ts/components/common/anime/AnimeSwitch.tsx
@@ -0,0 +1,57 @@
+import {
+ Accessor,
+ Context,
+ createContext,
+ createMemo,
+ JSXElement,
+ ParentProps,
+ Switch,
+} from "solid-js";
+
+import { AnimeProps } from "./Anime";
+import { AnimePresence } from "./AnimePresence";
+
+/**
+ * Context that passes shared `AnimeProps` defaults from `` down to
+ * `` children. Children can override individual props, but fall back
+ * to the context values when not specified.
+ */
+export const AnimeSwitchContext: Context<
+ Accessor | undefined
+> = createContext | undefined>(undefined);
+
+/**
+ * A convenience wrapper that combines `` + `` with shared
+ * animation defaults for all child `` elements.
+ *
+ * Pass `animeProps` to define default `initial`/`animate`/`exit` values for every
+ * match case. Each `` can still override those values individually.
+ *
+ * @example
+ * ```tsx
+ *
+ *
+ * ```
+ */
+export function AnimeSwitch(
+ props: ParentProps<{ exitBeforeEnter?: boolean; animeProps?: AnimeProps }>,
+): JSXElement {
+ const animeProps = createMemo(() => props.animeProps);
+
+ return (
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/frontend/src/ts/components/common/anime/index.ts b/frontend/src/ts/components/common/anime/index.ts
index f412b928c242..b6564735bbef 100644
--- a/frontend/src/ts/components/common/anime/index.ts
+++ b/frontend/src/ts/components/common/anime/index.ts
@@ -7,6 +7,8 @@ export type { AnimeGroupProps } from "./AnimeGroup";
export { AnimePresence } from "./AnimePresence";
export type { AnimePresenceProps } from "./AnimePresence";
-export { AnimatedShow } from "./AnimatedShow";
+export { AnimeShow } from "./AnimeShow";
+export { AnimeSwitch } from "./AnimeSwitch";
+export { AnimeConditional } from "./AnimeConditional";
export type { AnimationParams, JSAnimation } from "animejs";
diff --git a/frontend/src/ts/components/layout/header/AccountMenu.tsx b/frontend/src/ts/components/layout/header/AccountMenu.tsx
new file mode 100644
index 000000000000..8ab66b6a6aac
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/AccountMenu.tsx
@@ -0,0 +1,85 @@
+import { JSXElement, Show } from "solid-js";
+
+import { get as getServerConfiguration } from "../../../ape/server-configuration";
+import { signOut } from "../../../auth";
+import { getSnapshot, MiniSnapshot } from "../../../stores/snapshot";
+import { AnimeShow } from "../../common/anime";
+import { Button } from "../../common/Button";
+import { NotificationBubble } from "../../common/NotificationBubble";
+
+type Props = {
+ show: boolean;
+ showFriendsNotificationBubble?: boolean;
+};
+
+export function AccountMenu(props: Props): JSXElement {
+ const buttonClass =
+ "w-full justify-start rounded-none px-3 py-2 whitespace-nowrap gap-2";
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/layout/header/AccountXpBar.tsx b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
new file mode 100644
index 000000000000..994f06a907fb
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
@@ -0,0 +1,346 @@
+import { XpBreakdown } from "@monkeytype/schemas/results";
+import { isSafeNumber } from "@monkeytype/util/numbers";
+import { createMemo, createSignal, For, JSXElement } from "solid-js";
+
+import { createEvent } from "../../../hooks/createEvent";
+import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters";
+import { createEffectOn } from "../../../hooks/effects";
+import {
+ getSkipBreakdownEvent,
+ getXpBarData,
+ setAnimatedLevel,
+} from "../../../signals/header";
+import { getXpDetails } from "../../../utils/levels";
+import { sleep } from "../../../utils/misc";
+import { Anime, AnimePresence, AnimeShow } from "../../common/anime";
+import { Bar } from "../../common/Bar";
+
+type BreakdownItem = {
+ label: string;
+ amount: number | string;
+};
+
+export function AccountXpBar(): JSXElement {
+ const [getShowBar, setShowBar] = createSignal(false);
+ const [getShowBreakdown, setShowBreakdown] = createSignal(false);
+ const [getBreakdownItems, setBreakdownItems] = createSignal(
+ [],
+ );
+ const [getBarPercent, setBarPercent] = createSignal(0);
+ const [getBarAnimationDuration, setBarAnimationDuration] = createSignal(0);
+ const [getBarAnimationEase, setBarAnimationEase] = createSignal("out(5)");
+
+ const [getAnimationEvent, fireAnimationEvent] = createEvent();
+ const [getTotal, { setTotal }] = createSignalWithSetters(0)({
+ setTotal: (set, value: number) => {
+ set(value);
+ fireAnimationEvent();
+ },
+ });
+
+ let canSkip = true;
+ let skipped = false;
+ let runId = 0;
+
+ const flashAnimation = createMemo(() => {
+ getAnimationEvent(); // trigger on every total update, even if value unchanged
+ const rand = (Math.random() * 2 - 1) / 4;
+ const rand2 = (Math.random() + 1) / 2;
+ return {
+ scale: [1 + 0.5 * rand2, 1],
+ rotate: [10 * rand, 0],
+ duration: 2000,
+ ease: "out(5)",
+ };
+ });
+
+ const addItem = (label: string, amount: number | string): void => {
+ setBreakdownItems((items) => [...items, { label, amount }]);
+ };
+
+ createEffectOn(getSkipBreakdownEvent, async () => {
+ if (skipped || !canSkip) return;
+
+ const myId = runId; // capture before first await
+ const data = getXpBarData();
+ if (!data) return;
+
+ const breakdown = data.breakdown;
+ if (!getShowBreakdown() || !breakdown) return;
+
+ skipped = true;
+ setShowBreakdown(false);
+ setBreakdownItems([]);
+ setTotal(data.addedXp);
+ await sleep(3000);
+ if (runId !== myId) return;
+ setShowBar(false);
+ });
+
+ createEffectOn(getXpBarData, async (data) => {
+ const myId = ++runId;
+ const isStale = (): boolean => runId !== myId;
+ if (data !== null) {
+ skipped = false;
+ canSkip = true;
+ const breakdown = data.breakdown;
+ const promises = [];
+ if (breakdown) {
+ promises.push(runBreakdown(breakdown, isStale));
+ setShowBreakdown(true);
+ } else {
+ setTotal(data.addedXp);
+ }
+ setShowBar(true);
+ await sleep(125);
+ if (isStale()) return;
+
+ promises.push(
+ fullBarAnimation(
+ data.resultingXp - data.addedXp,
+ data.resultingXp,
+ isStale,
+ ),
+ );
+ if (skipped) return;
+ await Promise.all(promises);
+ canSkip = false;
+ await sleep(4000);
+ if (isStale() || skipped) return;
+ setShowBreakdown(false);
+ await sleep(1000);
+ if (isStale() || skipped) return;
+ setShowBar(false);
+ }
+ });
+
+ const runBreakdown = async (
+ breakdown: XpBreakdown,
+ isStale: () => boolean,
+ ): Promise => {
+ const delay = 500;
+ setBreakdownItems([]);
+ let total = breakdown.base ?? 0;
+ setTotal(total);
+
+ addItem("time typing", breakdown.base ?? 0);
+
+ if (isSafeNumber(breakdown.fullAccuracy)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.fullAccuracy;
+ setTotal(total);
+ addItem("perfect", breakdown.fullAccuracy);
+ } else if (isSafeNumber(breakdown.corrected)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.corrected;
+ setTotal(total);
+ addItem("clean", breakdown.corrected);
+ }
+
+ if (isSafeNumber(breakdown.quote)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.quote;
+ setTotal(total);
+ addItem("quote", breakdown.quote);
+ } else {
+ if (isSafeNumber(breakdown.punctuation)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.punctuation;
+ setTotal(total);
+ addItem("punctuation", breakdown.punctuation);
+ }
+ if (isSafeNumber(breakdown.numbers)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.numbers;
+ setTotal(total);
+ addItem("numbers", breakdown.numbers);
+ }
+ }
+
+ if (isSafeNumber(breakdown.funbox)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.funbox;
+ setTotal(total);
+ addItem("funbox", breakdown.funbox);
+ }
+
+ if (isSafeNumber(breakdown.streak)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.streak;
+ setTotal(total);
+ addItem("streak", breakdown.streak);
+ }
+
+ if (isSafeNumber(breakdown.accPenalty) && breakdown.accPenalty > 0) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total -= breakdown.accPenalty;
+ setTotal(total);
+ addItem("accuracy penalty", -breakdown.accPenalty);
+ }
+
+ if (isSafeNumber(breakdown.incomplete) && breakdown.incomplete > 0) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.incomplete;
+ setTotal(total);
+ addItem("incomplete tests", breakdown.incomplete);
+ }
+
+ if (isSafeNumber(breakdown.configMultiplier)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total *= breakdown.configMultiplier;
+ setTotal(total);
+ addItem("global multiplier", `x${breakdown.configMultiplier}`);
+ }
+
+ if (isSafeNumber(breakdown.daily)) {
+ await sleep(delay);
+ if (isStale() || skipped) return;
+ total += breakdown.daily;
+ setTotal(total);
+ addItem("daily bonus", breakdown.daily);
+ }
+ };
+
+ const animateBar = async (
+ percent: number,
+ duration: number,
+ isStale: () => boolean,
+ ): Promise => {
+ if (isStale()) return;
+ setBarAnimationDuration(duration);
+ setBarPercent(percent);
+ await sleep(duration);
+ if (!isStale()) setBarAnimationDuration(0);
+ };
+
+ const fullBarAnimation = async (
+ fromXp: number,
+ toXp: number,
+ isStale: () => boolean,
+ ): Promise => {
+ const prevDetails = getXpDetails(fromXp);
+ const newDetails = getXpDetails(toXp);
+
+ const startingLevel = prevDetails.levelFloat;
+ const endingLevel = newDetails.levelFloat;
+
+ const difference = newDetails.levelFloat - prevDetails.levelFloat;
+
+ await animateBar(prevDetails.levelProgressPercent, 0, isStale);
+ if (isStale()) return;
+
+ if (endingLevel % 1 === 0) {
+ // Exact level up, animate to 100% then reset to 0% for next level
+ setBarAnimationEase("out(5)");
+ await animateBar(100, 1000, isStale);
+ setAnimatedLevel(Math.floor(endingLevel));
+ } else if (Math.floor(startingLevel) === Math.floor(endingLevel)) {
+ // Same level, just animate to the new percentage
+ setBarAnimationEase("out(5)");
+ await animateBar(newDetails.levelProgressPercent, 1000, isStale);
+ } else {
+ // Multiple levels gained, animate to 100% for each intermediate level
+ const quickSpeed = Math.min(1000 / difference, 200);
+ let toAnimate = difference;
+
+ let firstOneDone = false;
+ let animationDuration = quickSpeed;
+ let decrement = 1 - (startingLevel % 1);
+ let currentLevel = Math.floor(startingLevel);
+
+ setBarAnimationEase("linear");
+
+ do {
+ if (isStale()) return;
+
+ if (firstOneDone) {
+ await animateBar(0, 0, isStale);
+ decrement = 1;
+ }
+
+ await animateBar(100, animationDuration, isStale);
+ currentLevel += 1;
+ setAnimatedLevel(currentLevel);
+
+ toAnimate -= decrement;
+ firstOneDone = true;
+ } while (toAnimate > 1);
+
+ if (isStale()) return;
+
+ await animateBar(0, 0, isStale);
+
+ if (isStale()) return;
+
+ setBarAnimationEase("out(5)");
+ await animateBar(newDetails.levelProgressPercent, 1000, isStale);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/layout/header/Logo.tsx b/frontend/src/ts/components/layout/header/Logo.tsx
new file mode 100644
index 000000000000..30b9e4c34239
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Logo.tsx
@@ -0,0 +1,63 @@
+import { JSXElement } from "solid-js";
+
+import { getActivePage, getFocus } from "../../../signals/core";
+import { restart } from "../../../test/test-logic";
+import { cn } from "../../../utils/cn";
+import { isDevEnvironment } from "../../../utils/misc";
+
+export function Logo(): JSXElement {
+ return (
+ {
+ if (getActivePage() === "test") restart();
+ }}
+ >
+
+ JSXElement> = {
modals: () =>
);
}
-
-function prefetch(): void {
- void queryClient.prefetchQuery(getContributorsQueryOptions());
- void queryClient.prefetchQuery(getSupportersQueryOptions());
- void queryClient.prefetchQuery(getTypingStatsQueryOptions());
- void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
-}
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 1a13516913ed..5ddc7c9a329c 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -26,6 +26,7 @@ import { cn } from "../../../utils/cn";
import { secondsToString } from "../../../utils/date-and-time";
import { formatXp, getXpDetails } from "../../../utils/levels";
import { AutoShrink } from "../../common/AutoShrink";
+import { Bar } from "../../common/Bar";
import { Button } from "../../common/Button";
import { Conditional } from "../../common/Conditional";
import { DiscordAvatar } from "../../common/DiscordAvatar";
@@ -319,9 +320,7 @@ function AvatarAndName(props: {
function LevelAndBar(props: { xp?: number }): JSXElement {
const xpDetails = () => getXpDetails(props.xp ?? 0);
- const bar = () =>
- ((xpDetails().levelCurrentXp / xpDetails().levelMaxXp) * 100).toFixed(2) +
- "%";
+ const bar = () => xpDetails().levelProgressPercent;
return (
-
-
-
-
- {item.label}
-
- )}
- Fades in and out automatically
- * Slides open/closed
- *
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +{getTotal()}
+
+
+
+
+
+ {(item) => (
+
+ {item.label}
+
+ {typeof item.amount === "string"
+ ? item.amount
+ : item.amount >= 0
+ ? `+${item.amount}`
+ : `${item.amount}`}
+
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/layout/header/Header.tsx b/frontend/src/ts/components/layout/header/Header.tsx
new file mode 100644
index 000000000000..b05dc5435f98
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Header.tsx
@@ -0,0 +1,19 @@
+import { JSXElement } from "solid-js";
+
+import { getIsScreenshotting } from "../../../signals/core";
+import { cn } from "../../../utils/cn";
+import { Logo } from "./Logo";
+import { Nav } from "./Nav";
+
+export function Header(): JSXElement {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
new file mode 100644
index 000000000000..2d701bd43d7f
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -0,0 +1,224 @@
+import { useQuery } from "@tanstack/solid-query";
+import {
+ createEffect,
+ createMemo,
+ createSignal,
+ JSXElement,
+ Show,
+} from "solid-js";
+
+import { showAlerts } from "../../../elements/alerts";
+import { createEffectOn } from "../../../hooks/effects";
+import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
+import { getActivePage, getFocus } from "../../../signals/core";
+import {
+ getAccountButtonSpinner,
+ getAnimatedLevel,
+ setAnimatedLevel,
+} from "../../../signals/header";
+import { getSnapshot } from "../../../stores/snapshot";
+import { restart } from "../../../test/test-logic";
+import { cn } from "../../../utils/cn";
+import { getLevelFromTotalXp } from "../../../utils/levels";
+import { AnimeConditional } from "../../common/anime";
+import { Button } from "../../common/Button";
+import { NotificationBubble } from "../../common/NotificationBubble";
+import { User } from "../../common/User";
+import { prefetchAboutPage } from "../../pages/AboutPage";
+import { AccountMenu } from "./AccountMenu";
+import { AccountXpBar } from "./AccountXpBar";
+
+export function Nav(): JSXElement {
+ const [showMenu, setShowMenu] = createSignal(false);
+ const buttonClass = cn("aspect-square");
+
+ createEffect(() => {
+ if (getSnapshot() === undefined) {
+ setShowMenu(false);
+ }
+ });
+
+ createEffectOn(getSnapshot, (snapshot) => {
+ if (snapshot === undefined) {
+ setAnimatedLevel(0);
+ return;
+ }
+ setAnimatedLevel(getLevelFromTotalXp(snapshot.xp ?? 0));
+ });
+
+ const showFriendsNotificationBubble = createMemo((): boolean => {
+ const friends = getSnapshot()?.connections;
+
+ if (friends !== undefined) {
+ const pendingFriendRequests = Object.values(friends).filter(
+ (it) => it === "incoming",
+ ).length;
+ if (pendingFriendRequests > 0) {
+ return true;
+ }
+ }
+ return false;
+ });
+
+ const showAlertsNotificationBubble = createMemo((): boolean => {
+ const snapshot = getSnapshot();
+ if (snapshot === undefined) return false;
+
+ return snapshot.inboxUnreadSize > 0;
+ });
+
+ const serverConfig = useQuery(() => getServerConfigurationQueryOptions());
+ const showLoginButton = (): boolean =>
+ serverConfig.data?.users.signUp ?? true;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/ts/components/modals/DevOptionsModal.tsx b/frontend/src/ts/components/modals/DevOptionsModal.tsx
index a2e72abac929..8a5f66c96334 100644
--- a/frontend/src/ts/components/modals/DevOptionsModal.tsx
+++ b/frontend/src/ts/components/modals/DevOptionsModal.tsx
@@ -2,8 +2,8 @@ import { createSignal, For, JSXElement } from "solid-js";
import { envConfig } from "virtual:env-config";
import { signIn } from "../../auth";
+import { addXp } from "../../db";
import * as Notifications from "../../elements/notifications";
-import { update } from "../../elements/xp-bar";
import { getInputElement } from "../../input/input-element";
import { showPopup } from "../../modals/simple-modals";
import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
@@ -106,18 +106,32 @@ export function DevOptionsModal(): JSXElement {
},
{
icon: "fa-star",
- label: () => "XP Bar Test",
+ label: () => "XP Simple Test",
onClick: () => {
setTimeout(() => {
- void update(1000000, 20800, {
+ addXp(1000);
+ }, 500);
+ hideModal("DevOptions");
+ },
+ },
+ {
+ icon: "fa-star",
+ label: () => "XP with breakdown Test",
+ onClick: () => {
+ setTimeout(() => {
+ const fakeBreakdown = {
base: 100,
- fullAccuracy: 200,
- accPenalty: 300,
- quote: 400,
- punctuation: 500,
- streak: 10_000,
+ quote: 10,
+ corrected: 5,
+ funbox: 5,
+ streak: 10,
+ incomplete: 10,
+ accPenalty: 5,
configMultiplier: 2,
- });
+ daily: 10000,
+ };
+ const totalFakeXp = 10270;
+ addXp(totalFakeXp, fakeBreakdown);
}, 500);
hideModal("DevOptions");
},
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index fd8149609be9..480477782ece 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -7,6 +7,7 @@ import { qsa } from "../utils/dom";
import { DevTools } from "./core/DevTools";
import { Theme } from "./core/Theme";
import { Footer } from "./layout/footer/Footer";
+import { Header } from "./layout/header/Header";
import { Overlays } from "./layout/overlays/Overlays";
import { Modals } from "./modals/Modals";
import { AboutPage } from "./pages/AboutPage";
@@ -23,6 +24,7 @@ const components: Record
+ {isDevEnvironment() ? "localhost" : "monkey see"}
+
+ + monkeytype +
+
@@ -332,20 +331,7 @@ function LevelAndBar(props: { xp?: number }): JSXElement {
>
{xpDetails().level}
-
-
+
-
-
- = {};
const saveToDatabase = debounce(1000, () => {
if (Object.keys(configToSend).length > 0) {
- AccountButton.loading(true);
- void saveConfig(configToSend).then(() => {
- AccountButton.loading(false);
+ setAccountButtonSpinner(true);
+ void saveConfig(configToSend).finally(() => {
+ setAccountButtonSpinner(false);
});
}
configToSend = {} as Config;
@@ -74,9 +74,10 @@ export function saveFullConfigToLocalStorage(noDbCheck = false): void {
console.log("saving full config to localStorage");
configLS.set(config);
if (!noDbCheck) {
- AccountButton.loading(true);
- void saveConfig(config);
- AccountButton.loading(false);
+ setAccountButtonSpinner(true);
+ void saveConfig(config).finally(() => {
+ setAccountButtonSpinner(false);
+ });
}
}
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 4a83b325bb72..3227f472c3f0 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -36,6 +36,8 @@ import {
setLastResult,
setSnapshot as setSolidSnapshot,
} from "./stores/snapshot";
+import { XpBreakdown } from "@monkeytype/schemas/results";
+import { setXpBarData } from "./signals/header";
let dbSnapshot: Snapshot | undefined;
const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -250,6 +252,7 @@ export async function initSnapshot(): Promise {
snap.connections = convertConnections(connectionsData);
dbSnapshot = snap;
+
return dbSnapshot;
} catch (e) {
dbSnapshot = getDefaultSnapshot();
@@ -955,6 +958,7 @@ export async function updateLbMemory(
export type SaveLocalResultData = {
xp?: number;
+ xpBreakdown?: XpBreakdown;
streak?: number;
result?: SnapshotResult;
isPb?: boolean;
@@ -1020,9 +1024,16 @@ export function saveLocalResult(data: SaveLocalResultData): void {
setSnapshot(snapshot, {
dispatchEvent: false,
});
+ if (data.xp !== undefined) {
+ setXpBarData({
+ addedXp: data.xp,
+ resultingXp: snapshot.xp,
+ breakdown: data.xpBreakdown,
+ });
+ }
}
-export function addXp(xp: number): void {
+export function addXp(xp: number, breakdown?: XpBreakdown): void {
const snapshot = getSnapshot();
if (!snapshot) return;
@@ -1031,6 +1042,11 @@ export function addXp(xp: number): void {
setSnapshot(snapshot, {
dispatchEvent: false,
});
+ setXpBarData({
+ addedXp: xp,
+ resultingXp: snapshot.xp,
+ breakdown: breakdown,
+ });
}
export function updateInboxUnreadSize(newSize: number): void {
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
deleted file mode 100644
index f6cf7da1d4e4..000000000000
--- a/frontend/src/ts/elements/account-button.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as Misc from "../utils/misc";
-import {
- getHtmlByUserFlags,
- SupportsFlags,
-} from "../controllers/user-flag-controller";
-import { isAuthenticated } from "../firebase";
-import * as XpBar from "./xp-bar";
-import { getAvatarElement } from "../utils/discord-avatar";
-import * as AuthEvent from "../observables/auth-event";
-import { getSnapshot } from "../db";
-import { qsr } from "../utils/dom";
-
-const nav = qsr("header nav");
-const accountButtonAndMenuEl = nav.qsr(".accountButtonAndMenu");
-const loginButtonEl = nav.qsr(".textButton.view-login");
-
-export function hide(): void {
- accountButtonAndMenuEl.hide();
- loginButtonEl.hide();
-}
-
-export function loading(state: boolean): void {
- accountButtonAndMenuEl
- .qs(".spinner")
- ?.setStyle({ opacity: state ? "1" : "0" });
- accountButtonAndMenuEl
- .qs(".avatar")
- ?.setStyle({ opacity: state ? "0" : "1" });
-}
-
-export function updateName(name: string): void {
- accountButtonAndMenuEl.qs(".view-account > .text")?.setText(name);
-}
-
-function updateFlags(flags: SupportsFlags): void {
- accountButtonAndMenuEl
- .qs(".view-account > .text")
- ?.appendHtml(getHtmlByUserFlags(flags, { iconsOnly: true }));
-}
-
-export function updateAvatar(avatar?: {
- discordId?: string;
- discordAvatar?: string;
-}): void {
- const element = getAvatarElement(avatar ?? {}, {
- userIcon: "fas fa-fw fa-user",
- });
- accountButtonAndMenuEl.qs(".avatar")?.replaceWith(element);
-}
-
-export function update(): void {
- if (isAuthenticated()) {
- const snapshot = getSnapshot();
-
- if (snapshot === undefined) return;
-
- const { xp, name } = snapshot;
-
- loading(false);
- updateName(name);
- updateFlags(snapshot ?? {});
- XpBar.setXp(xp);
- updateAvatar(snapshot);
-
- accountButtonAndMenuEl
- .qs(".menu .items .goToProfile")
- ?.setAttribute("href", `/profile/${name}`);
- void Misc.swapElements(loginButtonEl, accountButtonAndMenuEl, 250);
- } else {
- void Misc.swapElements(
- accountButtonAndMenuEl,
- loginButtonEl,
- 250,
- async () => {
- updateName("");
- updateFlags({});
- XpBar.setXp(0);
- updateAvatar();
- },
- );
- }
-
- updateFriendRequestsIndicator();
-}
-
-export function updateFriendRequestsIndicator(): void {
- const friends = getSnapshot()?.connections;
-
- const bubbleElements = accountButtonAndMenuEl.qsa(
- ".view-account > .notificationBubble, .goToFriends > .notificationBubble",
- );
- if (friends !== undefined) {
- const pendingFriendRequests = Object.values(friends).filter(
- (it) => it === "incoming",
- ).length;
- if (pendingFriendRequests > 0) {
- bubbleElements.show();
- return;
- }
- }
-
- bubbleElements.hide();
-}
-
-const coarse = window.matchMedia("(pointer:coarse)")?.matches;
-if (coarse) {
- accountButtonAndMenuEl.qs(".view-account")?.setAttribute("href", "");
-}
-
-AuthEvent.subscribe((event) => {
- if (
- (event.type === "authStateChanged" && !event.data.isUserSignedIn) ||
- event.type === "snapshotUpdated"
- ) {
- update();
- }
-});
diff --git a/frontend/src/ts/elements/account-settings/blocked-user-table.ts b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
index b8494b79a5ba..7235513e3154 100644
--- a/frontend/src/ts/elements/account-settings/blocked-user-table.ts
+++ b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
@@ -5,7 +5,6 @@ import { format } from "date-fns/format";
import { isAuthenticated } from "../../firebase";
import { getReceiverUid } from "../../pages/friends";
import * as DB from "../../db";
-import { updateFriendRequestsIndicator } from "../account-button";
import { qsr } from "../../utils/dom";
let blockedUsers: Connection[] = [];
@@ -97,7 +96,6 @@ element.onChild("click", "table button.delete", async (e) => {
// oxlint-disable-next-line no-dynamic-delete, no-unsafe-member-access
delete snapshot.connections[uid];
- updateFriendRequestsIndicator();
}
}
});
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index ccefc55d75c4..e5617981383c 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -13,10 +13,9 @@ import {
} from "../utils/misc";
import AnimatedModal from "../utils/animated-modal";
import { MonkeyMail } from "@monkeytype/schemas/users";
-import * as XPBar from "../elements/xp-bar";
import * as AuthEvent from "../observables/auth-event";
import { animate } from "animejs";
-import { qs, qsr } from "../utils/dom";
+import { qsr } from "../utils/dom";
const alertsPopupEl = qsr("#alertsPopup");
const accountAlertsListEl = alertsPopupEl.qsr(".accountAlerts .list");
@@ -48,7 +47,6 @@ const state: State = {
};
function hide(): void {
- setNotificationBubbleVisible(false);
DB.updateInboxUnreadSize(0);
void modal.hide({
afterAnimation: async () => {
@@ -111,16 +109,13 @@ function hide(): void {
}
if (totalXpClaimed > 0) {
- const snapxp = DB.getSnapshot()?.xp ?? 0;
- void XPBar.update(snapxp, totalXpClaimed);
-
DB.addXp(totalXpClaimed);
}
},
});
}
-async function show(): Promise {
+export async function showAlerts(): Promise {
void modal.show({
beforeAnimation: async () => {
if (isAuthenticated()) {
@@ -313,14 +308,6 @@ function fillNotifications(): void {
}
}
-export function setNotificationBubbleVisible(tf: boolean): void {
- if (tf) {
- qs("header nav .showAlerts .notificationBubble")?.show();
- } else {
- qs("header nav .showAlerts .notificationBubble")?.hide();
- }
-}
-
function updateInboxSize(): void {
const remainingItems = accountAlerts.length - mailToDelete.length;
alertsPopupEl
@@ -454,10 +441,6 @@ async function copyNotificationToClipboard(target: HTMLElement): Promise {
}
}
-qs("header nav .showAlerts")?.on("click", () => {
- void show();
-});
-
NotificationEvent.subscribe((message, level, options) => {
let title = "Notice";
if (level === -1) {
@@ -482,12 +465,7 @@ NotificationEvent.subscribe((message, level, options) => {
});
AuthEvent.subscribe((event) => {
- if (event.type === "snapshotUpdated" && event.data.isInitial) {
- const snapshot = DB.getSnapshot();
- setNotificationBubbleVisible((snapshot?.inboxUnreadSize ?? 0) > 0);
- }
if (event.type === "authStateChanged" && !event.data.isUserSignedIn) {
- setNotificationBubbleVisible(false);
accountAlerts = [];
mailToMarkRead = [];
mailToDelete = [];
diff --git a/frontend/src/ts/elements/xp-bar.ts b/frontend/src/ts/elements/xp-bar.ts
deleted file mode 100644
index 1fcfd41950cc..000000000000
--- a/frontend/src/ts/elements/xp-bar.ts
+++ /dev/null
@@ -1,432 +0,0 @@
-import * as Misc from "../utils/misc";
-import * as Levels from "../utils/levels";
-import { XpBreakdown } from "@monkeytype/schemas/results";
-import { isSafeNumber } from "@monkeytype/util/numbers";
-import { animate } from "animejs";
-import { getTheme } from "../signals/theme";
-
-let breakdownVisible = false;
-let skip = false;
-let breakdownDone = false;
-
-let lastUpdate: {
- currentXp: number;
- addedXp: number;
- breakdown?: XpBreakdown;
-} = {
- currentXp: 0,
- addedXp: 0,
- breakdown: undefined,
-};
-
-const xpBreakdownTotalEl = document.querySelector(
- "nav .xpBar .xpBreakdown .total",
-) as HTMLElement;
-const xpBreakdownListEl = document.querySelector(
- "nav .xpBar .xpBreakdown .list",
-) as HTMLElement;
-const levelEl = document.querySelector("nav .level") as HTMLElement;
-const barEl = document.querySelector("nav .xpBar .bar") as HTMLElement;
-const barWrapperEl = document.querySelector("nav .xpBar") as HTMLElement;
-
-export async function skipBreakdown(): Promise {
- skip = true;
-
- if (!breakdownVisible) return;
-
- if (!breakdownDone) {
- void flashTotalXp(lastUpdate.addedXp, true);
- } else {
- xpBreakdownTotalEl.textContent = `+${lastUpdate.addedXp}`;
- }
-
- animate(xpBreakdownListEl, {
- opacity: [1, 0],
- duration: Misc.applyReducedMotion(250),
- onComplete: () => {
- xpBreakdownListEl.innerHTML = "";
- xpBreakdownListEl.classList.add("hidden");
- },
- });
-
- levelEl.textContent = `${Levels.getLevelFromTotalXp(
- lastUpdate.currentXp + lastUpdate.addedXp,
- )}`;
-
- const endingDetails = Levels.getXpDetails(
- lastUpdate.currentXp + lastUpdate.addedXp,
- );
- const endingLevel =
- endingDetails.level +
- endingDetails.levelCurrentXp / endingDetails.levelMaxXp;
-
- barEl.style.width = `${(endingLevel % 1) * 100}%`;
- await Misc.sleep(2000);
- breakdownVisible = false;
-
- animate(barWrapperEl, {
- opacity: [1, 0],
- duration: Misc.applyReducedMotion(250),
- });
-}
-
-export function setXp(xp: number): void {
- const xpDetails = Levels.getXpDetails(xp);
- const levelCompletionRatio = xpDetails.levelCurrentXp / xpDetails.levelMaxXp;
- levelEl.textContent = `${xpDetails.level}`;
- barEl.style.width = levelCompletionRatio * 100 + "%";
-}
-
-export async function update(
- currentXp: number,
- addedXp: number,
- breakdown?: XpBreakdown,
-): Promise {
- skip = false;
- breakdownVisible = true;
- lastUpdate = {
- currentXp,
- addedXp,
- breakdown,
- };
-
- levelEl.textContent = `${Levels.getLevelFromTotalXp(currentXp)}`;
-
- const startingXp = Levels.getXpDetails(currentXp);
- const endingXp = Levels.getXpDetails(currentXp + addedXp);
- const startingLevel =
- startingXp.level + startingXp.levelCurrentXp / startingXp.levelMaxXp;
- const endingLevel =
- endingXp.level + endingXp.levelCurrentXp / endingXp.levelMaxXp;
-
- xpBreakdownListEl.style.opacity = "0";
- xpBreakdownListEl.innerHTML = "";
- barWrapperEl.style.opacity = "0";
- xpBreakdownTotalEl.textContent = "";
-
- const showParent = Misc.promiseAnimate(barWrapperEl, {
- opacity: 1,
- duration: Misc.applyReducedMotion(125),
- ease: "linear",
- });
-
- const showList = Misc.promiseAnimate(xpBreakdownListEl, {
- opacity: 1,
- duration: Misc.applyReducedMotion(125),
- ease: "linear",
- });
-
- if (breakdown !== undefined) {
- xpBreakdownListEl.classList.remove("hidden");
- void Promise.all([showParent, showList]);
- } else {
- xpBreakdownListEl.classList.add("hidden");
- void showParent;
- }
-
- if (skip) return;
-
- const xpBarPromise = animateXpBar(startingLevel, endingLevel);
- const xpBreakdownPromise = animateXpBreakdown(addedXp, breakdown);
-
- await Promise.all([xpBarPromise, xpBreakdownPromise]);
-
- if (skip) return;
-
- await Misc.sleep(5000);
-
- if (skip) return;
-
- breakdownVisible = false;
- levelEl.textContent = `${Levels.getLevelFromTotalXp(currentXp + addedXp)}`;
-
- animate(barWrapperEl, {
- opacity: [1, 0],
- duration: Misc.applyReducedMotion(250),
- });
-}
-
-async function flashTotalXp(totalXp: number, force = false): Promise {
- if (!force && skip) return;
-
- xpBreakdownTotalEl.textContent = `+${totalXp}`;
-
- const rand = (Math.random() * 2 - 1) / 4;
- const rand2 = (Math.random() + 1) / 2;
-
- animate(xpBreakdownTotalEl, {
- scale: [1 + 0.5 * rand2, 1],
- rotate: [10 * rand, 0],
- duration: Misc.applyReducedMotion(2000),
- ease: "out(5)",
- });
-}
-
-async function addBreakdownListItem(
- string: string,
- amount: number | string | undefined,
- options?: { extraClass?: string; noAnimation?: boolean },
-): Promise {
- if (skip) return;
-
- if (amount === undefined) {
- xpBreakdownListEl.insertAdjacentHTML(
- "beforeend",
- ``,
- );
- } else if (typeof amount === "string") {
- xpBreakdownListEl.insertAdjacentHTML(
- "beforeend",
- `
- {
- if (skip) return;
-
- xpBreakdownListEl.style.opacity = "1";
- if (!breakdown) {
- xpBreakdownTotalEl.textContent = `+${addedXp}`;
- return;
- }
- const delay = Misc.applyReducedMotion(250);
- let total = 0;
- xpBreakdownListEl.innerHTML = "";
- xpBreakdownListEl.classList.remove("hidden");
-
- xpBreakdownTotalEl.textContent = `+0`;
-
- total += breakdown.base ?? 0;
- xpBreakdownTotalEl.textContent = `+${total}`;
- await addBreakdownListItem("time typing", breakdown.base, {
- noAnimation: true,
- });
-
- await Misc.sleep(delay);
-
- if (isSafeNumber(breakdown.fullAccuracy)) {
- await Misc.sleep(delay);
- total += breakdown.fullAccuracy;
- void flashTotalXp(total);
- await addBreakdownListItem("perfect", breakdown.fullAccuracy);
- } else if (isSafeNumber(breakdown.corrected)) {
- await Misc.sleep(delay);
- total += breakdown.corrected;
- void flashTotalXp(total);
- await addBreakdownListItem("clean", breakdown.corrected);
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.quote)) {
- await Misc.sleep(delay);
- total += breakdown.quote;
- void flashTotalXp(total);
- await addBreakdownListItem("quote", breakdown.quote);
- } else {
- if (isSafeNumber(breakdown.punctuation)) {
- await Misc.sleep(delay);
- total += breakdown.punctuation;
- void flashTotalXp(total);
- await addBreakdownListItem("punctuation", breakdown.punctuation);
- }
- if (isSafeNumber(breakdown.numbers)) {
- await Misc.sleep(delay);
- total += breakdown.numbers;
- void flashTotalXp(total);
- await addBreakdownListItem("numbers", breakdown.numbers);
- }
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.funbox)) {
- await Misc.sleep(delay);
- total += breakdown.funbox;
- void flashTotalXp(total);
- await addBreakdownListItem("funbox", breakdown.funbox);
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.streak)) {
- await Misc.sleep(delay);
- total += breakdown.streak;
- void flashTotalXp(total);
- await addBreakdownListItem("streak", breakdown.streak);
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.accPenalty) && breakdown.accPenalty > 0) {
- await Misc.sleep(delay);
- total -= breakdown.accPenalty;
- void flashTotalXp(total);
- await addBreakdownListItem("accuracy penalty", breakdown.accPenalty * -1);
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.incomplete) && breakdown.incomplete > 0) {
- await Misc.sleep(delay);
- total += breakdown.incomplete;
- void flashTotalXp(total);
- await addBreakdownListItem("incomplete tests", breakdown.incomplete);
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.configMultiplier)) {
- await Misc.sleep(delay);
- total *= breakdown.configMultiplier;
- void flashTotalXp(total);
- await addBreakdownListItem(
- "global multiplier",
- `x${breakdown.configMultiplier}`,
- );
- }
-
- if (skip) return;
-
- if (isSafeNumber(breakdown.daily)) {
- await Misc.sleep(delay);
- total += breakdown.daily;
- void flashTotalXp(total);
- await addBreakdownListItem("daily bonus", breakdown.daily);
- }
-
- breakdownDone = true;
-
- if (skip) return;
-
- await Misc.sleep(delay);
-}
-
-async function animateXpBar(
- startingLevel: number,
- endingLevel: number,
-): Promise {
- if (skip) return;
-
- const difference = endingLevel - startingLevel;
-
- barEl.style.width = `${(startingLevel % 1) * 100}%`;
-
- if (endingLevel % 1 === 0) {
- //ending level is exactly round, meaning fill the bar to 100%, flash, set to 0
- await Misc.promiseAnimate(barEl, {
- width: "100%",
- duration: Misc.applyReducedMotion(1000),
- ease: "out(5)",
- });
-
- if (skip) return;
-
- void flashLevel();
- barEl.style.width = `0%`;
- } else if (Math.floor(startingLevel) === Math.floor(endingLevel)) {
- //ending level is the same, just animate the bar to the correct percentage
- await Misc.promiseAnimate(barEl, {
- width: `${(endingLevel % 1) * 100}%`,
- duration: Misc.applyReducedMotion(1000),
- ease: "out(5)",
- });
- } else {
- // const quickSpeed = Misc.mapRange(difference, 10, 2000, 200, 1);
- const quickSpeed = Math.min(1000 / difference, 200);
- let toAnimate = difference;
-
- let firstOneDone = false;
- let animationDuration = quickSpeed;
- let decrement = 1 - (startingLevel % 1);
-
- do {
- if (skip) return;
-
- if (firstOneDone) {
- void flashLevel();
- barEl.style.width = "0%";
- decrement = 1;
- }
-
- await Misc.promiseAnimate(barEl, {
- width: "100%",
- duration: Misc.applyReducedMotion(animationDuration),
- ease: "linear",
- });
-
- toAnimate -= decrement;
- firstOneDone = true;
- } while (toAnimate > 1);
-
- if (skip) return;
-
- void flashLevel();
- barEl.style.width = "0%";
-
- if (skip) return;
-
- await Misc.promiseAnimate(barEl, {
- width: `${(toAnimate % 1) * 100}%`,
- duration: Misc.applyReducedMotion(1000),
- ease: "out(5)",
- });
- }
- return;
-}
-
-async function flashLevel(): Promise {
- const themecolors = getTheme();
-
- levelEl.textContent = `${parseInt(levelEl.textContent ?? "0") + 1}`;
-
- const rand = Math.random() * 2 - 1;
- const rand2 = Math.random() + 1;
-
- /**
- * `borderSpacing` has no visible effect on this element,
- * and is used in the animation only to provide numerical
- * values for the `step(step)` function.
- */
-
- animate(levelEl, {
- scale: [1 + 0.5 * rand2, 1],
- backgroundColor: [themecolors.main, themecolors.sub],
- rotate: [10 * rand, 0],
- duration: Misc.applyReducedMotion(2000),
- ease: "out(5)",
- });
-}
diff --git a/frontend/src/ts/event-handlers/nav.ts b/frontend/src/ts/event-handlers/nav.ts
deleted file mode 100644
index 2878adda99e6..000000000000
--- a/frontend/src/ts/event-handlers/nav.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { signOut } from "../auth";
-import { qs } from "../utils/dom";
-
-qs("nav .accountButtonAndMenu .menu button.signOut")?.on("click", () => {
- signOut();
-});
diff --git a/frontend/src/ts/hooks/createEvent.ts b/frontend/src/ts/hooks/createEvent.ts
new file mode 100644
index 000000000000..4ea8ef1fdf31
--- /dev/null
+++ b/frontend/src/ts/hooks/createEvent.ts
@@ -0,0 +1,11 @@
+import { Accessor, createSignal } from "solid-js";
+
+export function createEvent(): [Accessor, () => void] {
+ const [get, set] = createSignal(0);
+ return [
+ get,
+ () => {
+ set((v) => v + 1);
+ },
+ ];
+}
diff --git a/frontend/src/ts/hooks/createSignalWithSetters.ts b/frontend/src/ts/hooks/createSignalWithSetters.ts
new file mode 100644
index 000000000000..f5e0d69e13bf
--- /dev/null
+++ b/frontend/src/ts/hooks/createSignalWithSetters.ts
@@ -0,0 +1,32 @@
+import { createSignal } from "solid-js";
+
+type OriginalSetter = (value: T | ((prev: T) => T)) => void;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SetterFn = (originalSetter: OriginalSetter, ...args: any[]) => void;
+type SetterArgs> = S extends (
+ orig: OriginalSetter,
+ ...args: infer A
+) => void
+ ? A
+ : never;
+type SettersMap = Record>;
+type MappedSetters> = {
+ [K in keyof S]: (...args: SetterArgs) => void;
+} & {
+ set: OriginalSetter;
+};
+
+export function createSignalWithSetters(defaultValue: T) {
+ return function >(
+ setters: S,
+ ): [() => T, MappedSetters] {
+ const [get, _set] = createSignal(defaultValue);
+ const mapped = Object.fromEntries(
+ Object.entries(setters).map(([key, setter]) => [
+ key,
+ (...args: never[]) => setter(_set, ...args),
+ ]),
+ ) as unknown as MappedSetters;
+ return [get, { ...mapped, set: _set }];
+ };
+}
diff --git a/frontend/src/ts/hooks/useRefWithUtils.ts b/frontend/src/ts/hooks/useRefWithUtils.ts
index 32fc5232764f..7203e98abc0b 100644
--- a/frontend/src/ts/hooks/useRefWithUtils.ts
+++ b/frontend/src/ts/hooks/useRefWithUtils.ts
@@ -1,17 +1,15 @@
-import { Accessor } from "solid-js";
+import { Accessor, createSignal } from "solid-js";
import { ElementWithUtils } from "../utils/dom";
export function useRefWithUtils(): [
ref: (el: T) => void,
element: Accessor | undefined>,
] {
- let elementWithUtils: ElementWithUtils | undefined;
+ const [element, setElement] = createSignal | undefined>();
const ref = (el: T): void => {
- elementWithUtils = new ElementWithUtils(el);
+ setElement(new ElementWithUtils(el));
};
- const element = (): ElementWithUtils | undefined => elementWithUtils;
-
return [ref, element];
}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 10f8dbc13943..97cb163ab474 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -5,7 +5,6 @@ import "./event-handlers/settings";
import "./event-handlers/account";
import "./event-handlers/leaderboards";
import "./event-handlers/login";
-import "./event-handlers/nav";
import "./modals/google-sign-up";
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 58c72ad9bfa8..2788d8ef3fbf 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -1,7 +1,6 @@
import * as Misc from "./utils/misc";
import * as MonkeyPower from "./elements/monkey-power";
import * as MerchBanner from "./elements/merch-banner";
-import * as AccountButton from "./elements/account-button";
//@ts-expect-error no types for this package
import Konami from "konami";
import * as ServerConfiguration from "./ape/server-configuration";
@@ -30,14 +29,10 @@ onDOMReady(async () => {
void ServerConfiguration.sync().then(() => {
if (!ServerConfiguration.get()?.users.signUp) {
- AccountButton.hide();
qs(".register")?.hide();
qs(".login")?.hide();
qs(".disabledNotification")?.show();
}
- if (!ServerConfiguration.get()?.connections.enabled) {
- qs(".accountButtonAndMenu .goToFriends")?.hide();
- }
});
MonkeyPower.init();
diff --git a/frontend/src/ts/signals/header.ts b/frontend/src/ts/signals/header.ts
new file mode 100644
index 000000000000..45f65dea9d83
--- /dev/null
+++ b/frontend/src/ts/signals/header.ts
@@ -0,0 +1,18 @@
+import { createSignal } from "solid-js";
+import { createEvent } from "../hooks/createEvent";
+import { XpBreakdown } from "@monkeytype/schemas/results";
+
+export type XpBarData = {
+ addedXp: number;
+ resultingXp: number;
+ breakdown?: XpBreakdown;
+};
+
+export const [getAnimatedLevel, setAnimatedLevel] = createSignal(0);
+export const [getAccountButtonSpinner, setAccountButtonSpinner] =
+ createSignal(false);
+export const [getXpBarData, setXpBarData] = createSignal(
+ null,
+);
+
+export const [getSkipBreakdownEvent, skipBreakdown] = createEvent();
diff --git a/frontend/src/ts/signals/loader-bar.ts b/frontend/src/ts/signals/loader-bar.ts
index c82bade1362e..a4aeed13b596 100644
--- a/frontend/src/ts/signals/loader-bar.ts
+++ b/frontend/src/ts/signals/loader-bar.ts
@@ -1,18 +1,13 @@
-import { createSignal } from "solid-js";
+import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
type LoaderSignal = null | {
visible: boolean;
instant?: boolean;
};
-const [getLoaderBarSignal, set] = createSignal(null);
-
-export function showLoaderBar(instant = false): void {
- set({ visible: true, instant });
-}
-
-export function hideLoaderBar(): void {
- set({ visible: false });
-}
-
-export { getLoaderBarSignal };
+export const [getLoaderBarSignal, { showLoaderBar, hideLoaderBar }] =
+ createSignalWithSetters(null)({
+ showLoaderBar: (set, instant: boolean = false) =>
+ set({ visible: true, instant }),
+ hideLoaderBar: (set) => set({ visible: false }),
+ });
diff --git a/frontend/src/ts/stores/snapshot.ts b/frontend/src/ts/stores/snapshot.ts
index 8a6c187137f0..2f6d5fd669ce 100644
--- a/frontend/src/ts/stores/snapshot.ts
+++ b/frontend/src/ts/stores/snapshot.ts
@@ -1,9 +1,9 @@
-import { createStore, reconcile } from "solid-js/store";
+import { createStore, reconcile, unwrap } from "solid-js/store";
import { Snapshot, SnapshotResult } from "../constants/default-snapshot";
import { createSignal } from "solid-js";
import { Mode } from "@monkeytype/schemas/shared";
-type MiniSnapshot = Omit<
+export type MiniSnapshot = Omit<
Snapshot,
"results" | "tags" | "presets" | "filterPresets"
>;
@@ -17,7 +17,7 @@ export function setSnapshot(newValue: MiniSnapshot | undefined) {
} else {
updateSnapshot(
"value",
- reconcile(structuredClone(newValue), { merge: true }),
+ reconcile(structuredClone(unwrap(newValue)), { merge: true }),
);
}
}
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index 41cf2de3257b..0908543f6d6d 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -22,7 +22,6 @@ function initializeCache(): void {
const cursorSelector = "body, button, a";
const elementsSelector = [
"app",
- "header",
"footer",
"main",
"#bannerCenter",
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 1159082b0075..aff11815a7cd 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -18,7 +18,6 @@ import * as Funbox from "./funbox/funbox";
import * as PaceCaret from "./pace-caret";
import * as Caret from "./caret";
import * as TestTimer from "./test-timer";
-import * as AccountButton from "../elements/account-button";
import * as DB from "../db";
import * as Replay from "./replay";
import * as TodayTracker from "./today-tracker";
@@ -46,7 +45,6 @@ import {
CompletedEvent,
CompletedEventCustomText,
} from "@monkeytype/schemas/results";
-import * as XPBar from "../elements/xp-bar";
import {
findSingleActiveFunboxWithFunction,
getActiveFunboxes,
@@ -69,6 +67,7 @@ import { setInputElementValue } from "../input/input-element";
import { debounce } from "throttle-debounce";
import * as Time from "../states/time";
import { qs } from "../utils/dom";
+import { setAccountButtonSpinner } from "../signals/header";
let failReason = "";
@@ -1190,15 +1189,12 @@ async function saveResult(
completedEvent: CompletedEvent,
isRetrying: boolean,
): Promise>> {
- AccountButton.loading(true);
-
if (!Config.resultSaving) {
Notifications.add("Result not saved: disabled by user", -1, {
duration: 3,
customTitle: "Notice",
important: true,
});
- AccountButton.loading(false);
return null;
}
@@ -1215,9 +1211,11 @@ async function saveResult(
console.trace();
+ setAccountButtonSpinner(true);
+
const response = await Ape.results.add({ body: { result } });
- AccountButton.loading(false);
+ setAccountButtonSpinner(false);
if (response.status !== 200) {
//only allow retry if status is not in this list
@@ -1253,14 +1251,10 @@ async function saveResult(
const localDataToSave: DB.SaveLocalResultData = {};
if (data.xp !== undefined) {
- const snapxp = DB.getSnapshot()?.xp ?? 0;
-
- void XPBar.update(
- snapxp,
- data.xp,
- TestState.resultVisible ? data.xpBreakdown : undefined,
- );
localDataToSave.xp = data.xp;
+ if (TestState.resultVisible) {
+ localDataToSave.xpBreakdown = data.xpBreakdown;
+ }
}
if (data.streak !== undefined) {
@@ -1514,11 +1508,6 @@ qs(".pageTest")?.onChild("click", "#testConfig .numbersMode.textButton", () => {
}
});
-qs("header")?.onChild("click", "nav #startTestButton, #logo", () => {
- if (getActivePage() === "test") restart();
- // Result.showConfetti();
-});
-
// ===============================
ConfigEvent.subscribe(({ key, newValue, nosave }) => {
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index 45232db81786..73711d873ac4 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -29,7 +29,6 @@ function revert(): void {
qs(".pageTest .buttons")?.show();
qs("noscript")?.show();
qs("#nocss")?.show();
- qs("header")?.removeClass("invisible");
qs("#result")?.removeClass("noBalloons");
qs(".wordInputHighlight")?.show();
qsa(".highlightContainer")?.show();
@@ -97,7 +96,6 @@ async function generateCanvas(): Promise {
// Ensure spacer is removed before adding a new one if function is called rapidly
qs(".pageTest .screenshotSpacer")?.remove();
qs(".page.pageTest")?.prependHtml("");
- qs("header")?.addClass("invisible");
qs("#result")?.addClass("noBalloons");
qs(".wordInputHighlight")?.hide();
qsa(".highlightContainer")?.hide();
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 2c8d2e818065..fcf13281fe7d 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -52,7 +52,6 @@ import * as Ligatures from "./break-ligatures";
import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
import * as Keymap from "../elements/keymap";
import * as ThemeController from "../controllers/theme-controller";
-import * as XPBar from "../elements/xp-bar";
import * as ModesNotice from "../elements/modes-notice";
import * as Last10Average from "../elements/last-10-average";
import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
@@ -64,6 +63,7 @@ import {
qsr,
} from "../utils/dom";
import { getTheme } from "../signals/theme";
+import { skipBreakdown } from "../signals/header";
export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
updateHintsPosition,
@@ -1916,7 +1916,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
if (Config.randomTheme !== "off") {
void ThemeController.randomizeTheme();
}
- void XPBar.skipBreakdown();
+ skipBreakdown();
}
currentTestLine = 0;
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 31d564d51533..f4d983f8bf23 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -44,7 +44,6 @@ export function setMediaQueryDebugLevel(level: number): void {
}
if (isDevEnvironment()) {
- qs("header #logo .top")?.setText("localhost");
qs("head title")?.setText(
(qs("head title")?.native.textContent ?? "") + " (localhost)",
);
diff --git a/frontend/src/ts/utils/levels.ts b/frontend/src/ts/utils/levels.ts
index 794b4b18cae7..545d013c6a69 100644
--- a/frontend/src/ts/utils/levels.ts
+++ b/frontend/src/ts/utils/levels.ts
@@ -35,8 +35,10 @@ function getTotalXpToReachLevel(level: number): number {
export type XPDetails = {
level: number;
+ levelFloat: number;
levelCurrentXp: number;
levelMaxXp: number;
+ levelProgressPercent: number;
};
/**
@@ -47,10 +49,16 @@ export type XPDetails = {
*/
export function getXpDetails(totalXp: number): XPDetails {
const level = getLevelFromTotalXp(totalXp);
+ const currentLevelXp = totalXp - getTotalXpToReachLevel(level);
+ const levelMaxXp = getLevelMaxXp(level);
+ const progress = levelMaxXp > 0 ? currentLevelXp / levelMaxXp : 0;
+ const levelFloat = level + progress;
return {
level,
- levelCurrentXp: totalXp - getTotalXpToReachLevel(level),
- levelMaxXp: getLevelMaxXp(level),
+ levelFloat,
+ levelCurrentXp: currentLevelXp,
+ levelMaxXp: levelMaxXp,
+ levelProgressPercent: (progress > 1 ? 1 : progress) * 100,
};
}
diff --git a/frontend/src/ts/utils/url-handler.ts b/frontend/src/ts/utils/url-handler.ts
index 6f039a3c5a26..10756a454177 100644
--- a/frontend/src/ts/utils/url-handler.ts
+++ b/frontend/src/ts/utils/url-handler.ts
@@ -9,7 +9,6 @@ import Ape from "../ape";
import * as DB from "../db";
import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
-import * as AccountButton from "../elements/account-button";
import { restart as restartTest } from "../test/test-logic";
import * as ChallengeController from "../controllers/challenge-controller";
import {
@@ -73,7 +72,6 @@ export async function linkDiscord(hashOverride: string): Promise {
}
DB.setSnapshot(snapshot);
- AccountButton.updateAvatar(snapshot);
}
}
diff --git a/packages/oxlint-config/rules/jsx.jsonc b/packages/oxlint-config/rules/jsx.jsonc
index 16bbcd9dda26..7c202bd5661e 100644
--- a/packages/oxlint-config/rules/jsx.jsonc
+++ b/packages/oxlint-config/rules/jsx.jsonc
@@ -22,7 +22,13 @@
"react/no-unknown-property": [
"error",
{
- "ignore": ["class", "classList", "innerHTML", "onScrollEnd"],
+ "ignore": [
+ "class",
+ "classList",
+ "innerHTML",
+ "onScrollEnd",
+ "router-link",
+ ],
},
],
"react/jsx-no-comment-textnodes": "error",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c39eccefdf9..486ce741414a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -438,7 +438,7 @@ importers:
version: 5.0.2
'@vitest/coverage-v8':
specifier: 4.0.15
- version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
+ version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
autoprefixer:
specifier: 10.4.27
version: 10.4.27(postcss@8.5.6)
@@ -531,7 +531,7 @@ importers:
version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
vitest:
specifier: 4.0.15
- version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+ version: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
packages/contracts:
dependencies:
@@ -13809,6 +13809,23 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))':
+ dependencies:
+ '@bcoe/v8-coverage': 1.0.2
+ '@vitest/utils': 4.0.15
+ ast-v8-to-istanbul: 0.3.8
+ istanbul-lib-coverage: 3.2.2
+ istanbul-lib-report: 3.0.1
+ istanbul-lib-source-maps: 5.0.6
+ istanbul-reports: 3.2.0
+ magicast: 0.5.1
+ obug: 2.1.1
+ std-env: 3.10.0
+ tinyrainbow: 3.0.3
+ vitest: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+ transitivePeerDependencies:
+ - supports-color
+
'@vitest/expect@4.0.15':
dependencies:
'@standard-schema/spec': 1.0.0
@@ -20940,6 +20957,45 @@ snapshots:
- tsx
- yaml
+ vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1):
+ dependencies:
+ '@vitest/expect': 4.0.15
+ '@vitest/mocker': 4.0.15(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
+ '@vitest/pretty-format': 4.0.15
+ '@vitest/runner': 4.0.15
+ '@vitest/snapshot': 4.0.15
+ '@vitest/spy': 4.0.15
+ '@vitest/utils': 4.0.15
+ es-module-lexer: 1.7.0
+ expect-type: 1.2.2
+ magic-string: 0.30.21
+ obug: 2.1.1
+ pathe: 2.0.3
+ picomatch: 4.0.3
+ std-env: 3.10.0
+ tinybench: 2.9.0
+ tinyexec: 1.0.2
+ tinyglobby: 0.2.15
+ tinyrainbow: 3.0.3
+ vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+ why-is-node-running: 2.3.0
+ optionalDependencies:
+ '@types/node': 24.9.1
+ happy-dom: 20.0.10
+ jsdom: 27.4.0
+ transitivePeerDependencies:
+ - jiti
+ - less
+ - lightningcss
+ - msw
+ - sass
+ - sass-embedded
+ - stylus
+ - sugarss
+ - terser
+ - tsx
+ - yaml
+
vlq@0.2.3: {}
w3c-xmlserializer@5.0.0:
${string}
-
-
-
`,
- );
- } else {
- const positive = amount === undefined ? undefined : amount >= 0;
-
- xpBreakdownListEl.insertAdjacentHTML(
- "beforeend",
- `
-
-
-
-
`,
- );
- }
-
- if (options?.noAnimation) return;
-
- const el = xpBreakdownListEl.querySelector(
- `.line[data-string='${string}']`,
- ) as HTMLElement;
-
- await Misc.promiseAnimate(el, {
- opacity: [0, 1],
- duration: Misc.applyReducedMotion(250),
- });
-}
-
-async function animateXpBreakdown(
- addedXp: number,
- breakdown?: XpBreakdown,
-): Promise${positive ? "+" : "-"}${Math.abs(amount)}
-