Zum Inhalt

History Guess The Flag - Projekt Dokumentation

Einleitung

"History Guess The Flag" ist eine interaktive Web-Applikation, bei der Nutzer historische Flaggen erraten müssen. Ziel war es, eine spielerische Lernumgebung für Geschichtsinteressierte zu schaffen, die visuell ansprechend ("Premium Design") und modern umgesetzt ist.

Technologie Stack

Das Projekt wurde mit modernen Web-Technologien und dem Angular Framework realisiert: - Framework: Angular 19 - Architektur: Standalone Components - State Management: Angular Signals API - Styling: Modern CSS3 (Glassmorphism, Animations, Flexbox/Grid) - Sprache: TypeScript

Features

  • Umfangreiche Datenbank: Über 40 historische Flaggen, darunter:
    • Antike: Karthago, Makedonien, Römisches Reich.
    • Mittelalter: Goldene Horde, Deutscher Orden, Majapahit, Königreich Jerusalem.
    • Neuzeit: Polen-Litauen, Mogulreich, Azteken, Qing Dynastie.
    • Moderne: Republik China (1912), Mandschukuo, Jugoslawien.
  • Gamification:
    • Leben-System: Der Spieler hat 3 Leben (❤️). Bei Fehlern wird ein Leben abgezogen.
    • Streak-Zähler: Belohnung für Serien richtiger Antworten (🔥).
    • Punkte: Highscore-Jagd.
  • Interaktives UI:
    • Feedback-Animationen (Schütteln bei Fehler, Aufleuchten bei Erfolg).
    • Modernes, responsives Design mit "Glassmorphism" Effekten.

Entwicklungsprozess

1. Datenbeschaffung (Assets)

Da keine lokalen Bilder vorhanden waren, wurde ein PowerShell-Skript entwickelt, um hochwertige PNG-Flaggen direkt von Wikimedia Commons herunterzuladen. Dies stellte sicher, dass alle historischen Flaggen (z.B. Polen-Litauen, Königreich Jerusalem) in korrekter Auflösung vorliegen.

# Auszug aus dem Download-Skript
$flags = @{
    "plc.png" = ".../Flag_of_the_Polish-Lithuanian_Commonwealth.png"
    "jerusalem.png" = ".../Flag_of_the_Kingdom_of_Jerusalem.png"
}
# ... Download via Invoke-WebRequest

2. Datenmodellierung

Die Flaggen wurden in einer zentralen TypeScript-Datei (flags.ts) als Interface definiert und exportiert.

export interface Flag {
    name: string;
    url: string;
}
export const FLAGS: Flag[] = [ ... ];

3. Spiellogik (GameService)

Die Logik wurde in einen GameService ausgelagert, der Angular Signals nutzt, um den Spielzustand reaktiv zu verwalten. - _score, _streak, _lives sind private Signals. - checkAnswer() Methode prüft die Eingabe und steuert das Feedback. - resetGame() setzt den Zustand bei "Game Over" zurück.

4. UI Design

Das Design setzt auf Glassmorphism (transparente Hintergründe mit Unschärfe) und sanfte Farbverläufe, um einen hochwertigen Look zu erzeugen. CSS-Animationen (@keyframes shake, popIn) sorgen für sofortiges visuelles Feedback.

Screenshot des Spiels (Bitte hier ein Screenshot des laufenden Spiels einfügen)

Fazit

Das Projekt demonstriert die Leistungsfähigkeit von modernem Angular für interaktive Anwendungen. Durch die Nutzung von Signals konnte der Code sehr sauber und performant gehalten werden.