init release

src/app/training/training.component.html

@@ -0,0 +1,24 @@
+<!-- src/app/training.component.html -->
+<div class="mt-10">
+    <h2 class="text-2xl font-bold mb-4">Training: {{ deck.name }}</h2>
+    <div class="bg-white shadow rounded-lg p-6 flex flex-col items-center">
+      <img [src]="currentImage?.image" alt="Vokabelbild" class="w-64 h-64 object-contain mb-4">
+      <div *ngIf="showTextFlag" class="bg-black bg-opacity-50 text-white text-lg p-2 rounded mb-4">
+        {{ currentImage?.text }}
+      </div>
+      <div class="flex space-x-4">
+        <button (click)="showText()" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600" [disabled]="showTextFlag">
+          Anzeigen
+        </button>
+        <button (click)="markKnown()" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+          Gewusst
+        </button>
+        <button (click)="markUnknown()" class="bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600">
+          Nicht gewusst
+        </button>
+      </div>
+      <p class="mt-4">{{ progress }}</p>
+      <button (click)="closeTraining()" class="mt-4 text-gray-500 hover:text-gray-700 underline">Training beenden</button>
+    </div>
+  </div>
+  

src/app/training/training.component.ts

@@ -0,0 +1,62 @@
+// src/app/training.component.ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Deck, DeckImage } from '../deck.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-training',
+  templateUrl: './training.component.html',
+  standalone: true,
+  imports: [CommonModule]
+})
+export class TrainingComponent {
+  @Input() deck!: Deck;
+  @Output() close = new EventEmitter<void>();
+
+  currentIndex: number = 0;
+  knownCount: number = 0;
+  unknownCount: number = 0;
+  showTextFlag: boolean = false;
+
+  get currentImage(): DeckImage | null {
+    if (this.currentIndex < this.deck.images.length) {
+      return this.deck.images[this.currentIndex];
+    }
+    return null;
+  }
+
+  get progress(): string {
+    return `Fortschritt: ${this.currentIndex} / ${this.deck.images.length}`;
+  }
+
+  showText(): void {
+    this.showTextFlag = true;
+  }
+
+  markKnown(): void {
+    this.knownCount++;
+    this.nextImage();
+  }
+
+  markUnknown(): void {
+    this.unknownCount++;
+    this.nextImage();
+  }
+
+  nextImage(): void {
+    this.currentIndex++;
+    this.showTextFlag = false;
+    if (this.currentIndex >= this.deck.images.length) {
+      this.endTraining();
+    }
+  }
+
+  endTraining(): void {
+    alert(`Training beendet!\nGewusst: ${this.knownCount}\nNicht gewusst: ${this.unknownCount}`);
+    this.close.emit();
+  }
+
+  closeTraining(): void {
+    this.close.emit();
+  }
+}