mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 02:11:49 +01:00
Code Issues Projects Releases Wiki Activity

responsive clock, fix blockchain

Browse Source
This commit is contained in:
Mononaut 2023-04-19 03:34:13 +09:00
parent 61531171c9
commit f879a34021
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
21 changed files with 412 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/block-overview-graph/block-scene.ts
View File

@ -36,7 +36,6 @@ export default class BlockScene {
this.gridSize = this.width / this.gridWidth;
this.unitPadding = Math.max(1, Math.floor(this.gridSize / 2.5));
this.unitWidth = this.gridSize - (this.unitPadding);
console.log(this.gridSize, this.unitPadding, this.unitWidth);
this.dirty = true;
if (this.initialised && this.scene) {

14
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@ -1,21 +1,21 @@
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.tiny]="tiny"
[style.left]="static ? (offset || 0) + 'px' : null"
<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.minimal]="minimal"
[style.left]="static ? (offset || 0) + 'px' : null" [style.--block-size]="blockWidth+'px'"
*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 [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
[class.offscreen]="tiny && i >= 6"
[class.offscreen]="!static && count && i >= count"
id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
[class.blink-bg]="isSpecial(block.height)">
<a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
<div *ngIf="!tiny" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<div *ngIf="!minimal" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a>
</div>
<div class="block-body">
<ng-container *ngIf="!tiny">
<ng-container *ngIf="!minimal">
<div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
@ -82,11 +82,11 @@
</div>
<ng-template #loadingBlocksTemplate>
<div class="blocks-container" [class.time-ltr]="timeLtr">
<div class="blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
<div class="flashing">
<div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn">
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
[ngStyle]="emptyBlockStyles[i]"></div>
[ngStyle]="emptyBlockStyles[i]" [class.offscreen]="!static && count && i >= count"></div>
</div>
</div>
</div>

24
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@ -1,6 +1,6 @@
.bitcoin-block {
width: 125px;
height: 125px;
width: var(--block-size);
height: var(--block-size);
}
.blockLink {
@ -39,9 +39,11 @@
}
.blocks-container {
--block-size: 125px;
--block-offset: calc(0.32 * var(--block-size));
position: absolute;
top: 0px;
left: 40px;
left: var(--block-offset);
}
.block-body {
@ -81,11 +83,11 @@
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
width: var(--block-size);
height: calc(0.192 * var(--block-size));
position:absolute;
top: -24px;
left: -20px;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
@ -93,11 +95,11 @@
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
width: calc(0.16 * var(--block-size));
height: var(--block-size);
position: absolute;
top: -12px;
left: -20px;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
transform: skewY(50deg);

32
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -24,7 +24,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
@Input() loadingTip: boolean = false;
@Input() connected: boolean = true;
@Input() tiny: boolean = false;
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
specialBlocks = specialBlocks;
network = '';
@ -52,6 +53,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
timeLtrSubscription: Subscription;
timeLtr: boolean;
blockOffset: number = 155;
dividerBlockOffset: number = 205;
blockPadding: number = 30;
gradientColors = {
'': ['#9339f4', '#105fb0'],
bisq: ['#9339f4', '#105fb0'],
@ -119,7 +124,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
this.blockStyles = [];
if (this.blocksFilled && block.height > this.chainTip) {
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -this.blockOffset : -this.dividerBlockOffset)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
@ -160,6 +165,13 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.blockWidth && this.blockWidth) {
this.blockPadding = 0.24 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
this.dividerBlockOffset = this.blockOffset + (0.4 * this.blockWidth);
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
}
if (this.static) {
const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1);
this.updateStaticBlocks(animateSlide);
@ -192,14 +204,14 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.arrowVisible = true;
if (newBlockFromLeft) {
this.arrowLeftPx = blockindex * 155 + 30 - 205;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding - this.dividerBlockOffset;
setTimeout(() => {
this.arrowTransition = '2s';
this.arrowLeftPx = blockindex * 155 + 30;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
this.cd.markForCheck();
}, 50);
} else {
this.arrowLeftPx = blockindex * 155 + 30;
this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
if (!animate) {
setTimeout(() => {
this.arrowTransition = '2s';
@ -246,7 +258,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
this.blocks = this.blocks.slice(0, this.count);
this.blockStyles = [];
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -this.blockOffset : 0)));
this.cd.markForCheck();
if (animateSlide) {
// animate blocks slide right
@ -288,7 +300,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
}
return {
left: addLeft + 155 * index + 'px',
left: addLeft + this.blockOffset * index + 'px',
background: `repeating-linear-gradient(
#2d3348,
#2d3348 ${greenBackgroundHeight}%,
@ -310,7 +322,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
left: addLeft + (this.blockOffset * index) + 'px',
background: "#2d3348",
};
}
@ -318,7 +330,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + (155 * index) + 'px',
left: addLeft + (this.blockOffset * index) + 'px',
};
}
@ -326,7 +338,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
const addLeft = animateEnterFrom || 0;
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
};
}

179
frontend/src/app/components/clock-face/clock-face.component.html
View File

@ -1,94 +1,87 @@
<div class="clock-wrapper" [style]="wrapperStyle">
<div class="clockchain-bar">
<div class="clockchain" [style]="chainStyle">
<app-clockchain></app-clockchain>
</div>
</div>
<div class="clock-face" [style]="faceStyle">
<ng-content></ng-content>
<svg
class="cut-out"
width="384"
height="384"
viewBox="0 0 384 384"
>
<g>
<path
class="face"
d="M 0,0 V 384 H 384 V 0 Z M 192,15 A 177,177 0 0 1 369,192 177,177 0 0 1 192,369 177,177 0 0 1 15,192 177,177 0 0 1 192,15 Z"
/>
</g>
</svg>
<svg
class="demo-dial"
width="384"
height="384"
viewBox="0 0 384 384"
>
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,136.25965,-98.671146)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,247.72948,-98.603866)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,406.167,175.64488)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4-6" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,-22.20143,175.70014)" />
<path id="polyline22" style="color:#000000;fill:#ffffff;fill-opacity:0.7;stroke-width:0.411929;" d="m 192,14.058594 -9.3164,0.24414 -9.28907,0.730469 -9.24023,1.21875 -9.16211,1.697266 -9.0625,2.175781 -8.93555,2.646484 -8.7832,3.109375 -8.61133,3.56836 -8.41016,4.011719 -8.1914,4.447265 -7.945316,4.869143 -7.679687,5.27734 -7.392579,5.67383 -7.087891,6.05078 -6.759764,6.414063 -6.414064,6.761718 -6.050779,7.085937 -5.67383,7.392581 -5.279295,7.679686 -4.869142,7.945309 -4.445312,8.19141 -4.013672,8.41016 -3.566407,8.61133 -3.109374,8.7832 -2.648438,8.93554 -2.173828,9.06055 -1.699219,9.16406 -1.216797,9.23828 -0.730468,9.29102 -0.244141,9.31641 0.244141,9.31445 0.730468,9.29101 1.216797,9.23829 1.699219,9.16406 2.173828,9.06055 2.648438,8.93554 3.109374,8.78516 3.566407,8.60937 4.013672,8.41211 4.445312,8.18946 4.869142,7.94531 5.279295,7.67969 5.67383,7.39453 6.050779,7.08593 6.414064,6.75977 6.759764,6.41406 7.087891,6.05274 7.392579,5.67187 7.679687,5.2793 0.18164,0.11133 1.058595,-1.69727 -0.150392,-0.0918 -7.593749,-5.21875 -7.310548,-5.60938 -7.005859,-5.98437 -6.683594,-6.34375 -6.343748,-6.6836 -5.984376,-7.00586 -5.609375,-7.31054 -5.21875,-7.59375 -4.814453,-7.85547 -4.396484,-8.09961 -3.966797,-8.31446 -3.525391,-8.51367 -3.076172,-8.68554 -2.617187,-8.83594 -2.150391,-8.95899 -1.679687,-9.06054 -1.203125,-9.13477 -0.722657,-9.18554 -0.242187,-9.21094 0.242187,-9.21094 0.722657,-9.18555 1.203125,-9.13672 1.679687,-9.06054 2.150391,-8.95899 2.617187,-8.83593 3.076172,-8.6836 3.525391,-8.51367 3.966797,-8.31641 4.396484,-8.09765 4.814453,-7.857424 5.21875,-7.593749 5.609375,-7.31055 5.984376,-7.005859 6.343748,-6.683591 6.683594,-6.343752 7.005859,-5.98242 7.310548,-5.609375 7.593749,-5.220705 L 104,39.638672 l 8.09766,-4.394531 8.3164,-3.96875 8.51368,-3.525391 8.68554,-3.076172 8.83399,-2.617187 8.96093,-2.150391 9.0586,-1.679688 9.13672,-1.201171 9.18554,-0.72461 9.21094,-0.240234 9.21094,0.240234 9.18554,0.72461 9.13672,1.201171 9.0586,1.679688 8.96093,2.150391 8.83399,2.617187 8.68555,3.076172 8.51367,3.525391 4.56055,2.175781 0.88671,-1.791016 -4.63281,-2.210937 -8.61133,-3.56836 -8.7832,-3.109375 -8.93555,-2.646484 -9.0625,-2.175781 -9.16211,-1.697266 -9.24023,-1.21875 -9.28906,-0.730469 z m 82.4082,20.269531 -0.88867,1.792969 6.48047,3.517578 7.85742,4.814453 7.59375,5.220705 7.31055,5.609375 7.00586,5.98242 6.68359,6.343752 6.34375,6.683591 5.98438,7.005859 5.60937,7.31055 5.21875,7.593749 4.81445,7.857424 4.39649,8.09765 3.96679,8.31641 3.5254,8.51367 3.07617,8.6836 2.61719,8.83593 1.39453,5.8125 1.95898,-0.41015 -1.41992,-5.91993 -2.64844,-8.93554 -3.10937,-8.7832 -3.56641,-8.61133 -4.01367,-8.41016 -4.44531,-8.19141 -4.86915,-7.945309 -5.27929,-7.679686 -5.67383,-7.392581 -6.05078,-7.085937 -6.41406,-6.761718 -6.75977,-6.414063 -7.08789,-6.05078 -7.39258,-5.67383 -7.67968,-5.27734 -7.94532,-4.869143 z m 92.20899,123.447265 -1.95899,0.41016 1.17579,6.34179 1.20312,9.13672 0.72265,9.18555 0.23829,9.10742 -0.23829,9.31446 -0.72265,9.18554 -1.20312,9.13477 -1.67969,9.06054 -2.15039,8.95899 -2.61719,8.83594 -3.07617,8.68554 -3.5254,8.51367 -3.96679,8.31446 -4.39649,8.09961 -4.81445,7.85547 -5.21875,7.59375 -5.60937,7.31054 -5.98438,7.00586 -6.34375,6.6836 -6.68359,6.34375 -7.00586,5.98437 -7.31055,5.60938 -7.59375,5.21875 -0.0898,0.0547 1.0625,1.69531 0.11719,-0.0723 7.67968,-5.2793 7.39258,-5.67187 7.08789,-6.05274 6.75977,-6.41406 6.41406,-6.75977 6.05078,-7.08593 5.67383,-7.39453 5.27929,-7.67969 4.86915,-7.94531 4.44531,-8.18946 4.01367,-8.41211 3.56641,-8.60937 3.10937,-8.78516 2.64844,-8.93554 2.17383,-9.06055 1.69922,-9.16406 1.21679,-9.23829 0.73047,-9.29101 0.24024,-9.3418 h 0.004 l -0.004,-0.0762 0.002,-0.0488 h -0.002 l -0.24024,-9.16406 -0.73047,-9.29102 -1.21679,-9.23828 z m -83.96485,185.08008 -2.65234,1.625 -4.17578,2.26758 0.92383,1.77539 4.2539,-2.31055 2.71094,-1.66211 z m -181.24218,0.039 -1.0586,1.69531 2.64649,1.62305 8.1914,4.44726 8.41016,4.01172 8.61133,3.56641 8.7832,3.10937 8.93555,2.64844 9.0625,2.17578 9.16211,1.69727 9.24023,1.2168 9.28907,0.73046 9.3164,0.24414 9.31641,-0.24414 9.28906,-0.73046 9.24023,-1.2168 9.16211,-1.69727 9.0625,-2.17578 8.93555,-2.64844 8.7832,-3.10937 8.61133,-3.56641 7.03711,-3.35547 -0.92383,-1.77734 -6.92773,3.30469 -8.51367,3.52539 -8.68555,3.07617 -8.83399,2.61719 -8.96093,2.15039 -9.0586,1.67969 -9.13672,1.20312 -9.18554,0.72266 -9.21094,0.24218 -9.21094,-0.24218 -9.18554,-0.72266 -9.13672,-1.20312 -9.0586,-1.67969 -8.96093,-2.15039 -8.83399,-2.61719 -8.68554,-3.07617 -8.51368,-3.52539 -8.3164,-3.9668 L 104,344.48045 Z" />
<polyline points="509.173,84.150 511.419,62.783 " id="polyline27" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="549.153,90.482 553.620,69.467 " id="polyline32" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="588.253,100.959 594.892,80.526 " id="polyline37" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="626.043,115.465 634.781,95.838 " id="polyline42" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="696.058,155.888 708.686,138.507 " id="polyline52" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="727.515,181.362 741.891,165.396 " id="polyline57" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="756.138,209.985 772.104,195.609 " id="polyline62" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="781.612,241.442 798.993,228.814 " id="polyline67" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="822.035,311.457 841.662,302.719 " id="polyline77" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="836.541,349.247 856.974,342.608 " id="polyline82" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="847.018,388.347 868.033,383.880 " id="polyline87" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="853.350,428.327 874.717,426.081 " id="polyline92" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="855.469,468.750 876.953,468.750 " id="polyline97-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-456.01771,-1.2975921)" />
<polyline points="853.350,509.173 874.717,511.419 " id="polyline102" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="847.018,549.153 868.033,553.620 " id="polyline107" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="836.541,588.253 856.974,594.892 " id="polyline112" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="822.035,626.043 841.662,634.781 " id="polyline117" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="781.612,696.058 798.993,708.686 " id="polyline127" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="756.138,727.515 772.104,741.891 " id="polyline132" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="727.515,756.138 741.891,772.104 " id="polyline137" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="696.058,781.612 708.686,798.993 " id="polyline142" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="626.043,822.035 634.781,841.662 " id="polyline152" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="588.253,836.541 594.892,856.974 " id="polyline157" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="549.153,847.018 553.620,868.033 " id="polyline162" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="509.173,853.350 511.419,874.717 " id="polyline167" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="468.750,855.469 468.750,876.953 " id="polyline172-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3985193,-455.90164)" />
<polyline points="428.327,853.350 426.081,874.717 " id="polyline177" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="388.347,847.018 383.880,868.033 " id="polyline182" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="349.247,836.541 342.608,856.974 " id="polyline187" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="311.457,822.035 302.719,841.662 " id="polyline192" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="241.442,781.612 228.814,798.993 " id="polyline202" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="209.985,756.138 195.609,772.104 " id="polyline207" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="181.362,727.515 165.396,741.891 " id="polyline212" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="155.888,696.058 138.507,708.686 " id="polyline217" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="115.465,626.043 95.838,634.781 " id="polyline227" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="100.959,588.253 80.526,594.892 " id="polyline232" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="90.482,549.153 69.467,553.620 " id="polyline237" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="84.150,509.173 62.783,511.419 " id="polyline242" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="82.031,468.750 60.547,468.750 " id="polyline247" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-32.751357,-1.3034227)" />
<polyline points="84.150,428.327 62.783,426.081 " id="polyline252" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="90.482,388.347 69.467,383.880 " id="polyline257" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="100.959,349.247 80.526,342.608 " id="polyline262" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="115.465,311.457 95.838,302.719 " id="polyline267" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="155.888,241.442 138.507,228.814 " id="polyline277" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="181.362,209.985 165.396,195.609 " id="polyline282" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="209.985,181.362 195.609,165.396 " id="polyline287" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="241.442,155.888 228.814,138.507 " id="polyline292" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="311.457,115.465 302.719,95.838 " id="polyline302" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="349.247,100.959 342.608,80.526 " id="polyline307" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="388.347,90.482 383.880,69.467 " id="polyline312" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="428.327,84.150 426.081,62.783 " id="polyline317" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,0.35811424,-0.80817157,0.46203972,290.78491,-87.940191)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,-0.35811424,-0.80817157,-0.46203972,290.78094,472.0941)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,-0.35811424,0.80817157,-0.46203972,93.209761,472.08427)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3-0" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,0.35811424,0.80817157,0.46203972,93.213741,-87.973607)" />
<path id="path1485" style="color:#000000;fill:#8F5FF6;" d="m 191.70703,6.0546875 0.0293,18.0000005 c 25.92793,-0.04081 50.70715,5.83951 72.89844,16.486328 l 7.97265,-16.097657 C 247.9762,12.573302 220.46847,6.0094202 191.70703,6.0546875 Z m 86.26172,21.0800785 -7.9707,16.099609 c 42.19467,22.134002 74.21637,61.841645 85.57812,110.720705 l 17.62305,-3.68555 C 360.68281,95.905845 324.97659,51.686549 277.96875,27.134766 Z m 96.48437,129.001954 -17.61914,3.68555 c 13.35969,68.32077 -16.83107,137.08767 -74.56445,173.8164 l 1.21485,-0.76172 9.54101,15.24024 c 63.20757,-40.86873 96.22493,-116.78347 81.42773,-191.98047 z M 58.640625,294.08398 44.347656,305.02539 c 13.279174,17.3476 29.141083,31.79971 46.701172,43.13867 l 9.513672,-15.24609 0.45898,0.28711 C 85.090962,322.93877 70.69637,309.83333 58.640625,294.08398 Z m 221.566405,40.84375 c -5.51648,3.39833 -11.27615,6.50878 -17.26758,9.30079 -51.98184,24.22348 -111.05797,19.80883 -157.85351,-8.48633 l 0.5664,0.35351 -9.509762,15.24024 c 51.766092,31.10054 117.058832,35.92722 174.398442,9.20703 1.53058,-0.71326 3.04761,-1.44484 4.55078,-2.19531 l -8.28711,-15.94336 5.32422,-2.76758 8.28515,15.9414 c 2.54788,-1.37601 5.05637,-2.80312 7.51953,-4.28515 l -9.53515,-15.23242 z" />
<polyline points="468.750,82.031 468.750,41.8 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" />
<path id="gnomon" style="opacity:1;fill:#80C2E1;fill-opacity:1;stroke:none;stroke-width:3.73798;stroke-opacity:1" d="M 46.463002,316.72751 33.743954,300.31177 65.383738,288.93232 Z" />
</svg>
</div>
<div class="clock-face" [style]="faceStyle">
<ng-content></ng-content>
<svg
class="cut-out"
width="384"
height="384"
viewBox="0 0 384 384"
>
<g>
<path
class="face"
d="M 0,0 V 384 H 384 V 0 Z M 192,15 A 177,177 0 0 1 369,192 177,177 0 0 1 192,369 177,177 0 0 1 15,192 177,177 0 0 1 192,15 Z"
/>
</g>
</svg>
<svg
class="demo-dial"
width="384"
height="384"
viewBox="0 0 384 384"
>
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,136.25965,-98.671146)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,247.72948,-98.603866)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,406.167,175.64488)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4-6" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,-22.20143,175.70014)" />
<path id="polyline22" style="color:#000000;fill:#ffffff;fill-opacity:0.7;stroke-width:0.411929;" d="m 192,14.058594 -9.3164,0.24414 -9.28907,0.730469 -9.24023,1.21875 -9.16211,1.697266 -9.0625,2.175781 -8.93555,2.646484 -8.7832,3.109375 -8.61133,3.56836 -8.41016,4.011719 -8.1914,4.447265 -7.945316,4.869143 -7.679687,5.27734 -7.392579,5.67383 -7.087891,6.05078 -6.759764,6.414063 -6.414064,6.761718 -6.050779,7.085937 -5.67383,7.392581 -5.279295,7.679686 -4.869142,7.945309 -4.445312,8.19141 -4.013672,8.41016 -3.566407,8.61133 -3.109374,8.7832 -2.648438,8.93554 -2.173828,9.06055 -1.699219,9.16406 -1.216797,9.23828 -0.730468,9.29102 -0.244141,9.31641 0.244141,9.31445 0.730468,9.29101 1.216797,9.23829 1.699219,9.16406 2.173828,9.06055 2.648438,8.93554 3.109374,8.78516 3.566407,8.60937 4.013672,8.41211 4.445312,8.18946 4.869142,7.94531 5.279295,7.67969 5.67383,7.39453 6.050779,7.08593 6.414064,6.75977 6.759764,6.41406 7.087891,6.05274 7.392579,5.67187 7.679687,5.2793 0.18164,0.11133 1.058595,-1.69727 -0.150392,-0.0918 -7.593749,-5.21875 -7.310548,-5.60938 -7.005859,-5.98437 -6.683594,-6.34375 -6.343748,-6.6836 -5.984376,-7.00586 -5.609375,-7.31054 -5.21875,-7.59375 -4.814453,-7.85547 -4.396484,-8.09961 -3.966797,-8.31446 -3.525391,-8.51367 -3.076172,-8.68554 -2.617187,-8.83594 -2.150391,-8.95899 -1.679687,-9.06054 -1.203125,-9.13477 -0.722657,-9.18554 -0.242187,-9.21094 0.242187,-9.21094 0.722657,-9.18555 1.203125,-9.13672 1.679687,-9.06054 2.150391,-8.95899 2.617187,-8.83593 3.076172,-8.6836 3.525391,-8.51367 3.966797,-8.31641 4.396484,-8.09765 4.814453,-7.857424 5.21875,-7.593749 5.609375,-7.31055 5.984376,-7.005859 6.343748,-6.683591 6.683594,-6.343752 7.005859,-5.98242 7.310548,-5.609375 7.593749,-5.220705 L 104,39.638672 l 8.09766,-4.394531 8.3164,-3.96875 8.51368,-3.525391 8.68554,-3.076172 8.83399,-2.617187 8.96093,-2.150391 9.0586,-1.679688 9.13672,-1.201171 9.18554,-0.72461 9.21094,-0.240234 9.21094,0.240234 9.18554,0.72461 9.13672,1.201171 9.0586,1.679688 8.96093,2.150391 8.83399,2.617187 8.68555,3.076172 8.51367,3.525391 4.56055,2.175781 0.88671,-1.791016 -4.63281,-2.210937 -8.61133,-3.56836 -8.7832,-3.109375 -8.93555,-2.646484 -9.0625,-2.175781 -9.16211,-1.697266 -9.24023,-1.21875 -9.28906,-0.730469 z m 82.4082,20.269531 -0.88867,1.792969 6.48047,3.517578 7.85742,4.814453 7.59375,5.220705 7.31055,5.609375 7.00586,5.98242 6.68359,6.343752 6.34375,6.683591 5.98438,7.005859 5.60937,7.31055 5.21875,7.593749 4.81445,7.857424 4.39649,8.09765 3.96679,8.31641 3.5254,8.51367 3.07617,8.6836 2.61719,8.83593 1.39453,5.8125 1.95898,-0.41015 -1.41992,-5.91993 -2.64844,-8.93554 -3.10937,-8.7832 -3.56641,-8.61133 -4.01367,-8.41016 -4.44531,-8.19141 -4.86915,-7.945309 -5.27929,-7.679686 -5.67383,-7.392581 -6.05078,-7.085937 -6.41406,-6.761718 -6.75977,-6.414063 -7.08789,-6.05078 -7.39258,-5.67383 -7.67968,-5.27734 -7.94532,-4.869143 z m 92.20899,123.447265 -1.95899,0.41016 1.17579,6.34179 1.20312,9.13672 0.72265,9.18555 0.23829,9.10742 -0.23829,9.31446 -0.72265,9.18554 -1.20312,9.13477 -1.67969,9.06054 -2.15039,8.95899 -2.61719,8.83594 -3.07617,8.68554 -3.5254,8.51367 -3.96679,8.31446 -4.39649,8.09961 -4.81445,7.85547 -5.21875,7.59375 -5.60937,7.31054 -5.98438,7.00586 -6.34375,6.6836 -6.68359,6.34375 -7.00586,5.98437 -7.31055,5.60938 -7.59375,5.21875 -0.0898,0.0547 1.0625,1.69531 0.11719,-0.0723 7.67968,-5.2793 7.39258,-5.67187 7.08789,-6.05274 6.75977,-6.41406 6.41406,-6.75977 6.05078,-7.08593 5.67383,-7.39453 5.27929,-7.67969 4.86915,-7.94531 4.44531,-8.18946 4.01367,-8.41211 3.56641,-8.60937 3.10937,-8.78516 2.64844,-8.93554 2.17383,-9.06055 1.69922,-9.16406 1.21679,-9.23829 0.73047,-9.29101 0.24024,-9.3418 h 0.004 l -0.004,-0.0762 0.002,-0.0488 h -0.002 l -0.24024,-9.16406 -0.73047,-9.29102 -1.21679,-9.23828 z m -83.96485,185.08008 -2.65234,1.625 -4.17578,2.26758 0.92383,1.77539 4.2539,-2.31055 2.71094,-1.66211 z m -181.24218,0.039 -1.0586,1.69531 2.64649,1.62305 8.1914,4.44726 8.41016,4.01172 8.61133,3.56641 8.7832,3.10937 8.93555,2.64844 9.0625,2.17578 9.16211,1.69727 9.24023,1.2168 9.28907,0.73046 9.3164,0.24414 9.31641,-0.24414 9.28906,-0.73046 9.24023,-1.2168 9.16211,-1.69727 9.0625,-2.17578 8.93555,-2.64844 8.7832,-3.10937 8.61133,-3.56641 7.03711,-3.35547 -0.92383,-1.77734 -6.92773,3.30469 -8.51367,3.52539 -8.68555,3.07617 -8.83399,2.61719 -8.96093,2.15039 -9.0586,1.67969 -9.13672,1.20312 -9.18554,0.72266 -9.21094,0.24218 -9.21094,-0.24218 -9.18554,-0.72266 -9.13672,-1.20312 -9.0586,-1.67969 -8.96093,-2.15039 -8.83399,-2.61719 -8.68554,-3.07617 -8.51368,-3.52539 -8.3164,-3.9668 L 104,344.48045 Z" />
<polyline points="509.173,84.150 511.419,62.783 " id="polyline27" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="549.153,90.482 553.620,69.467 " id="polyline32" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="588.253,100.959 594.892,80.526 " id="polyline37" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="626.043,115.465 634.781,95.838 " id="polyline42" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="696.058,155.888 708.686,138.507 " id="polyline52" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="727.515,181.362 741.891,165.396 " id="polyline57" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="756.138,209.985 772.104,195.609 " id="polyline62" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="781.612,241.442 798.993,228.814 " id="polyline67" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="822.035,311.457 841.662,302.719 " id="polyline77" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="836.541,349.247 856.974,342.608 " id="polyline82" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="847.018,388.347 868.033,383.880 " id="polyline87" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="853.350,428.327 874.717,426.081 " id="polyline92" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="855.469,468.750 876.953,468.750 " id="polyline97-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-456.01771,-1.2975921)" />
<polyline points="853.350,509.173 874.717,511.419 " id="polyline102" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="847.018,549.153 868.033,553.620 " id="polyline107" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="836.541,588.253 856.974,594.892 " id="polyline112" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="822.035,626.043 841.662,634.781 " id="polyline117" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="781.612,696.058 798.993,708.686 " id="polyline127" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="756.138,727.515 772.104,741.891 " id="polyline132" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="727.515,756.138 741.891,772.104 " id="polyline137" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="696.058,781.612 708.686,798.993 " id="polyline142" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="626.043,822.035 634.781,841.662 " id="polyline152" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="588.253,836.541 594.892,856.974 " id="polyline157" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="549.153,847.018 553.620,868.033 " id="polyline162" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="509.173,853.350 511.419,874.717 " id="polyline167" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="468.750,855.469 468.750,876.953 " id="polyline172-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3985193,-455.90164)" />
<polyline points="428.327,853.350 426.081,874.717 " id="polyline177" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="388.347,847.018 383.880,868.033 " id="polyline182" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="349.247,836.541 342.608,856.974 " id="polyline187" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="311.457,822.035 302.719,841.662 " id="polyline192" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="241.442,781.612 228.814,798.993 " id="polyline202" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="209.985,756.138 195.609,772.104 " id="polyline207" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="181.362,727.515 165.396,741.891 " id="polyline212" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="155.888,696.058 138.507,708.686 " id="polyline217" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="115.465,626.043 95.838,634.781 " id="polyline227" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="100.959,588.253 80.526,594.892 " id="polyline232" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="90.482,549.153 69.467,553.620 " id="polyline237" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="84.150,509.173 62.783,511.419 " id="polyline242" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="82.031,468.750 60.547,468.750 " id="polyline247" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-32.751357,-1.3034227)" />
<polyline points="84.150,428.327 62.783,426.081 " id="polyline252" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="90.482,388.347 69.467,383.880 " id="polyline257" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="100.959,349.247 80.526,342.608 " id="polyline262" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="115.465,311.457 95.838,302.719 " id="polyline267" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="155.888,241.442 138.507,228.814 " id="polyline277" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="181.362,209.985 165.396,195.609 " id="polyline282" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="209.985,181.362 195.609,165.396 " id="polyline287" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="241.442,155.888 228.814,138.507 " id="polyline292" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="311.457,115.465 302.719,95.838 " id="polyline302" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="349.247,100.959 342.608,80.526 " id="polyline307" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="388.347,90.482 383.880,69.467 " id="polyline312" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="428.327,84.150 426.081,62.783 " id="polyline317" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,0.35811424,-0.80817157,0.46203972,290.78491,-87.940191)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,-0.35811424,-0.80817157,-0.46203972,290.78094,472.0941)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,-0.35811424,0.80817157,-0.46203972,93.209761,472.08427)" />
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3-0" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,0.35811424,0.80817157,0.46203972,93.213741,-87.973607)" />
<path id="path1485" style="color:#000000;fill:#8F5FF6;" d="m 191.70703,6.0546875 0.0293,18.0000005 c 25.92793,-0.04081 50.70715,5.83951 72.89844,16.486328 l 7.97265,-16.097657 C 247.9762,12.573302 220.46847,6.0094202 191.70703,6.0546875 Z m 86.26172,21.0800785 -7.9707,16.099609 c 42.19467,22.134002 74.21637,61.841645 85.57812,110.720705 l 17.62305,-3.68555 C 360.68281,95.905845 324.97659,51.686549 277.96875,27.134766 Z m 96.48437,129.001954 -17.61914,3.68555 c 13.35969,68.32077 -16.83107,137.08767 -74.56445,173.8164 l 1.21485,-0.76172 9.54101,15.24024 c 63.20757,-40.86873 96.22493,-116.78347 81.42773,-191.98047 z M 58.640625,294.08398 44.347656,305.02539 c 13.279174,17.3476 29.141083,31.79971 46.701172,43.13867 l 9.513672,-15.24609 0.45898,0.28711 C 85.090962,322.93877 70.69637,309.83333 58.640625,294.08398 Z m 221.566405,40.84375 c -5.51648,3.39833 -11.27615,6.50878 -17.26758,9.30079 -51.98184,24.22348 -111.05797,19.80883 -157.85351,-8.48633 l 0.5664,0.35351 -9.509762,15.24024 c 51.766092,31.10054 117.058832,35.92722 174.398442,9.20703 1.53058,-0.71326 3.04761,-1.44484 4.55078,-2.19531 l -8.28711,-15.94336 5.32422,-2.76758 8.28515,15.9414 c 2.54788,-1.37601 5.05637,-2.80312 7.51953,-4.28515 l -9.53515,-15.23242 z" />
<polyline points="468.750,82.031 468.750,41.8 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" />
<path id="gnomon" style="opacity:1;fill:#80C2E1;fill-opacity:1;stroke:none;stroke-width:3.73798;stroke-opacity:1" d="M 46.463002,316.72751 33.743954,300.31177 65.383738,288.93232 Z" />
</svg>
</div>

55
frontend/src/app/components/clock-face/clock-face.component.scss
View File

@ -1,45 +1,20 @@
.clock-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
.clock-face {
position: relative;
height: 84.375%;
margin: auto;
overflow: hidden;
.clockchain-bar, .clock-face {
flex-shrink: 0;
flex-grow: 0;
}
.cut-out, .demo-dial {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
.clockchain-bar {
position: relative;
height: 15.625%;
// background: #1d1f31;
// box-shadow: 0 0 15px #000;
}
.clock-face {
position: relative;
height: 84.375%;
margin: auto;
overflow: hidden;
.cut-out, .demo-dial {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
.face {
fill: #11131f;
}
.face {
fill: #11131f;
}
}
}

27
frontend/src/app/components/clock-face/clock-face.component.ts
View File

@ -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`,

18
frontend/src/app/components/clock/clock-a.component.html
View File

@ -1,17 +1 @@
<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>
<app-clock mode="block"></app-clock>

54
frontend/src/app/components/clock/clock-a.component.ts
View File

@ -1,57 +1,7 @@
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';
import { Component } from '@angular/core';
@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%
)`,
};
}
}
export class ClockAComponent {}

14
frontend/src/app/components/clock/clock-b.component.html
View File

@ -1,13 +1 @@
<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>
<app-clock mode="mempool"></app-clock>

54
frontend/src/app/components/clock/clock-b.component.ts
View File

@ -1,57 +1,7 @@
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';
import { Component } from '@angular/core';
@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 clockSize = Math.min(window.innerWidth, 0.78125 * window.innerHeight);
const size = Math.ceil(clockSize / 75) * 75;
const margin = (clockSize - size) / 2;
this.blockSizerStyle = {
transform: `translate(${margin}px, ${margin}px)`,
width: `${size}px`,
height: `${size}px`,
};
this.cd.markForCheck();
}
}
export class ClockBComponent {}

34
frontend/src/app/components/clock/clock.component.html Normal file
View File

@ -0,0 +1,34 @@
<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>
</div>
</div>
<div class="clock-face">
<app-clock-face [size]="clockSize">
<div class="block-wrapper">
<ng-container *ngIf="block && block.height >= 0">
<ng-container *ngIf="mode === 'block'; else mempoolMode;">
<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>
</ng-container>
<ng-template #mempoolMode>
<div class="block-sizer" [style]="blockSizerStyle">
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
</div>
</ng-template>
<div class="fader"></div>
<div class="title-wrapper">
<h1 class="block-height">{{ block.height }}</h1>
</div>
</ng-container>
</div>
</app-clock-face>
</div>
</div>

43
frontend/src/app/components/clock/clock.component.scss
View File

@ -1,3 +1,44 @@
.clock-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
--clock-width: 300px;
.clockchain-bar, .clock-face {
flex-shrink: 0;
flex-grow: 0;
}
.clockchain-bar {
position: relative;
width: 100%;
height: 15.625%;
z-index: 2;
overflow: hidden;
// background: #1d1f31;
// box-shadow: 0 0 15px #000;
}
.clock-face {
position: relative;
height: 84.375%;
margin: auto;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
}
.title-wrapper {
position: absolute;
left: 0;
@ -101,8 +142,6 @@
}
}
@keyframes block-spin {
0% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);}
100% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-360deg);}

82
frontend/src/app/components/clock/clock.component.ts Normal file
View File

@ -0,0 +1,82 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, 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',
templateUrl: './clock.component.html',
styleUrls: ['./clock.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ClockComponent implements OnInit {
@Input() mode: string = 'block';
blocksSubscription: Subscription;
block: BlockExtended;
clockSize: number = 300;
chainWidth: number = 384;
chainHeight: number = 60;
blockStyle;
blockSizerStyle;
wrapperStyle;
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.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%
)`,
};
}
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
this.chainWidth = window.innerWidth;
this.chainHeight = Math.max(60, window.innerHeight / 8);
this.clockSize = Math.min(500, window.innerWidth, window.innerHeight - (1.4 * this.chainHeight));
const size = Math.ceil(this.clockSize / 75) * 75;
const margin = (this.clockSize - size) / 2;
this.blockSizerStyle = {
transform: `translate(${margin}px, ${margin}px)`,
width: `${size}px`,
height: `${size}px`,
};
this.wrapperStyle = {
'--clock-width': `${this.clockSize}px`
};
this.cd.markForCheck();
}
}

22
frontend/src/app/components/clockchain/clockchain.component.html
View File

@ -1,11 +1,25 @@
<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
<div class="position-container" [ngClass]="network ? network : ''">
<div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks [tiny]="true" [count]="3"></app-mempool-blocks>
<app-blockchain-blocks [tiny]="true"></app-blockchain-blocks>
<app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth"></app-mempool-blocks>
<app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth"></app-blockchain-blocks>
</div>
<div class="divider" [style.top]="-(height / 6) + 'px'">
<svg
viewBox="0 0 2 175"
[style.width]="'2px'"
[style.height]="(5 * height / 6) + 'px'"
>
<line
class="divider-line"
x0="0"
x1="0"
y0="0"
y1="175px"
></line>
</svg>
</div>
<div class="divider"></div>
</span>
</div>
</div>

45
frontend/src/app/components/clockchain/clockchain.component.scss
View File

@ -1,15 +1,17 @@
.divider {
width: 4px;
height: 180px;
left: 0;
top: -40px;
position: absolute;
margin-bottom: 120px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%' stroke='white' stroke-width='8' stroke-dasharray='18%2c32' stroke-dashoffset='-5' stroke-linecap='square'/%3e%3c/svg%3e");
left: -1px;
top: 0;
.divider-line {
stroke: white;
stroke-width: 4px;
stroke-linecap: butt;
stroke-dasharray: 25px 25px;
}
}
.blockchain-wrapper {
height: 250px;
height: 100%;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
@ -20,37 +22,10 @@
.position-container {
position: absolute;
left: 0;
top: 75px;
top: 0;
transform: translateX(50vw);
}
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(420px);
}
.blockchain-wrapper {
.position-container {
transform: translateX(95vw);
}
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(50vw);
}
.position-container.loading {
transform: translateX(50vw);
}
}
.blockchain-wrapper.time-ltr {
.position-container {
transform: translateX(5vw);
}
.position-container.liquid, .position-container.liquidtestnet {
transform: translateX(50vw);
}
.position-container.loading {
transform: translateX(50vw);
}
}
.black-background {
background-color: #11131f;
z-index: 100;

26
frontend/src/app/components/clockchain/clockchain.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
import { firstValueFrom, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@ -8,7 +8,15 @@ import { StateService } from '../../services/state.service';
styleUrls: ['./clockchain.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ClockchainComponent implements OnInit, OnDestroy {
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
@Input() width: number = 300;
@Input() height: number = 60;
mempoolBlocks: number = 3;
blockchainBlocks: number = 6;
blockWidth: number = 50;
dividerStyle;
network: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
@ -19,9 +27,12 @@ export class ClockchainComponent implements OnInit, OnDestroy {
constructor(
public stateService: StateService,
private cd: ChangeDetectorRef,
) {}
ngOnInit() {
this.ngOnChanges();
this.network = this.stateService.network;
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
@ -34,6 +45,17 @@ export class ClockchainComponent implements OnInit, OnDestroy {
});
}
ngOnChanges() {
this.blockWidth = Math.floor(7 * this.height / 12);
this.mempoolBlocks = Math.floor(((this.width / 2) - (this.blockWidth * 0.32)) / (1.24 * this.blockWidth));
this.blockchainBlocks = this.mempoolBlocks;
this.dividerStyle = {
width: '2px',
height: `${this.height}px`,
};
this.cd.markForCheck();
}
ngOnDestroy() {
this.timeLtrSubscription.unsubscribe();
this.connectionStateSubscription.unsubscribe();

12
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@ -1,12 +1,12 @@
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.tiny]="tiny">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.minimal]="minimal">
<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 @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.last-block]="tiny && i >= count - 1" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
<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>
<div class="block-body">
<ng-container *ngIf="!tiny">
<ng-container *ngIf="!minimal">
<div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
@ -73,10 +73,10 @@
</ng-container>
<ng-template #loadingBlocks>
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr">
<div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
<div class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
</ng-template>
</div>
</div>

25
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -1,6 +1,6 @@
.bitcoin-block {
width: 125px;
height: 125px;
width: var(--block-size);
height: var(--block-size);
transition: background 2s, right 2s, transform 1s, opacity 1s;
}
@ -14,6 +14,7 @@
top: 0px;
right: 0px;
left: 0px;
--block-size: 125px;
}
.flashing {
@ -66,11 +67,11 @@
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
width: var(--block-size);
height: calc(0.192 * var(--block-size));
position:absolute;
top: -24px;
left: -20px;
top: calc(-0.192 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
@ -79,11 +80,11 @@
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
width: calc(0.16 * var(--block-size));
height: var(--block-size);
position: absolute;
top: -12px;
left: -20px;
top: calc(-0.096 * var(--block-size));
left: calc(-0.16 * var(--block-size));
background-color: #191c27;
z-index: -1;
@ -100,7 +101,7 @@
background-color: #2d2825;
}
.mempool-block.last-block {
.mempool-block.hide-block {
opacity: 0;
}
@ -145,7 +146,7 @@
.bitcoin-block::before {
transform: skewY(-50deg);
left: 125px;
left: var(--block-size);
}
.block-body {
transform: scaleX(-1);

44
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
@ -23,8 +23,9 @@ import { animate, style, transition, trigger } from '@angular/animations';
])],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
@Input() tiny: boolean = false;
export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() minimal: boolean = false;
@Input() blockWidth: number = 125;
@Input() count: number = null;
specialBlocks = specialBlocks;
@ -51,8 +52,9 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
timeLtr: boolean;
animateEntry: boolean = false;
blockWidth = 125;
blockPadding = 30;
blockOffset: number = 155;
blockPadding: number = 30;
containerOffset: number = 40;
arrowVisible = false;
tabHidden = false;
feeRounding = '1.0-0';
@ -221,6 +223,14 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.blockWidth && this.blockWidth) {
this.blockPadding = 0.24 * this.blockWidth;
this.containerOffset = 0.32 * this.blockWidth;
this.blockOffset = this.blockWidth + this.blockPadding;
}
}
ngOnDestroy() {
this.markBlocksSubscription.unsubscribe();
this.blockSubscription.unsubscribe();
@ -243,20 +253,22 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
let blocksAmount;
if (this.count) {
blocksAmount = this.count;
blocksAmount = 8;
} else {
blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
}
while (blocks.length > blocksAmount) {
const block = blocks.pop();
const lastBlock = blocks[blocks.length - 1];
lastBlock.blockSize += block.blockSize;
lastBlock.blockVSize += block.blockVSize;
lastBlock.nTx += block.nTx;
lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
lastBlock.feeRange.sort((a, b) => a - b);
lastBlock.medianFee = this.median(lastBlock.feeRange);
lastBlock.totalFees += block.totalFees;
if (!this.count) {
const lastBlock = blocks[blocks.length - 1];
lastBlock.blockSize += block.blockSize;
lastBlock.blockVSize += block.blockVSize;
lastBlock.nTx += block.nTx;
lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
lastBlock.feeRange.sort((a, b) => a - b);
lastBlock.medianFee = this.median(lastBlock.feeRange);
lastBlock.totalFees += block.totalFees;
}
}
if (blocks.length) {
blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
@ -302,14 +314,14 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
return {
'right': 40 + index * 155 + 'px',
'right': this.containerOffset + index * this.blockOffset + 'px',
'background': backgroundGradients.join(',') + ')'
};
}
getStyleForMempoolEmptyBlock(index: number) {
return {
'right': 40 + index * 155 + 'px',
'right': this.containerOffset + index * this.blockOffset + 'px',
'background': '#554b45',
};
}

3
frontend/src/app/shared/shared.module.ts
View File

@ -93,6 +93,7 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
import { MempoolBlockOverviewComponent } from '../components/mempool-block-overview/mempool-block-overview.component';
import { ClockchainComponent } from '../components/clockchain/clockchain.component';
import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
import { ClockComponent } from '../components/clock/clock.component';
import { ClockAComponent } from '../components/clock/clock-a.component';
import { ClockBComponent } from '../components/clock/clock-b.component';
@ -181,6 +182,7 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
MempoolBlockOverviewComponent,
ClockchainComponent,
ClockComponent,
ClockAComponent,
ClockBComponent,
ClockFaceComponent,
@ -294,6 +296,7 @@ import { ClockBComponent } from '../components/clock/clock-b.component';
MempoolBlockOverviewComponent,
ClockchainComponent,
ClockComponent,
ClockAComponent,
ClockBComponent,
ClockFaceComponent,