Merge pull request #52 from hackclub/staging

ArcaEge · web-flow · commit 8f1654c3bf90 · 2025-12-22T19:02:08.000+03:00
Ability to disable model previews
diff --git a/src/lib/components/Spinny3DPreview.svelte b/src/lib/components/Spinny3DPreview.svelte
@@ -4,7 +4,13 @@
 	import { onDestroy, onMount } from 'svelte';
 	import fileSizeFromUrl from '$lib/utils';
 
-	let { identifier, modelUrl, lineColor = 0x94857d, sizeCutoff = 2.5 * 1024 * 1024 } = $props();
+	let {
+		identifier,
+		modelUrl,
+		lineColor = 0x94857d,
+		sizeCutoff = 2.5 * 1024 * 1024,
+		respectLocalStorage = true
+	} = $props();
 
 	let loadedPercent: number = $state(0);
 	let showLoadButton: boolean = $state(false);
@@ -380,7 +386,11 @@
 		fileSizeFromUrl(modelUrl).then((size) => {
 			fileSize = size;
 
-			if (size <= sizeCutoff) {
+			if (
+				size <= sizeCutoff &&
+				((respectLocalStorage && window.localStorage.getItem('enableModelRendering') !== 'false') ||
+					!respectLocalStorage)
+			) {
 				loadModel();
 			} else {
 				showLoadButton = true;
@@ -435,7 +445,9 @@
 						loadModel();
 					}}
 				>
-					Load ({Math.round((fileSize / 1024 / 1024) * 10) / 10} MiB)
+					Load ({fileSize >= 1000 * 1000
+						? `${Math.round((fileSize / 1000 / 1000) * 10) / 10} MB`
+						: `${Math.round((fileSize / 1000) * 10) / 10} kB`})
 				</button>
 			{:else}
 				<p>Loading... {Math.round(loadedPercent)}%</p>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -295,6 +295,7 @@
 								identifier="keyring"
 								modelUrl={keyringModel}
 								sizeCutoff={8 * 1024 * 1024}
+								respectLocalStorage={false}
 							/>
 						</div>
 						<div class="text-center">
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -1,8 +1,19 @@
 <script lang="ts">
 	import Head from '$lib/components/Head.svelte';
 	import ChecklistItem from '$lib/components/ChecklistItem.svelte';
+	import { onMount } from 'svelte';
 
 	let { data } = $props();
+
+	let enableModelRendering = $state(true);
+
+	onMount(() => {
+		enableModelRendering = window.localStorage.getItem('enableModelRendering') !== 'false';
+	});
+
+	$effect(() => {
+		window.localStorage.setItem('enableModelRendering', enableModelRendering.toString());
+	});
 </script>
 
 <Head title="Dashboard" />
@@ -12,8 +23,16 @@
 <div class="themed-box flex flex-col gap-0.5 p-3">
 	<h2 class="text-xl font-bold">Checklist</h2>
 	<div class="flex flex-col gap-0.5">
-		<ChecklistItem completed={data.projectCount > 0}><a href="/dashboard/projects/create" class="underline">Create</a> your first project</ChecklistItem>
+		<ChecklistItem completed={data.projectCount > 0}
+			><a href="/dashboard/projects/create" class="underline">Create</a> your first project</ChecklistItem
+		>
 		<ChecklistItem completed={data.devlogCount > 0}>Make your first journal entry</ChecklistItem>
 		<ChecklistItem completed={data.shipCount > 0}>Ship your project</ChecklistItem>
 	</div>
 </div>
+<div class="themed-box mt-3 flex flex-col gap-0.5 p-3">
+	<label class="flex flex-row items-center gap-1">
+		<input type="checkbox" class="checkbox" bind:checked={enableModelRendering} />
+		<span>Enable rendering 3D models</span>
+	</label>
+</div>
diff --git a/src/routes/dashboard/projects/[id]/ship/+page.svelte b/src/routes/dashboard/projects/[id]/ship/+page.svelte
@@ -69,7 +69,9 @@
 			{#if form?.invalid_printables_url}
 				<p class="text-sm">Invalid Printables URL</p>
 			{:else if form?.invalid_license}
-				<p class="text-sm">License not allowed, see below! You don't want Orpheus chasing you, do you?</p>
+				<p class="text-sm">
+					License not allowed, see below! You don't want Orpheus chasing you, do you?
+				</p>
 			{/if}
 		</div>
 	</div>
@@ -121,7 +123,8 @@
 						</p>
 					{:else}
 						<p class="text-sm opacity-50">
-							e.g. orpheus.f3d, monkey.blend (must be under {MAX_UPLOAD_SIZE / 1024 / 1024} MiB)
+							e.g. orpheus.f3d, monkey.blend (must be under {MAX_UPLOAD_SIZE / 1024 / 1024} MiB). Make
+							sure to use a format that preserves timeline if your editor supports that!
 						</p>
 					{/if}
 				</div>
@@ -156,9 +159,7 @@
 		<ChecklistItem completed={data.project.timeSpent >= 120}
 			>At least 120 minutes spent</ChecklistItem
 		>
-		<ChecklistItem completed={data.project.devlogCount >= 2}
-			>At least 2 journal logs</ChecklistItem
-		>
+		<ChecklistItem completed={data.project.devlogCount >= 2}>At least 2 journal logs</ChecklistItem>
 		<ChecklistItem completed={data.project.description != ''}>
 			Project has a description
 		</ChecklistItem>
