From 9b41276f9794acf0f7ba0c57eeb4ed426ca85699 Mon Sep 17 00:00:00 2001
From: Sappharad <Sappharad@users.noreply.github.com>
Date: Mon, 29 Jan 2024 21:47:54 -0600
Subject: [PATCH] Added workaround for no sound on iOS (web)

- iOS gets a "Tap to start" overlay which must be tapped for sound to work. This is because starting in iOS 16 tapping the canvas no longer counts as a page interaction worthy of enabling sound.
---
 .../build/_emscripten/dist/sonic3air_web.html | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/Oxygen/sonic3air/build/_emscripten/dist/sonic3air_web.html b/Oxygen/sonic3air/build/_emscripten/dist/sonic3air_web.html
index 2c1f99a69..96e0b04f2 100644
--- a/Oxygen/sonic3air/build/_emscripten/dist/sonic3air_web.html
+++ b/Oxygen/sonic3air/build/_emscripten/dist/sonic3air_web.html
@@ -63,6 +63,19 @@
 #root{
 	color: black;
 }
+#ios_workaround{
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	text-align: center;
+	padding-top: 40vh;
+	font-size: 2em;
+	user-select: none;
+	cursor: default;
+	background-color: rgba(0,0,0,50%);
+}
 </style>
 <script src="browserfs.min.js"></script>
 <script>
@@ -77,6 +90,36 @@
 	gameCanvas.style.width = "min(100vw, calc(100vh * 16 / 9))";
 	gameCanvas.style.height = "min(100vh, calc(100vw * 9 / 16))";
 	gameCanvas.style.marginTop = "max(0vh, calc(50vh - (100vw * 9 / 16 / 2)))";
+	
+	if(isRunningOniOS()){
+		let iosoverlay = document.getElementById('ios_workaround');
+		if(iosoverlay){
+			iosoverlay.classList.remove('hidden');
+		}
+	}
+}
+
+function isRunningOniOS() {
+  return [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod'
+  ].includes(navigator.platform)
+  // iPad on iOS 13 detection
+  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}
+
+function hideIOSoverlay(){
+	//iOS prevents websites from playing sound unless the user interacts with the web page first.
+	//Prior to iOS 16, tapping the canvas used to be enough to enable sound but now they need to tap a normal page element first.
+	//The full screen overlay on iOS is a workaround, once tapped sound will enable and we can get rid of the overlay.
+	let iosoverlay = document.getElementById('ios_workaround');
+	if(iosoverlay){
+		document.body.removeChild(iosoverlay);
+	}
 }
 
 function onPageLoaded(){
@@ -99,6 +142,10 @@
 	loader.setAttribute('src', 'loader.js');
 	document.body.appendChild(loader);
 	Module['calledRun'] = true; //We got here from pre-run, so loader needs to know that.
+	
+	if(isRunningOniOS() == false){
+		hideIOSoverlay();
+	}
 }
 
 function onGameExit(){
@@ -333,6 +380,9 @@
 <div id="gameView" class="emscripten_border">
 	<canvas class="emscripten" id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
 </div>
+<div id="ios_workaround" class="hidden" onclick="hideIOSoverlay()">
+	Tap to Start
+</div>
 <script>
 var statusElement = document.getElementById("status"),
     progressElement = document.getElementById("progress"),