40 lines
938 B
TypeScript
40 lines
938 B
TypeScript
import { Component, HostListener, OnInit } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-clock-face',
|
|
templateUrl: './clock-face.component.html',
|
|
styleUrls: ['./clock-face.component.scss'],
|
|
})
|
|
export class ClockFaceComponent implements OnInit {
|
|
size: number;
|
|
wrapperStyle;
|
|
chainStyle;
|
|
faceStyle;
|
|
showDial: boolean = false;
|
|
|
|
constructor() {}
|
|
|
|
ngOnInit(): void {
|
|
// initialize stuff
|
|
this.resizeCanvas();
|
|
}
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
resizeCanvas(): void {
|
|
this.size = Math.min(window.innerWidth, 0.78125 * window.innerHeight);
|
|
this.wrapperStyle = {
|
|
'--clock-width': `${this.size}px`
|
|
};
|
|
const scaleFactor = window.innerWidth / 1390;
|
|
this.chainStyle = {
|
|
transform: `translate(2vw, 0.5vw) scale(${scaleFactor})`,
|
|
transformOrigin: 'top left',
|
|
};
|
|
|
|
this.faceStyle = {
|
|
width: `${this.size}px`,
|
|
height: `${this.size}px`,
|
|
};
|
|
}
|
|
}
|