update

_headers

@@ -13,6 +13,9 @@
 	! Content-Security-Policy
 	Content-Security-Policy: base-uri 'self'; font-src 'self'; media-src 'self'; manifest-src 'self'; form-action 'self'; fenced-frame-src 'self'; connect-src 'self' blob:; sandbox allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts; upgrade-insecure-requests
 
+/res/pay.json
+	Link: </res/pay.json>; rel="payment-method-manifest"
+
 /ext/webemu/
 	Content-Type: application/xhtml+xml
 	Cross-Origin-Opener-Policy: same-origin

auth.js

@@ -1,17 +1,21 @@
 "use strict";
 
 (() => {
-	const win = window.opener;
-	const hash = window.location.hash;
+	const { opener, location } = window;
+	const { hash, search } = location;
 
-	if (win != null) {
-		win.postMessage(hash);
-		win.focus();
-
-		window.stop();
-		window.close();
+	if (hash.length > 0) {
+		if (opener != null) {
+			opener.postMessage(hash);
+			opener.focus();
+			window.close();
+		} else {
+			localStorage.setItem("_cre_", hash);
+			location.replace("/");
+		}
 	} else {
-		window.localStorage.setItem("_cre_", hash);
-		window.location.replace("/");
+		const url = new URLSearchParams(search).get("url");
+		if (url != null && url.length > 0)
+			location.replace(url);
 	}
 })();

index.css

@@ -2089,6 +2089,21 @@ div.user[vip="diamond"]::after {
 }
 
 @media all and (max-width: 600px) {
+	#banner {
+		width: 100%;
+		height: unset;
+		aspect-ratio: 4/1;
+	}
+}
+
+@media all and (max-width: 420px) {
+	#game-search, #yt-search {
+		width: calc(100% - 20px);
+		margin: 20px 10px;
+	}
+}
+
+@media all and (max-width: 800px) {
 	#hamb {
 		position: relative;
 		display: block;
@@ -2126,13 +2141,15 @@ div.user[vip="diamond"]::after {
 	}
 
 	#nav-bar {
+		position: absolute;
 		display: none;
 		width: auto;
 		height: auto;
 		top: 50px;
 		right: 5px;
+		border: 1px solid #808080;
 		z-index: 2;
-		background: #c0c0c0;
+		background: #d0d0d0;
 	}
 
 	#nav-bar>button {
@@ -2156,40 +2173,20 @@ div.user[vip="diamond"]::after {
 		top: 0px;
 		transform: rotate(45deg);
 	}
-
-	#banner {
-		width: 100%;
-		height: unset;
-		aspect-ratio: 4/1;
-	}
-}
-
-@media all and (max-width: 420px) {
-	#game-search, #yt-search {
-		width: calc(100% - 20px);
-		margin: 20px 10px;
-	}
 }
 
-@media all and (max-width: 800px) {
+@media all and (max-width: 850px) {
 	#content>div, #bottom-widget, #footer {
 		width: calc(100% - 40px);
 	}
 
-	#discord {
-		display: none;
-	}
-}
-
-@media (max-width: 800px) and (orientation: portrait) {
 	#community-page>div, #cg-frame {
 		width: calc(100% + 10px);
 		margin: 10px -5px;
-		aspect-ratio: 9/18;
 	}
 
-	#search-container, #console-container {
-		aspect-ratio: 9/18;
+	#discord {
+		display: none;
 	}
 }
 
@@ -2199,15 +2196,13 @@ div.user[vip="diamond"]::after {
 	}
 }
 
-@media (max-width: 1300px) and (orientation: landscape) {
-	#frame {
-		width: 90%;
-		height: unset;
-		aspect-ratio: 16/9;
+@media (max-width: 850px) and (orientation: portrait) {
+	#community-page>div, #cg-frame {
+		aspect-ratio: 9/18;
 	}
 
-	#game {
-		width: 90%;
+	#search-container, #console-container {
+		aspect-ratio: 9/18;
 	}
 }
 
@@ -2226,3 +2221,15 @@ div.user[vip="diamond"]::after {
 		aspect-ratio: 9/16;
 	}
 }
+
+@media (max-width: 1300px) and (orientation: landscape) {
+	#frame {
+		width: 90%;
+		height: unset;
+		aspect-ratio: 16/9;
+	}
+
+	#game {
+		width: 90%;
+	}
+}

index.dark.css

@@ -153,3 +153,9 @@ option, optgroup {
 #game {
 	background: #404040;
 }
+
+@media all and (max-width: 800px) {
+	#nav-bar {
+		background: #404040;
+	}
+}

index.html

@@ -560,6 +560,7 @@ <h2>Settings</h2>
 					<label for="mode-select">Mode: </label>
 					<select id="mode-select">
 						<option value="raw-embed">Raw Embed</option>
+						<option value="prq-embed">PRQ Embed</option>
 						<option value="puppeteer">Puppeteer</option>
 					</select>
 				</div>

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "whitespider",
 	"name": "WhiteSpider",
-	"version": "4.6.6",
+	"version": "4.6.7",
 	"short_name": "WhiteSpider",
 	"categories": ["games"],
 	"description": "Play 2000+ free online classic, HTML5, DOS, Flash, games at WhiteSpider!",

res/pay.json

@@ -0,0 +1,8 @@
+{
+	"default_applications": [
+		"/manifest.json"
+	],
+	"supported_origins": [
+		"https://*"
+	]
+}

sw.js

@@ -76,8 +76,28 @@
 		}
 	}
 
+	async function handlePaymentRequest(e) {
+		let resolve, reject;
+		e.respondWith(new Promise((res, rej) => {
+			resolve = res;
+			reject = rej;
+		}));
+
+		/**
+		 * @type {WindowClient | null}
+		 */
+		const client = await e.openWindow("/auth.html?url=" + encodeURIComponent(e.methodData[0].data[0]));
+		if (client == null || client.type !== "window") {
+			reject("Error: Failed to open payment window");
+			return;
+		}
+		client.postMessage("dummy");
+	}
+
 	self.addEventListener("fetch", (e) => e.respondWith(handleFetch(e)), { passive: true });
 	self.addEventListener("message", (e) => e.waitUntil(handleMessage(e)), { passive: true });
 	self.addEventListener("install", (e) => e.waitUntil(handleInstall(e)), { passive: true });
 	self.addEventListener("activate", (e) => e.waitUntil(handleActivate(e)), { passive: true });
-})(self);
+	self.addEventListener("canmakepayment", (e) => e.respondWith(Promise.resolve(true)), { passive: true });
+	self.addEventListener("paymentrequest", (e) => e.waitUntil(handlePaymentRequest(e)), { passive: true });
+})(self);