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

generated at 10/17/2024, 3:29:52 AM
井戸端を開いてからの経過時間を表示するUserScript
イドバタニシ度をみるのに使えるかも
これ入れてる時点でかなり重度...
なんとかしようとする意思がある分マシ？
そんなー

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();
  const timer = setInterval(() => {
    ui.shadowRoot.getElementById("container").textContent = formatDistance(start);
  }, 100);
  
  return () => {
    clearInterval(timer);
    ui.remove();
  };
}

const zero = (value, digit = 2) => `${value}`.padStart(digit, "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
局所的にCSSを当てたいときはShadow DOMが便利
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