ux improvements, homepage, this is the only level

ci/README.md

@@ -61,7 +61,6 @@ Actions:
 Both workflows use a GitHub App for authentication:
 
 1. **Secrets Required:**
-
    - `GH_APP_ID` - Your GitHub App ID
    - `GH_PRIVATE_KEY` - Your GitHub App private key
 

package.json

@@ -18,7 +18,7 @@
 		"@lucide/svelte": "^0.515.0",
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.21.5",
+		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.10",
@@ -28,11 +28,11 @@
 		"bits-ui": "2.8.0",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.6.0",
-		"layerchart": "2.0.0-next.22",
+		"layerchart": "2.0.0-next.24",
 		"lucide-svelte": "^0.516.0",
 		"mode-watcher": "^1.0.8",
 		"paneforge": "1.0.0-next.5",
-		"prettier": "^3.5.3",
+		"prettier": "^3.6.0",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.12",
 		"svelte": "^5.34.3",
@@ -52,7 +52,7 @@
 		"@tanstack/match-sorter-utils": "^8.19.4",
 		"formsnap": "^2.0.1",
 		"md5": "^2.3.0",
-		"posthog-js": "^1.253.4",
+		"posthog-js": "^1.255.1",
 		"svelte-persisted-store": "^0.12.0"
 	}
 }

src/lib/components/app-sidebar.svelte

@@ -41,7 +41,7 @@
 			e.preventDefault();
 			commandOpen = !commandOpen;
 		}
-		if (e.key === ',' && (e.metaKey || e.ctrlKey)) {
+		if (e.key === ',' && (e.metaKey || e.ctrlKey) && $preferencesStore.experimentalFeatures) {
 			e.preventDefault();
 			settingsOpen.current = !settingsOpen.current;
 		}

src/lib/components/settings.svelte

@@ -5,6 +5,7 @@
 	import { Label } from '$lib/components/ui/label/index.js';
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ClipboardIcon from '@lucide/svelte/icons/clipboard';
 	import Input from './ui/input/input.svelte';
 	import { buttonVariants } from './ui/button';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
@@ -13,13 +14,23 @@
 	import SunIcon from '@lucide/svelte/icons/sun';
 	import MoonIcon from '@lucide/svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
+	import posthog from 'posthog-js';
 
 	import { settingsOpen } from '$lib/state.svelte';
 	import { preferencesStore, historyStore } from '$lib/stores';
 	import { themes } from '$lib/theme';
 	import clsx from 'clsx';
 	import Button from './ui/button/button.svelte';
 	import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+
+	let distinct_id = $state('Not available') as string;
+
+	onMount(() => {
+		setTimeout(() => {
+			distinct_id = posthog.get_distinct_id();
+		}, 1000);
+	});
 
 	const themeTriggerContent = $derived(
 		themes.find((theme) => theme.value === $preferencesStore.theme)?.label ?? 'No theme :D'
@@ -144,6 +155,20 @@
 					Clear everything
 				</Button>
 			</div>
+			Unique ID (for troubleshooting)
+			<div class="flex flex-row gap-3">
+				<Input bind:value={distinct_id} disabled />
+				<Button
+					size="icon"
+					onclick={() => {
+						navigator.clipboard.writeText(distinct_id).then(() => {
+							toast.success('Copied');
+						});
+					}}
+				>
+					<ClipboardIcon />
+				</Button>
+			</div>
 		</div>
 	</Dialog.Content>
 </Dialog.Root>

src/lib/gmaes.ts

@@ -353,6 +353,14 @@ const gmaes: Gmae[] = [
 		tags: [],
 		links: [],
 		url: '/_app/tools/the-final-earth/index.html'
+	},
+	{
+		name: 'This is the only level',
+		description: 'do the same thing over and over again (but not)',
+		category: 'Uncategorized',
+		tags: [],
+		links: [],
+		url: '/_app/tools/thisistheonlylevel/index.html'
 	}
 ];
 

src/routes/+page.svelte

@@ -1,2 +1,96 @@
 <script lang="ts">
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { preferencesStore, historyStore, favoritesStore } from '$lib/stores';
+	import clsx from 'clsx';
+	import { getGameById } from '$lib/gmaes';
+	import History from '@lucide/svelte/icons/history';
+	import Bookmark from 'lucide-svelte/icons/bookmark';
+	import X from 'lucide-svelte/icons/x';
+
+	const tools = [
+		{ name: 'Calculator', url: '/tools/calculator' },
+		{ name: 'Converter', url: '/tools/converter' },
+		{ name: 'Rich Text Editor', url: '/tools/rich-text-editor' },
+		{ name: 'Word Counter', url: '/tools/word-counter' },
+		{ name: 'Password Generator', url: '/tools/password-generator' },
+		{ name: 'Random Number Generator', url: '/tools/random-number-generator' }
+	];
 </script>
+
+<div class="bg-background relative flex w-full items-center justify-center py-52">
+	<div
+		class="absolute top-0 left-0 h-full w-full bg-[linear-gradient(to_right,var(--muted)_1px,transparent_1px),linear-gradient(to_bottom,var(--muted)_1px,transparent_1px)] [mask-image:linear-gradient(0deg,_transparent,_var(--background))] bg-[size:24px_24px]"
+	></div>
+	<h1 class="z-10 text-4xl">
+		EduTools {#if $preferencesStore.experimentalFeatures}Experimental{/if}
+	</h1>
+</div>
+
+<div class="flex w-full flex-col gap-3 p-3 md:flex-row">
+	<div
+		class={clsx(
+			'grid h-fit w-full gap-3',
+			$preferencesStore.experimentalFeatures ? 'grid-cols-1' : 'grid-cols-3'
+		)}
+	>
+		{#each tools as tool}
+			<Button variant="outline" class="py-10 text-xl" href={tool.url}>{tool.name}</Button>
+		{/each}
+	</div>
+	{#if $preferencesStore.experimentalFeatures}
+		<div class="grid h-fit w-full grid-cols-1 gap-3">
+			<div class="flex flex-row items-center gap-1">
+				<History />
+				History
+			</div>
+			{#each $historyStore as item}
+				<Button variant="outline" class="py-10 text-xl" href={'/g/' + item}
+					>{getGameById(item)?.name}</Button
+				>
+			{/each}
+			{#if $historyStore.length === 0}
+				<div
+					class="flex flex-row items-center justify-center gap-1 rounded-md border border-dashed p-16"
+				>
+					No history saved
+				</div>
+			{:else}
+				<Button
+					variant="ghost"
+					onclick={() => {
+						$historyStore = [];
+					}}>Clear</Button
+				>
+			{/if}
+		</div>
+		<div class="grid h-fit w-full grid-cols-1 gap-3">
+			<div class="flex flex-row items-center gap-1">
+				<Bookmark />
+				Saved
+			</div>
+			{#each $favoritesStore as item}
+				<div class="flex w-full flex-row gap-3">
+					<Button variant="outline" class="grow py-10 text-xl" href={'/g/' + item}
+						>{getGameById(item)?.name}</Button
+					>
+					<Button
+						variant="ghost"
+						class="aspect-square py-10 text-xl"
+						onclick={() => {
+							$favoritesStore = $favoritesStore.filter((id) => id !== item);
+						}}
+					>
+						<X />
+					</Button>
+				</div>
+			{/each}
+			{#if $favoritesStore.length === 0}
+				<div
+					class="flex flex-row items-center justify-center gap-1 rounded-md border border-dashed p-16"
+				>
+					Nothing saved
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

src/routes/g/columns.ts

@@ -2,6 +2,7 @@ import type { ColumnDef } from '@tanstack/table-core';
 import type { ParsedGmae } from '$lib/gmaes';
 import { renderComponent } from '$lib/components/ui/data-table/index.js';
 import TableActions from './table-actions.svelte';
+import Link from './link.svelte';
 import Tags from './tags.svelte';
 import HeaderButtonSort from './header-button-sort.svelte';
 
@@ -21,6 +22,12 @@ export const columns: ColumnDef<ParsedGmae>[] = [
 				content: 'Name',
 				sort: true
 			}),
+		cell: ({ row }) => {
+			return renderComponent(Link, {
+				children: row.original.name,
+				href: `/games/${row.original.id}`
+			});
+		},
 		// @ts-ignore
 		filterFn: 'fuzzy'
 	},

src/routes/g/link.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	const { children, ...rest } = $props();
+</script>
+
+<a {...rest}>{children}</a>

static/_app/tools/thisistheonlylevel/index.html

@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>This Is The Only Level | 3kh0</title>
+    <link rel="icon" type="image/x-icon" href="thisistheonlylevel.png" />
+    <link rel="shortcut icon" type="image/x-icon" href="thisistheonlylevel.png" />
+  </head>
+  <body>
+    <script src="/js/main.js"></script>
+    <div id="ruffle" width="100%" height="100%"></div>
+    <script src="ruffle.js"></script>
+    <script>
+      window.RufflePlayer = window.RufflePlayer || {};
+      window.addEventListener("load", (event) => {
+        const ruffle = window.RufflePlayer.newest();
+        const player = ruffle.createPlayer();
+        const container = document.getElementById("ruffle");
+        player.id = "player";
+        player.style.width = "100%";
+        player.style.height = "100%";
+        container.appendChild(player);
+        player.load("thisistheonlylevel.swf");
+      });
+    </script>
+  </body>
+</html>