From 91201830f813b862d82fdc2fb6152f177ae4a59e Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 30 Nov 2022 19:46:04 -0800
Subject: [PATCH] You can now suppress warnings with suppressWarnings. This
 should be used for any warning that may appear in the future. Also, clicking
 the button to proceed in the warning notice appends suppressWarnings to the
 URL parameters.

---
 README.md    |  1 +
 js/config.js | 15 +++++++++------
 js/main.js   |  9 ++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 332500f..cee5084 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,7 @@ Now you know link fu. Here's a list of customization options:
 - `url` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
 - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video.
 - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60.
+- `suppressWarnings` - if set to "true", this suppresses any warnings that would otherwise appear— when viewing the project on a device with no GPU, for example.
 
 ## Troubleshooting
 
diff --git a/js/config.js b/js/config.js
index 3fd53f4..67094c7 100644
--- a/js/config.js
+++ b/js/config.js
@@ -121,6 +121,7 @@ const defaults = {
 	resolution: 0.75, // An overall scale multiplier
 	useHalfFloat: false,
 	renderer: "regl", // The preferred web graphics API
+	suppressWarnings: false, // Whether to show warnings to visitors on load
 	isometric: false,
 	useHoloplay: false,
 	loops: false,
@@ -401,6 +402,7 @@ versions["2021"] = versions.resurrections;
 
 const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f));
 const nullNaN = (f) => (isNaN(f) ? null : f);
+const isTrue = (s) => s.toLowerCase().includes("true");
 
 const parseColor = (isHSL) => (s) => ({
 	space: isHSL ? "hsl" : "rgb",
@@ -440,7 +442,7 @@ const paramMapping = {
 	version: { key: "version", parser: (s) => s },
 	font: { key: "font", parser: (s) => s },
 	effect: { key: "effect", parser: (s) => s },
-	camera: { key: "useCamera", parser: (s) => s.toLowerCase().includes("true") },
+	camera: { key: "useCamera", parser: isTrue },
 	width: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) },
 	numColumns: { key: "numColumns", parser: (s) => nullNaN(parseInt(s)) },
 	density: { key: "density", parser: (s) => nullNaN(range(parseFloat(s), 0)) },
@@ -498,13 +500,14 @@ const paramMapping = {
 		parser: (s) => nullNaN(range(parseFloat(s), 0, Infinity)),
 	},
 
-	volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") },
-	loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") },
+	volumetric: { key: "volumetric", parser: isTrue },
+	loops: { key: "loops", parser: isTrue },
 	fps: { key: "fps", parser: (s) => nullNaN(range(parseFloat(s), 0, 60)) },
-	skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") },
+	skipIntro: { key: "skipIntro", parser: isTrue },
 	renderer: { key: "renderer", parser: (s) => s },
-	once: { key: "once", parser: (s) => s.toLowerCase().includes("true") },
-	isometric: { key: "isometric", parser: (s) => s.toLowerCase().includes("true") },
+	suppressWarnings: { key: "suppressWarnings", parser: isTrue },
+	once: { key: "once", parser: isTrue },
+	isometric: { key: "isometric", parser: isTrue },
 };
 
 paramMapping.paletteRGB = paramMapping.palette;
diff --git a/js/main.js b/js/main.js
index 61d454a..3f6809b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -18,12 +18,12 @@ const isRunningSwiftShader = () => {
 };
 
 document.body.onload = async () => {
-	const urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries());
-	const config = makeConfig(urlParams);
+	const urlParams = new URLSearchParams(window.location.search);
+	const config = makeConfig(Object.fromEntries(urlParams.entries()));
 	const useWebGPU = (await supportsWebGPU()) && ["webgpu"].includes(config.renderer?.toLowerCase());
 	const solution = import(`./${useWebGPU ? "webgpu" : "regl"}/main.js`);
 
-	if (isRunningSwiftShader()) {
+	if (isRunningSwiftShader() && !config.suppressWarnings) {
 		const notice = document.createElement("notice");
 		notice.innerHTML = `<div class="notice">
 		<p>Wake up, Neo... you've got hardware acceleration disabled.</p>
@@ -34,6 +34,9 @@ document.body.onload = async () => {
 		canvas.style.display = "none";
 		document.body.appendChild(notice);
 		document.querySelector(".blue.pill").addEventListener("click", async () => {
+			config.suppressWarnings = true;
+			urlParams.set("suppressWarnings", true);
+			history.replaceState({}, "", "?" + unescape(urlParams.toString()));
 			(await solution).default(canvas, config);
 			canvas.style.display = "unset";
 			document.body.removeChild(notice);