/takker/井戸端を開いてからの経過時間を表示するUserScript

generated at 11/17/2024, 6:47:51 AM
井戸端を開いてからの経過時間を表示するUserScript
from /villagepump/井戸端を開いてからの経過時間を表示するUserScript
イドバタニシ度をみるのに使えるかも
井戸端にアクセスした瞬間にstopwatchが表示されるUserScript

2022-03-10
19:27:22 hoursの計算をミスってたので直した

jsawait (async () => {
  const { launch } = await import("/api/code/villagepump/井戸端を開いてからの経過時間を表示するUserScript/script.js");
  launch();
})();
script.jsexport function launch() {
  let cleanup = start();
  scrapbox.addListener("project:changed", () => {
    cleanup?.();
    cleanup = start();
  });
}

function start() {
  if (scrapbox.Project.name !== "villagepump") return;
  const ui = makeWatch();
  const start = new Date();
  let animationId;
  const timer = setInterval(() => {
    cancelAnimationFrame(animationId);
    animationId = requestAnimationFrame(
      () => ui.shadowRoot.getElementById("container").textContent = formatDistance(start)
    );
  }, 100);
  
  return () => {
    clearInterval(timer);
    ui.remove();
  };
}

const zero = (value, pad = 2) => `${value}`.padStart(pad, "0");
function formatDistance(start) {
  const duration = new Date().getTime() - start.getTime();
  const milliseconds = Math.floor((duration % 1000) / 100);
  const seconds = Math.floor((duration % (60 * 1000)) / 1000);
  const minutes = Math.floor((duration % (60 * 60 * 1000)) / (60 * 1000));
  const hours = Math.floor((duration - duration % (60 * 60 * 1000)) / (60 * 60 * 1000));
  
  return `${zero(hours)}:${zero(minutes)}:${zero(seconds)}.${zero(milliseconds, 1)}`;
}

UI
script.jsconst id = "イドバタニシウォッチ";
function makeWatch() {
  if (document.getElementById(id)) return document.getElementById(id);
  const div = document.createElement("div");
  div.id = id;
  const shadowRoot = div.attachShadow({ mode: "open" });
  shadowRoot.innerHTML =
`<style>
  :host {
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 1000;
    padding: 2px;
    border: solid 1px black;
    border-radius: 4px;
    background-color: var(--page-bg, #fefefe);
    color: var(--page-text-color, #4a4a4a);
    font: "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
    font-size: 1.73em;
  }
</style>
<div id="container">
  00:00:00.0
</div>`

  document.body.append(div);
  return div;
}

#UserScript
#2022-03-10 19:26:51 
#2022-02-13 11:59:20