mml-screen.html

<m-group>

  <!-- GAME BOY MODEL -->
  <m-model
    src="https://raw.githubusercontent.com/jdunk4/ARCADE1/main/MODELS/mario_land_buttons_wide.glb"
    sx="0.28" sy="0.4" sz="0.4"
    y="2.282" z="-0.064">
  </m-model>

  <!-- LIVE STREAM SCREEN -->
  <m-image id="screen"
    src="https://raw.githubusercontent.com/jdunk4/ARCADE1/main/SCREEN/NSMW1-12MagicOrbs.png"
    width="2.2" height="2.0"
    x="0" y="2.359" z="0.241">
  </m-image>

  <m-label id="status-label" content=""
    y="0.3" z="0.3" width="3" height="0.2"
    font-size="11" color="#ffff00" alignment="center">
  </m-label>

  <script>
  (function(root) {
    var SERVER  = "wss://arcade2-production.up.railway.app";
    var PREVIEW = "https://raw.githubusercontent.com/jdunk4/ARCADE1/main/SCREEN/NSMW1-12MagicOrbs.png";

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

    function handle(data) {
      try {
        var f = JSON.parse(data);
        if (f.type === "status") {
          set("status-label", "content", f.message || "");
          if (f.message === "Stream ended") set("screen", "src", PREVIEW);
          return;
        }
        if (f.image) {
          set("screen", "src", f.image);
          set("status-label", "content", "");
        }
      } catch(e) {}
    }

    function connect() {
      var s = new WebSocket(SERVER + "?mode=view&channel=snes-live");
      s.onmessage = function(m) {
        var d = m.data;
        if (d && typeof d.text === "function") {
          d.text().then(handle).catch(function() {});
          return;
        }
        handle(d);
      };
      s.onclose = function() {
        set("status-label", "content", "Reconnecting...");
        setTimeout(connect, 3000);
      };
      s.onerror = function() {};
    }

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

</m-group>