Design improvements, some help tooltips.

src-tauri/src/config.rs

@@ -42,6 +42,11 @@ pub struct Config {
     pub note_default_fg: String,
     #[serde(default = "Config::default_poe_client_log_path")]
     pub poe_client_log_path: Option<PathBuf>,
+
+    #[serde(default = "Config::default_plan_num_visible")]
+    pub num_visible: u16,
+    #[serde(default = "Config::default_plan_offset")]
+    pub offset: i16,
 }
 
 impl Default for Config {
@@ -59,6 +64,8 @@ impl Default for Config {
             #[cfg(not(build_only))]
             poe_client_log_path: Self::default_poe_client_log_path(),
             note_default_fg: Self::default_note_default_fg(),
+            num_visible: Self::default_plan_num_visible(),
+            offset: Self::default_plan_offset(),
         }
     }
 }
@@ -96,7 +103,7 @@ impl Config {
     fn default_poe_client_log_path() -> Option<PathBuf> {
         poe_reader::get_poe_path()
     }
-            #[cfg(not(build_only))]
+    #[cfg(not(build_only))]
     fn default_poe_client_log_path() -> Option<PathBuf> {
         None
     }
@@ -104,5 +111,11 @@ impl Config {
     fn default_note_default_fg() -> String {
         "#bfbfbfff".to_string()
     }
-}
 
+    fn default_plan_num_visible() -> u16 {
+        3
+    }
+    fn default_plan_offset() -> i16 {
+        1
+    }
+}

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Nothing",
-    "version": "1.1.1"
+    "version": "1.2.0"
   },
   "tauri": {
     "systemTray": {

src/app/app.component.html

@@ -12,6 +12,26 @@
             <plan-editor class="content"></plan-editor>
         </mat-tab>
     </mat-tab-group>
+
+    <tooltip class="tooltip">
+        <div class="d-flex flex-column tooltip-area">
+        <ng-container *ngIf="selected.value == 0; else editor">
+            <pre>Plan window background is lets you configure the background color of the "plan window"
+The overlay backdrop color covers the whole area when the overlay is toggled into interactable* mode.
+    *Interactable means you can move and resize the "plan window"
+The overlay default font color is the default color for notes in the plan window
+
+The "plan window" proceeds automatically when you go into the next zone ingame if it matches the next one in the plan.</pre>
+        </ng-container>
+        <ng-template #editor>
+            <pre>Right click to edit note
+Double click to quick add
+Notes are in markdown extended with color support, e.g:
+    {{'{'}}css-compatible-color{{'}'}}(The colored text inside)</pre>
+
+        </ng-template>
+    </div>
+    </tooltip>
 </div>
 
 <ng-container *ngIf="overlayService.isOverlay">

src/app/app.component.scss

@@ -39,4 +39,19 @@ mat-tab-group {
 
 .settings {
     height: 100%;
+}
+
+.tooltip {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 5000;
+    cursor: help;
+}
+
+.tooltip-area {
+    background-color: rgba(50, 50, 50, 1);
+    color: white;
+
+    // width: 500px;
 }

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { OverlayModule } from "@angular/cdk/overlay";
 import { SettingsComponent } from "./settings/settings.component";
 import { MatTabsModule } from '@angular/material/tabs';
 import { MAT_DIALOG_DEFAULT_OPTIONS } from "@angular/material/dialog";
+import { TooltipComponent } from "./tooltip/tooltip.component";
 // import { GemFinderComponent } from "./gem-finder/gem-finder.component";
 
 export function initializeApp(configService: ConfigService) {
@@ -37,6 +38,7 @@ export function initializeApp(configService: ConfigService) {
     OverlayModule,
     SettingsComponent,
     MatTabsModule,
+    TooltipComponent
   ],
   providers: [
     {

src/app/editor/notes/edit-notes.component.html

@@ -5,6 +5,7 @@
             <textarea [(ngModel)]="note" cols="50" rows="10"></textarea>
         </div>
 
+        <span><span>Preview </span><span style="color: grey; font-size: 0.9em;">(Unscaled)</span></span>
         <div class="right">
             <notes [note]="note"></notes>
         </div>

src/app/editor/notes/notes.component.scss

@@ -23,4 +23,8 @@
     & {
         font-size: 1.3em;
     }
-}
+
+    .note-preview {
+        min-height: 400px;
+    }
+}

src/app/editor/notes/notes.component.ts

@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MarkdownService } from 'src/app/_services/markdown.service';
+import { ScalableComponent } from 'src/app/Scalable/scalable.component';
 
 
 interface DialogData {
@@ -36,7 +37,7 @@ export class NotesComponent implements AfterViewInit {
   selector: 'notes-editor',
   templateUrl: 'edit-notes.component.html',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, NotesComponent],
+  imports: [CommonModule, FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, NotesComponent, ScalableComponent],
   encapsulation: ViewEncapsulation.None,
 })
 export class EditNotesComponentDialog {

src/app/plan-display/plan-display.component.html

@@ -37,10 +37,13 @@
             <button mat-icon-button *ngIf="overlayService.interactable" class="settings-button"
                 (click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img
                     src="assets/material-settings.svg"></button>
-            <!-- <div *ngIf="overlayService.interactable" #tooltip="matTooltip" matTooltip="(T) = Trial in zone<br> (W) = Waypoint in zone. <br> Border around plan window will light up in the same color"
+            <tooltip class="help">
-                [matTooltipPosition]="'below'" matTooltipHideDelay="1000" class="help-button">
+                <div class="d-flex flex-column help-area">
-                <img src="assets/material-help.svg">
+                    <span><span class="waypoint-text">(W)</span> = Waypoint</span>
-            </div> -->
+                    <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>
+                </div>
+            </tooltip>
         </div>
 
         <ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable"

src/app/plan-display/plan-display.component.scss

@@ -104,25 +104,23 @@ notes {
     ;
 }
 
-// .overlay {
-//     display: grid;
-//     grid-template-columns: 1fr 2fr;
-//     width: 100vw;
-//     height: 100vh;
-// }
-
 .settings-button {
     position: absolute;
     top: 0;
     right: 0;
 }
 
-.help-button {
+.help {
     position: absolute;
     top: 0;
     left: 0;
 }
 
+.help-area {
+    background-color: rgba(50, 50, 50, 1);
+    border: 1px solid black;
+}
+
 
 .exit {
     transform: rotate(45deg);
@@ -147,11 +145,11 @@ notes {
     }
 }
 
-// .overlay {
+.overlay {
-//     width: 100vw;
+    width: 100vw;
-//     height: 100vh;
+    height: 100vh;
-//     background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.85);
-// }
+}
 
 .material-symbols-outlined {
     font-variation-settings:

src/app/plan-display/plan-display.module.ts

@@ -13,6 +13,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { ScalableComponent } from '../Scalable/scalable.component';
 import {MatTooltipModule} from '@angular/material/tooltip'; 
+import { TooltipComponent } from '../tooltip/tooltip.component';
 @NgModule({
   declarations: [
     PlanDisplayComponent
@@ -31,7 +32,8 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     MatIconModule,
     MatListModule,
     ScalableComponent,
-    MatTooltipModule
+    MatTooltipModule,
+    TooltipComponent
   ],
   exports: [
     PlanDisplayComponent

src/app/settings/settings.component.html

@@ -46,10 +46,17 @@
     </div>
 
     <!-- TODO: Better visuals :D -->
-    <div class="row">
+    <div class="row mt-3">
-        <input type="number" [(ngModel)]="configService.config.numVisible" min="1" max="10" step="1">
+        <mat-form-field appearance="outline">
-    </div>
+            <mat-label>Number of zones to display</mat-label>
-    <div class="row">
+            <input matInput type="number" [(ngModel)]="configService.config.numVisible" min="1" max="10" step="1">
-        <input type="number" [(ngModel)]="configService.config.offset" min="0" [max]="configService.config.numVisible - 1" step="1">
+        </mat-form-field>
+    </div>
+    <div class="row">
+        <mat-form-field appearance="outline">
+            <mat-label>Offset</mat-label>
+            <input matInput type="number" [(ngModel)]="configService.config.offset" min="0"
+                [max]="configService.config.numVisible - 1" step="1">
+        </mat-form-field>
     </div>
 </div>

src/app/settings/settings.component.ts

@@ -12,13 +12,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { ShortcutService } from '../_services/shortcut.service';
 import { RecordKeyChord } from '../directives/record-key-chord.directive';
-import { Config } from '../_models/generated/Config';
 import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
   selector: 'settings',
   standalone: true,
-  imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule, MatButtonModule, MatDividerModule],
+  imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule, MatButtonModule, MatDividerModule, MatFormFieldModule, MatInputModule],
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss']
 })

src/app/tooltip/tooltip.component.html

@@ -0,0 +1,6 @@
+<img (mouseenter)="show = true" (mouseleave)="show = false" src="assets/material-help.svg" style="padding: 12px; cursor: help"
+    #trigger>
+
+<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="show">
+    <ng-content></ng-content>
+</ng-template>

src/app/tooltip/tooltip.component.ts

@@ -0,0 +1,13 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'tooltip',
+  templateUrl: './tooltip.component.html',
+  imports: [OverlayModule, MatCardModule,],
+  standalone: true
+})
+export class TooltipComponent {
+  show: boolean = false;
+}