arcade-a.html

<m-group>

  <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       GAME SCREEN
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
  <m-image id="screen" src="PLACEHOLDER_IMAGE_URL_A" width="6.25" height="6" y="8.65" z="1.762" rx="-12" x="-0.279">
  </m-image>

  <m-label content="FAN GAME" y="0.65" z="0.38" width="0.9" height="0.1" font-size="10" color="#ff8c00" alignment="center"></m-label>
  <m-label id="completion-label" content="0 players completed" y="0.52" z="0.38" width="0.9" height="0.1" font-size="10" color="#aaaaff" alignment="center"></m-label>
  <m-label id="status-label" content="" y="0.38" z="0.38" width="0.85" height="0.12" font-size="11" color="#ffff00" alignment="center"></m-label>

  <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       INFO CARD
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
  <m-image id="info-card" src="PLACEHOLDER_INFO_CARD_A" width="1.4" height="2.23" x="1.9" y="2.2" z="1.2" ry="-15" visible="false">
  </m-image>

  <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       AMBIENT AUDIO — loops Pokemon DP music near the cabinet
       Official Pokemon DP Sound Library (free for personal use)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
  <m-audio
    src="https://archive.org/download/pokemon-dp-sound-library-disc-2_202205/01%20Opening%20Theme.mp3"
    loop="true"
    volume="0.5"
    y="1.5">
  </m-audio>

  <m-position-probe range="6.0" id="probe"></m-position-probe>
  <m-interaction id="play-btn" prompt="Press E to Play Pokemon Insurgence" range="4.0" y="5.028" z="6.751"></m-interaction>

  <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ORIGINAL GAME BOY (DMG-01) — GLB body + animated overlays
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
  <m-group id="controller-root" y="0.9" z="0.55" rx="-12">

    <m-model src="https://raw.githubusercontent.com/jdunk4/ARCADE1/main/MODELS/gameboy_original.glb" y="4.345" scale="0.1" z="0.924">
    </m-model>

    <m-cube id="btn-dpad-up"    x="-0.280" y="-0.124" z="0.168" width="0.088" height="0.132" depth="0.024" color="#cccccc" opacity="0.0"></m-cube>
    <m-cube id="btn-dpad-down"  x="-0.280" y="-0.196" z="0.168" width="0.088" height="0.132" depth="0.024" color="#cccccc" opacity="0.0"></m-cube>
    <m-cube id="btn-dpad-left"  x="-0.348" y="-0.160" z="0.168" width="0.132" height="0.088" depth="0.024" color="#cccccc" opacity="0.0"></m-cube>
    <m-cube id="btn-dpad-right" x="-0.212" y="-0.160" z="0.168" width="0.132" height="0.088" depth="0.024" color="#cccccc" opacity="0.0"></m-cube>
    <m-sphere id="btn-b"      x="0.180" y="-0.220" z="0.172" radius="0.072" color="#cc1177" opacity="0.0"></m-sphere>
    <m-sphere id="btn-a"      x="0.350" y="-0.140" z="0.172" radius="0.072" color="#cc1177" opacity="0.0"></m-sphere>
    <m-sphere id="btn-x"      x="0.350" y="-0.140" z="0.172" radius="0.072" color="#5588ff" opacity="0.0"></m-sphere>
    <m-sphere id="btn-y"      x="0.180" y="-0.220" z="0.172" radius="0.072" color="#ffee44" opacity="0.0"></m-sphere>
    <m-cube id="btn-select"   x="-0.100" y="-0.390" z="0.162" width="0.145" height="0.052" depth="0.022" color="#8888cc" opacity="0.0"></m-cube>
    <m-cube id="btn-start"    x=" 0.120" y="-0.390" z="0.162" width="0.145" height="0.052" depth="0.022" color="#8888cc" opacity="0.0"></m-cube>
    <m-cube id="btn-lb"       x="-0.240" y="0.660" z="0.130" width="0.200" height="0.072" depth="0.060" color="#aa88ff" opacity="0.0"></m-cube>
    <m-cube id="btn-rb"       x=" 0.240" y="0.660" z="0.130" width="0.200" height="0.072" depth="0.060" color="#aa88ff" opacity="0.0"></m-cube>
    <m-cube id="btn-lt"       x="-0.240" y="0.640" z="0.100" width="0.200" height="0.055" depth="0.080" color="#ff8844" opacity="0.0"></m-cube>
    <m-cube id="btn-rt"       x=" 0.240" y="0.640" z="0.100" width="0.200" height="0.055" depth="0.080" color="#ff8844" opacity="0.0"></m-cube>
    <m-sphere id="btn-ls"     x="-0.160" y="-0.280" z="0.170" radius="0.045" color="#66ddff" opacity="0.0"></m-sphere>
    <m-sphere id="btn-rs"     x=" 0.120" y="-0.310" z="0.170" radius="0.045" color="#66ddff" opacity="0.0"></m-sphere>

  </m-group>

  <script>
  (function(root) {

    var ROM_FILE    = "PokemonInsurgence";
    var ROM_CORE    = "wine";
    var ROM_ID      = "pokemon-insurgence";
    var ROM_TITLE   = "Pokemon Insurgence";
    var ROM_PREVIEW = "PLACEHOLDER_IMAGE_URL_A";
    var SNES_SERVER_WS = "wss://arcade2-production.up.railway.app";
    var BACKEND_SERVER = "https://gamer-production.up.railway.app";
    var WALLET = "anonymous";

    function set(id, attr, val) {
      var e = root.querySelector("#" + id);
      if (e) e.setAttribute(attr, val);
    }

    var socket = null, gameActive = false, pollingActive = false;

    var buttonMap = {
      0:  { id: "btn-a",          glowColor: "#ff44aa", restZ: 0.172, pressZ: 0.152 },
      1:  { id: "btn-b",          glowColor: "#ff44aa", restZ: 0.172, pressZ: 0.152 },
      2:  { id: "btn-x",          glowColor: "#5588ff", restZ: 0.172, pressZ: 0.152 },
      3:  { id: "btn-y",          glowColor: "#ffee44", restZ: 0.172, pressZ: 0.152 },
      4:  { id: "btn-lb",         glowColor: "#aa88ff", restZ: 0.130, pressZ: 0.110 },
      5:  { id: "btn-rb",         glowColor: "#aa88ff", restZ: 0.130, pressZ: 0.110 },
      6:  { id: "btn-lt",         glowColor: "#ff8844", restZ: 0.100, pressZ: 0.080 },
      7:  { id: "btn-rt",         glowColor: "#ff8844", restZ: 0.100, pressZ: 0.080 },
      8:  { id: "btn-select",     glowColor: "#aaaaff", restZ: 0.162, pressZ: 0.144 },
      9:  { id: "btn-start",      glowColor: "#aaaaff", restZ: 0.162, pressZ: 0.144 },
      10: { id: "btn-ls",         glowColor: "#66ddff", restZ: 0.170, pressZ: 0.152 },
      11: { id: "btn-rs",         glowColor: "#66ddff", restZ: 0.170, pressZ: 0.152 },
      12: { id: "btn-dpad-up",    glowColor: "#ffffff", restZ: 0.168, pressZ: 0.150 },
      13: { id: "btn-dpad-down",  glowColor: "#ffffff", restZ: 0.168, pressZ: 0.150 },
      14: { id: "btn-dpad-left",  glowColor: "#ffffff", restZ: 0.168, pressZ: 0.150 },
      15: { id: "btn-dpad-right", glowColor: "#ffffff", restZ: 0.168, pressZ: 0.150 }
    };

    var wineKeyMap = { 0:"a",1:"b",2:"x",3:"y",4:"l",5:"r",8:"select",9:"start",12:"up",13:"down",14:"left",15:"right" };
    var remapIndex = { 0:1,1:0,2:3,3:2,4:4,5:5,6:6,7:7,8:8,9:9,10:10,11:11,12:12,13:13,14:14,15:15 };
    var buttonStates = {};

    function sendGameInput(key, type) {
      if (!gameActive || !socket || socket.readyState !== 1) return;
      socket.send(JSON.stringify({ type: type, key: key }));
    }

    function setButtonPressed(rawIndex, di, pressed) {
      var map = buttonMap[di]; if (!map) return;
      var elem = root.querySelector("#" + map.id); if (!elem) return;
      if (pressed && !buttonStates[di]) {
        buttonStates[di] = true;
        elem.setAttribute("color",   map.glowColor);
        elem.setAttribute("opacity", "0.85");
        elem.setAttribute("z",       map.pressZ);
        var k = wineKeyMap[rawIndex]; if (k) sendGameInput(k, "keyDown");
      } else if (!pressed && buttonStates[di]) {
        buttonStates[di] = false;
        elem.setAttribute("opacity", "0.0");
        elem.setAttribute("z",       map.restZ);
        var k = wineKeyMap[rawIndex]; if (k) sendGameInput(k, "keyUp");
      }
    }

    function getBestGamepad() {
      var gps = navigator.getGamepads ? navigator.getGamepads() : [];
      for (var i = 0; i < gps.length; i++) if (gps[i] && gps[i].mapping === "standard") return gps[i];
      for (var j = 0; j < gps.length; j++) if (gps[j]) return gps[j];
      return null;
    }

    function poll() {
      if (pollingActive) return; pollingActive = true;
      function loop() {
        var gp = getBestGamepad();
        if (gp) {
          gp.buttons.forEach(function(btn, rawIndex) {
            var di = remapIndex.hasOwnProperty(rawIndex) ? remapIndex[rawIndex] : rawIndex;
            setButtonPressed(rawIndex, di, btn.pressed || btn.value > 0.5);
          });
          var axisX = gp.axes[0]||0, axisY = gp.axes[1]||0, T = 0.5;
          var ls = root.querySelector("#btn-ls"), rs = root.querySelector("#btn-rs");
          if (ls) { ls.setAttribute("x", -0.160 + axisX*0.028); ls.setAttribute("y", -0.280 + axisY*0.028); }
          if (rs) { rs.setAttribute("x",  0.120 + (gp.axes[2]||0)*0.028); rs.setAttribute("y", -0.310 + (gp.axes[3]||0)*0.028); }
          if (!buttonStates[14] && !buttonStates[15] && !buttonStates[12] && !buttonStates[13]) {
            if (axisX < -T) sendGameInput("left","keyDown"); else if (axisX > T) sendGameInput("right","keyDown");
            else { sendGameInput("left","keyUp"); sendGameInput("right","keyUp"); }
            if (axisY < -T) sendGameInput("up","keyDown"); else if (axisY > T) sendGameInput("down","keyDown");
            else { sendGameInput("up","keyUp"); sendGameInput("down","keyUp"); }
          }
        }
        requestAnimationFrame(loop);
      }
      loop();
    }

    function connectToServer() {
      var sessionId = Math.random().toString(36).slice(2);
      var wsUrl = SNES_SERVER_WS
        + "?rom="     + encodeURIComponent(ROM_FILE)
        + "&core="    + encodeURIComponent(ROM_CORE)
        + "&id="      + encodeURIComponent(ROM_ID)
        + "&session=" + sessionId
        + "&wallet="  + encodeURIComponent(WALLET);
      socket = new WebSocket(wsUrl);
      socket.onopen = function() { set("status-label", "content", ""); };
      socket.onmessage = function(msg) {
        var frame = JSON.parse(msg.data);
        if (frame.type === "audio") return; // audio handled by m-audio world element
        if (frame.type === "status") { set("status-label", "content", frame.message); return; }
        if (frame.type === "error")  { set("status-label", "content", "Error: " + frame.message); return; }
        if (frame.image) {
          set("screen", "src", frame.image);
          set("status-label", "content", "");
          if (!gameActive) { gameActive = true; set("play-btn", "prompt", "Press E to Close"); }
        }
      };
      socket.onclose = function() {
        gameActive = false;
        set("screen", "src", ROM_PREVIEW);
        set("status-label", "content", "");
        set("play-btn", "prompt", "Press E to Play " + ROM_TITLE);
      };
      socket.onerror = function() { set("status-label", "content", "Connection failed"); socket.close(); };
    }

    function launchGame() {
      set("status-label", "content", "Launching Pokemon Insurgence...");
      set("play-btn", "prompt", "Launching...");
      connectToServer();
    }

    function closeGame() { if (socket) socket.close(); gameActive = false; }

    function refreshCompletionCount() {
      fetch(BACKEND_SERVER + "/completions/" + ROM_ID)
        .then(function(r) { return r.json(); })
        .then(function(data) {
          var count = data.count || 0;
          set("completion-label", "content", count + " player" + (count !== 1 ? "s" : "") + " completed");
        }).catch(function() {});
    }

    setTimeout(function() {
      poll();
      window.addEventListener("gamepadconnected", function() { if (!pollingActive) poll(); });
      var playBtn = root.querySelector("#play-btn");
      if (playBtn) playBtn.addEventListener("interact", function() {
        if (gameActive) closeGame(); else launchGame();
      });
      var probe = root.querySelector("#probe");
      if (probe) {
        probe.addEventListener("positionenter", function() { set("info-card", "visible", "true"); });
        probe.addEventListener("positionleave", function() {
          set("info-card", "visible", "false");
          if (gameActive) closeGame();
        });
      }
      refreshCompletionCount();
    }, 500);

  })(document.currentScript ? document.currentScript.closest("m-group") : document);
  </script>

</m-group>