Geoguessr Blink Mode

Shows the round briefly, then screen goes black and you have unlimited time to make your guess.
Ekde 2022/05/30. Vidu La ĝisdata versio.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Geoguessr Blink Mode
// @description  Shows the round briefly, then screen goes black and you have unlimited time to make your guess.
// @version      0.3.1
// @author       macca#8949
// @license      MIT
// @include      https://www.geoguessr.com/*
// @run-at       document-start
// @grant        none
// @namespace    https://greatest.deepsurf.us/en/scripts/438579-geoguessr-blink-mode
// ==/UserScript==

const guiEnabled = true
//                 ^^^^ Set to false (all lowercase) if you want to hide the GUI and manually enable the script/set the time, otherwise true

let timeLimit = 1.5
//              ^^^ Modify this number above to change the time



// --------- DON'T MODIFY ANYTHING BELOW THIS LINE -------- //



const guiHTML = `
<div class="section_sectionHeader__WQ7Xz section_sizeMedium__yPqLK"><div class="bars_root___G89E bars_center__vAqnw"><div class="bars_before__xAA7R bars_lengthLong__XyWLx"></div><span class="bars_content__UVGlL"><h3>Blink Mode settings</h3></span><div class="bars_after__Z1Rxt bars_lengthLong__XyWLx"></div></div></div>
<div class="start-standard-game_settings__x94PU">
  <div style="display: flex; justify-content: space-around;">
    <div style="display: flex; align-items: center;">
      <span class="game-options_optionLabel__dJ_Cy" style="margin: 0; padding-right: 6px;">Enabled</span>
      <input type="checkbox" id="enableScript" onclick="toggleBlinkMode(this)" class="toggle_toggle__hwnyw">
    </div>

    <div style="display: flex; align-items: center;">
      <span class="game-options_optionLabel__dJ_Cy" style="margin: 0; padding-right: 6px;">Time (Seconds)</span>
      <input type="text" id="blinkTime" onchange="changeBlinkTime(this)" style="background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 5px; width: 60px;">
    </div>
  </div>
  <p class="body-text_sizeXSmall__rwJFf" style="margin-top: 20px;">Ensure classic compass is enabled</p>
</div>
`


if (localStorage.getItem('blinkEnabled') == null) {
    localStorage.setItem('blinkEnabled', 'disabled');
}

if (!guiEnabled) {
    localStorage.setItem('blinkEnabled', 'enabled');
}

if (localStorage.getItem('blinkTime') == null || isNaN(localStorage.getItem('blinkTime'))) {
    localStorage.setItem('blinkTime', timeLimit);
}

if (guiEnabled) {
    timeLimit = localStorage.getItem('blinkTime');
}

window.toggleBlinkMode = (e) => {
    localStorage.setItem('blinkEnabled', e.checked ? 'enabled' : 'disabled');
}

window.changeBlinkTime = (e) => {
    if (!isNaN(e.value)) {
        localStorage.setItem('blinkTime', parseFloat(e.value));
        timeLimit = parseFloat(e.value);
    }
}

const checkInsertGui = () => {
    if (document.querySelector('.radio-box_root__ka_9S') && document.querySelector('#enableScript') === null) {
        document.querySelector('.section_sectionMedium__yXgE6').insertAdjacentHTML('beforeend', guiHTML);
        if (localStorage.getItem('blinkEnabled') === 'enabled') {
            document.querySelector('#enableScript').checked = true;
        }

        document.querySelector('#blinkTime').value = timeLimit;
    }
}

let previousTransform = '';

const onScreen = (element) => {
    let rect = element.getBoundingClientRect();
    let topElement = document.elementFromPoint(rect.left + (rect.width / 2), rect.top + (rect.height / 2));
    if (element.isSameNode(topElement) & previousTransform != topElement.style.transform) {
        previousTransform = topElement.style.transform;
        return true;
    }
    return false;
}

let observer = new MutationObserver((mutations) => {
    if (guiEnabled) {
        checkInsertGui();
    }

    if (localStorage.getItem('blinkEnabled') === 'enabled') {
        if (document.querySelector('.compass__indicator')) {
            if (onScreen(document.querySelector('.compass__indicator'))) {
                setTimeout(() => {
                    document.querySelector('.widget-scene-canvas').style.display = 'none';
                }, timeLimit * 1000);
            }
        }
    }
});

observer.observe(document.body, {
  characterDataOldValue: false,
  subtree: true,
  childList: true,
  characterData: false
});