clock selected block arrow

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

@@ -3,6 +3,11 @@
   *ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
     <ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
+      <div
+        *ngIf="minimal && spotlight < 0 && chainTip + spotlight + 1 === block.height"
+        class="spotlight-bottom"
+        [style.left]="blockStyles[i].left"
+      ></div>
       <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
         class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
         [class.offscreen]="!static && count && i >= count"

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

@@ -174,4 +174,16 @@
   .bitcoin-block {
     transform: scaleX(-1);
   }
+}
+
+.spotlight-bottom {
+  position: absolute;
+  width: calc(0.6 * var(--block-size));
+  height: calc(0.25 * var(--block-size));
+  border-left: solid calc(0.3 * var(--block-size)) transparent;
+  border-bottom: solid calc(0.3 * var(--block-size)) white;
+  border-right: solid calc(0.3 * var(--block-size)) transparent;
+  transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
+  border-radius: 2px;
+  z-index: -1;
 }

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

@@ -26,6 +26,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() connected: boolean = true;
   @Input() minimal: boolean = false;
   @Input() blockWidth: number = 125;
+  @Input() spotlight: number = 0;
   
   specialBlocks = specialBlocks;
   network = '';

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

@@ -1,7 +1,7 @@
 <div class="clock-wrapper" [style]="wrapperStyle">
   <div class="clockchain-bar" [style.height]="chainHeight + 'px'">
     <div class="clockchain">
-      <app-clockchain [width]="chainWidth" [height]="chainHeight"></app-clockchain>
+      <app-clockchain [width]="chainWidth" [height]="chainHeight" [mode]="mode"></app-clockchain>
     </div>
   </div>
   <div class="clock-face">

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

@@ -23,7 +23,7 @@
     width: 100%;
     height: 15.625%;
     z-index: 2;
-    overflow: hidden;
+    // overflow: hidden;
     // background: #1d1f31;
     // box-shadow: 0 0 15px #000;
   }

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

@@ -5,8 +5,8 @@
   <div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
     <span>
       <div class="blocks-wrapper">
-        <app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth"></app-mempool-blocks>
+        <app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'mempool' ? 1 : 0"></app-mempool-blocks>
-        <app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth"></app-blockchain-blocks>
+        <app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'block' ? -1 : 0"></app-blockchain-blocks>
       </div>
       <div class="divider" [style.top]="-(height / 6) + 'px'">
         <svg

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

@@ -11,6 +11,7 @@ import { StateService } from '../../services/state.service';
 export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width: number = 300;
   @Input() height: number = 60;
+  @Input() mode: 'mempool' | 'block';
 
   mempoolBlocks: number = 3;
   blockchainBlocks: number = 6;

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

@@ -2,6 +2,11 @@
   <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;">
     <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
+        <div
+          *ngIf="minimal && spotlight > 0 && spotlight === i + 1"
+          class="spotlight-bottom"
+          [style.right]="mempoolBlockStyles[i].right"
+        ></div>
         <div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
           <a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
             class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>

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

@@ -157,4 +157,16 @@
   #arrow-up {
     transform: translateX(70px);
   }
+}
+
+.spotlight-bottom {
+  position: absolute;
+  width: calc(0.6 * var(--block-size));
+  height: calc(0.25 * var(--block-size));
+  border-left: solid calc(0.3 * var(--block-size)) transparent;
+  border-bottom: solid calc(0.3 * var(--block-size)) white;
+  border-right: solid calc(0.3 * var(--block-size)) transparent;
+  transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
+  border-radius: 2px;
+  z-index: -1;
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -27,6 +27,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() minimal: boolean = false;
   @Input() blockWidth: number = 125;
   @Input() count: number = null;
+  @Input() spotlight: number = 0;
 
   specialBlocks = specialBlocks;
   mempoolBlocks: MempoolBlock[] = [];