現在時刻をbarで視覚的に表示するUserScript
動機
こんなかんじ(09:14頃に撮影)
狭い時
https://gyazo.com/77c5ff70c64f6d221e41d737b4a5b0ed
幅広
https://gyazo.com/677bb8d81b0ebaf10fb47a07647e2527
2023-02-15
22:00:26 できた
https://gyazo.com/ebfa42605809c310a4d4b7f609582061
21:51:34 3時間ごとなら6等分じゃなくて8等分だった
値を修正する
21:41:05 過去と未来で色を変えるのをやめた
今動作確認中
21:42:51 3時間ごとの目盛りが、中央の線しか表示されない
https://gyazo.com/4bd85c60ce2d06764dfb2547c971c16c
スクショに写ってるじゃん！
ディスプレイ上だと細すぎて見えなかったということか
0.2%から0.4%に幅を増やそう
21:51:29 表示された
2023-02-14
12:27:44 これでリリースする
11:19:41
いいかんじ
https://gyazo.com/2d90a719207cb0d864644aca0b70e420
あ、時刻は自前でdom作って表示する必要があるか。
実装したいこと
✅過去と未来とで色を変える必要性がないように思えてきた
現在位置と3時間ごとの目盛りさえあれば、他はいらないや
❌projectのテーマに色を合わせたい
現状だと、過ぎた時間を表す色が決めうちになってしまっている
どのprojectでも色が同じ
https://gyazo.com/7ccb70381dead3677926875a8f48f388
CSSで色合成できないかな？
✅n時間ごとに不連続に色を変えたい目盛りを入れる
1/2や1/4経過したことはぱっと見てわかるが、6時や9時を経過したのかはよくわからない
色変えじゃなくて、縦線を目盛り代わりに挿入するだけで十分だな
projectによって色がみにくい
https://gyazo.com/91573f739d4868383145b37a5b5862ec
css custom propertyを入れて、UserCSSでprojectごとに色を指定できるようにしようかな
色がにじむ？
usercss職人に聞いてみる
バーの幅は24*18=432秒=7分12秒
あんまり見てない……takker.icon
code:script.ts
///<reference no-default-lib="true" />
///<reference lib="esnext" />
///<reference lib="dom" />
interface Indicator {
/** 現在時刻 */
now: Date;
/** the color of the now indicator */
present: string;
/** 3時間ごとの目盛りの色 */
by3: string;
}
const renderIndicator = (init: Indicator) => {
const nav = document.querySelector("nav.navbar");
if (!(nav instanceof HTMLElement)) throw Error('"nav.navbar" does not exist.');
const start = new Date(init.now.getFullYear(), init.now.getMonth(), init.now.getDate());
const nowPos = (init.now.getTime() - start.getTime()) / (24 * 3600 * 1000);
const posLeft = (nowPos * 100 - 0.25).toFixed(2);
const posRight = (nowPos * 100 + 0.25).toFixed(2);
重ねて表示することで、現在時刻を表す線の位置に応じた場合分けが不要になる
最上層
現在時刻を表す線を描く
幅0.5%
7.2分に相当
真ん中
3時間ごとに目盛りを打つ
幅0.4%
5.76分に相当
最下層
navbarの色塗り
code:script.ts
nav.style.background = `linear-gradient(to right, ${
posLeft < 0
? ${init.now} ${posRight}%, transparent ${posRight}%
: posRight > 100
? transparent ${posLeft}%, ${init.present} ${posLeft}%
: transparent ${posLeft}%, ${init.present} ${posLeft}% ${posRight}%, transparent ${posRight}%
}), linear-gradient(to right, ${init.by3} 0.20%, transparent 0.20% 12.3%, ${init.by3} 12.3% 12.7%, transparent 12.7% 24.8%, ${init.by3} 24.8% 25.2%, transparent 25.2% 37.3%, ${init.by3} 37.3% 37.7%, transparent 37.7% 49.8%, ${init.by3} 49.8% 50.2%, transparent 50.2% 62.3%, ${init.by3} 62.3% 62.7%, transparent 62.7% 74.8%, ${init.by3} 74.8% 75.2%, transparent 75.2% 87.3%, ${init.by3} 87.3% 87.7%, transparent 87.7% 99.8%, ${init.by3} 99.8%), var(--navbar-bg, rgba(53, 59, 72, 0.6))`;
};
let timer: number | undefined;
setInterval(() => {
if (timer !== undefined) cancelAnimationFrame(timer);
timer = requestAnimationFrame(() => renderIndicator({
now: new Date(),
present: "#ffdd4480",
by3: "#80808080",
}));
}, 1000);