Seterra (by GeoGuessr) Fullscreen Mode

Adds a fullscreen mode button to Seterra by GeoGuessr
目前为 2025-01-11 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Seterra (by GeoGuessr) Fullscreen Mode
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adds a fullscreen mode button to Seterra by GeoGuessr
// @author       TWolf01
// @license      MIT
// @match        https://www.geoguessr.com/vgp/*
// @match        https://www.geoguessr.com/*/vgp/*
// @icon         https://www.geoguessr.com/favicon.ico
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const GAME_MAP_SELECTOR = "[class^='game-area_mapWrapper__']";
  const FOOTER_BUTTONS_SELECTOR = "[class^='game-footer_buttons__']";
  const FULLSCREEN_STYLE_CLASS = "custom-fullscreen-style";
  const FULLSCREEN_BUTTON_CLASS = "custom-fullscreen-button";

  function updateStyle(stylesheet, selectors, padding) {
    const content = `${selectors} { padding-left: ${padding}px; padding-right: ${padding}px; }`;
    if (stylesheet) {
      if (!stylesheet.textContent.includes(`padding-left: ${padding}px`)) stylesheet.textContent = content;
    } else {
      const style = document.createElement('style');
      style.className = FULLSCREEN_STYLE_CLASS;
      style.textContent = content;
      document.head.appendChild(style);
    }
  }

  function createFullscreenStyles(gameMap) {
    const heightRatio = (window.screen.height - gameMap.clientHeight) / gameMap.clientHeight;
    const padding = (window.screen.width - (gameMap.clientWidth * (1 + heightRatio))) / 2;

    if (padding > 5 && padding < 100000) {
      const selectors = `
        :fullscreen,
        :fullscreen div[class^='game-header_wrapper'],
        :fullscreen div[class^='corner-image_wrapper'],
        :fullscreen div[class^='game-area_mapWrapper']`;
      updateStyle(document.head.querySelector(`style.${FULLSCREEN_STYLE_CLASS}`), selectors, padding);
    }
  }

  function createFullscreenButton(footerContainer, gameMap) {
    if (footerContainer.querySelector(`.${FULLSCREEN_BUTTON_CLASS}`)) return;

    const button = document.createElement("button");
    button.textContent = "Fullscreen";
    button.className = FULLSCREEN_BUTTON_CLASS;
    Object.assign(button.style, {
      padding: "10px", backgroundColor: "blue", color: "white",
      border: "none", borderRadius: "5px", cursor: "pointer",
    });

    button.addEventListener("click", () => {
      gameMap.requestFullscreen?.() || gameMap.webkitRequestFullscreen?.() || gameMap.msRequestFullscreen?.();
    });

    footerContainer.appendChild(button);
  }

  function initializeFullscreenButton() {
    const gameMap = document.querySelector(GAME_MAP_SELECTOR);
    const footerButtons = document.querySelector(FOOTER_BUTTONS_SELECTOR);
    if (gameMap && footerButtons) {
      createFullscreenStyles(gameMap);
      createFullscreenButton(footerButtons, gameMap);
    }
  }

  new MutationObserver(initializeFullscreenButton).observe(document.body, { childList: true, subtree: true });
  initializeFullscreenButton();
})();
欢迎访问Greasy Fork镜像
