initial version of intro dialog

autumn-mck · autumn-mck · commit 7bf5cbb5ee8a · 2025-08-17T11:03:48.000+02:00
diff --git a/index.html b/index.html
@@ -11,10 +11,30 @@
 	</head>
 
 	<body>
+		<dialog id="intro-dialog">
+			<img src="title.png" alt="Datapack Toolkit" />
+			<p>An easy-to-use Minecraft worldgen datapack configuration tool!</p>
+			<p>Early in development, currently supporting:</p>
+
+			<ul>
+				<li>Custom datapack configuration options</li>
+			</ul>
+			<p>Planned to support:</p>
+			<ul>
+				<li>Picking biome definition providers</li>
+				<li>Editing structure set placement</li>
+			</ul>
+			<div class="button-container">
+				<button type="button">Ok! Let me configure</button>
+			</div>
+			</div>
+		</dialog>
+
 		<div class="header">
 			<div>
 				<p>Datapack Toolkit (indev)</p>
 			</div>
+
 			<div class="header-middle">
 				<p>
 					<a id="config-screen-select">
@@ -28,6 +48,7 @@
 					</a>
 				</p>
 			</div>
+
 			<div>
 				<p>
 					<a href="https://github.com/everloste/DatapackToolkit/wiki">
@@ -62,10 +83,7 @@
 				</p>
 			</div>
 		</div>
-		<!-- <p>
-			Datapack Toolkit is a tool that streamlines custom worldgen configuration.
-			<a href="https://github.com/everloste/DatapackToolkit/wiki">Make your datapack compatible.</a>
-		</p> -->
+
 		<div class="work_area">
 			<!---------- LEFT COLUMN ---------->
 			<div id="left-col">
diff --git a/public/title.png b/public/title.png
diff --git a/src/main.ts b/src/main.ts
@@ -3,6 +3,7 @@ import { DatapackModifierInstance } from "./datapack_changes";
 import { type DatapackStoreEvents, datapackStore } from "./datapackStore";
 import { getExportSettings } from "./page_interactions/settings";
 import { getStructureSets } from "./structureSet";
+import { showIntroIfNotShown } from "./page_interactions/introDialog";
 
 const fileUploadElement = document.getElementById("input")!;
 fileUploadElement.addEventListener("change", onFileUploaded, { passive: true });
@@ -93,7 +94,6 @@ function sanitizeHtml(unsafe: string): string {
 	return div.innerHTML;
 }
 
-
 ////////// EXPORT SETTINGS //////////
 const collapsibles = document.getElementsByClassName("collapsible-button");
 
@@ -103,7 +103,8 @@ for (const collapsible of collapsibles) {
 
 		var content = collapsible.nextElementSibling;
 		if (content != null) {
-			if ((content as HTMLDivElement).style.display === "block") (content as HTMLDivElement).style.display = "none";
+			if ((content as HTMLDivElement).style.display === "block")
+				(content as HTMLDivElement).style.display = "none";
 			else (content as HTMLDivElement).style.display = "block";
 		}
 	});
@@ -123,7 +124,9 @@ function exportButtonClicked() {
 		datapack.instancedConfig?.apply();
 	});
 
-	DatapackModifierInstance.applyChanges(datapackStore.getAll(), export_settings).then(
-		() => {document.getElementById("progress-indicator")!.hidden = true;}
-	);
-}
+	DatapackModifierInstance.applyChanges(datapackStore.getAll(), export_settings).then(() => {
+		document.getElementById("progress-indicator")!.hidden = true;
+	});
+}
+
+showIntroIfNotShown();
diff --git a/src/page_interactions/introDialog.ts b/src/page_interactions/introDialog.ts
@@ -0,0 +1,20 @@
+export function showIntroIfNotShown() {
+	const currentIntroVersion = 0;
+
+	const introDialog = document.getElementById("intro-dialog") as HTMLDialogElement;
+	const closeIntroButton = introDialog.querySelector("button") as HTMLButtonElement;
+
+	const lastShownVersion = Number.parseInt(localStorage.getItem("dialogVersion") || "-1");
+
+	if (lastShownVersion >= currentIntroVersion) {
+		console.info(`Intro dialog already shown (version ${lastShownVersion}), skipping.`);
+		return;
+	}
+
+	closeIntroButton.addEventListener("click", () => {
+		localStorage.setItem("dialogVersion", currentIntroVersion.toString());
+		introDialog.close();
+	});
+
+	introDialog.showModal();
+}
diff --git a/style.css b/style.css
@@ -60,8 +60,7 @@ button,
 	color: inherit;
 	background-color: var(--background-above);
 
-	padding-bottom: 0.5em;
-	padding-top: 0.5em;
+	padding: 0.5rem 1rem;
 
 	transition: all var(--ease-out-quint) 0.25s;
 
@@ -80,6 +79,34 @@ button,
 	}
 }
 
+dialog {
+	color: inherit;
+	background: var(--background);
+	border: var(--border-width) solid var(--background-above);
+
+	max-width: 30rem;
+
+	h1 {
+		margin: 0;
+	}
+
+	img {
+		width: 100%;
+		image-rendering: pixelated;
+		margin: 0 auto;
+	}
+
+	.button-container {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	&::backdrop {
+		backdrop-filter: blur(5px) brightness(0.7);
+	}
+}
+
 input[type="range"] {
 	background: transparent;
 }
