TETR.IO on Safari/WebKit

index.js

// if we don't use setTimeout, safari will crash. i don't know why.
setTimeout(() => {
	document.body.innerHTML = `<iframe id="frame" src="/" style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; border: none;">`;
	document.head.innerHTML = `<title>TETR.IO</title>`;
	document.body.style.background = "black";
	const script = `
	(() => {
		let oldXMLHttpRequest = window.XMLHttpRequest
		let oldAudio = window.Audio;
		const nothing = "https://tetr.io/res/bgm/kuchu-toshi.mp3?blank";
		window.XMLHttpRequest = function (...args) {
			const thisXMLHttpRequest = new oldXMLHttpRequest(...args)
			const oldOpen = thisXMLHttpRequest.open.bind(thisXMLHttpRequest)
			thisXMLHttpRequest.open = (...args) => {
				if (args[1]?.includes?.(".ogg") === true) {
					args[1] = nothing
				}
				return oldOpen(...args)
			}
			return thisXMLHttpRequest
		}
		window.Audio = function (...args) {
			const thisAudio = new oldAudio(...args);
			const proxy = new Proxy(thisAudio, {
				get(target, prop, reciver) {
					if (prop === "src") {
						return nothing;
					}
					const toReturn = target[prop];
					if (typeof toReturn === "function") {
						return toReturn.bind(thisAudio);
					} else {
						return toReturn;
					}
				},
				set(obj, prop, value) {
					if (prop === "src" && value?.includes?.(".ogg")) {
						obj[prop] = nothing;
						obj.volume = 0;
					} else if (prop === "volume") {
						if (obj.src === nothing) {
							obj.volume = 0;
						} else {
							obj[prop] = value;
						}
					} else {
						obj[prop] = value;
					}
					return true;
				},
			});
			thisAudio.canPlayType = (...args) => "maybe";
			return proxy;
		};
		console.log("Done!");
	})();	
`;
	/**
	 * @type {HTMLIFrameElement}
	 */
	const iframe = document.getElementById("frame");
	const scriptElement = document.createElement("script")
	scriptElement.innerHTML = script
	iframe.contentWindow.document.head.appendChild(scriptElement)

	// for if you're using a shortcut
	if (typeof completion === "function") {
		completion()
	}
});

index.md

TETR.IO on Safari/WebKit

Update: TETR.IO can run on Safai/WebKit without this script.

(Tested on iOS 15.3.1)

Note: Depending how your browser loads this, sound effects will either be turned off or replaced with the entire main menu song. Make sure your volume is turned down.

With shortcuts

Setup

1. Go into the shortcuts app.
2. Create a shortcut.
3. Name your shortcut something.
4. Tap on the settings icon at the top right.
5. Enable "Show in Share Sheet."
6. Hit done.
7. Add the "Run Javascript on Web Page" action.
8. Copy the above code, and paste it into the action.

Running

1. Open Safari. (From what I've seen, it has to be Safari)
2. Naviagate to a 404 page on TETR.IO, like https://tetr.io/404.
3. Hit the share icon.
4. Scroll down until you find your shortcut.
5. Run it.
6. Close out of the share menu.
7. If TETR.IO gets stuck on loading SFX, run the shortcut again.

With Developer Tools

1. Naviagate to a 404 page on TETR.IO, like https://tetr.io/404.

2. Open the console.

3. Run the above code.

4. If TETR.IO checks your browser:

   

   The code won't run correctly, so run the code again.

This script is very interesting!

i wonder if you can make it to work with ogv.js so that ogg can be loaded on tetrio?, just like what some people in tetrio issues #425 suggest