Taimanin RPGX Extasy (Johren) - Expand resolution to window size

4/12/2024, 10:38:05 PM

Verzia zo dňa 13.04.2024. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name        Taimanin RPGX Extasy (Johren) - Expand resolution to window size
// @namespace   https://taurussilver.github.io
// @include     https://www.johren.games/games/taimanin-rpgx-extasy-zh-tw/play/*
// @include     https://osapi.johren.net/gadgets/ifr*
// @include     https://prd.taimanin-rpg-extasy.com/game/*
// @grant       GM_addStyle
// @version     1.0
// @author      taurussilver
// @run-at      document-end
// @description 4/12/2024, 10:38:05 PM
// @license     MIT
// ==/UserScript==

const TOP_PAGE = "www.johren.games";
const JOHREN_IFRAME_PAGE = "osapi.johren.net";
const GAME_IFRAME_PAGE = "prd.taimanin-rpg-extasy.com";

// Add top-level page styling
GM_addStyle(`
.application-game-play {
  margin-top: 0 !important;
}
.application-game-play .application-game-play-layout {
  max-width: none !important;
}
`);

// Apply styling to the outer iframe which the Johren game page loads.
function applyJohrenIframeStyles() {
  const iframe = document.getElementById("game_frame");
  iframe.removeAttribute("width");
  iframe.removeAttribute("height");
  iframe.style.aspectRatio = "16/9";
  iframe.style.width = "100vw";
  iframe.style.height = "auto";

  const observeIframe = (mutations, observer) => {
    for (const mutation of mutations) {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "style"
      ) {
        const width = iframe.style.width;
        const height = iframe.style.height;
        if (width.endsWith("px") || height.endsWith("px")) {
          console.log(width, height);
          iframe.style.width = "100vw";
          iframe.style.height = "auto";
        }
      }
    }
  };

  const mo = new MutationObserver(observeIframe);

  mo.observe(iframe, {
    attributes: true,
  });
}

// Apply styling to the inner nested iframe loaded by the Johren iframe.
// This iframe contains the unity game window.
function applyGameWindowStyles() {
  const iframe = document.getElementById("game_window");
  iframe.removeAttribute("width");
  iframe.removeAttribute("height");
  iframe.style.aspectRatio = "16/9";
  iframe.style.width = "100vw";
  iframe.style.height = "auto !important";
}

// Apply styling to Unity game once it's loaded.
function applyUnityCanvasStyles() {
  const applyStyles = (unityContainer, unityCanvas) => {
    unityContainer.style.aspectRatio = "16/9";
    unityContainer.style.width = "100vw";
    unityContainer.style.height = "auto";

    const observeCanvas = (mutations, observer) => {
      for (const mutation of mutations) {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "style"
        ) {
          const width = unityCanvas.style.width;
          const height = unityCanvas.style.height;
          if (width === "1280px" || height === "720px") {
            unityCanvas.style.width = "100%";
            unityCanvas.style.height = "100%";
          }
        }
      }
    };

    const mo = new MutationObserver(observeCanvas);

    mo.observe(unityCanvas, {
      attributes: true,
    });
  };

  const observeUnity = (mutations, observer) => {
    for (const node of mutations) {
      if (node.type === "childList" && node.addedNodes.length > 0) {
        const addedNode = node.addedNodes[0];
        if (addedNode.tagName === "CANVAS") {
          observer.disconnect();
          const unityContainer = addedNode.parentNode;
          const unityCanvas = addedNode;
          applyStyles(unityContainer, unityCanvas);
        }
      }
    }
  };

  const mo = new MutationObserver(observeUnity);

  mo.observe(document, {
    childList: true,
    subtree: true,
  });
}

switch (window.location.hostname) {
  case TOP_PAGE:
    applyJohrenIframeStyles();
    break;
  case JOHREN_IFRAME_PAGE:
    applyGameWindowStyles();
    break;
  case GAME_IFRAME_PAGE:
    applyUnityCanvasStyles();
    break;
}