Mobile support for website (#607)

Adds mobile control scheme that sort of works. I feel like it doesn't quite work. Also, frame rate problems on mobile. - [ ] Changelog updated / no changelog update needed
2024-12-23 00:01:34 +11:00 · 2024-04-05 20:24:29 +01:00 · 2024-04-05 20:24:29 +01:00 · c433dbefdc
parent 7893437109 34c66cc61e
commit c433dbefdc
10 changed files with 247 additions and 8 deletions
--- a/website/app/src/App.tsx
+++ b/website/app/src/App.tsx
@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Mgba, MgbaHandle } from "./mgba";
 import { BindingsControl, DefaultBindingsSet, Bindings } from "./bindings";
 import { styled } from "styled-components";
@ -48,7 +48,7 @@ const StartButtonWrapper = styled.button`
 function App() {
  const [{ volume, bindings }, setState] = useLocalStorage(
    { volume: 1.0, bindings: DefaultBindingsSet() },
-    "agbrswebplayer"
+    "agbrswebplayer",
  );

  const setVolume = (newVolume: number) =>
@ -66,6 +66,30 @@ function App() {
    setShowBindings(!showBindings);
  });

+  useEffect(() => {
+    const buttonPress = (event: MessageEvent) => {
+      const data = event.data;
+
+      const { isPressed, button, reset } = data;
+
+      if (isPressed === true) {
+        mgbaRef.current?.buttonPress(button);
+      } else if (isPressed === false) {
+        mgbaRef.current?.buttonRelease(button);
+      }
+
+      if (reset) {
+        mgbaRef.current?.restart();
+      }
+    };
+
+    window.addEventListener("message", buttonPress);
+
+    return () => {
+      window.removeEventListener("message", buttonPress);
+    };
+  }, []);
+
  useAvoidItchIoScrolling();

  const gameUrl = window.location.hash.slice(1);
--- a/website/app/src/mgba.tsx
+++ b/website/app/src/mgba.tsx
@ -6,7 +6,7 @@ import {
  useState,
 } from "react";
 import mGBA from "./vendor/mgba";
-import { KeyBindings } from "./bindings";
+import { GbaKey, KeyBindings } from "./bindings";
 import { styled } from "styled-components";

 type Module = any;
@ -36,6 +36,8 @@ const MgbaCanvas = styled.canvas`

 export interface MgbaHandle {
  restart: () => void;
+  buttonPress: (key: GbaKey) => void;
+  buttonRelease: (key: GbaKey) => void;
 }

 export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
@ -70,7 +72,6 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
        if (state !== MgbaState.Uninitialised) return;

        setState(MgbaState.Initialising);
-
        mgbaModule.current = {
          canvas: canvas.current,
        };
@ -124,9 +125,11 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
    useImperativeHandle(ref, () => {
      return {
        restart: () => mgbaModule.current.quickReload(),
+        buttonPress: (key: GbaKey) => mgbaModule.current.buttonPress(key),
+        buttonRelease: (key: GbaKey) => mgbaModule.current.buttonUnpress(key),
      };
    });

    return <MgbaCanvas ref={canvas} />;
-  }
+  },
 );
--- a/website/site/assets/L.png
+++ b/website/site/assets/L.png
--- a/website/site/assets/R.png
+++ b/website/site/assets/R.png
--- a/website/site/assets/SELECT.png
+++ b/website/site/assets/SELECT.png
--- a/website/site/assets/START.png
+++ b/website/site/assets/START.png
--- a/website/site/assets/ab.png
+++ b/website/site/assets/ab.png
--- a/website/site/assets/dpad.png
+++ b/website/site/assets/dpad.png
--- a/website/site/crash/index.html
+++ b/website/site/crash/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>agbrs crash backtrace</title>
    <style>
      body {
--- a/website/site/index.html
+++ b/website/site/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>agb - a rust framework for making Game Boy Advance games</title>
    <style>
      *,
@ -19,11 +20,13 @@
        flex-direction: column;
        margin: 0;
      }
+
      h1,
      h2,
      h3 {
        line-height: 1.2;
      }
+
      .gameDisplay > div {
        display: flex;
        justify-content: center;
@ -31,9 +34,10 @@
      }

      .gameDisplay {
-        height: calc(min(480px, 40vh, calc(100vw / 3)));
+        height: clamp(480px, 40vh, calc(100vw / 3));
        max-width: 100vw;
        margin-top: 20px;
+        overflow: hidden;
      }

      .gameDisplay .imageWrapper {
@ -54,7 +58,7 @@
      }

      header,
-      .help {
+      .desktopHelp {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
@ -88,8 +92,50 @@
      .links > a:hover {
        border: solid black 2px;
      }
+
+      .mobileControls {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        margin-bottom: 40px;
+      }
+
+      .mobileControls img {
+        image-rendering: pixelated;
+        height: 100%;
+      }
+
+      .mobileControlsRow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 40px;
+      }
+
+      @media (max-width: 800px) {
+        .desktopHelp {
+          display: none;
+        }
+      }
+
+      @media (min-width: 800px) {
+        .mobileControls {
+          display: none;
+        }
+      }
+
+      .mobileControlsBig {
+        height: calc(32px * 6);
+      }
+
+      .mobileControlsSmall {
+        height: calc(32px * 3);
+      }
    </style>
  </head>
+
  <body>
    <header>
      <h1>agb - a rust framework for making Game Boy Advance games</h1>
@ -99,13 +145,31 @@
        <div>
          <div class="imageWrapper"><img src="assets/left.png" /></div>
          <iframe
+            id="gameFrame"
            onload="this.contentWindow.focus()"
            src="mgba/index.html#/assets/combo.gba"
          ></iframe>
          <div class="imageWrapper"><img src="assets/right.png" /></div>
        </div>
      </div>
-      <div class="help">
+      <div id="mobileControls" class="mobileControls">
+        <div class="mobileControlsRow mobileControlsSmall">
+          <img id="mobileL" src="assets/L.png" />
+          <img id="mobileR" src="assets/R.png" />
+        </div>
+        <div class="mobileControlsRow mobileControlsBig">
+          <img id="mobileDpad" src="assets/dpad.png" />
+          <img id="mobileAb" src="assets/ab.png" />
+        </div>
+        <div class="mobileControlsRow mobileControlsSmall">
+          <img id="mobileStart" src="assets/START.png" />
+          <img id="mobileSelect" src="assets/SELECT.png" />
+        </div>
+        <div class="mobileControlsRow">
+          <button id="mobileRestart">Restart</button>
+        </div>
+      </div>
+      <div class="desktopHelp">
        <p>
          Press escape to open the menu where you can view or change controls
          and restart the game. The game provided is a combination of multiple
@ -122,5 +186,152 @@
        <a href="https://docs.rs/agb/latest/agb/">Docs</a>
      </div>
    </section>
+
+    <script>
+      const addSimpleButton = (ele, key) => {
+        ele.addEventListener("touchstart", (evt) => pressButton(key));
+        ele.addEventListener("touchend", (evt) => releaseButton(key));
+      };
+
+      mobileRestart.addEventListener("click", () => {
+        gameFrame.contentWindow.postMessage({ reset: true });
+      });
+
+      const pressButton = (key) => {
+        gameFrame.contentWindow.postMessage({ isPressed: true, button: key });
+      };
+
+      const releaseButton = (key) => {
+        gameFrame.contentWindow.postMessage({ isPressed: false, button: key });
+      };
+
+      mobileControls.addEventListener("touchmove", (evt) =>
+        evt.preventDefault()
+      );
+
+      mobileControls.addEventListener("contextmenu", (evt) =>
+        evt.preventDefault()
+      );
+
+      addSimpleButton(mobileL, "L");
+      addSimpleButton(mobileR, "L");
+      addSimpleButton(mobileStart, "Start");
+      addSimpleButton(mobileSelect, "Select");
+
+      let previouslyPressedButtons = [];
+
+      const dpadMovement = (touch) => {
+        const target = touch.target.getBoundingClientRect();
+
+        const touchPoint = { x: touch.clientX, y: touch.clientY };
+        const targetArea = {
+          x: target.left,
+          y: target.top,
+          width: target.width,
+          height: target.height,
+        };
+
+        const relativePosition = {
+          x: touchPoint.x - targetArea.x,
+          y: touchPoint.y - targetArea.y,
+        };
+
+        const touchedBox = {
+          x: Math.floor(relativePosition.x / (targetArea.width / 3)),
+          y: Math.floor(relativePosition.y / (targetArea.height / 3)),
+        };
+
+        const buttonBoxMapping = [
+          [["Up", "Left"], ["Up"], ["Up", "Right"]],
+          [["Left"], [], ["Right"]],
+          [["Down", "Left"], ["Down"], ["Down", "Right"]],
+        ];
+
+        const buttonsToPress =
+          (buttonBoxMapping[touchedBox.y] ?? [])[touchedBox.x] ?? [];
+
+        for (let oldButton of previouslyPressedButtons) {
+          if (!buttonsToPress.includes(oldButton)) {
+            releaseButton(oldButton);
+          }
+        }
+
+        for (let newButton of buttonsToPress) {
+          if (!previouslyPressedButtons.includes(newButton)) {
+            pressButton(newButton);
+          }
+        }
+
+        previouslyPressedButtons = buttonsToPress;
+      };
+
+      mobileDpad.addEventListener("touchstart", (evt) =>
+        dpadMovement(evt.touches[0])
+      );
+
+      mobileDpad.addEventListener("touchmove", (evt) =>
+        dpadMovement(evt.touches[0])
+      );
+
+      mobileDpad.addEventListener("touchend", (evt) => {
+        for (let oldButton of previouslyPressedButtons) {
+          releaseButton(oldButton);
+        }
+        previouslyPressedButtons = [];
+      });
+
+      let mobileAbAPress = undefined;
+      const mobileAbMovement = (touch) => {
+        const target = touch.target.getBoundingClientRect();
+
+        const touchPoint = { x: touch.clientX, y: touch.clientY };
+        const targetArea = {
+          x: target.left,
+          y: target.top,
+          width: target.width,
+          height: target.height,
+        };
+
+        const relativePosition = {
+          x: touchPoint.x - targetArea.x,
+          y: touchPoint.y - targetArea.y,
+        };
+
+        const aPress = relativePosition.x > relativePosition.y;
+
+        if (aPress !== mobileAbAPress) {
+          if (mobileAbAPress === true) {
+            releaseButton("A");
+          } else if (mobileAbAPress === false) {
+            releaseButton("B");
+          }
+        }
+        if (aPress) {
+          pressButton("A");
+        } else {
+          pressButton("B");
+        }
+
+        mobileAbAPress = aPress;
+      };
+
+      mobileAb.addEventListener("touchstart", (evt) =>
+        mobileAbMovement(evt.touches[0])
+      );
+
+      mobileAb.addEventListener("touchmove", (evt) =>
+        mobileAbMovement(evt.touches[0])
+      );
+
+      mobileAb.addEventListener("touchend", (evt) => {
+        if (mobileAbAPress === true) {
+          releaseButton("A");
+        } else if (mobileAbAPress === false) {
+          releaseButton("B");
+        }
+
+        mobileAbAPress = undefined;
+      });
+    </script>
  </body>
 </html>