Timer UI for codenames.game

codenames-timer.js

/* 
Add-on timer for https://codenames.game
When run, a popup window will be opened with a countdown timer.
The timer will automatically reset when a team completes its turn.
There is also a manual reset control and duration setting

To run, start a game, then paste this entire gist into your browser developer tools.
Alternatively, add this URL as a bookmarklet:

javascript:fetch("https://gist.githubusercontent.com/davidtaylorhq/b64c294122dafbaf244ad7a53ce7a82a/raw/codenames-timer.js").then(response => response.text()).then(eval)

For best results have one person run the timer and stream the browser window to other players
via your video chat software.
*/

setInterval(() => {
  const isBlue = !!window.getComputedStyle(document.querySelector("#view div")).backgroundImage.match(/rgb\(91/);
  if(window.wasBlue !== isBlue){
    window.wasBlue = isBlue;
    window.timerStartedAt = new Date();
    console.log("Starting Timer")
  }

  const secondsElapsed = (new Date() - window.timerStartedAt)/1000

  if(!window.timerWindow || window.timerWindow.closed){
    window.timerWindow = window.open("about:blank", "timer", "toolbar=no, scrollbars=no, menubar=no, status=no, directories=no, width=500, height=200, left=0, top=0");
  }

  if(!window.timerWindow || !window.timerWindow.document) return;

  if(!window.timerWindow.document.querySelector("link")){
    window.timerWindow.document.head.innerHTML = `
      <title>Codenames Timer</title>
      <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css"/>
      <style>
        body {
          color: white;
          font-family: "Arial";
          text-align: center;
        }
        #timer {
          font-size: 50vh;
        }
        .digits{
          font-family: "Segment7Standard";
          font-size: 50vh;
        }
        audio{
          margin-top: 100px;
        }
      </style>
    `;

    window.timerWindow.document.body.innerHTML = `
      <div id="timer"></div>
      <div id="control">
      Minutes: <input type="number" id="minutes" name="minutes" min="1" max="10" value="4"> <input id="resetButton" type=button value="Reset">
      </div>
      <audio controls id="countdown">
        <source src="http://www.televisiontunes.com/song/download/12748" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
      <audio controls id="clue">
        <source src="https://gist.githubusercontent.com/davidtaylorhq/b64c294122dafbaf244ad7a53ce7a82a/raw/sfx.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
    `;

    window.timerWindow.document.querySelector("#resetButton").addEventListener("click", () => {
      window.timerStartedAt = new Date();
    })
  }

  const currentClue = document.querySelector(".clueWrapper .clue")?.innerText;
  const clueAudio = window.timerWindow.document.querySelector("#clue");
  if(clueAudio && currentClue && currentClue != window.lastClue){
    console.log("CLUE CHANGED")
    clueAudio.currentTime = 0;
    clueAudio.play();
  }
  window.lastClue = currentClue;

  const timerMinutes = parseInt(window.timerWindow.document.querySelector("#minutes").value) || 2;
  const timerSeconds = timerMinutes * 60;

  const secondsRemaining = timerSeconds - secondsElapsed;

  let m = 0;
  let s = 0;
  if(secondsRemaining > 0){
    m = Math.floor(secondsRemaining/60)
    s = Math.floor(secondsRemaining % 60)
  }

  audio = window.timerWindow.document.querySelector("#countdown");
  if(secondsRemaining <= 30 && secondsRemaining >= -1){
    if(audio.paused){
      audio.currentTime = 0;
      audio.play();
    }
  }else {
    if(!audio.paused && ((audio.duration - audio.currentTime) > 3)){
      audio.pause();
    }
  }

  window.timerWindow.document.body.querySelector("#timer").innerHTML = `
    <span class="digits">${String(m).padStart(2, "0")}</span>:<span class="digits">${String(s).padStart(2, "0")}</span>
  `
  
  if(isBlue){
    window.timerWindow.document.body.style.backgroundColor = "rgb(50, 132, 163)";
  }else{
    window.timerWindow.document.body.style.backgroundColor = "rgb(143, 43, 28)";
  }
}, 100)

sfx.mp3