Minor design improvements. Added trial indication on the overlay

merge-notes
isark 2 years ago
parent 2f1a4b262f
commit 2c658b24ab

@ -2751,6 +2751,7 @@ name = "poe_data"
version = "0.1.0"
dependencies = [
"fuzzy-matcher",
"lazy_static",
"serde",
"serde_derive",
"serde_json",

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

@ -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"
serde = "1.0.175"
lazy_static = "1.4.0"

@ -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;
}
}
}

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

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

@ -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%;

@ -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();

Loading…
Cancel
Save