☰

Greasy Fork is available in English.

A better search

Completely strips the original search engine and replaces it with a more fleshed out version where you can use filters and see more info.

// ==UserScript==
// @name         A better search
// @namespace    http://tampermonkey.net/
// @version      0.2.4
// @description  Completely strips the original search engine and replaces it with a more fleshed out version where you can use filters and see more info.
// @author       Lemson
// @match        https://www.geoguessr.com/search
// @match        https://www.geoguessr.com/
// @icon         https://www.clipartmax.com/png/full/15-150759_search-icon-search-icon-png-blue.png
// @grant        GM_addStyle
// @require      https://greasyfork.org/scripts/460322-geoguessr-styles-scan/code/Geoguessr%20Styles%20Scan.js?version=1151668
// @license MIT
// @run-at document-idle
// ==/UserScript==
// Removes the old search, and keeps it gone, hopefully this doesnt fuck anything else up :D
const observer = new MutationObserver(() => {
  setTimeout(() => {
    document.querySelectorAll('[class*="search_center__"]').forEach((element) => {
      if (element.parentNode) element.parentNode.remove();
    });
  }, 200);
});
observer.observe(document.documentElement, { childList: true, subtree: true });

if (window.location.href === "https://www.geoguessr.com/") {
  function newStartPageCSS() {
    const inputCSS = `
.quicksearch-input{
    background-color: rgba(0,0,0,0);
    border: none;
    padding-left: 1.3rem;
    color: white;
}
    `;
    GM_addStyle(inputCSS);

    const searchButtonCSS = `
  .slanted-button-container{
      display: inline-block;
      scale: .95;
      transition: .2s;
  }
  .slanted-button-container:hover{
      transition: .2s;
  }
  .slanted-wrapper-root{
      position: relative;
      z-index: 0;
  }
  .slanted-wrapper_variantGrayTransparent{
  }
  .slanted-wrapper-start{
      left: 0;
  }
  .slanted-wrapper-right{
      bottom: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 50%;
      z-index: -1;
  }
  .slanted-wrapper-right:before{
      transform-origin: bottom;
      border-radius: 0.25rem 0 0 0.25rem;
      transform: skewX(-12deg);
      left: 0;
      padding-right: .0625rem;
      width: 100%;
      background: var(--ds-color-black-40);
      bottom: 0;
      content: "";
      position: absolute;
      top: 0;
      z-index: -1;
  }
  .slanted-button_root{
      --skew-angle: -10deg;
      --content-skew-angle: 0;
      --variant-background-color: var(--ds-color-black-20);
      --border-radius: 0.25rem;
      --content-color: var(--ds-color-white);
      --content-padding: 0.6rem 1rem;
  }
  .slanted-button_button{
      background: none;
      border: initial;
      cursor: pointer;
      margin: 0;
      min-height: 3rem;
      padding: 0;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
  }
  .slanted-button_content{
      color: var(--content-color);
      padding: var(--content-padding);
  }
  .slanted-button_contentSizeLarge{
      --content-padding: 0.6rem 1rem;
  }
  .search-button-root{
      background-color: transparent;
      border: unset;
      cursor: pointer;
      display: flex;
      flex: 0 0 3rem;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  .slanted-wrapper-end{
      left: 50%;
  }
  .slanted-wrapper_right{
      bottom: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 50%;
      z-index: -1;
  }
  .slanted-wrapper_right:before{
      transform-origin: top;
      border-radius: 0 0.25rem 0.25rem 0;
      transform: skewX(-12deg);
      padding-left: .0625rem;
      right: 0;
      width: 100%;
      background: var(--ds-color-black-40);
      bottom: 0;
      content: "";
      position: absolute;
      top: 0;
      z-index: -1;
  }
  `;
    GM_addStyle(searchButtonCSS);
  }

  const createNewSearchButton = () => {
    const baseHTML = `
        <div class="slanted-button-container">
          <div class="slanted-wrapper-root slanted-wrapper_variantGrayTransparent">
            <div class="slanted-wrapper-start slanted-wrapper-right"></div>
            <button class="slanted-button_root slanted-button_button">
              <div class="slanted-button_content slanted-button_contentSizeLarge">
                <img src="https://svgur.com/i/142d.svg" alt="Search Icon">
              </div>
            </button>
            <div class="slanted-wrapper-end slanted-wrapper_right"></div>
          </div>
        </div>
    `;

    const header = document.querySelector('div[class^="header_context__"]');
    const diver = document.createElement("div");
    diver.innerHTML = baseHTML;
    header.insertBefore(diver, document.querySelector(".slanted-button_container__6JmyZ"));
    return diver;
  };

  const openSearch = () => {
    if (!searchOpen) {
      const input = document.createElement("div");
      input.innerHTML = `
        <input placeholder="Search for maps..." type="text" class="quicksearch-input">
        `;
      document.querySelector(".slanted-button_root").append(input);
      searchOpen = true;
    }
  };

  const createEventListeners = () => {
    searchButton.addEventListener("click", openSearch);

    document.addEventListener("keydown", function (event) {
      if (event.key === "Enter" && document.activeElement == document.querySelector(".quicksearch-input")) {
        const input = document.querySelector(".quicksearch-input");
        localStorage.setItem("searchTerm", input.value);
        window.location.href = "https://www.geoguessr.com/search";
      }
    });
  };

  let searchOpen = false;

  const searchButton = createNewSearchButton();
  newStartPageCSS();
  createEventListeners();
}

//Search page \/
if (window.location.href === "https://www.geoguessr.com/search") {
  function newSearchPageCSS() {
    const CSS = `
    .main-search-div{
      height: 100%;
    }
    .search-page-main{
        width: 100vw;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .input-main-container{
        width: 100vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search-container{
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search-input{
        width: 100%;
        background-color: rgb(255 255 255 / 5%);
        border: 1px solid black;
        border-radius: 10rem;
        color: white;
        font-size: 1.2rem;
        padding-left: 1.5rem;
    }
    .search-results{
    }
    .search-item{
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(0,0,0,0.5);
      transition: .2s;
    }
    .search-item:hover{
      transition: .2s;
      scale: 1.01;
    }
    .author-map-name{
      width: 20rem;
    }
    .map-name{
      font-size:1.5rem;
    }
    .map-avatar{
      width: 4rem;
      border-radius: .5rem;
    }
    .stat-view{
      width: 5rem;
      margin-right: 4rem;
      display:flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: .2rem;
    }

    .dropdown{
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .filter-btn {
      color: white;
      font-size: 1rem;
      border: none;
      cursor: pointer;
    }
    .filter-window{
      width:  100%;
      display: flex;
      justify-content: space-around;
    }

    .filter-category-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1rem;
      margin-bottom: .5rem;
    }
    .min-input{
      background-color: rgba(0,0,0,0.1);
      border: 1px solid #6b6b6b;
      border-radius: .7rem;
      color: white;
      width: 8rem;
      margin-top: .1rem;
    }
    .hide{
      display: none;
    }

    .official-toggle-buttons>*{
      color: white;
      border: 1px solid white;
      padding: 1rem;
      padding-top: .4rem;
      padding-bottom: .4rem;
    }
    .selectionmode-toggle-buttons>*{
      color: white;
      border: 1px solid white;
      padding: 1rem;
      padding-top: .4rem;
      padding-bottom: .4rem;
    }
    .active-button{
      background-color: #563b9a;
    }
    .apply-button{
      width: 5rem;
      height: 2.5rem;
      background-color: transparent;
      margin-top: 10%;
      color: white;
      border: 1px solid white;
      border-radius: 2rem;
      margin-left: 35%;
    }
    .apply-button:active{
      transition: .05s;
      background-color: rgba(255,255,255,0.2);
    }
    `;
    GM_addStyle(CSS);
  }
  const createNewSearchbar = () => {
    const searchHTML = `
    <div class="search-page-main">
      <div class="search-container">
          <input class="search-input" type="text" placeholder="Search for maps or players...">
      </div>

      <div class="dropdown">
        <button class="filter-btn">Filters</button>

        <div class="filter-window">
          <div>
            <div class="filter-category-container">
              <p>Minimum likes</p>
              <input id="min-likes" class="min-input" type="number" value=${localStorage.getItem("minLikes")}>
            </div>
            <div class="filter-category-container">
              <p>Minimum locations</p>
              <input id="min-locs" class="min-input" type="number" value=${localStorage.getItem("minLocs")}>
            </div>
            <div class="filter-category-container">
              <p>Minimum games played</p>
              <input id="min-games-played" class="min-input" type="number" value=${localStorage.getItem(
                "minGamesPlayed"
              )}>
            </div>
            <div class="filter-category-container">
              <p>Minimum average score</p>
              <input id="min-avg-score" class="min-input" type="number" value=${localStorage.getItem("minAvgScore")}>
            </div>

          </div>
          <div>
            <div class="filter-category-container">
              <p>Official</p>
              <div class="official-toggle-buttons">
                <button id="official">Yes</button>
                <button id="both" class="active-button">All</button>
                <button id="unofficial">No</button>
              </div>
            </div>
            <div class="filter-category-container">
              <p>Selection mode</p>
              <div class="selectionmode-toggle-buttons">
                <button id="handpicked">Handpicked</button>
                <button id="both" class="active-button">All</button>
                <button id="polygonal">Polygonal</button>
              </div>
            </div>

          <button class="apply-button">Apply</button>


          </div>
        </div>
      </div>
    </div>
    `;
    const mainDiv = document.querySelector("main");
    const dave = document.createElement("div");
    dave.classList.add("main-search-div");
    dave.innerHTML = searchHTML;
    mainDiv.append(dave);
  };

  const createResultsFromSearch = async () => {
    const results = await getResults(localStorage.getItem("searchTerm"));
    const existingResultsContainer = document.querySelector(".search-results");
    if (existingResultsContainer) {
      existingResultsContainer.remove();
    }
    const div = document.createElement("div");
    div.innerHTML = "";
    div.classList.add("search-results");
    document.querySelector(".search-page-main").append(div);
    console.log(results);
    results.forEach((a) => {
      const html = `
        <img class="map-avatar" src="https://avatar.map-making.app/${a.id}">
        <div class="author-map-name">
          <a href="/maps/${a.id}" target="_" class="map-name">${a.name}</a>
          <p class="creator-name">Created by: <a href="/user/${a.creatorId}">${a.creator}</a></p>
        </div>
        <div class="stat-view likes">
          <img style="width: 1.5rem;" src="_next/static/media/like-32.1321332a.svg" title="Likes">
          ${a.likes}
        </div>
        <div class="stat-view locs">
          <img style="width: 1.5rem;" src="_next/static/media/location-32.73fdcf3f.svg" title="Number of locations">
          ${a.coordinateCount}
        </div>
        <div class="stat-view games">
          <img style="width: 1.5rem;" src="_next/static/media/people-32.6e1cc43b.svg" title="Games played">
          ${a.numberOfGamesPlayed}
        </div>
        <div class="stat-view avgScore">
        <img style="width: 2rem;" src="https://i.imgur.com/uRdcYBM.png" title="Average score">
        ${a.averageScore}
        </div>
        <div class="stat-view howitwascreated">
        ${a.locationSelectionMode === 1 ? "Handpicked" : a.locationSelectionMode === 2 ? "Polygonal" : "Official"}
        </div>
      `;
      const resultContainer = document.createElement("div");
      resultContainer.classList.add("search-item");
      resultContainer.innerHTML = html;
      div.append(resultContainer);
    });
  };

  async function getResults(word) {
    let mapSearch = await fetch(`https://www.geoguessr.com/api/v3/search/map?page=0&count=50&q=${word}`);
    if (!mapSearch) {
      console.log("bad response");
    }
    let data = await mapSearch.json();

    let moreData = await getAdditionalData(data);
    const combinedData = [];
    const minLength = Math.min(data.length, moreData.length);
    for (let i = 0; i < minLength; i++) {
      combinedData.push({ ...moreData[i], ...data[i] });
    }

    let filteredData = await applyFilters(combinedData);

    return filteredData;
  }

  const getAdditionalData = async (data) => {
    const promises = data.map((map) => fetch(`https://www.geoguessr.com/api/maps/${map.id}`));
    const responses = await Promise.all(promises);
    const extraMapData = await Promise.all(
      responses.map(async (resp) => {
        try {
          return await resp.json();
        } catch (error) {
          console.error(
            "Something went wrong when looking at the map data:",
            error,
            "(You can most likely ignore this message)"
          );
          return null;
        }
      })
    );

    return extraMapData.filter((data) => data !== null);
  };

  const openFilters = () => {
    console.log("open filters");
  };

  function applyFilters(data) {
    let filteredData = data;
    const minLikes = document.getElementById("min-likes").value;
    const minLocs = document.getElementById("min-locs").value;
    const minGamesPlayed = document.getElementById("min-games-played").value;
    const minAvgScore = document.getElementById("min-avg-score").value;

    //Filter min likes
    filteredData = filteredData.filter((item) => {
      return item.likes >= minLikes;
    });
    //Filter min locs
    filteredData = filteredData.filter((item) => {
      return item.coordinateCount >= minLocs;
    });
    //Filter min games played
    filteredData = filteredData.filter((item) => {
      return item.numberOfGamesPlayed >= minGamesPlayed;
    });
    //Filter min likes
    filteredData = filteredData.filter((item) => {
      return item.averageScore >= minAvgScore;
    });

    //Filter official or not
    switch (localStorage.getItem("officialSetting")) {
      case "unofficial":
        filteredData = filteredData.filter((item) => item.isUserMap);
        break;
      case "official":
        filteredData = filteredData.filter((item) => !item.isUserMap);
        break;
    }

    //Filter selectionMode
    switch (localStorage.getItem("selectionSetting")) {
      case "handpicked":
        filteredData = filteredData.filter((item) => item.locationSelectionMode == 1);
        break;
      case "polygonal":
        filteredData = filteredData.filter((item) => !item.isUserMap == 0);
        break;
    }

    //Save the selected filters
    localStorage.setItem("minLikes", minLikes);
    localStorage.setItem("minLocs", minLocs);
    localStorage.setItem("minGamesPlayed", minGamesPlayed);
    localStorage.setItem("minAvgScore", minAvgScore);

    return filteredData;
  }

  createResultsFromSearch();
  newSearchPageCSS();
  createNewSearchbar();

  document.querySelector(".search-input").addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      localStorage.setItem("searchTerm", document.querySelector(".search-input").value);
      createResultsFromSearch(localStorage.getItem("searchTerm"));
    }
  });

  const officalSelectionBtns = document.querySelectorAll(".official-toggle-buttons > button");
  officalSelectionBtns.forEach((button) => {
    button.addEventListener("click", () => {
      officalSelectionBtns.forEach((a) => {
        a.classList.remove("active-button");
      });
      button.classList.add("active-button");
      let officialSetting = button.id.toString();
      localStorage.setItem("officialSetting", officialSetting);
    });
  });
  const selectionModeSelectionBtns = document.querySelectorAll(".selectionmode-toggle-buttons > button");
  selectionModeSelectionBtns.forEach((button) => {
    button.addEventListener("click", () => {
      selectionModeSelectionBtns.forEach((a) => {
        a.classList.remove("active-button");
      });
      button.classList.add("active-button");
      let selectionSetting = button.id.toString();
      localStorage.setItem("selectionSetting", selectionSetting);
    });
  });

  const applyFiltersBtn = document.querySelector(".apply-button");
  applyFiltersBtn.addEventListener("click", () => createResultsFromSearch(localStorage.getItem("searchTerm")));
}