59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const { onRender } = useScreen();
|
|
const { assets } = useAssets();
|
|
|
|
const app = useAppStore();
|
|
const store = useHomeStore();
|
|
const tickClock = useClockTick();
|
|
|
|
const CENTER_X = 63;
|
|
const CENTER_Y = 95;
|
|
|
|
onRender((ctx) => {
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.topScreenOpacity
|
|
: store.isOutro && store.outro.animateTop
|
|
? store.outro.stage1Opacity
|
|
: 1;
|
|
assets.images.home.topScreen.clock.draw(ctx, 13, 45);
|
|
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.topScreenOpacity
|
|
: store.isOutro && store.outro.animateTop
|
|
? store.outro.stage2Opacity
|
|
: 1;
|
|
|
|
const now = new Date();
|
|
tickClock(now);
|
|
|
|
const renderHand = (
|
|
value: number,
|
|
color: string,
|
|
length: number,
|
|
width: number,
|
|
) => {
|
|
const angle = value * Math.PI * 2 - Math.PI / 2;
|
|
const endX = Math.round(CENTER_X + Math.cos(angle) * length);
|
|
const endY = Math.round(CENTER_Y + Math.sin(angle) * length);
|
|
ctx.fillStyle = color;
|
|
drawLine(ctx, CENTER_X, CENTER_Y, endX, endY, width);
|
|
};
|
|
|
|
renderHand(now.getMinutes() / 60, "#797979", 30, 2);
|
|
renderHand(
|
|
now.getHours() / 12 + now.getMinutes() / 60 / 12,
|
|
"#797979",
|
|
23,
|
|
2,
|
|
);
|
|
renderHand(now.getSeconds() / 60, app.color.hex, 35, 2);
|
|
|
|
ctx.fillStyle = "#494949";
|
|
ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|