From d06fe83bd996a77fc5d476b11bb6025ab47c423f Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 30 Jul 2023 17:59:35 +0900
Subject: [PATCH] Improve difficulty tooltip display on mobile

---
 .../difficulty-tooltip.component.html         | 54 ++++++++++++-------
 .../difficulty-tooltip.component.ts           | 12 ++++-
 .../difficulty/difficulty.component.ts        |  1 +
 3 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.html b/frontend/src/app/components/difficulty/difficulty-tooltip.component.html
index d06bb5e91..7e4b421e1 100644
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.html
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.html
@@ -4,38 +4,56 @@
   class="difficulty-tooltip"
   [style.visibility]="status ? 'visible' : 'hidden'"
   [style.left]="tooltipPosition.x + 'px'"
-  [style.top]="tooltipPosition.y + 'px'"
+  [style.top]="tooltipPosition.y + (isMobile ? -60 : 0) + 'px'"
 >
-<ng-container [ngSwitch]="status">
+<ng-container *ngIf="!isMobile" [ngSwitch]="status">
   <ng-container *ngSwitchCase="'mined'">
     <ng-container *ngIf="isAhead">
-      <ng-container *ngTemplateOutlet="expected === 1 ? blocksSingular : blocksPlural; context: {$implicit: expected }"></ng-container>
-      <ng-template #blocksPlural let-i i18n="difficulty-box.expected-blocks">{{ i }} blocks expected</ng-template>
-      <ng-template #blocksSingular let-i i18n="difficulty-box.expected-block">{{ i }} block expected</ng-template>
+      <ng-container *ngTemplateOutlet="expected === 1 ? expectedMinedBlocksSingular : expectedMinedBlocksPlural; context: {$implicit: expected }"></ng-container>
     </ng-container>
     <ng-container *ngIf="!isAhead">
-      <ng-container *ngTemplateOutlet="mined === 1 ? blocksSingular : blocksPlural; context: {$implicit: mined }"></ng-container>
-      <ng-template #blocksPlural let-i i18n="difficulty-box.mined-blocks">{{ i }} blocks mined</ng-template>
-      <ng-template #blocksSingular let-i i18n="difficulty-box.mined-block">{{ i }} block mined</ng-template>
+      <ng-container *ngTemplateOutlet="mined === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: mined }"></ng-container>
     </ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'remaining'">
-    <ng-container *ngTemplateOutlet="remaining === 1 ? blocksSingular : blocksPlural; context: {$implicit: remaining }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.remaining-blocks">{{ i }} blocks remaining</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.remaining-block">{{ i }} block remaining</ng-template>
+    <ng-container *ngTemplateOutlet="remaining === 1 ? remainingBlocksSingular : remainingBlocksPlural; context: {$implicit: remaining }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'ahead'">
-    <ng-container *ngTemplateOutlet="ahead === 1 ? blocksSingular : blocksPlural; context: {$implicit: ahead }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.blocks-ahead">{{ i }} blocks ahead</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.block-ahead">{{ i }} block ahead</ng-template>
+    <ng-container *ngTemplateOutlet="ahead === 1 ? aheadBlocksSingular : aheadBlocksPlural; context: {$implicit: ahead }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'behind'">
-    <ng-container *ngTemplateOutlet="behind === 1 ? blocksSingular : blocksPlural; context: {$implicit: behind }"></ng-container>
-    <ng-template #blocksPlural let-i i18n="difficulty-box.blocks-behind">{{ i }} blocks behind</ng-template>
-    <ng-template #blocksSingular let-i i18n="difficulty-box.block-behind">{{ i }} block behind</ng-template>
+    <ng-container *ngTemplateOutlet="behind === 1 ? behindBlocksSingular : behindBlocksPlural; context: {$implicit: behind }"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="'next'">
     <span class="next-block" i18n="@@bdf0e930eb22431140a2eaeacd809cc5f8ebd38c">Next Block</span>
   </ng-container>
 </ng-container>
-</div>
\ No newline at end of file
+<ng-container *ngIf="isMobile">
+  <ng-container *ngIf="isAhead">
+    <ng-container *ngTemplateOutlet="expected === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: expected }"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="!isAhead">
+    <ng-container *ngTemplateOutlet="mined === 1 ? minedBlocksSingular : minedBlocksPlural; context: {$implicit: mined }"></ng-container>
+  </ng-container>
+  <br>
+  <ng-container *ngTemplateOutlet="remaining === 1 ? remainingBlocksSingular : remainingBlocksPlural; context: {$implicit: remaining }"></ng-container>
+  <br>
+  <ng-container *ngIf="ahead > 0">
+    <ng-container *ngTemplateOutlet="ahead === 1 ? aheadBlocksSingular : aheadBlocksPlural; context: {$implicit: ahead }"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="behind > 0">
+    <ng-container *ngTemplateOutlet="behind === 1 ? behindBlocksSingular : behindBlocksPlural; context: {$implicit: behind }"></ng-container>
+  </ng-container>
+</ng-container>
+</div>
+
+<ng-template #expectedMinedBlocksPlural let-i i18n="difficulty-box.expected-blocks">{{ i }} blocks expected</ng-template>
+<ng-template #expectedMinedBlocksSingular let-i i18n="difficulty-box.expected-block">{{ i }} block expected</ng-template>
+<ng-template #minedBlocksPlural let-i i18n="difficulty-box.mined-blocks">{{ i }} blocks mined</ng-template>
+<ng-template #minedBlocksSingular let-i i18n="difficulty-box.mined-block">{{ i }} block mined</ng-template>
+<ng-template #remainingBlocksPlural let-i i18n="difficulty-box.remaining-blocks">{{ i }} blocks remaining</ng-template>
+<ng-template #remainingBlocksSingular let-i i18n="difficulty-box.remaining-block">{{ i }} block remaining</ng-template>
+<ng-template #aheadBlocksPlural let-i i18n="difficulty-box.blocks-ahead">{{ i }} blocks ahead</ng-template>
+<ng-template #aheadBlocksSingular let-i i18n="difficulty-box.block-ahead">{{ i }} block ahead</ng-template>
+<ng-template #behindBlocksPlural let-i i18n="difficulty-box.blocks-behind">{{ i }} blocks behind</ng-template>
+<ng-template #behindBlocksSingular let-i i18n="difficulty-box.block-behind">{{ i }} block behind</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.ts b/frontend/src/app/components/difficulty/difficulty-tooltip.component.ts
index c7d26f61a..42d2a61b4 100644
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+import { Component, ElementRef, ViewChild, Input, OnChanges, HostListener } from '@angular/core';
 
 interface EpochProgress {
   base: string;
@@ -35,12 +35,15 @@ export class DifficultyTooltipComponent implements OnChanges {
   remaining: number;
   isAhead: boolean;
   isBehind: boolean;
+  isMobile: boolean;
 
   tooltipPosition = { x: 0, y: 0 };
 
   @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
 
-  constructor() {}
+  constructor() {
+    this.onResize();
+  }
 
   ngOnChanges(changes): void {
     if (changes.cursorPosition && changes.cursorPosition.currentValue) {
@@ -63,4 +66,9 @@ export class DifficultyTooltipComponent implements OnChanges {
       this.isBehind = this.behind > 0;
     }
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }
diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts
index a2c03dc56..093dde79a 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -193,6 +193,7 @@ export class DifficultyComponent implements OnInit {
   @HostListener('pointerdown', ['$event'])
   onPointerDown(event) {
     this.onPointerMove(event);
+    event.preventDefault();
   }
 
   @HostListener('pointermove', ['$event'])