☰

Seterra (by GeoGuessr) Fullscreen Mode

Adds a fullscreen mode button to Seterra by GeoGuessr

当前为 2025-01-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Seterra (by GeoGuessr) Fullscreen Mode
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Adds a fullscreen mode button to Seterra by GeoGuessr
  6. // @author       TWolf01
  7. // @license      MIT
  8. // @match        https://www.geoguessr.com/vgp/*
  9. // @match        https://www.geoguessr.com/*/vgp/*
  10. // @icon         https://www.geoguessr.com/favicon.ico
  11. // @run-at       document-end
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.  
  18.   const GAME_MAP_SELECTOR = "[class^='game-area_mapWrapper__']";
  19.   const FOOTER_BUTTONS_SELECTOR = "[class^='game-footer_buttons__']";
  20.   const FULLSCREEN_STYLE_CLASS = "custom-fullscreen-style";
  21.   const FULLSCREEN_BUTTON_CLASS = "custom-fullscreen-button";
  22.  
  23.   function updateStyle(stylesheet, selectors, padding) {
  24.     const content = `${selectors} { padding-left: ${padding}px; padding-right: ${padding}px; }`;
  25.     if (stylesheet) {
  26.       if (!stylesheet.textContent.includes(`padding-left: ${padding}px`)) stylesheet.textContent = content;
  27.     } else {
  28.       const style = document.createElement('style');
  29.       style.className = FULLSCREEN_STYLE_CLASS;
  30.       style.textContent = content;
  31.       document.head.appendChild(style);
  32.     }
  33.   }
  34.  
  35.   function createFullscreenStyles(gameMap) {
  36.     const heightRatio = (window.screen.height - gameMap.clientHeight) / gameMap.clientHeight;
  37.     const padding = (window.screen.width - (gameMap.clientWidth * (1 + heightRatio))) / 2;
  38.  
  39.     if (padding > 5 && padding < 100000) {
  40.       const selectors = `
  41.         :fullscreen,
  42.         :fullscreen div[class^='game-header_wrapper'],
  43.         :fullscreen div[class^='corner-image_wrapper'],
  44.         :fullscreen div[class^='game-area_mapWrapper']`;
  45.       updateStyle(document.head.querySelector(`style.${FULLSCREEN_STYLE_CLASS}`), selectors, padding);
  46.     }
  47.   }
  48.  
  49.   function createFullscreenButton(footerContainer, gameMap) {
  50.     if (footerContainer.querySelector(`.${FULLSCREEN_BUTTON_CLASS}`)) return;
  51.  
  52.     const button = document.createElement("button");
  53.     button.textContent = "Fullscreen";
  54.     button.className = FULLSCREEN_BUTTON_CLASS;
  55.     Object.assign(button.style, {
  56.       padding: "10px", backgroundColor: "blue", color: "white",
  57.       border: "none", borderRadius: "5px", cursor: "pointer",
  58.     });
  59.  
  60.     button.addEventListener("click", () => {
  61.       gameMap.requestFullscreen?.() || gameMap.webkitRequestFullscreen?.() || gameMap.msRequestFullscreen?.();
  62.     });
  63.  
  64.     footerContainer.appendChild(button);
  65.   }
  66.  
  67.   function initializeFullscreenButton() {
  68.     const gameMap = document.querySelector(GAME_MAP_SELECTOR);
  69.     const footerButtons = document.querySelector(FOOTER_BUTTONS_SELECTOR);
  70.     if (gameMap && footerButtons) {
  71.       createFullscreenStyles(gameMap);
  72.       createFullscreenButton(footerButtons, gameMap);
  73.     }
  74.   }
  75.  
  76.   new MutationObserver(initializeFullscreenButton).observe(document.body, { childList: true, subtree: true });
  77.   initializeFullscreenButton();
  78. })();