☰

Add a stopwatch to liouh picross

Stopwatch to find out how quick you are.

  1. // ==UserScript==
  2. // @name         Add a stopwatch to liouh picross
  3. // @namespace    guebosch
  4. // @version      2024-03-30
  5. // @description  Stopwatch to find out how quick you are.
  6. // @author       guebosch
  7. // @match        https://liouh.com/picross/
  8. // @match        https://liouh.com/picross2/
  9. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  10. // @icon         https://www.google.com/s2/favicons?sz=64&domain=liouh.com
  11. // @grant        GM_addStyle
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15. var gblButtonClickTime;
  16.  
  17. $("body").prepend(`
  18.     <div id="tmStopWatchBlck">
  19.         <button id="tmStopWatchBttn">Start</button>
  20.         <span id="tmTimeStat"> </span>
  21.     </div>
  22. `);
  23.  
  24. $("#tmStopWatchBttn").click(zEvent => {
  25.     var statusNode = $("#tmTimeStat");
  26.     var tmrButton = $(zEvent.target);
  27.  
  28.     //--- Button text is either "Start" or "Stop".
  29.     if (tmrButton.text() === "Start") {
  30.         // Start the timer
  31.         tmrButton.text("Stop");
  32.         statusNode.css("background", "lightyellow");
  33.         gblButtonClickTime = performance.now();
  34.         console.log("Timer started at:", gblButtonClickTime.toFixed(0), new Date());
  35.     } else {
  36.         // Stop the timer
  37.         tmrButton.text("Start");
  38.         statusNode.css("background", "lightgreen");
  39.         var stopTime = performance.now();
  40.         var elapsedtime = stopTime - gblButtonClickTime; // Milliseconds
  41.         var purtyElpsdTime = (elapsedtime / 1000).toFixed(3) + " seconds";
  42.         console.log("Timer stopped at:", stopTime.toFixed(0), new Date(), "Elapsed:", purtyElpsdTime);
  43.         statusNode.text(purtyElpsdTime);
  44.     }
  45. });
  46.  
  47. GM_addStyle(`
  48.     #tmStopWatchBttn {
  49.         font-size: 1.2em;
  50.         padding: 0.5ex 1em;
  51.         width: 5em;
  52.     }
  53.     #tmTimeStat {
  54.         margin-left: 1em;
  55.         padding: 0.2ex 2ex;
  56.         border: 1px solid lightgray;
  57.         border-radius: 0.5ex;
  58.     }
  59. `);