responsive clock, fix blockchain

frontend/src/app/components/clock-face/clock-face.component.ts

@@ -1,36 +1,17 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } 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;
+export class ClockFaceComponent implements OnChanges {
+  @Input() size: number = 300;
   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',
-    };
-
+  ngOnChanges(): void {
     this.faceStyle = {
       width: `${this.size}px`,
       height: `${this.size}px`,