Remove usage of 'null' in favor of 'undefined'

frontend/.eslintrc.js

@@ -79,6 +79,7 @@ module.exports = {
 		"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
 		"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
 		"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
+		"@typescript-eslint/ban-types": ["error", { types: { null: "Use `undefined` instead." } }],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",

frontend/src/components/floating-menus/DialogModal.vue

@@ -84,8 +84,8 @@ export default defineComponent({
 	},
 	mounted() {
 		// Focus the first button in the popup
-		const element = this.$el as Element | null;
+		const element = this.$el as Element | undefined;
-		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("[data-text-button]");
+		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") || element?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
 		emphasizedOrFirstButton?.focus();
 	},
 	components: {

frontend/src/components/layout/LayoutCol.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
+	<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || undefined" :data-scrollable-y="scrollableY || undefined">
 		<slot></slot>
 	</div>
 </template>

frontend/src/components/layout/LayoutRow.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || null" :data-scrollable-y="scrollableY || null">
+	<div class="layout-row" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || undefined" :data-scrollable-y="scrollableY || undefined">
 		<slot></slot>
 	</div>
 </template>

frontend/src/components/panels/LayerTree.vue

@@ -59,8 +59,8 @@
 								:disabled="!listing.editingName"
 								@blur="() => onEditLayerNameDeselect(listing)"
 								@keydown.esc="onEditLayerNameDeselect(listing)"
-								@keydown.enter="(e) => onEditLayerNameChange(listing, e.target)"
+								@keydown.enter="(e) => onEditLayerNameChange(listing, e.target || undefined)"
-								@change="(e) => onEditLayerNameChange(listing, e.target)"
+								@change="(e) => onEditLayerNameChange(listing, e.target || undefined)"
 							/>
 						</LayoutRow>
 						<div class="thumbnail" v-html="listing.entry.thumbnail"></div>
@@ -328,7 +328,7 @@ export default defineComponent({
 			await nextTick();
 			(tree.querySelector("[data-text-input]:not([disabled])") as HTMLInputElement).select();
 		},
-		onEditLayerNameChange(listing: LayerListingInfo, inputElement: EventTarget | null) {
+		onEditLayerNameChange(listing: LayerListingInfo, inputElement: EventTarget | undefined) {
 			// Eliminate duplicate events
 			if (!listing.editingName) return;
 

frontend/src/components/widgets/WidgetRow.vue

@@ -13,7 +13,7 @@
 				@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
 			/>
 			<FontInput v-if="component.props.kind === 'FontInput'" v-bind="component.props" v-model:open="open" @changeFont="(value: unknown) => updateLayout(component.widgetId, value)" />
-			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
+			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
 			<NumberInput
 				v-if="component.props.kind === 'NumberInput'"
@@ -31,7 +31,7 @@
 			<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
 			<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
 			<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
-			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, null)" />
+			<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
 			<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
 			<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
 		</template>

frontend/src/components/widgets/buttons/TextButton.vue

@@ -2,8 +2,8 @@
 	<button
 		class="text-button"
 		:class="{ emphasized, disabled }"
-		:data-emphasized="emphasized || null"
+		:data-emphasized="emphasized || undefined"
-		:data-disabled="disabled || null"
+		:data-disabled="disabled || undefined"
 		data-text-button
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -2,8 +2,8 @@
 	<div class="menu-bar-input" data-menu-bar-input>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
 			<div
-				@click="(e: MouseEvent) => onClick(entry, e.target)"
+				@click="(e: MouseEvent) => onClick(entry, e.target || undefined)"
-				@blur="(e: FocusEvent) => blur(entry, e.target)"
+				@blur="(e: FocusEvent) => blur(entry, e.target || undefined)"
 				@keydown="(e: KeyboardEvent) => entry.ref?.keydown(e, false)"
 				class="entry"
 				:class="{ open: entry.ref?.isOpen }"
@@ -118,7 +118,7 @@ export default defineComponent({
 		});
 	},
 	methods: {
-		onClick(menuListEntry: MenuListEntry, target: EventTarget | null) {
+		onClick(menuListEntry: MenuListEntry, target: EventTarget | undefined) {
 			// If there's no menu to open, trigger the action but don't try to open its non-existant children
 			if (!menuListEntry.children || menuListEntry.children.length === 0) {
 				if (menuListEntry.action && !menuListEntry.disabled) menuListEntry.action();
@@ -132,7 +132,7 @@ export default defineComponent({
 			if (menuListEntry.ref) menuListEntry.ref.isOpen = true;
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
-		blur(menuListEntry: MenuListEntry, target: EventTarget | null) {
+		blur(menuListEntry: MenuListEntry, target: EventTarget | undefined) {
 			if ((target as HTMLElement)?.closest("[data-menu-bar-input]") !== this.$el && menuListEntry.ref) menuListEntry.ref.isOpen = false;
 		},
 	},

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 	inject: ["fullscreen"],
 	props: {
 		keysWithLabelsGroups: { type: Array as PropType<KeysGroup[]>, default: () => [] },
-		mouseMotion: { type: String as PropType<MouseMotion | null>, default: null },
+		mouseMotion: { type: String as PropType<MouseMotion | undefined>, required: false },
 		requiresLock: { type: Boolean as PropType<boolean>, default: false },
 	},
 	computed: {
@@ -210,7 +210,7 @@ export default defineComponent({
 			// ...or display text
 			return { label, width: `width-${label.length}` };
 		},
-		mouseHintIcon(input: MouseMotion | null): IconName {
+		mouseHintIcon(input?: MouseMotion): IconName {
 			return `MouseHint${input}` as IconName;
 		},
 		keyboardHintIcon(input: KeyRaw): IconName | undefined {

frontend/src/io-managers/input.ts

@@ -73,7 +73,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		const accelKey = platformIsMac() ? e.metaKey : e.ctrlKey;
 
 		// Don't redirect user input from text entry into HTML elements
-		if (targetIsTextField(e.target) && key !== "Escape" && !(key === "Enter" && accelKey)) return false;
+		if (targetIsTextField(e.target || undefined) && key !== "Escape" && !(key === "Enter" && accelKey)) return false;
 
 		// Don't redirect paste
 		if (key === "KeyV" && accelKey) return false;
@@ -94,7 +94,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		if (["KeyC", "KeyI", "KeyJ"].includes(key) && accelKey && e.shiftKey) return false;
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
-		if (!canvasFocused && !targetIsTextField(e.target) && ["Tab", "Enter", "Space", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(key)) return false;
+		if (!canvasFocused && !targetIsTextField(e.target || undefined) && ["Tab", "Enter", "Space", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(key)) return false;
 
 		// Redirect to the backend
 		return true;
@@ -139,7 +139,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		if (!viewportPointerInteractionOngoing && inFloatingMenu) return;
 
 		const { target } = e;
-		const newInCanvas = (target instanceof Element && target.closest("[data-canvas]")) instanceof Element && !targetIsTextField(window.document.activeElement);
+		const newInCanvas = (target instanceof Element && target.closest("[data-canvas]")) instanceof Element && !targetIsTextField(window.document.activeElement || undefined);
 		if (newInCanvas && !canvasFocused) {
 			canvasFocused = true;
 			app?.focus();
@@ -255,7 +255,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 	function onPaste(e: ClipboardEvent): void {
 		const dataTransfer = e.clipboardData;
-		if (!dataTransfer || targetIsTextField(e.target)) return;
+		if (!dataTransfer || targetIsTextField(e.target || undefined)) return;
 		e.preventDefault();
 
 		Array.from(dataTransfer.items).forEach((item) => {
@@ -358,6 +358,6 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 	return unbindListeners;
 }
 
-function targetIsTextField(target: EventTarget | HTMLElement | null): boolean {
+function targetIsTextField(target: EventTarget | HTMLElement | undefined): boolean {
 	return target instanceof HTMLElement && (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable);
 }

frontend/src/io-managers/panic.ts

@@ -28,7 +28,7 @@ function preparePanicDialog(header: string, details: string, panicDetails: strin
 			{ rowWidgets: [new Widget({ kind: "TextLabel", value: header, bold: true, italic: false, tableAlign: false, multiline: false }, 0n)] },
 			{ rowWidgets: [new Widget({ kind: "TextLabel", value: details, bold: false, italic: false, tableAlign: false, multiline: true }, 1n)] },
 		],
-		layoutTarget: null,
+		layoutTarget: undefined,
 	};
 
 	const reloadButton: TextButtonWidget = {

frontend/src/utility-functions/icons.ts

@@ -4,7 +4,7 @@
 import GraphiteLogotypeSolid from "@/../assets/graphics/graphite-logotype-solid.svg";
 
 const GRAPHICS = {
-	GraphiteLogotypeSolid: { component: GraphiteLogotypeSolid, size: null },
+	GraphiteLogotypeSolid: { component: GraphiteLogotypeSolid, size: undefined },
 } as const;
 
 // 12px Solid
@@ -255,7 +255,7 @@ export const ICONS: IconDefinitionType<typeof ICON_LIST> = ICON_LIST;
 export const ICON_COMPONENTS = Object.fromEntries(Object.entries(ICONS).map(([name, data]) => [name, data.component]));
 
 export type IconName = keyof typeof ICONS;
-export type IconSize = null | 12 | 16 | 24 | 32;
+export type IconSize = undefined | 12 | 16 | 24 | 32;
 export type IconStyle = "Normal" | "Node";
 
 // The following helper type declarations allow us to avoid manually maintaining the `IconName` type declaration as a string union paralleling the keys of the

frontend/src/utility-functions/platform.ts

@@ -8,17 +8,17 @@ export function browserVersion(): string {
 	}
 
 	if (match[1] === "Chrome") {
-		let browser = agent.match(/\bEdg\/(\d+)/);
+		let browser = agent.match(/\bEdg\/(\d+)/) || undefined;
-		if (browser !== null) return `Edge (Chromium) ${browser[1]}`;
+		if (browser !== undefined) return `Edge (Chromium) ${browser[1]}`;
 
-		browser = agent.match(/\bOPR\/(\d+)/);
+		browser = agent.match(/\bOPR\/(\d+)/) || undefined;
-		if (browser !== null) return `Opera ${browser[1]}`;
+		if (browser !== undefined) return `Opera ${browser[1]}`;
 	}
 
 	match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, "-?"];
 
-	const browser = agent.match(/version\/(\d+)/i);
+	const browser = agent.match(/version\/(\d+)/i) || undefined;
-	if (browser !== null) match.splice(1, 1, browser[1]);
+	if (browser !== undefined) match.splice(1, 1, browser[1]);
 
 	return `${match[0]} ${match[1]}`;
 }

frontend/src/wasm-communication/editor.ts

@@ -8,12 +8,12 @@ export type WasmEditorInstance = InstanceType<WasmRawInstance["JsEditorHandle"]>
 export type Editor = Readonly<ReturnType<typeof createEditor>>;
 
 // `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
-let wasmImport: WasmRawInstance | null = null;
+let wasmImport: WasmRawInstance | undefined;
 
 // Should be called asynchronously before `createEditor()`
 export async function initWasm(): Promise<void> {
 	// Skip if the WASM module is already initialized
-	if (wasmImport !== null) return;
+	if (wasmImport !== undefined) return;
 
 	// Import the WASM module JS bindings and wrap them in the panic proxy
 	wasmImport = await import("@/../wasm/pkg").then(panicProxy);

frontend/src/wasm-communication/messages.ts

@@ -82,9 +82,9 @@ export type HintGroup = HintInfo[];
 export class HintInfo {
 	readonly keyGroups!: KeysGroup[];
 
-	readonly keyGroupsMac!: KeysGroup[] | null;
+	readonly keyGroupsMac!: KeysGroup[] | undefined;
 
-	readonly mouse!: MouseMotion | null;
+	readonly mouse!: MouseMotion | undefined;
 
 	readonly label!: string;
 
@@ -669,7 +669,7 @@ export type WidgetLayout = {
 
 export function defaultWidgetLayout(): WidgetLayout {
 	return {
-		layoutTarget: null,
+		layoutTarget: undefined,
 		layout: [],
 	};
 }

frontend/vue.config.js

@@ -75,7 +75,7 @@ module.exports = {
 };
 
 function formatThirdPartyLicenses(jsLicenses) {
-	let rustLicenses = null;
+	let rustLicenses;
 	if (process.env.NODE_ENV === "production" && process.env.SKIP_CARGO_ABOUT === undefined) {
 		try {
 			rustLicenses = generateRustLicenses();
@@ -83,7 +83,7 @@ function formatThirdPartyLicenses(jsLicenses) {
 			// Nothing to show. Error messages were printed above.
 		}
 
-		if (rustLicenses === null) {
+		if (rustLicenses === undefined) {
 			// This is probably caused by cargo about not being installed
 			console.error(`
 Could not run \`cargo about\`, which is required to generate license information.
@@ -187,13 +187,13 @@ function generateRustLicenses() {
 			// Cargo returns 101 when the subcommand wasn't found
 			console.error("cargo-about failed", status, stderr);
 		}
-		return null;
+		return undefined;
 	}
 
 	// Make sure the output starts as expected, we don't want to eval an error message.
 	if (!stdout.trim().startsWith("GENERATED_BY_CARGO_ABOUT:")) {
 		console.error("Unexpected output from cargo-about", stdout);
-		return null;
+		return undefined;
 	}
 
 	// Security-wise, eval() isn't any worse than require(), but it doesn't need a temporary file.

website/static/carousel.js

@@ -1,164 +0,0 @@
-const FLING_VELOCITY_THRESHOLD = 10;
-const FLING_VELOCITY_WINDOW_SIZE = 20;
-
-let carouselImages;
-let carouselDirectionPrev;
-let carouselDirectionNext;
-let carouselDots;
-let carouselDescriptions;
-let carouselDragLastClientX;
-const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
-
-window.addEventListener("DOMContentLoaded", initializeCarousel);
-window.addEventListener("pointerup", () => dragEnd(false));
-window.addEventListener("scroll", () => dragEnd(true));
-window.addEventListener("pointermove", dragMove);
-
-function initializeCarousel() {
-	carouselImages = document.querySelectorAll(".carousel img");
-	carouselImages.forEach((image) => {
-		image.addEventListener("pointerdown", dragBegin);
-	});
-
-	carouselDirectionPrev = document.querySelector(".carousel-controls .direction.prev");
-	carouselDirectionNext = document.querySelector(".carousel-controls .direction.next");
-	carouselDots = document.querySelectorAll(".carousel-controls .dot");
-	carouselDescriptions = document.querySelectorAll(".screenshot-description p");
-
-	carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", true, false));
-	carouselDirectionNext.addEventListener("click", () => slideDirection("next", true, false));
-	Array.from(carouselDots).forEach((dot) =>
-		dot.addEventListener("click", (event) => {
-			const index = Array.from(carouselDots).indexOf(event.target);
-			slideTo(index, true);
-		})
-	);
-}
-
-function slideDirection(direction, smooth, clamped = false) {
-	const directionIndexOffset = { prev: -1, next: 1 }[direction];
-	const offsetDotIndex = currentClosestImageIndex() + directionIndexOffset;
-
-	const nextDotIndex = (offsetDotIndex + carouselDots.length) % carouselDots.length;
-	const unwrappedNextDotIndex = clamp(offsetDotIndex, 0, carouselDots.length - 1);
-
-	if (clamped) slideTo(unwrappedNextDotIndex, smooth);
-	else slideTo(nextDotIndex, smooth);
-}
-
-function slideTo(index, smooth) {
-	const activeDot = document.querySelector(".carousel-controls .dot.active");
-	activeDot.classList.remove("active");
-	carouselDots[index].classList.add("active");
-
-	const activeDescription = document.querySelector(".screenshot-description p.active");
-	activeDescription.classList.remove("active");
-	carouselDescriptions[index].classList.add("active");
-
-	setCurrentTransform(index * -100, "%", smooth);
-}
-
-function currentTransform() {
-	const currentTransformMatrix = window.getComputedStyle(carouselImages[0]).transform;
-	// Grab the X value from the format that looks like: `matrix(1, 0, 0, 1, -1332.13, 0)` or `none`
-	return Number(currentTransformMatrix.split(",")[4] || "0");
-}
-
-function setCurrentTransform(x, unit, smooth) {
-	Array.from(carouselImages).forEach((image) => {
-		image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
-		image.style.transform = `translateX(${x}${unit})`;
-	});
-}
-
-function currentClosestImageIndex() {
-	const currentTransformX = -currentTransform();
-
-	const imageWidth = carouselImages[0].getBoundingClientRect().width;
-	return Math.round(currentTransformX / imageWidth);
-}
-
-function currentActiveDotIndex() {
-	const activeDot = document.querySelector(".carousel-controls .dot.active");
-	return Array.from(carouselDots).indexOf(activeDot);
-}
-
-function dragBegin(event) {
-	event.preventDefault();
-
-	carouselDragLastClientX = event.clientX;
-
-	setCurrentTransform(currentTransform(), "px", false);
-	document.querySelector("#screenshots").classList.add("dragging");
-}
-
-function dragEnd(dropWithoutVelocity) {
-	if (!carouselImages) return;
-
-	carouselDragLastClientX = undefined;
-
-	document.querySelector("#screenshots").classList.remove("dragging");
-
-	const onlyRecentVelocityDeltaWindow = velocityDeltaWindow.filter((delta) => delta.time > Date.now() - 1000);
-	const timeRange = Date.now() - (onlyRecentVelocityDeltaWindow[0]?.time ?? NaN);
-	// Weighted (higher by recency) sum of velocity deltas from previous window of frames
-	const recentVelocity = onlyRecentVelocityDeltaWindow.reduce((acc, entry) => {
-		const timeSinceNow = Date.now() - entry.time;
-		const recencyFactorScore = 1 - timeSinceNow / timeRange;
-
-		return acc + entry.delta * recencyFactorScore;
-	}, 0);
-
-	const closestImageIndex = currentClosestImageIndex();
-	const activeDotIndex = currentActiveDotIndex();
-
-	// If the speed is fast enough, slide to the next or previous image in that direction
-	if (Math.abs(recentVelocity) > FLING_VELOCITY_THRESHOLD && !dropWithoutVelocity) {
-		// Positive velocity should go to the previous image
-		if (recentVelocity > 0) {
-			// Don't apply the velocity-based fling if we're already snapping to the next image
-			if (closestImageIndex >= activeDotIndex) {
-				slideDirection("prev", false, true);
-				return;
-			}
-		}
-		// Negative velocity should go to the next image
-		else {
-			// Don't apply the velocity-based fling if we're already snapping to the next image
-			// eslint-disable-next-line no-lonely-if
-			if (closestImageIndex <= activeDotIndex) {
-				slideDirection("next", false, true);
-				return;
-			}
-		}
-	}
-
-	// If we didn't slide in a direction due to clear velocity, just snap to the closest image
-	// This can be reached either by not entering the if statement above, or by its inner if statements not returning early and exiting back to this scope
-	slideTo(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
-}
-
-function dragMove(event) {
-	if (carouselDragLastClientX === undefined) return;
-
-	event.preventDefault();
-
-	const LEFT_MOUSE_BUTTON = 1;
-	if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
-		dragEnd(false);
-		return;
-	}
-
-	const deltaX = event.clientX - carouselDragLastClientX;
-	velocityDeltaWindow.shift();
-	velocityDeltaWindow.push({ time: Date.now(), delta: deltaX });
-
-	const newTransformX = currentTransform() + deltaX;
-	setCurrentTransform(newTransformX, "px", false);
-
-	carouselDragLastClientX = event.clientX;
-}
-
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}

website/static/js/navbar.js

@@ -24,8 +24,8 @@ function initializeRipples() {
 
 	ripples = Array.from(navButtons).map((button) => ({
 		element: button,
-		animationStartTime: null,
+		animationStartTime: 0,
-		animationEndTime: null,
+		animationEndTime: 0,
 		goingUp: false,
 	}));
 

website/static/navbar.js

@@ -1,115 +0,0 @@
-const NAV_BUTTON_INITIAL_FONT_SIZE = 32;
-const RIPPLE_ANIMATION_MILLISECONDS = 100;
-const RIPPLE_WIDTH = 140;
-const HANDLE_STRETCH = 0.4;
-
-let ripplesInitialized;
-let navButtons;
-let rippleSvg;
-let ripplePath;
-let fullRippleHeight;
-let ripples;
-let activeRippleIndex;
-
-window.addEventListener("DOMContentLoaded", initializeRipples);
-window.addEventListener("resize", () => animate(true));
-
-function initializeRipples() {
-	ripplesInitialized = true;
-
-	navButtons = document.querySelectorAll("header nav a");
-	rippleSvg = document.querySelector("header .ripple");
-	ripplePath = rippleSvg.querySelector("path");
-	fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height, 10) - 4;
-
-	ripples = Array.from(navButtons).map((button) => ({
-		element: button,
-		animationStartTime: null,
-		animationEndTime: null,
-		goingUp: false,
-	}));
-
-	activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href").replace(/\//g, "") === window.location.pathname.replace(/\//g, ""));
-
-	ripples.forEach((ripple) => {
-		const updateTimings = (goingUp) => {
-			const start = ripple.animationStartTime;
-			const now = Date.now();
-			const stop = ripple.animationStartTime + RIPPLE_ANIMATION_MILLISECONDS;
-
-			const elapsed = now - start;
-			const remaining = stop - now;
-
-			ripple.animationStartTime = now < stop ? now - remaining : now;
-			ripple.animationEndTime = now < stop ? now + elapsed : now + RIPPLE_ANIMATION_MILLISECONDS;
-
-			ripple.goingUp = goingUp;
-			animate(false);
-		};
-
-		ripple.element.addEventListener("pointerenter", () => updateTimings(true));
-		ripple.element.addEventListener("pointerleave", () => updateTimings(false));
-	});
-
-	ripples[activeRippleIndex] = {
-		...ripples[activeRippleIndex],
-		animationStartTime: 1,
-		animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
-		goingUp: true,
-	};
-
-	setRipples();
-}
-
-function animate(forceRefresh) {
-	if (!ripplesInitialized) return;
-
-	const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
-
-	if (animateThisFrame || forceRefresh) {
-		setRipples();
-		window.requestAnimationFrame(() => animate(false));
-	}
-}
-
-function setRipples() {
-	const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize, 10) || NAV_BUTTON_INITIAL_FONT_SIZE;
-	const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
-
-	const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
-	const rippleSvgRect = rippleSvg.getBoundingClientRect();
-	const rippleSvgLeft = rippleSvgRect.left;
-	const rippleSvgWidth = rippleSvgRect.width;
-
-	let path = `M 0,${rippleHeight + 3} `;
-
-	ripples.forEach((ripple) => {
-		if (!ripple.animationStartTime || !ripple.animationEndTime) return;
-
-		const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
-		const height = rippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
-
-		const buttonRect = ripple.element.getBoundingClientRect();
-
-		const buttonCenter = buttonRect.width / 2;
-		const rippleCenter = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
-		const rippleOffset = rippleCenter - buttonCenter;
-
-		const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
-
-		const rippleRadius = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
-		const handleRadius = rippleRadius * HANDLE_STRETCH;
-
-		path += `L ${rippleStartX},${rippleHeight + 3} `;
-		path += `c ${handleRadius},0 ${rippleRadius - handleRadius},${-height} ${rippleRadius},${-height} `;
-		path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
-	});
-
-	path += `l ${rippleSvgWidth},0`;
-
-	ripplePath.setAttribute("d", path);
-}
-
-function ease(x) {
-	return 1 - (1 - x) * (1 - x);
-}

website/templates/base.html

@@ -11,7 +11,7 @@
 	<link rel="stylesheet" href="/base.css">
 	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700">
-	<script src="/navbar.js"></script>
+	<script src="/js/navbar.js"></script>
 	<style>
 		.balance-text {
 			visibility: hidden;

website/templates/index.html

@@ -329,5 +329,5 @@
 	</div>
 </section>
 
-<script src="/carousel.js"></script>
+<script src="/js/carousel.js"></script>
 {% endblock content %}