added touch controll to delete characters and restyled character cards

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

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,13 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  HostListener,
+  OnInit,
+  Renderer2,
+  ElementRef,
+} from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { TranslatorService } from 'src/services/translator/translator.service';
 
@@ -8,6 +17,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 +25,14 @@ export class CharacterCardComponent {
   public image: any;
   public races: any;
   public classes: any;
+  private timeout: 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,8 +40,43 @@ 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');
+    }
+  }
+
+  // @HostListener('touchstart', ['$event'])
+  // onTouchStart(event: any) {
+  //   this.timeout = setTimeout(() => {
+  //     window.alert('Long press detected');
+  //   }, 1000); // 500 milliseconds
+  // }
+
+  // @HostListener('touchend')
+  // onTouchEnd() {
+  //   clearTimeout(this.timeout);
+  // }
+
   public loadCharacterData(): void {
     console.log(this.characterData);
     this.dataAccessor

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

@@ -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/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"
   }
 }