Mobile Player (#1457)

* Calculate vh correctly for mobile editor

* feat: Add Reset & Full screen buttons.

* fix: Remove preload

* fix: Add Webkit Methods

* chore: Add fullscreen element on webkit

* feat: Vendor agnostic full screen & margin

* fix: margins

* feat: spacing

src/components/big-interactive-pages/mobile-player.module.css

@@ -4,8 +4,8 @@
 	left: 0;
 	top: 0;
 	transform-origin: left top;
-	width: 100vw;
-	height: 100vh;
+	width: calc(var(--vw, 0.935vw) * 100);
+	height: calc(var(--vh, 0.935vh) * 100);
 	background: url('/pcb.svg'), var(--accent-dark);
 	background-position: center center;
 	background-size: cover;
@@ -16,11 +16,14 @@
 @media (orientation: portrait) {
 	.root {
 		transform: rotate(-90deg);
-		width: 100vh;
-		height: 100vw;
+		height: calc(var(--vw, 0.935vw) * 100);
 		overflow-x: hidden;
 		top: 100%;
 		left: 0;
+
+		/* Custom vh implementation */
+		/* Fallback value is 93.5vh */
+		width: calc(var(--vh, 0.935vh) * 100);
 	}
 }
 
@@ -29,6 +32,7 @@
 	color: #ffffff;
 	user-select: none;
 	padding-top: 8px;
+	margin-bottom: 8px;
 }
 
 .meta .author {
@@ -49,12 +53,12 @@
 }
 
 .screenContainer {
-	height: 100%;
+	height: 97.5%;
 }
 
 .screen {
 	display: block;
-	height: 100%;
+	height: 95%;
 	width: auto;
 	margin: 0 auto;
 	user-select: none;
@@ -100,4 +104,20 @@
 .w { top: calc(50% - 75px);	left: calc(5% + 25px); }
 .a { top: calc(50% - 25px);	left: calc(5% - 25px); }
 .s { top: calc(50% + 25px);	left: calc(5% + 25px); }
-.d { top: calc(50% - 25px);	left: calc(5% + 75px); }
+.d { top: calc(50% - 25px);	left: calc(5% + 75px); }
+
+.actionItems {
+	justify-content: space-between;
+	margin: 0px 25px 0px 25px;
+	display: flex;
+}
+
+.action {
+	color: var(--fg-muted-on-accent);
+	background-color: var(--accent);
+	padding: 10px 20px 10px 20px;
+	margin:  0px 8px 0px 8px;
+	border-radius: 8px;
+	font-weight: 600;
+	user-select: none;
+}

src/components/big-interactive-pages/mobile-player.tsx

@@ -11,12 +11,16 @@ interface MobilePlayerProps {
 
 export default function MobilePlayer(props: MobilePlayerProps) {
 	const screen = useRef<HTMLCanvasElement>(null)
-	
-	useEffect(() => {
-		const res = runGame(props.code, screen.current!, (_) => {})
+
+	const run = () => {
+		const res = runGame(props.code, screen.current!, (_) => { })
 		if (res.error) console.error(res.error.raw)
 		return res.cleanup
-	}, [ props.code ])
+	}
+
+	useEffect(() => {
+		return run()
+	}, [props.code])
 
 	const pressKey = (key: string) => {
 		screen.current!.dispatchEvent(new KeyboardEvent('keydown', { key }))
@@ -34,15 +38,20 @@ export default function MobilePlayer(props: MobilePlayerProps) {
 					</span>
 				) : null}
 			</div>
-			<div class={styles.disclaimer}>This is a playable preview. The full editor is not yet supported on mobile.</div>
 
-			<div class={styles.player}>
+			<div class={styles.actionItems}>
+				<a href="#fullscreen" class={styles.action} id="toggle-fullscreen">Fullscreen</a>
+				<div class={styles.disclaimer}>This is a playable preview. </div>
+				<a href="#reset" class={styles.action} onClick={run}>Reset</a>
+			</div>
+
+			<div class={styles.player} id="player">
 				<div class={styles.screenContainer}>
 					<canvas class={styles.screen} ref={screen} width='1000' height='800' />
 				</div>
 
 
-				{[ 'i', 'j', 'k', 'l', 'w', 'a', 's', 'd' ].map(key => (
+				{['i', 'j', 'k', 'l', 'w', 'a', 's', 'd'].map(key => (
 					<div
 						role='button'
 						class={`${styles.key} ${styles[key]} ${keyTouches.value[key]! > 0 ? styles.pressing : ''}`}

src/pages/gallery/[filename].astro

@@ -78,5 +78,62 @@ const isMobile = mobileUserAgent(Astro.request.headers.get('user-agent') ?? '')
 				}}
 			/>
 		)}
+
+    <script is:inline>
+        // There is no clear guidance there when it comes to handling device and browser-specific differentiations on mobile browsers,as such we need to do a custom implementation of vh
+        const calculateCSS = () => {
+            document.documentElement.style.setProperty(
+                "--vh",
+                `${window.innerHeight * 0.01}px`
+            );
+            document.documentElement.style.setProperty(
+                "--vw",
+                `${window.innerWidth * 0.01}px`
+            );
+        };
+
+        // Vendor Agnostic Fullscreen Functions
+        const requestFullscreen = (element) => {
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            }
+        };
+
+        const exitFullscreen = () => {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+        };
+
+        const fullscreenElement = () => {
+            return (
+                document.fullscreenElement ||
+                document.mozFullScreenElemen ||
+                document.webkitFullscreenElement
+            );
+        };
+
+        const toggleFullscreen = async () => {
+            if (fullscreenElement()) {
+                exitFullscreen();
+            } else {
+                requestFullscreen(document.documentElement);
+            }
+        };
+
+        calculateCSS();
+        window.addEventListener("resize", calculateCSS);
+        document
+            .getElementById("toggle-fullscreen")
+            ?.addEventListener("click", toggleFullscreen);
+    </script>
 	</body>
 </html>