You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
7.6 KiB
122 lines
7.6 KiB
<ng-container *ngIf="init">
|
|
<div #globalTopLeft style="position: fixed; top: 0; left: 0; z-index: -1;"></div>
|
|
<div class=""></div>
|
|
<ng-container *ngIf="rect && currentPlan">
|
|
<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]="specialClasses()" (wheel)="onScroll($event)" #targetRef>
|
|
<ng-container *ngIf="currentPlan">
|
|
<carousel class="zones" [initIndex]="currentPlan.current" [numVisible]="configService.config.numVisible"
|
|
[offset]="clampedOffset()" [slides]="currentPlan.plan" (afterInitSelf)="registerZoneSlides($event)"
|
|
[ngStyle]="zonesStyle()">
|
|
<ng-template let-slide let-index="index">
|
|
<div class="zone-slide" [style.color]="configService.config.noteDefaultFg"
|
|
[style.border]="index == currentPlan.current ? '1px white solid' : 'none'">
|
|
<div *ngIf="showDiff(slide)">
|
|
<div [class]="yourDiffClass(slide)">{{yourDiff(slide)}}</div>
|
|
</div>
|
|
|
|
<div>{{worldAreaMap!.get(slide.area_key)!.name}}</div>
|
|
|
|
<div class="text-marker d-flex flex-row">
|
|
<div>{{cpMillis(slide)}}</div>
|
|
<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>
|
|
<carousel [initIndex]="currentPlan.current" [slides]="currentPlan.plan"
|
|
(afterInitSelf)="registerCurrentSlides($event)">
|
|
<ng-template let-slide>
|
|
<scalable [clamp]="2">
|
|
<notes class="p-1" [note]="slide.notes" [style.color]="configService.config.noteDefaultFg"
|
|
#noteSlide></notes>
|
|
</scalable>
|
|
</ng-template>
|
|
</carousel>
|
|
|
|
</ng-container>
|
|
<button mat-icon-button *ngIf="overlayService.interactable" class="settings-button"
|
|
(click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img
|
|
src="assets/material-settings.svg"></button>
|
|
<tooltip *ngIf="overlayService.interactable" class="help">
|
|
<div class="d-flex flex-column help-area">
|
|
<span><span class="waypoint-text">(W)</span> = Waypoint</span>
|
|
<span><span class="trial-text">(T)</span> = Trial</span>
|
|
<span>The plan window's will have a glow in the corresponding color(s) above to help indicate if the
|
|
current zone has any of those.</span>
|
|
<span>You can scroll in the plan window (while it is in 'interactable' mode) to quickly switch many
|
|
zones</span>
|
|
</div>
|
|
</tooltip>
|
|
<span *ngIf="shouldDisplayTimer()" class="timer">{{timeTrackerService.hmsTimestamp(timeTrackerService.elapsedTimeMillis)}}</span>
|
|
</div>
|
|
|
|
<ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable"
|
|
[resizable]="true && overlayService.interactable" (drag)="onDrag($event)" (resize)="onResize($event)"
|
|
(dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)" [bounds]="bounds" [snappable]="true"
|
|
[style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
|
|
|
|
</ng-container>
|
|
|
|
<ng-template cdkConnectedOverlay
|
|
[cdkConnectedOverlayOpen]="(settingsOpen || !currentPlan) && overlayService.interactable"
|
|
[cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
|
|
<div class="overlay container-fluid vw-100">
|
|
<div class="row row-cols-2 h-100">
|
|
<div class="planChooser col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-4 d-flex flex-column">
|
|
<div class="d-flex justify-content-evenly">
|
|
<div class="col-xs-4">
|
|
<button class="" mat-raised-button color="accent" (click)="openDialog()">Browse
|
|
Plans
|
|
</button>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button class="" mat-raised-button color="accent" (click)="loadBasePlan()">
|
|
Load base plan
|
|
</button>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<button class="" mat-raised-button color="accent" (click)="loadFromUrl()">
|
|
Import from url
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="enumerated d-flex flex-column">
|
|
<mat-list role="list" class="d-flex flex-column h-100">
|
|
<cdk-virtual-scroll-viewport itemSize="10" class="h-100">
|
|
<mat-list-item class="d-flex flex-column" role="listitem"
|
|
*cdkVirtualFor="let plan of previousPlans">
|
|
<span>
|
|
<button [disabled]="disablePlans" (click)="loadPrevious(plan.stored_path!)">
|
|
<img *ngIf="plan.update_url" src="assets/public.svg">{{plan.name}}
|
|
</button><button *ngIf="plan.update_url" class="planActionButton"
|
|
[disabled]="disablePlans" (click)="checkForPlanUpdate(plan)"
|
|
[title]="recentPlanTitle(plan)">
|
|
<svg-icon *ngIf="!hasUpdate(plan)" src="assets/material-sync.svg" />
|
|
<svg-icon *ngIf="hasUpdate(plan) && !isErr(plan)"
|
|
src="assets/material-check.svg" class="nice" />
|
|
<svg-icon *ngIf="hasUpdate(plan) && isErr(plan)"
|
|
src="assets/material-warning.svg" class="notnice" />
|
|
</button>
|
|
</span>
|
|
</mat-list-item>
|
|
</cdk-virtual-scroll-viewport>
|
|
</mat-list>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<settings class="col-xs-6 col-sm-6 offset-md-1 col-md-5 offset-lg-4 col-lg-4 offset-xl-4 col-xl-4">
|
|
</settings>
|
|
</div>
|
|
<button mat-icon-button class="exit" *ngIf="currentPlan"
|
|
(click)="settingsOpen = false"><span>+</span></button>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<button class="stop-stopwatch" mat-raised-button color="warn" *ngIf="timeTrackerService.isActive" (click)="stopStopwatch()">Force stop stopwatch</button>
|
|
<button class="stop-stopwatch" mat-raised-button color="warn" *ngIf="!timeTrackerService.isActive && timeTrackerService.hasRunLoaded" (click)="startStopwatch()">Start last loaded</button>
|
|
</ng-container> |