Google Santa Tracker - Face lift

google-santa-trakcer-face-lift.js

// ==UserScript==
// @name         Google Santa Tracker fun.
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Replacing elves with your friends! If you want to add your own friends, just populate the `newElves` array.
// @author       anevins12
// @match        https://maps.gstatic.com/mapfiles/santatracker/v202012090457/*
// @grant        none
// ==/UserScript==

setTimeout(function() {
  const sheet = new CSSStyleSheet();
  const thingsToRemove = Array.from(document.querySelectorAll(`modvil-tracker, modvil-module, #play`));
  const village = document.getElementById('village');
  const villageShadowRoot = village.shadowRoot;
  const newElves = [
    'https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/102411497_10158018077504961_1836726524863053824_n.jpg?_nc_cat=108&ccb=2&_nc_sid=8bfeb9&_nc_ohc=YhHsIuO3GXMAX8hnLjd&_nc_ht=scontent-lht6-1.xx&oh=4de09e676884dda6b3fb71dcf7813b35&oe=5FFFFAE6',
  ];
  const elfSelector = `.layer3 [class*='elf']`;
  const newElfIdentifier = 'new-elf';
  const elvesCSS = elves => {
      const newCSS = [];
      const existingElves = villageShadowRoot.querySelectorAll(elfSelector);
      const bikeLayer = villageShadowRoot.querySelector('.layer3');
      const clonedElves = [];
      var countNewElves = elves.length;
      var countExistingElves = existingElves.length;

      // If there are more people than there are existing elves.
      if (countNewElves > countExistingElves) {
          // Create new elves!
          for (countNewElves; countNewElves > countExistingElves; countExistingElves++) {
              const randomElf = existingElves[Math.floor(Math.random() * 8) + 1];

              // Create cloned elves.
              bikeLayer.appendChild(randomElf.cloneNode());
              // Create variations of the clone animation path.
              randomElf.style.left = Math.floor(Math.random() * Math.floor(300)) + 'px';
              randomElf.classList.add(newElfIdentifier);
          }
      }

      // Index needs to start at 1 to account for nth-child limitations.
      for (var index = 1; index <= countNewElves; index++) {
          // Hide all elves.
          newCSS.push(`${elfSelector} { display: none; }`);
          // Variate animation & show custom elf.
          newCSS.push(`${elfSelector}:nth-child(${index}) { display: block; animation-duration: ${Math.random() * (12.7 - 12) + 12}s; }`);
          // Style elves.
          // Adjusting the array index now from the nth-child compensation.
          newCSS.push(`${elfSelector}:nth-child(${index})::before { background-image: url(${elves[index - 1]}) }`);
      }

      return newCSS;
  };
  const sceneCSS = [
    `.elfboard::before { left: 30px !important; } .elfchair::before { left: 30px !important; } ${elfSelector}::before {content: ''; position: absolute; top: 10px; left: 10px; background-size: 100%; background-position: center; width: 41px; height: 41px; z-index: 1; transform: scaleX(-1);}`,
    `.village .layer1 { background-image: url('https://cliftonbridge.org.uk/wp-content/themes/csbt/assets/images/header-logo.svg'); background-position: center 60px; background-size: 100%; }`,
  ];
  const totalCSS = sceneCSS.concat(elvesCSS(newElves));

  // Hide unsightly scenes.
  for (var index = 0; index < thingsToRemove.length; index++) {
      thingsToRemove[index].parentNode.removeChild(thingsToRemove[index]);
  }
  // Also hide this glitch elf that disrupts our nth-child selectors.
  const elfGlitch = villageShadowRoot.querySelector('.elf-glitch');
  elfGlitch.parentNode.removeChild(elfGlitch);


  sheet.replace(totalCSS.join(''));
  villageShadowRoot.adoptedStyleSheets = [...village.shadowRoot.adoptedStyleSheets, sheet];
}, 2000);

1. Install this script with Tampermonkey (browser addon): https://www.tampermonkey.net/

2. Visit the Google Santa Tracking website directly (and not via an iframe) to see the elves at work: https://maps.gstatic.com/mapfiles/santatracker/v202012090457/scenes/modvil/index_en.html?route=&referrer=https%3A%2F%2Fsantatracker.google.com%2F

3. If you want to add your own friends, just populate the newElves array.