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

https://gyazo.com/e15ffdfd2e48563ac9fed0f2090af40b

2022-03-10

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

code:js

await (async () => {

const { launch } = await import("/api/code/villagepump/井戸端を開いてからの経過時間を表示するUserScript/script.js");

launch();

})();

code:script.js

export 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();

};

}

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));

}

UI

code:script.js

const 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;

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;

}