openguessr-ui 0.2.1 → 0.2.3

package/README.md

@@ -242,6 +242,7 @@ The popup component is used for dialogs. It takes the following props:
 - `open`: Whether the popup is open
 - `slim`: Reduces the max width
 - `verySlim`: Reduces the max width further
+- `ultraSlim`: Reduces the max width even further
 - `frameless`: Reduces the padding, e.g. for iframes
 - `onuserclose`: Called when the user closes the popup
 
@@ -400,6 +401,14 @@ The title separator component is used to separate content inside popups or conta
 - `noMargin`: Removes the default top and bottom margin (`--layout-margin`)
 - `class`: Class passthrough
 
+### ExperimentSign
+
+The experiment sign is a sign that should be placed on the main page of an experimental OpenGuessr project. For the "Learn more" to work, the ConfirmPopup has to be mounted. The sign takes the following props:
+
+- `class`: Class passthrough
+
+It's typically placed in the lower left-hand corner with spacing of `--layout-margin` towards the edges.
+
 ## Attachments
 
 Attachments utilize Svelte's `{@attach...}` syntax.
@@ -446,6 +455,8 @@ new Audio(sounds.basic_button).play();
 | item_select | Selecting an item (e.g. a pin, badge, or flag) |
 | item_locked | Trying to select a locked item |
 
+No sound should be played for lightweight actions such as clicks on links or tiny "X" buttons that lack standard button styling (like the one used in the persistent tooltip).
+
 The components don't play sounds themselves. Instead, they should be played via callbacks:
 
 - Collapsible `ontoggle`: `toggle_button`

package/base.css

@@ -8,11 +8,11 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-/* This UI library is for games, not sites, double-tap to zoom or drag down to refresh are not wanted */
 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;
 }

package/components/ExperimentSign.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { showConfirmPopup } from "../confirmPopup.svelte.js";
+	import experimentStars from "../images/experiment_stars.png";
+
+	let { class: classes } = $props();
+</script>
+
+<div class="sign {classes}">
+	<img alt="stars" src={experimentStars} class="stars" />
+	<h3>Experiment</h3>
+	<p class="subtitle">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		An OpenGuessr experiment.
+		<span
+			role="button"
+			class="learn-more"
+			tabindex="0"
+			onclick={() =>
+				showConfirmPopup(
+					"Experiment",
+					"Experiments are new ideas brought to life with help from artificial intelligence and built upon the robust foundations of OpenGuessr.",
+				)}>Learn more</span
+		>.
+	</p>
+</div>
+
+<style>
+	.sign {
+		background-color: var(--panel-color);
+		box-shadow: var(--panel-shadow);
+		border-radius: var(--layout-margin);
+		padding: var(--layout-margin);
+		contain: layout;
+		display: flex;
+		flex-direction: column;
+		gap: var(--content-margin);
+		backdrop-filter: blur(var(--normal-blur));
+	}
+
+	.stars {
+		position: absolute;
+		width: 150px;
+		height: 150px;
+		top: -73px;
+		right: -35px;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.subtitle {
+		opacity: 0.5;
+		padding-right: var(--box-margin);
+	}
+
+	.learn-more {
+		text-decoration: underline;
+		cursor: pointer;
+	}
+</style>

package/components/Popup.svelte

@@ -8,7 +8,7 @@
 	import { backOut } from "svelte/easing";
 	import { fade, scale } from "svelte/transition";
 
-	let { children, frameless, slim, verySlim, open = $bindable(false), onuserclose } = $props();
+	let { children, frameless, slim, verySlim, ultraSlim, open = $bindable(false), onuserclose } = $props();
 
 	let zIndex = $state(0);
 
@@ -65,7 +65,7 @@
 			class="ui-window"
 			transition:scale={{ easing: backOut, duration: 250, start: 0.9 }}
 			class:frame-less={frameless}
-			style:max-width={verySlim ? "600px" : slim ? "750px" : "850px"}
+			style:max-width={ultraSlim ? "450px" : verySlim ? "600px" : slim ? "750px" : "850px"}
 		>
 			<button class="close-popup-button standard-button bright" aria-label="close" onclick={close}
 				><X strokeWidth={2.25} /></button

package/components/RoomCodeInput.svelte

@@ -102,7 +102,6 @@
 	}
 
 	/* Compact in-box variant, plus the button */
-
 	.segmented-input-box-compact .segment-input::placeholder {
 		font-size: 18px;
 	}

package/index.js

@@ -10,6 +10,7 @@ export { default as RoomCodeInput } from "./components/RoomCodeInput.svelte";
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openguessr-ui",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite example"
@@ -14,6 +14,7 @@
 		"components",
 		"fonts",
 		"vector-graphics",
+		"images",
 		"sound-effects",
 		"variables.css",
 		"base.css",