Add first-time setup modal for Windows/Linux

src/components/Home/DownloadButton.astro

@@ -13,6 +13,7 @@ const defaultDownload = downloads[0];
 				href={defaultDownload.href}
 				class="btn btn-primary btn-large"
 				data-download-button
+				data-download-platform={defaultDownload.platform}
 				aria-label={`Download TenWholeYears for ${defaultDownload.label}`}
 			>
 				Download for {defaultDownload.label} ({defaultDownload.version})
@@ -74,6 +75,7 @@ const defaultDownload = downloads[0];
 
 		$downloadButton
 			.attr("href", download.href)
+			.attr("data-download-platform", download.platform)
 			.attr("aria-label", `Download TenWholeYears for ${download.label}`)
 			.text(`Download for ${download.label} (${download.version})`);
 	});

src/layouts/Layout.astro

@@ -20,6 +20,90 @@ import Footer from "$components/Footer.astro";
         <script src="/js/jquery-4.0.0.min.js" is:inline></script>
         <slot />
         <Footer />
+        <div
+            id="downloadSetupModal"
+            class="modal hide fade"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="downloadSetupModalTitle"
+            aria-hidden="true"
+        >
+            <div class="modal-header">
+                <button
+                    type="button"
+                    class="close"
+                    data-dismiss="modal"
+                    aria-hidden="true"
+                >
+                    &times;
+                </button>
+                <h4 id="downloadSetupModalTitle">First-time setup required</h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                    Before running TenWholeYears on Windows or Linux, install <b>Codename Gordon</b> through Steam first.
+                </p>
+                <p>
+                    Open <a href="steam://install/92">steam://install/92</a>,
+                    accept the Steam prompt, and let it finish installing before
+                    launching TenWholeYears.
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn" data-dismiss="modal" aria-hidden="true">
+                    Hold on
+                </button>
+                <a href="#" class="btn btn-primary" data-setup-confirm>
+                    Okay, let me download!
+                </a>
+            </div>
+        </div>
         <script src="/js/bootstrap.min.js" is:inline></script>
+        <script is:inline>
+            $(() => {
+                const storageKey = "tenwholeyears.setupAcknowledged.v1";
+                const gatedPlatforms = ["windows", "linux"];
+                const $modal = $("#downloadSetupModal");
+                const $confirmButton = $modal.find("[data-setup-confirm]");
+                let pendingDownloadHref = "";
+
+                const hasAcknowledgedSetup = () => {
+                    try {
+                        return localStorage.getItem(storageKey) === "true";
+                    } catch {
+                        return false;
+                    }
+                };
+
+                const acknowledgeSetup = () => {
+                    try {
+                        localStorage.setItem(storageKey, "true");
+                    } catch {
+                        return;
+                    }
+                };
+
+                $(document).on("click", "[data-download-platform]", (event) => {
+                    const link = event.currentTarget;
+                    const platform = $(link).attr("data-download-platform");
+
+                    if ($.inArray(platform, gatedPlatforms) === -1) return;
+                    if (hasAcknowledgedSetup()) return;
+
+                    event.preventDefault();
+                    pendingDownloadHref = link.href;
+                    $confirmButton.attr("href", pendingDownloadHref);
+                    $modal.modal("show");
+                });
+
+                $confirmButton.on("click", (event) => {
+                    if (!pendingDownloadHref) return;
+
+                    event.preventDefault();
+                    acknowledgeSetup();
+                    window.location.href = pendingDownloadHref;
+                });
+            });
+        </script>
     </body>
 </html>

src/pages/downloads.astro

@@ -47,6 +47,7 @@ const patchNotes = await api.builds.v1.getPatchNotes();
 									<a
 										href={download.href}
 										class="btn btn-primary"
+										data-download-platform={download.platform}
 										aria-label={`Download for ${download.label}`}
 									>
 										Download