Special halvening block and fireworks.

fixes #50

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,6 +1,6 @@
 <div class="blocks-container" *ngIf="blocks.length">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-    <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
+    <div class="text-center bitcoin-block mined-block" [class.blink-bg]="block.height % 210000 === 0" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
       <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
       <div class="block-height">
         <a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -101,3 +101,19 @@
   border-right: 35px solid transparent;
   border-bottom: 35px solid #FFF;
 }
+
+// Blinking block
+
+.blink-bg {
+  color: #fff;
+  animation: blinkingBackground 1s infinite;
+  background: inherit !important;
+}
+
+@keyframes blinkingBackground {
+  0%		{ background-color: #10c018;}
+  25%		{ background-color: #1056c0;}
+  50%		{ background-color: #ef0a1a;}
+  75%		{ background-color: #CFB53B;}
+  100%	{ background-color: #04a1d5;}
+}

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

@@ -1,3 +1,8 @@
+<div class="pyro" *ngIf="isHalveningeEvent">
+  <div class="before"></div>
+  <div class="after"></div>
+</div>
+
 <div style="position: relative;">
   <app-blockchain></app-blockchain>
 </div>

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

@@ -1,3 +1,132 @@
 .search-container {
   padding-top: 50px;
 }
+
+
+// Fireworks
+
+$particles: 50;
+$width: 500;
+$height: 500;
+
+// Create the explosion...
+$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);
+  $box-shadow2: $box-shadow2, 0 0 #fff
+}
+@mixin keyframes ($animationName) {
+    @-webkit-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-moz-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-o-keyframes #{$animationName} {
+        @content;
+    }
+
+    @-ms-keyframes #{$animationName} {
+        @content;
+    }
+
+    @keyframes #{$animationName} {
+        @content;
+    }
+}
+
+@mixin animation-delay ($settings) {
+    -moz-animation-delay: $settings;
+    -webkit-animation-delay: $settings;
+    -o-animation-delay: $settings;
+    -ms-animation-delay: $settings;
+    animation-delay: $settings;
+}
+
+@mixin animation-duration ($settings) {
+    -moz-animation-duration: $settings;
+    -webkit-animation-duration: $settings;
+    -o-animation-duration: $settings;
+    -ms-animation-duration: $settings;
+    animation-duration: $settings;
+}
+
+@mixin animation ($settings) {
+    -moz-animation: $settings;
+    -webkit-animation: $settings;
+    -o-animation: $settings;
+    -ms-animation: $settings;
+    animation: $settings;
+}
+
+@mixin transform ($settings) {
+    transform: $settings;
+    -moz-transform: $settings;
+    -webkit-transform: $settings;
+    -o-transform: $settings;
+    -ms-transform: $settings;
+}
+
+body {
+  margin:0;
+  padding:0;
+  background: #000;
+  overflow: hidden;
+}
+
+.pyro > .before, .pyro > .after {
+  z-index: 100;
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  box-shadow: $box-shadow2;
+  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
+}
+    
+.pyro > .after {
+  @include animation-delay((1.25s, 1.25s, 1.25s));
+  @include animation-duration((1.25s, 1.25s, 6.25s));
+}
+        
+@include keyframes(bang) {
+  to {
+    box-shadow:$box-shadow;
+  }
+}
+    
+@include keyframes(gravity)  {
+  to {
+    @include transform(translateY(200px));
+    opacity: 0;
+  }
+}
+    
+@include keyframes(position) {
+  0%, 19.9% {
+    margin-top: 10%;
+    margin-left: 40%;
+  }
+  20%, 39.9% {
+    margin-top: 40%;
+    margin-left: 30%;
+  }
+  40%, 59.9% {  
+    margin-top: 20%;
+    margin-left: 70%
+  }
+  60%, 79.9% {  
+    margin-top: 30%;
+    margin-left: 20%;
+  }
+  80%, 99.9% {  
+    margin-top: 30%;
+    margin-left: 80%;
+  }
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-start',
@@ -9,11 +10,24 @@ import { WebsocketService } from 'src/app/services/websocket.service';
 export class StartComponent implements OnInit {
   view: 'blocks' | 'transactions' = 'blocks';
 
+  isHalveningeEvent = false;
+
   constructor(
     private websocketService: WebsocketService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit() {
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+
+    this.stateService.blocks$
+      .subscribe((block) => {
+        if (block.height % 210000 === 0) {
+          this.isHalveningeEvent = true;
+          setTimeout(() => {
+            this.isHalveningeEvent = false;
+          }, 60 * 60 * 1000);
+        }
+      });
   }
 }