100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const CENTER_X = 63;
|
|
const CENTER_Y = 95;
|
|
|
|
const app = useAppStore();
|
|
const store = useHomeStore();
|
|
|
|
const { assets } = useAssets();
|
|
|
|
function drawLine(
|
|
ctx: CanvasRenderingContext2D,
|
|
x0: number,
|
|
y0: number,
|
|
x1: number,
|
|
y1: number,
|
|
width: number,
|
|
) {
|
|
const dx = Math.abs(x1 - x0);
|
|
const dy = Math.abs(y1 - y0);
|
|
const sx = x0 < x1 ? 1 : -1;
|
|
const sy = y0 < y1 ? 1 : -1;
|
|
let err = dx - dy;
|
|
|
|
const drawThickPixel = (x: number, y: number) => {
|
|
const isVertical = dy > dx;
|
|
|
|
if (width === 1) {
|
|
ctx.fillRect(x, y, 1, 1);
|
|
} else if (isVertical) {
|
|
const offset = Math.floor((width - 1) / 2);
|
|
ctx.fillRect(x - offset, y, width, 1);
|
|
} else {
|
|
const offset = Math.floor((width - 1) / 2);
|
|
ctx.fillRect(x, y - offset, 1, width);
|
|
}
|
|
};
|
|
|
|
while (true) {
|
|
drawThickPixel(x0, y0);
|
|
|
|
if (x0 === x1 && y0 === y1) break;
|
|
|
|
const e2 = 2 * err;
|
|
if (e2 > -dy) {
|
|
err -= dy;
|
|
x0 += sx;
|
|
}
|
|
if (e2 < dx) {
|
|
err += dx;
|
|
y0 += sy;
|
|
}
|
|
}
|
|
}
|
|
|
|
useRender((ctx) => {
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.stage1Opacity
|
|
: store.isOutro && store.outro.animateTop
|
|
? store.outro.stage1Opacity
|
|
: 1;
|
|
ctx.drawImage(assets.home.topScreen.clock, 13, 45);
|
|
|
|
ctx.globalAlpha = store.isIntro
|
|
? store.intro.stage1Opacity
|
|
: store.isOutro && store.outro.animateTop
|
|
? store.outro.stage2Opacity
|
|
: 1;
|
|
const now = new Date();
|
|
|
|
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>
|