openguessr-ui 0.3.2 → 0.3.4

package/README.md

@@ -249,6 +249,8 @@ The popup component is used for dialogs. It takes the following props:
 - `frameless`: Reduces the padding, e.g. for iframes
 - `onuserclose`: Called when the user closes the popup
 
+On mobile devices (portrait orientation, and narrow in terms of width), the popup transforms into a drawer.
+
 A common design pattern is to include a heading at the top of a popup. For this, the built-in `popup-title` class can be used:
 
 ```html

package/base.css

@@ -14,7 +14,8 @@
 html {
     /* This UI library is for games, not sites, double-tap to zoom or drag down to refresh are not wanted */
     overscroll-behavior: none;
-    touch-action: none;
+    /* Block double-tap or pinch to zoom */
+    touch-action: pan-x pan-y;
 }
 
 html * {
@@ -23,8 +24,8 @@ html * {
 
 body {
     font-family: Barlow, sans-serif;
-    /* Disable touch action again since body could be a scroll container */
-    touch-action: none;
+    /* Set touch action again since body could be a scroll container */
+    touch-action: pan-x pan-y;
     background-color: var(--background-color);
 }
 

package/components/ConfirmPopup.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Popup from "./Popup.svelte";
-	import { confirmPopup } from "../confirmPopup.svelte.js";
+	import { confirmPopup } from "../utils/confirm-popup.svelte.js";
 
 	let { onconfirm } = $props();
 

package/components/ErrorPopup.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { errorPopupState } from "../errorPopup.svelte.js";
+	import { errorPopupState } from "../utils/error-popup.svelte.js";
 	import Popup from "./Popup.svelte";
 </script>
 

package/components/ExperimentSign.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { showConfirmPopup } from "../confirmPopup.svelte.js";
+	import { showConfirmPopup } from "../utils/confirm-popup.svelte.js";
 	import experimentStars from "../images/experiment_stars.png";
 
 	let { class: classes } = $props();

package/components/Notification.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { notification, hideNotification } from "../notifications.svelte.js";
+	import { notification, hideNotification } from "../utils/notifications.svelte.js";
 	import { Check, SquareArrowOutUpRight, X } from "@lucide/svelte";
 	import { fly } from "svelte/transition";
 

package/components/Popup.svelte

@@ -5,13 +5,155 @@
 <script>
 	import { X } from "@lucide/svelte";
 	import { untrack } from "svelte";
+	import { on } from "svelte/events";
+	import { cubicBezier } from "../utils/cubic-bezier.js";
+	import { clamp } from "../utils/clamp.js";
+	import { isScrolledDown, canScrollDown } from "../utils/scroll-check.js";
+	import { scale, fade } from "svelte/transition";
 	import { backOut } from "svelte/easing";
-	import { fade, scale } from "svelte/transition";
-
+	import { MediaQuery } from "svelte/reactivity";
 	let { children, frameless, slim, verySlim, ultraSlim, open = $bindable(false), onuserclose } = $props();
 
 	let zIndex = $state(0);
 
+	// Transitions ------------------------------------------------------------------------------
+	const DRAWER_TIMING = { duration: 500, easing: cubicBezier(0.32, 0.72, 0, 1) };
+	const DRAWER_HIDDEN_OVERSHOOT = 50; // Added negative closed y-pos offset to move the panel shadow off-screen (100px blur - 50px --layout-spacer)
+	const popupToDrawer = new MediaQuery("(orientation: portrait) and (max-width: 500px)");
+
+	const popupHolderTransition = (node) => (popupToDrawer.current ? { duration: 0 } : fade(node, { duration: 100 }));
+
+	// Replaced when dragged closed, so the close continues the swipe's speed
+	let closeTiming = DRAWER_TIMING;
+
+	function windowTransition(node, _params, { direction }) {
+		if (!popupToDrawer.current) return scale(node, { easing: backOut, duration: 250, start: 0.9 });
+
+		if (direction == "in") {
+			closeTiming = DRAWER_TIMING;
+			drawerVerticalOffset = node.offsetHeight + DRAWER_HIDDEN_OVERSHOOT;
+			animateDrawerOpen(); // Opening is animated by this function, so a drag can take over at any point
+			return { duration: 0 };
+		} else {
+			// Close from wherever the drawer currently is
+			cancelAnimationFrame(openAnimationFrame);
+			const start = drawerVerticalOffset;
+			return {
+				...closeTiming,
+				css: (t) => `transform: translate3d(0, ${closedOffset + (start - closedOffset) * t}px, 0)`,
+			};
+		}
+	}
+
+	function drawerOverlayOutTransition() {
+		if (!popupToDrawer.current) return { duration: 0 };
+		const start = overlayProgress; // Current strength
+		return {
+			...closeTiming,
+			// Fade color opacity and blur strength relative to time factor t (0-1)
+			css: (t) =>
+				`background-color: color-mix(in srgb, var(--overlay-color) ${start * t * 100}%, transparent); backdrop-filter: blur(calc(var(--weak-blur) * ${start * t}));`,
+		};
+	}
+
+	// Drawer logic ------------------------------------------------------------------------------------
+
+	// Bindings
+	let contentEl = $state();
+	let uiWindowHeight = $state();
+
+	// Drawer state
+	let dragStartY = $state();
+	let dragStartX;
+	let dragStartVerticalOffset;
+	let isDragging = $state(false);
+	let drawerVerticalOffset = $state(0);
+	let velocitySamples = $state([]); // Y positions with timestamps
+	let openAnimationFrame; // Latest open animation frame for cancelling it
+
+	const closedOffset = $derived(uiWindowHeight + DRAWER_HIDDEN_OVERSHOOT);
+	const overlayProgress = $derived(Math.min(1, 1 - drawerVerticalOffset / closedOffset));
+
+	// Animate drawer to fully open
+	const animateDrawerOpen = () => {
+		if (drawerVerticalOffset == 0) return; // Skip when the drawer is already fully open
+		const start = drawerVerticalOffset;
+		const startTime = performance.now();
+		const step = (now) => {
+			const progress = Math.min(1, (now - startTime) / DRAWER_TIMING.duration); // Progress (0-1)
+			drawerVerticalOffset = start * (1 - DRAWER_TIMING.easing(progress));
+			if (progress < 1) openAnimationFrame = requestAnimationFrame(step);
+		};
+		openAnimationFrame = requestAnimationFrame(step);
+	};
+
+	const dragStart = (event) => {
+		// Abort if not a drawer, or if content should be scrolled by the "finger downwards" movement because it isn't scrolled all the way up
+		if (!popupToDrawer.current || isScrolledDown(event.target, contentEl)) return;
+
+		// Catch the drawer where it is (could still be animating open)
+		cancelAnimationFrame(openAnimationFrame);
+		dragStartVerticalOffset = drawerVerticalOffset;
+		dragStartY = event.touches[0].clientY;
+		dragStartX = event.touches[0].clientX;
+		velocitySamples = [{ y: dragStartY, time: performance.now() }];
+	};
+
+	const drag = (event) => {
+		if (dragStartY == null) return;
+
+		const eventY = event.touches[0].clientY;
+
+		// On the first move, decide whether the gesture drags the drawer or scrolls the content
+		if (!isDragging) {
+			// Horizontal movements belong to the content, e.g. horizontally scrolling elements
+			const isScrollingHorizontally = Math.abs(event.touches[0].clientX - dragStartX) > Math.abs(eventY - dragStartY); // Check if more horizontal movement than vertical
+
+			// Dragging finger upwards while the touched element (or an ancestor up to the content) can still scroll down
+			// Mainly relevant for the slow stretch animation when the drwaer is dragged upwards (which shouldn't show when content is scrolled down)
+			const isScrollingDown = eventY <= dragStartY && canScrollDown(event.target, contentEl);
+
+			if (isScrollingHorizontally || isScrollingDown) {
+				dragStartY = null;
+				return animateDrawerOpen(); // Touch  could've stopped the drawer during open, since it's a content scroll not a drag, resume
+			}
+		}
+
+		event.preventDefault(); // Prevent page scroll
+		isDragging = true;
+
+		// Collect samples for velocity calc
+		const now = performance.now();
+		velocitySamples.push({ y: eventY, time: now });
+		while (velocitySamples.length > 2 && now - velocitySamples[0].time > 80) velocitySamples.shift(); // Keep the last 80ms
+
+		// Apply offset
+		const delta = eventY - dragStartY + dragStartVerticalOffset;
+		drawerVerticalOffset = delta > 0 ? delta : delta * 0.05; // Allow dragging the drawer upwards, but make it less effective (that's what the x0.05 is for)
+	};
+
+	const dragEnd = () => {
+		if (dragStartY == null) return;
+		dragStartY = null;
+
+		if (!isDragging) return animateDrawerOpen(); // Single tap without drag, resume opening if it was caught mid-animation
+		isDragging = false;
+
+		// Calculate velocity
+		const first = velocitySamples[0];
+		const last = velocitySamples.at(-1);
+		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0; // Pixels per ms (time is ms)
+
+		// If swiped with enough velocity or past 35%, animate it shut, otherwise open fully again
+		if (velocity > 0.4 || drawerVerticalOffset > uiWindowHeight * 0.35) {
+			const duration = clamp((closedOffset - drawerVerticalOffset) / Math.max(velocity, 1.5), 180, 420); // Faster drag velocity means lower duration
+			closeTiming = { duration, easing: cubicBezier(0.45, 0.55, 0.4, 0.92) };
+			close();
+		} else animateDrawerOpen(); // Too little drag, snap back to fully open state
+	};
+
+	// Automatic z-indexing ---------------------------------------------------------------------
+
 	// Helper to remove the current popup's z-index
 	const removeZIndex = () => {
 		const index = openZIndexes.indexOf(zIndex);
@@ -33,6 +175,7 @@
 		}
 	});
 
+	// Close function ----------------------------------------------------------------------------
 	function close() {
 		onuserclose?.();
 		open = false;
@@ -53,24 +196,62 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		class="popup-holder"
+		class:drawer-holder={popupToDrawer.current}
 		style:z-index={zIndex}
-		transition:fade={{ duration: 100 }}
+		in:popupHolderTransition
+		out:popupHolderTransition
 		onclick={(e) => {
 			if (e.target == e.currentTarget) close();
 		}}
 		role="dialog"
 		tabindex={0}
 	>
+		<!-- Separate from the holder, a backdrop filter on an ancestor wouldn't work -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="drawer-overlay"
+			out:drawerOverlayOutTransition
+			onclick={close}
+			style:background-color="color-mix(in srgb, var(--overlay-color) {overlayProgress * 100}%, transparent)"
+			style:backdrop-filter="blur(calc(var(--weak-blur) * {overlayProgress}))"
+		></div>
 		<div
 			class="ui-window"
-			transition:scale={{ easing: backOut, duration: 250, start: 0.9 }}
+			role="menu"
+			tabindex="0"
+			class:drawer={popupToDrawer.current}
+			in:windowTransition
+			out:windowTransition
 			class:frame-less={frameless}
-			style:max-width={ultraSlim ? "450px" : verySlim ? "600px" : slim ? "750px" : "850px"}
+			style:max-width={popupToDrawer.current
+				? "none"
+				: ultraSlim
+					? "450px"
+					: verySlim
+						? "600px"
+						: slim
+							? "750px"
+							: "850px"}
+			style:transform={popupToDrawer.current && drawerVerticalOffset
+				? `translate3d(0, ${drawerVerticalOffset}px, 0)`
+				: ""}
+			bind:offsetHeight={uiWindowHeight}
+			{@attach (node) => {
+				// Needed since regular Svelte's touchmove is passive
+				const cleanup = on(node, "touchmove", drag, { passive: false });
+				return cleanup;
+			}}
+			ontouchstart={dragStart}
+			ontouchend={dragEnd}
+			ontouchcancel={dragEnd}
 		>
+			{#if popupToDrawer.current && !frameless}
+				<div class="drawer-handle"></div>
+			{/if}
 			<button class="close-popup-button standard-button" aria-label="close" onclick={close}
 				><X strokeWidth={2.25} /></button
 			>
-			<div class="content of-top of-bottom" class:content-frameless={frameless}>
+			<div class="content of-top of-bottom" class:content-frameless={frameless} bind:this={contentEl}>
 				{@render children?.()}
 			</div>
 		</div>
@@ -90,6 +271,7 @@
 		background-color: var(--overlay-color);
 		pointer-events: auto;
 		backdrop-filter: blur(var(--weak-blur));
+		--window-padding: calc(var(--layout-margin) + var(--content-margin));
 	}
 
 	.close-popup-button {
@@ -102,10 +284,6 @@
 		z-index: 10;
 	}
 
-	.frame-less {
-		padding: var(--content-margin) !important;
-	}
-
 	.content {
 		position: relative;
 		overflow-y: auto;
@@ -119,18 +297,18 @@
 		);
 		width: 100%;
 		scrollbar-width: none;
+		overscroll-behavior: contain;
 		border-radius: var(--box-margin);
 	}
 
 	.content-frameless {
 		max-height: calc(100dvh - var(--layout-spacer) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
-		margin-bottom: -4px;
 		border-radius: 0;
 	}
 
 	.ui-window {
 		width: calc(100% - var(--layout-margin) * 2);
-		padding: calc(var(--layout-margin) + var(--content-margin));
+		padding: var(--window-padding);
 		border-radius: calc(var(--layout-margin) + var(--box-margin));
 		text-align: left;
 		position: relative;
@@ -139,11 +317,64 @@
 		box-shadow:
 			0 2px 100px rgba(5, 6, 10, 0.5),
 			inset 0 0.05rem 1px hsla(0, 0%, 100%, 0.2),
-			inset 0 -0.2rem 1px rgba(0, 0, 2, 0.2) !important;
+			inset 0 -0.2rem 1px rgba(0, 0, 2, 0.2);
 		color: white;
 		pointer-events: auto;
-		transition:
-			opacity 250ms ease,
-			transform 250ms ease;
+	}
+
+	.frame-less {
+		padding: var(--content-margin);
+	}
+
+	.drawer-overlay {
+		display: none;
+	}
+
+	.drawer-holder {
+		align-items: flex-end;
+		background-color: transparent;
+		backdrop-filter: none;
+	}
+
+	.drawer-holder .drawer-overlay {
+		display: block;
+		position: absolute;
+		inset: 0;
+		background-color: var(--overlay-color);
+		backdrop-filter: blur(var(--weak-blur));
+	}
+
+	.drawer {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		/* Max height is also shorter by the negative --layout-spacer margin bottom */
+		max-height: calc(100dvh - env(safe-area-inset-top));
+		padding-bottom: calc(max(var(--window-padding), env(safe-area-inset-bottom)) + var(--layout-spacer));
+		margin-bottom: calc(-1 * var(--layout-spacer));
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	.drawer.frame-less {
+		/* Add --layout-spacer since we have the negative --layout-spacer margin bottom */
+		padding-bottom: calc(max(var(--content-margin), env(safe-area-inset-bottom)) + var(--layout-spacer));
+	}
+
+	.drawer .content {
+		flex: 1;
+		min-height: 0;
+		max-height: none;
+	}
+
+	.drawer-handle {
+		position: absolute;
+		top: var(--box-margin);
+		border-radius: 4px;
+		left: 50%;
+		translate: -50% 0;
+		width: 40px;
+		height: 4px;
+		background-color: var(--line-color);
 	}
 </style>

package/components/RoomCodeInput.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { ArrowRight } from "@lucide/svelte";
-	import { tooltip } from "../tooltip.svelte.js";
+	import { tooltip } from "../utils/tooltip.svelte.js";
 
 	let { segments = $bindable(["", "", "", "", "", ""]), inPage = true, onsubmit } = $props(); // 6 segments for XXX-XXX
 

package/index.js

@@ -11,10 +11,10 @@ export { default as Tabs } from "./components/Tabs.svelte";
 export { default as Ticker } from "./components/Ticker.svelte";
 export { default as TitleSeparator } from "./components/TitleSeparator.svelte";
 export { default as ExperimentSign } from "./components/ExperimentSign.svelte";
-export { tooltip } from "./tooltip.svelte.js";
-export { showNotification } from "./notifications.svelte.js";
-export { showConfirmPopup } from "./confirmPopup.svelte.js";
-export { showErrorPopup } from "./errorPopup.svelte.js";
+export { tooltip } from "./utils/tooltip.svelte.js";
+export { showNotification } from "./utils/notifications.svelte.js";
+export { showConfirmPopup } from "./utils/confirm-popup.svelte.js";
+export { showErrorPopup } from "./utils/error-popup.svelte.js";
 
 // Sounds
 import basic_button from "./sound-effects/basic_button.ogg";

package/package.json

@@ -1,16 +1,13 @@
 {
 	"name": "openguessr-ui",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"type": "module",
 	"scripts": {
 		"dev": "vite example"
 	},
 	"files": [
 		"index.js",
-		"tooltip.svelte.js",
-		"notifications.svelte.js",
-		"confirmPopup.svelte.js",
-		"errorPopup.svelte.js",
+		"utils",
 		"components",
 		"fonts",
 		"vector-graphics",
@@ -34,7 +31,7 @@
 	"peerDependencies": {
 		"@lucide/svelte": "^1.0.0",
 		"overfade": "^0.0.11",
-		"svelte": "^5.0.0"
+		"svelte": "^5.7.0"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.8.0"

package/utils/clamp.js

@@ -0,0 +1 @@
+export const clamp = (val, min, max) => Math.min(Math.max(val, min), max);

package/utils/cubic-bezier.js

@@ -0,0 +1,12 @@
+export function cubicBezier(x1, y1, x2, y2) {
+    const curve = (s, c1, c2) => (1 - 3 * c2 + 3 * c1) * s ** 3 + (3 * c2 - 6 * c1) * s ** 2 + 3 * c1 * s;
+    return (t) => {
+        let s = t;
+        for (let i = 0; i < 5; i++) {
+            const slope = 3 * (1 - 3 * x2 + 3 * x1) * s ** 2 + 2 * (3 * x2 - 6 * x1) * s + 3 * x1;
+            if (Math.abs(slope) < 1e-6) break;
+            s -= (curve(s, x1, x2) - t) / slope;
+        }
+        return curve(s, y1, y2);
+    };
+}

package/utils/scroll-check.js

@@ -0,0 +1,20 @@
+// Whether the element or any ancestor up to root is scrolled down
+export function isScrolledDown(el, root) {
+    while (el) {
+        if (el.scrollTop > 0) return true; // Return true when a scrollable element was found
+        if (el === root) return false;
+        el = el.parentElement;
+    }
+    return false;
+}
+
+// Whether the element or any ancestor up to root can still scroll further down
+export function canScrollDown(el, root) {
+    while (el) {
+        const scrollRemaining = el.scrollHeight - el.scrollTop - el.clientHeight;
+        if (scrollRemaining > 1) return true; // scrollTop can be fractional while scrollHeight and clientHeight are rounded
+        if (el === root) return false;
+        el = el.parentElement;
+    }
+    return false;
+}