From 2c658b24abe44a5504cc6c2d1d75ae9a2a0aeac0 Mon Sep 17 00:00:00 2001
From: isark <mail@isark.me>
Date: Sat, 25 Nov 2023 12:15:39 +0100
Subject: [PATCH] Minor design improvements. Added trial indication on the
 overlay

---
 src-tauri/Cargo.lock                          |  1 +
 src-tauri/poe_data/Cargo.lock                 |  7 ++
 src-tauri/poe_data/Cargo.toml                 |  3 +-
 src/app/_services/world-area.service.ts       | 20 +++++-
 src/app/editor/editor.component.html          | 65 ++++++++++++-------
 .../plan-display/plan-display.component.html  | 35 ++++++----
 .../plan-display/plan-display.component.scss  | 36 +++++++++-
 .../plan-display/plan-display.component.ts    | 17 ++++-
 8 files changed, 143 insertions(+), 41 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 278542d..0be23cf 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2751,6 +2751,7 @@ name = "poe_data"
 version = "0.1.0"
 dependencies = [
  "fuzzy-matcher",
+ "lazy_static",
  "serde",
  "serde_derive",
  "serde_json",
diff --git a/src-tauri/poe_data/Cargo.lock b/src-tauri/poe_data/Cargo.lock
index 9840e7b..83beaad 100644
--- a/src-tauri/poe_data/Cargo.lock
+++ b/src-tauri/poe_data/Cargo.lock
@@ -23,6 +23,12 @@ version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "af150ab688ff2122fcef229be89cb50dd66af9e01a4ff320cc137eecc9bacc38"
 
+[[package]]
+name = "lazy_static"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
+
 [[package]]
 name = "once_cell"
 version = "1.18.0"
@@ -34,6 +40,7 @@ name = "poe_data"
 version = "0.1.0"
 dependencies = [
  "fuzzy-matcher",
+ "lazy_static",
  "serde",
  "serde_derive",
  "serde_json",
diff --git a/src-tauri/poe_data/Cargo.toml b/src-tauri/poe_data/Cargo.toml
index e011000..b4a5a99 100644
--- a/src-tauri/poe_data/Cargo.toml
+++ b/src-tauri/poe_data/Cargo.toml
@@ -9,4 +9,5 @@ edition = "2021"
 serde_derive = "1.0.175"
 fuzzy-matcher = "0.3.7"
 serde_json = "1.0.103"
-serde = "1.0.175"
\ No newline at end of file
+serde = "1.0.175"
+lazy_static = "1.4.0"
diff --git a/src/app/_services/world-area.service.ts b/src/app/_services/world-area.service.ts
index 4aa5264..5fb75af 100644
--- a/src/app/_services/world-area.service.ts
+++ b/src/app/_services/world-area.service.ts
@@ -29,5 +29,23 @@ export class WorldAreaService {
     return this.worldAreasSubject.asObservable().pipe(
       filter(worldAreas => !!worldAreas),
     );
-  }  
+  }
+
+  hasTrial(key: string): boolean {
+    switch (key) {
+      case "1_1_7_1": return true;
+      case "1_2_5_1": return true;
+      case "1_2_6_2": return true;
+      case "1_3_3_1": return true;
+      case "1_3_6": return true;
+      case "1_3_15": return true;
+      case "2_6_7_1": return true;
+      case "2_7_4": return true;
+      case "2_7_5_2": return true;
+      case "2_8_5": return true;
+      case "2_9_7": return true;
+      case "2_10_9": return true;
+      default: return false;
+    }
+  }
 }
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index 3b567e9..d684322 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -8,34 +8,51 @@
   <div class="d-flex flex-column overflow-hidden p-4">
     <div class="row">
       <div class="col-6">
-        <mat-form-field color="accent">
-          <mat-label>Area filter</mat-label>
-          <input matInput type="text" [(ngModel)]="areaSearchString">
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>Act filter</mat-label>
-          <mat-select [(value)]="filterAct">
-            <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div class="row">
+          <mat-form-field color="accent">
+            <mat-label>Area filter</mat-label>
+            <input matInput type="text" [(ngModel)]="areaSearchString">
+          </mat-form-field>
+        </div>
+        <div class="row">
+          <mat-form-field>
+            <mat-label>Act filter</mat-label>
+            <mat-select [(value)]="filterAct">
+              <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
       </div>
 
       <div class="col-6">
-        <mat-slide-toggle color="accent" [(ngModel)]="autoScrollToEnd">Auto scroll to end on add to
-          end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
-          display</mat-slide-toggle>
-        <button mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
 
-        <mat-form-field>
-          <mat-label>Area filter</mat-label>
-          <input matInput type="text" [(ngModel)]="planSearchString">
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>Act filter</mat-label>
-          <mat-select [(value)]="planFilterAct">
-            <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div class="row">
+          <mat-form-field>
+            <mat-label>Area filter</mat-label>
+            <input matInput type="text" [(ngModel)]="planSearchString">
+          </mat-form-field>
+        </div>
+        <div class="row">
+          <mat-form-field>
+            <mat-label>Act filter</mat-label>
+            <mat-select [(value)]="planFilterAct">
+              <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+
+        <div class="row">
+            <mat-slide-toggle class="col-5" color="accent" [(ngModel)]="autoScrollToEnd">
+              Auto scroll to latest
+            </mat-slide-toggle>
+
+            <mat-slide-toggle class="col-4" color="accent" [(ngModel)]="reverseDisplay">
+              Reverse display
+            </mat-slide-toggle>
+          <div class="col-3 d-flex justify-content-end ">
+            <button class="" mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
+          </div>
+        </div>
       </div>
 
     </div>
diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html
index d44da42..ecae143 100644
--- a/src/app/plan-display/plan-display.component.html
+++ b/src/app/plan-display/plan-display.component.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="init">
     <div #globalTopLeft style="position: fixed; top: 0; left: 0; z-index: -1;"></div>
     <ng-container *ngIf="rect && planService.currentPlan">
-        <div class="target waypoint" [style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'"
+        <div class="target waypoint trial" [style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'"
             [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
-            [class]="hasWaypoint() ? 'active' : ''" (wheel)="onScroll($event)" #targetRef>
+            [class]="specialClasses()" (wheel)="onScroll($event)" #targetRef>
             <ng-container *ngIf="planService.currentPlan">
                 <span hidden>{{planService.currentPlan.current}}</span>
                 <carousel [initIndex]="planService.currentPlan.current" [numVisible]="3"
@@ -11,8 +11,13 @@
                     <ng-template let-slide let-index="index">
                         <div class="zone-slide" [style.color]="configService.config.noteDefaultFg"
                             [style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">
-                            {{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text"
-                                *ngIf="hasWaypoint(slide.area_key)">(W)</div>
+
+                            {{worldAreaMap!.get(slide.area_key)!.name}}
+
+                            <div class="text-marker d-flex flex-row">
+                                <div class="waypoint-text" *ngIf="hasWaypoint(slide.area_key)">(W)</div>
+                                <div class="trial-text" *ngIf="hasTrial(slide.area_key)">(T)</div>
+                            </div>
                         </div>
                     </ng-template>
                 </carousel>
@@ -20,7 +25,8 @@
                     (afterInitSelf)="registerCurrentSlides($event)">
                     <ng-template let-slide>
                         <scalable>
-                            <notes class="p-1" [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide></notes>
+                            <notes class="p-1" [note]="slide.notes" [style.color]="configService.config.noteDefaultFg"
+                                #noteSlide></notes>
                         </scalable>
                     </ng-template>
                 </carousel>
@@ -44,15 +50,22 @@
         <div class="overlay container-fluid vw-100">
             <div class="row row-cols-2">
                 <div class="planChooser col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">
-                    <div>
-                        <button class="col-xs-6" mat-raised-button color="accent" (click)="openDialog()">Browse
-                            Plans</button>
-                        <button class="col-xs-6" mat-raised-button color="accent" (click)="loadBasePlan()">Load base
-                            plan</button>
+                    <div class="d-flex justify-content-evenly">
+                        <div class="col-xs-6">
+                            <button class="" mat-raised-button color="accent" (click)="openDialog()">Browse
+                                Plans
+                            </button>
+                        </div>
+                        <div class="col-xs-6">
+                            <button class="" mat-raised-button color="accent" (click)="loadBasePlan()">
+                                Load base plan
+                            </button>
+                        </div>
                     </div>
                     <div class="enumerated">
                         <mat-list role="list">
-                            <mat-list-item role="listitem" *ngFor="let plan of planService.planStore"><button
+                            <mat-list-item class="d-flex flex-column" role="listitem"
+                                *ngFor="let plan of planService.planStore"><button
                                     (click)="setPrevious(plan)">{{plan}}</button></mat-list-item>
                         </mat-list>
 
diff --git a/src/app/plan-display/plan-display.component.scss b/src/app/plan-display/plan-display.component.scss
index dcffc37..1d2951b 100644
--- a/src/app/plan-display/plan-display.component.scss
+++ b/src/app/plan-display/plan-display.component.scss
@@ -23,14 +23,21 @@
     }
 }
 
-.waypoint-text {
-    color: rgba(25, 255, 255, 0.5);
+.text-marker {
     position: absolute;
     right: 10px;
+    gap: 2px;
 }
 
-.waypoint {
+.waypoint-text {
+    color: rgba(25, 255, 255, 0.5);
+}
+
+.trial-text {
+    color: rgba(25, 255, 102, 0.75);
+}
 
+.waypoint {
     /* Pre-render the bigger shadow, but hide it */
     &::after {
         box-shadow: 0 0px 15px rgba(25, 255, 255, 0.5);
@@ -47,12 +54,35 @@
     }
 }
 
+.trial {
+    /* Pre-render the bigger shadow, but hide it */
+    &::before {
+        box-shadow: 0 0px 35px rgba(25, 255, 102, 0.75);
+        transition: opacity 0.3s ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+    
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+    }
+}
+
 .active {
     &::after {
         opacity: 1;
     }
 }
 
+.trial-active {
+    &::before {
+        opacity: 1;
+    }
+}
+
 .zone-slide {
     display: relative;
     height: 100%;
diff --git a/src/app/plan-display/plan-display.component.ts b/src/app/plan-display/plan-display.component.ts
index 99ed7a3..c1ee05e 100644
--- a/src/app/plan-display/plan-display.component.ts
+++ b/src/app/plan-display/plan-display.component.ts
@@ -25,6 +25,13 @@ import { EventsService } from '../_services/events.service';
   styleUrls: ['./plan-display.component.scss']
 })
 export class PlanDisplayComponent implements AfterViewInit, OnInit {
+  specialClasses() {
+    const waypoint = this.hasWaypoint() ? 'active' : '';
+    const trial = this.hasTrial() ? 'trial-active' : '';
+
+    return `${waypoint} ${trial}`;
+
+  }
 
   @Input() backgroundColor?: String;
   draggable: boolean = true;
@@ -110,6 +117,14 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
     return world_area!.has_waypoint;
   }
 
+  hasTrial(key?: string): boolean {
+    if (!key) {
+      key = this.planService.currentPlan!.plan[this.planService.currentPlan!.current].area_key;
+    }
+
+    return this.worldAreaService.hasTrial(key);
+  }
+
   ngAfterViewInit(): void {
     if (window.innerWidth > 0) {
       const cfgRect = this.configService.config.initialPlanWindowPosition;
@@ -260,7 +275,7 @@ export class PlanDisplayComponent implements AfterViewInit, OnInit {
   }
 
   onScroll(event: WheelEvent) {
-    if(event.deltaY < 0) {
+    if (event.deltaY < 0) {
       this.prev();
     } else {
       this.next();