Adding taproot countdown

frontend/src/app/components/start/start.component.html

@@ -5,6 +5,9 @@
   </div>
   <div class="warning-label">{{ eventName }}</div>
 </ng-container>
+
+<div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
+
 <div id="blockchain-container" dir="ltr">
   <app-blockchain></app-blockchain>
 </div>

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

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 #blockchain-container {
   position: relative;
   overflow-x: scroll;
@@ -11,15 +13,12 @@
 }
 
 .warning-label {
-  position: absolute;
-  width: 150px;
+  position: relative;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
   padding: 6px 4px;
-  border-radius: 4px;
   margin-top: -10px;
-  margin-left: 10px;
 }
 // Fireworks
 
@@ -32,9 +31,9 @@ $box-shadow: ();
 $box-shadow2: ();
 @for $i from 0 through $particles {
   $box-shadow: $box-shadow,
-               random($width)-$width / 2 + px
-               random($height)-$height / 1.2 + px
-               hsl(random(360), 100, 50);
+               random($width) - math.div($width, 1.2) + px
+               random($height) - math.div($height, 1.2) + px
+               hsl(random(360), 100%, 50%);
   $box-shadow2: $box-shadow2, 0 0 #fff
 }
 @mixin keyframes ($animationName) {

frontend/src/app/components/start/start.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { specialBlocks } from 'src/app/app.constants';
+import { takeLast } from 'rxjs/operators';
 
 @Component({
   selector: 'app-start',
@@ -9,26 +10,12 @@ import { specialBlocks } from 'src/app/app.constants';
   styleUrls: ['./start.component.scss'],
 })
 export class StartComponent implements OnInit {
-
   interval = 60;
   colors = ['#5E35B1', '#ffffff'];
 
+  countdown = 0;
   specialEvent = false;
   eventName = '';
-  optionsLeft = {
-    particleCount: 2,
-    angle: 70,
-    spread: 50,
-    origin: { x: 0 },
-    colors: this.colors,
-  };
-  optionsRight = {
-    particleCount: 2,
-    angle: 110,
-    spread: 50,
-    origin: { x: 1 },
-    colors: this.colors,
-  };
 
   constructor(
     private websocketService: WebsocketService,
@@ -39,10 +26,23 @@ export class StartComponent implements OnInit {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
     this.stateService.blocks$
       .subscribe((blocks: any) => {
+        if (this.stateService.network !== '') {
+          return;
+        }
+        this.countdown = 0;
         const block = blocks[0];
-        if(specialBlocks[block.height]) {
+
+        for (const sb in specialBlocks) {
+          const height = parseInt(sb, 10);
+          const diff = height - block.height;
+          if (diff > 0 && diff <= 1008) {
+            this.countdown = diff;
+            this.eventName = specialBlocks[sb].labelEvent;
+          }
+        }
+        if (specialBlocks[block.height]) {
           this.specialEvent = true;
-          this.eventName = specialBlocks[block.height].labelEvent;
+          this.eventName = specialBlocks[block.height].labelEventCompleted;
           setTimeout(() => {
             this.specialEvent = false;
           }, 60 * 60 * 1000);