Seterra (by GeoGuessr) Fullscreen Mode

Adds a button for fullscreen mode to Seterra by GeoGuessr
目前為 2024-12-29 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Seterra (by GeoGuessr) Fullscreen Mode
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a button for fullscreen mode to Seterra by GeoGuessr
// @author       TWolf01
// @license      MIT
// @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 createFullscreenStyles(gameMapElement) {
    const screenHeight = window.screen.height;
    const screenWidth = window.screen.width;
    const gameHeight = gameMapElement.clientHeight;
    const gameWidth = gameMapElement.clientWidth;

    const gamePadding = (screenWidth - (gameWidth + gameWidth * ((screenHeight - gameHeight) / gameHeight))) / 2;

    // Early exit on invalid padding
    if (gamePadding <= 5 || gamePadding >= 100000) return;

    const FULLSCREEN_SELECTORS = `
        :fullscreen,
        :fullscreen div[class^='game-header_wrapper'],
        :fullscreen div[class^='corner-image_wrapper'],
        :fullscreen div[class^='game-area_mapWrapper']
    `;

    const existingStyle = document.head.querySelector(`style.${FULLSCREEN_STYLE_CLASS}`);
    updateOrCreateStyle(existingStyle, FULLSCREEN_SELECTORS, gamePadding);
  }

  function updateOrCreateStyle(existingStyle, selectors, padding) {
    const styleContent = `
        ${selectors} {
            padding-left: ${padding}px;
            padding-right: ${padding}px;
        }`;
    if (existingStyle) {
      const currentPadding = existingStyle.textContent.match(/padding-left: (\d+px)/)?.[1];
      if (currentPadding !== `${padding}px`) {
        existingStyle.textContent = styleContent;
      }
    } else {
      const style = document.createElement('style');
      style.className = FULLSCREEN_STYLE_CLASS;
      style.textContent = styleContent;
      document.head.appendChild(style);
    }
  }

  function openFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(); // Safari
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen(); // IE11
    }
  }

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

    const fullscreenButton = document.createElement("button");
    fullscreenButton.textContent = "Fullscreen";
    fullscreenButton.className = FULLSCREEN_BUTTON_CLASS;
    fullscreenButton.setAttribute("aria-label", "Enter Fullscreen Mode");
    fullscreenButton.title = "Enter Fullscreen Mode";

    Object.assign(fullscreenButton.style, {
      padding: "10px",
      backgroundColor: "blue",
      color: "white",
      border: "none",
      borderRadius: "5px",
      cursor: "pointer",
    });

    fullscreenButton.addEventListener("click", () => openFullscreen(gameMapElement));
    footerContainer.appendChild(fullscreenButton);
  }

  function initializeFullscreenButton() {
    const gameMapElement = document.querySelector(GAME_MAP_SELECTOR);
    const footerButtonsContainer = document.querySelector(FOOTER_BUTTONS_SELECTOR);

    if (!gameMapElement || !footerButtonsContainer) return;

    createFullscreenStyles(gameMapElement);
    createFullscreenButton(footerButtonsContainer, gameMapElement);
  }

  const observer = new MutationObserver(initializeFullscreenButton);
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  initializeFullscreenButton();
})();