Merge branch 'release/0.9.3'

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "dndtools",
-  "version": "0.6.0",
+  "version": "0.9.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dndtools",
-      "version": "0.6.0",
+      "version": "0.9.2",
       "dependencies": {
         "@angular/animations": "^17.0.3",
         "@angular/cdk": "^17.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/character/character-picker/character-card/character-card.component.html

@@ -1,5 +1,6 @@
 <div class="character-card" (click)="selectCharacter()">
   <div
+    id="delete-button"
     class="delete-area"
     (click)="deleteCharacter(); $event.stopPropagation()"
   >
@@ -20,19 +21,29 @@
   }
   @if (characterData !== undefined) {
     <div class="content">
-      <!-- <div>{{ image }}</div> -->
       <div class="name">{{ character }}</div>
-      <div class="level">
-        {{ "general.level" | translate }} {{ characterData.level }}
+      <div class="character-info">
+        <div class="entry">
+          {{ "general.level" | translate }} {{ characterData.level }}
+        </div>
+        <hr />
+        <div class="entry">
+          {{ "species." + characterData.race | translate }}
+        </div>
+        <hr />
+        <div class="entry">
+          {{ "classes." + characterData.class | translate }}
+        </div>
+        @if (characterData.subclass) {
+          <hr />
+          <div class="entry">
+            {{
+              "subclasses." + characterData.class + "." + characterData.subclass
+                | translate
+            }}
+          </div>
+        }
       </div>
-      <div class="species">
-        {{ "species." + characterData.race | translate }}
-      </div>
-      <div class="class">
-        {{ "classes." + characterData.class | translate }}
-      </div>
-
-      <!-- <div class="subclass">{{ characterData.class }}</div> -->
     </div>
   }
 </div>

src/app/character/character-picker/character-card/character-card.component.scss

@@ -35,6 +35,10 @@
   }
 }
 
+.show {
+  width: 5rem !important;
+}
+
 img {
   width: 20rem;
   height: 20rem;
@@ -51,26 +55,23 @@ img {
   text-align: center;
 }
 
-.level {
-  position: absolute;
-  right: 0.5rem;
-  bottom: 8rem;
-}
-
-.species {
-  position: absolute;
-  right: 0.5rem;
-  bottom: 6rem;
+.character-info {
+  height: 16rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem;
 }
 
-.class {
-  position: absolute;
-  right: 0.5rem;
-  bottom: 4rem;
+.entry {
+  padding-right: 1rem;
+  text-align: right;
+  font-weight: 500;
 }
 
-.subclass {
-  position: absolute;
-  right: 0.5rem;
-  bottom: 2rem;
+hr {
+  width: 70%;
+  margin: 0;
 }

src/app/character/character-picker/character-card/character-card.component.ts

@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  Renderer2,
+  ElementRef,
+} from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { TranslatorService } from 'src/services/translator/translator.service';
 
@@ -8,6 +15,7 @@ import { TranslatorService } from 'src/services/translator/translator.service';
   styleUrls: ['./character-card.component.scss'],
 })
 export class CharacterCardComponent {
+  @Input() isTouchscreen: boolean = false;
   @Input() character: string = '';
   @Output() delete: EventEmitter<string> = new EventEmitter<string>();
   @Output() select: EventEmitter<string> = new EventEmitter<string>();
@@ -15,10 +23,13 @@ export class CharacterCardComponent {
   public image: any;
   public races: any;
   public classes: any;
+  private touchStartX: number = 0;
 
   constructor(
     private dataAccessor: DataService,
     private translator: TranslatorService,
+    private renderer: Renderer2,
+    private el: ElementRef,
   ) {
     this.races = this.translator.races;
     this.classes = this.translator.classes;
@@ -26,6 +37,29 @@ export class CharacterCardComponent {
 
   ngOnInit() {
     this.loadCharacterData();
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchstart',
+      this.onTouchStart.bind(this),
+    );
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchend',
+      this.onTouchEnd.bind(this),
+    );
+  }
+
+  onTouchStart(event: any) {
+    this.touchStartX = event.touches[0].clientX;
+  }
+
+  onTouchEnd(event: any) {
+    const touchEndX = event.changedTouches[0].clientX;
+    if (touchEndX > this.touchStartX + 100) {
+      document.getElementById('delete-button')?.classList.add('show');
+    } else if (touchEndX < this.touchStartX - 100) {
+      document.getElementById('delete-button')?.classList.remove('show');
+    }
   }
 
   public loadCharacterData(): void {

src/app/character/character-picker/character-picker.component.html

@@ -54,7 +54,7 @@
 
 <ng-template #warning let-warning>
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">0.9.2</h4>
+    <h4 class="modal-title" id="modal-basic-title">0.9.3</h4>
     <button
       type="button"
       class="btn-close"
@@ -68,9 +68,7 @@
     </h5>
 
     <br />
-    <h5>
-      {{ "picker.issues" | translate }}
-    </h5>
+    <h5 [innerHTML]="'picker.issues' | translate"></h5>
     <button
       style="display: block; margin: auto; margin-top: 32px"
       class="okay-button"

src/app/character/character-picker/character-picker.component.ts

@@ -27,7 +27,6 @@ export class CharacterPickerComponent {
 
   @ViewChild('warning') warning!: TemplateRef<any>;
 
-  // @ViewChildren(warning) warning!: TemplateRef<any>;
   public constructor(
     public dataService: DataService,
     private Router: Router,

src/app/journal/journal-home/journal-home.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2, ElementRef } from '@angular/core';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
 
 @Component({
@@ -8,7 +8,12 @@ import { NavigationPanelService } from 'src/services/navigationPanel/navigation-
 })
 export class JournalHomeComponent {
   private isNavigationOpen: boolean = false;
-  public constructor(public navigation: NavigationPanelService) {}
+  private touchStartX: number = 0;
+  public constructor(
+    public navigation: NavigationPanelService,
+    private renderer: Renderer2,
+    private el: ElementRef,
+  ) {}
 
   ngOnInit() {
     const width = window.innerWidth;
@@ -27,5 +32,29 @@ export class JournalHomeComponent {
         this.navigation.closeNavigation();
       }
     });
+
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchstart',
+      this.onTouchStart.bind(this),
+    );
+    this.renderer.listen(
+      this.el.nativeElement,
+      'touchend',
+      this.onTouchEnd.bind(this),
+    );
+  }
+
+  onTouchStart(event: any) {
+    this.touchStartX = event.touches[0].clientX;
+  }
+
+  onTouchEnd(event: any) {
+    const touchEndX = event.changedTouches[0].clientX;
+    if (touchEndX > this.touchStartX + 100) {
+      this.navigation.openNavigation();
+    } else if (touchEndX < this.touchStartX - 100) {
+      this.navigation.closeNavigation();
+    }
   }
 }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

@@ -6,7 +6,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 1 ? 'active' : ''"
-        (click)="setActiveProperty(1); closeAll()"
+        (click)="setActiveProperty(1); closeAll(); closePanel()"
         [routerLink]="'./stats'"
       >
         {{ "navigation.dashboard" | translate }}
@@ -16,7 +16,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 2 ? 'active' : ''"
-        (click)="setActiveProperty(2); closeAll()"
+        (click)="setActiveProperty(2); closeAll(); closePanel()"
         [routerLink]="'./character'"
       >
         {{ "navigation.character" | translate }}
@@ -26,7 +26,7 @@
       <div
         class="navigation-entry"
         [class]="active === 3 ? 'active' : ''"
-        (click)="setActiveProperty(3); closeAll()"
+        (click)="setActiveProperty(3); closeAll(); closePanel()"
         [routerLink]="'./inventory'"
       >
         {{ "navigation.inventory" | translate }}
@@ -36,7 +36,7 @@
       <div
         class="navigation-entry"
         [class]="active === 4 ? 'active' : ''"
-        (click)="setActiveProperty(4); closeAll()"
+        (click)="setActiveProperty(4); closeAll(); closePanel()"
         [routerLink]="'./spellcards'"
       >
         {{ "navigation.spells" | translate }}
@@ -46,7 +46,7 @@
       <div
         class="navigation-entry"
         [class]="active === 5 ? 'active' : ''"
-        (click)="setActiveProperty(5); closeAll()"
+        (click)="setActiveProperty(5); closeAll(); closePanel()"
         [routerLink]="'./notes'"
       >
         {{ "navigation.notes" | translate }}
@@ -56,7 +56,7 @@
       <div
         class="navigation-entry"
         [class]="active === 6 ? 'active' : ''"
-        (click)="setActiveProperty(6); closeAll()"
+        (click)="setActiveProperty(6); closeAll(); closePanel()"
         [routerLink]="'./spellbook'"
       >
         {{ "navigation.spellbook" | translate }}
@@ -66,7 +66,7 @@
       <div
         class="navigation-entry"
         [class]="active === 7 ? 'active' : ''"
-        (click)="setActiveProperty(7); closeAll()"
+        (click)="setActiveProperty(7); closeAll(); closePanel()"
         [routerLink]="'./quests'"
       >
         {{ "navigation.quests" | translate }}
@@ -76,7 +76,7 @@
       <div
         class="navigation-entry"
         [class]="active === 8 ? 'active' : ''"
-        (click)="setActiveProperty(8); closeAll()"
+        (click)="setActiveProperty(8); closeAll(); closePanel()"
         [routerLink]="'./npcs'"
       >
         {{ "navigation.npcs" | translate }}
@@ -86,7 +86,7 @@
       <div
         class="navigation-entry"
         [class]="active === 9 ? 'active' : ''"
-        (click)="setActiveProperty(9); closeAll()"
+        (click)="setActiveProperty(9); closeAll(); closePanel()"
         [routerLink]="'./places'"
       >
         {{ "navigation.places" | translate }}
@@ -96,7 +96,7 @@
       <div
         class="navigation-entry"
         [class]="active === 10 ? 'active' : ''"
-        (click)="setActiveProperty(10); closeAll()"
+        (click)="setActiveProperty(10); closeAll(); closePanel()"
         [routerLink]="'./maps'"
       >
         {{ "navigation.maps" | translate }}
@@ -107,7 +107,7 @@
       <div
         class="navigation-entry"
         [class]="active === 11 ? 'active' : ''"
-        (click)="setActiveProperty(11); closeAll()"
+        (click)="setActiveProperty(11); closeAll(); closePanel()"
         [routerLink]="'./ruleset'"
       >
         {{ "navigation.rules" | translate }}

src/assets/i18n/de.json

@@ -754,7 +754,7 @@
     "delete": "Charakter löschen",
     "confirm": "Möchtest du <b>{{name}}</b> unwiederruflich löschen?",
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
-    "issues": "Fehler und Anmerkungen bitte auf dem Git-Server in Issues vermerken.",
+    "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden"
   }
 }