hourly blocks clock faces

frontend/src/app/components/clock/clock-a.component.html

@@ -0,0 +1,19 @@
+<div class="clock-wrapper">
+  <app-clock-face>
+    <div class="block-wrapper">
+      <ng-container *ngIf="block && block.height >= 0">
+        <div class="block-cube">
+          <div class="side top"></div>
+          <div class="side bottom"></div>
+          <div class="side right" [style]="blockStyle"></div>
+          <div class="side left" [style]="blockStyle"></div>
+          <div class="side front" [style]="blockStyle"></div>
+          <div class="side back" [style]="blockStyle"></div>
+        </div>
+        <div class="title-wrapper">
+          <h1 class="block-height">{{ block.height }}</h1>
+        </div>
+      </ng-container>
+    </div>
+  </app-clock-face>
+</div>

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

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-clock-a',
+  templateUrl: './clock-a.component.html',
+  styleUrls: ['./clock.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockAComponent implements OnInit {
+  blocksSubscription: Subscription;
+  block: BlockExtended;
+  blockStyle;
+
+  gradientColors = {
+    '': ['#9339f4', '#105fb0'],
+    bisq: ['#9339f4', '#105fb0'],
+    liquid: ['#116761', '#183550'],
+    'liquidtestnet': ['#494a4a', '#272e46'],
+    testnet: ['#1d486f', '#183550'],
+    signet: ['#6f1d5d', '#471850'],
+  };
+
+  constructor(
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks']);
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe(([block]) => {
+        if (block) {
+          this.block = block;
+          this.blockStyle = this.getStyleForBlock(this.block);
+          this.cd.markForCheck();
+        }
+      });
+  }
+
+  getStyleForBlock(block: BlockExtended) {
+    const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
+
+    return {
+      background: `repeating-linear-gradient(
+        #2d3348,
+        #2d3348 ${greenBackgroundHeight}%,
+        ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
+        ${this.gradientColors[''][1]} 100%
+      )`,
+    };
+  }
+}

frontend/src/app/components/clock/clock-b.component.html

@@ -0,0 +1,15 @@
+<div class="clock-wrapper">
+  <app-clock-face>
+    <div class="block-wrapper">
+      <ng-container *ngIf="block && block.height >= 0">
+        <div class="block-sizer" [style]="blockSizerStyle">
+          <app-mempool-block-overview [index]="0"></app-mempool-block-overview>
+        </div>
+        <div class="fader"></div>
+        <div class="title-wrapper">
+          <h1 class="block-height">{{ block.height }}</h1>
+        </div>
+      </ng-container>
+    </div>
+  </app-clock-face>
+</div>

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

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-clock-b',
+  templateUrl: './clock-b.component.html',
+  styleUrls: ['./clock.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockBComponent implements OnInit {
+  blocksSubscription: Subscription;
+  block: BlockExtended;
+  blockSizerStyle;
+
+  gradientColors = {
+    '': ['#9339f4', '#105fb0'],
+    bisq: ['#9339f4', '#105fb0'],
+    liquid: ['#116761', '#183550'],
+    'liquidtestnet': ['#494a4a', '#272e46'],
+    testnet: ['#1d486f', '#183550'],
+    signet: ['#6f1d5d', '#471850'],
+  };
+
+  constructor(
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.resizeCanvas();
+    this.websocketService.want(['blocks']);
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe(([block]) => {
+        if (block) {
+          this.block = block;
+          this.cd.markForCheck();
+        }
+      });
+  }
+
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    const screenSize = Math.min(window.innerWidth, window.innerHeight);
+    const baseSize = 0.92 * screenSize;
+    const size = Math.ceil(baseSize / 75) * 75;
+    const margin = screenSize - size;
+    this.blockSizerStyle = {
+      transform: `translate(${margin}px, ${margin}px)`,
+      width: `${size}px`,
+      height: `${size}px`,
+    };
+    this.cd.markForCheck();
+  }
+}

frontend/src/app/components/clock/clock.component.scss

@@ -0,0 +1,119 @@
+.clock-wrapper {
+  --clock-width: min(100vw, 100vh);
+  position: relative;
+  width: 100vw;
+  max-width: var(--clock-width);
+  height: 100vh;
+  max-height: var(--clock-width);
+  margin: auto;
+}
+
+.title-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .block-height {
+    font-size: calc(0.2 * var(--clock-width));
+    padding: 0;
+    margin: 0;
+    background: radial-gradient(rgba(0,0,0,0.5), transparent 67%);
+    padding: calc(0.05 * var(--clock-width)) calc(0.15 * var(--clock-width));
+  }
+}
+
+.block-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  .block-sizer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .fader {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: radial-gradient(transparent 0%, transparent 55%, #11131f 65%, #11131f 100%);
+  }
+
+  .block-cube {
+    --side-width: calc(0.4 * var(--clock-width));
+    --half-side: calc(0.2 * var(--clock-width));
+    --neg-half-side: calc(-0.2 * var(--clock-width));
+    transform-style: preserve-3d;
+    animation: block-spin 60s infinite linear;
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--side-width);
+    height: var(--side-width);
+
+    .side {
+      width: var(--side-width);
+      height: var(--side-width);
+      line-height: 100px;
+      text-align: center;
+      background: #232838;
+      display: block;
+      position: absolute;
+    }
+
+    .side.top {
+      transform: rotateX(90deg); 
+      margin-top: var(--neg-half-side);
+    }
+
+    .side.bottom {
+      background: #105fb0;
+      transform: rotateX(-90deg); 
+      margin-top: var(--half-side);
+    }
+
+    .side.right {
+      transform: rotateY(90deg); 
+      margin-left: var(--half-side);
+    }
+
+    .side.left {
+      transform: rotateY(-90deg); 
+      margin-left: var(--neg-half-side);
+    }
+
+    .side.front {
+      transform: translateZ(var(--half-side));
+    }
+
+    .side.back {
+      transform: translateZ(var(--neg-half-side));
+    }
+  }
+}
+
+
+
+@keyframes block-spin {
+  0% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);}
+  100% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-360deg);}
+}