Wir wollen eine kleine Vue-Applikation bauen, die an die offene Pokémon Rest API angeschlossen ist und verschiedene Funktionalität bietet.
Dies soll nach Möglichkeit Test Driven (TDD) umgesetzt werden.

Das grafische Darstellung ist irrelevant. Die Nutzung von Frameworks wie Material oder Bootstrap ist genau so denkbar wie eine Umsetzung auf reiner HTML/TypeScript-Basis.

Bitte erstelle Dir ein Projekt im neusta GitLab und aktiviere das Issue Board. Hier werden folgende Anforderungen nach dem Konzept der Smart/Dumb Components in kleine Feature Stories übertragen. Jedes Feature soll mittels Merge Request umgesetzt, vom Coach genehmigt (nach Code Review) und schließlich in den master/develop Branch zurückgeführt (gemerged) werden.

---

Grundanforderungen

1. Setup

   1. Die Software basiert auf der aktuellen Vue 3 Version und wurde mit der Vite aufgesetzt.
   2. Für die Tests soll das Vitest verwendet werden.
   3. Die Software soll möglichst wenig externe Abhängigkeiten haben.
   4.  Optional**:** Für den Labor-Baustein **Pinia **muss das Framework installiert und genutzt werden

2. Die Software

   1. Suchfunktion

      1. Zunächst sehe ich ein erforderliches Eingabefeld (Suche) und einen dazugehörigen Button zum Abschicken des Formulars.
      2. Nach Eingabe eines Namens (z.B. pikachu) oder einer Zahl (id) und dem Absenden des Formulars wird ein Datensatz abgerufen. Der Suchbegriff muss dabei exakt eingegeben (Groß- und Kleinschreibung soll egal sein) werden, damit eine Suche erfolgreich ist. Das Suchfeld bleibt nach Absenden des Formulars sichtbar.
      3. Wenn meine Suche keine Ergebnisse ergibt wird eine Fehlermeldung angezeigt.
      4. Während des Ladevorgangs soll ein grafischer Indikator angezeigt werden.

   2. Detailansicht Pokemon

      1. Der abgefragte Datensatz wird in einer Detailansicht dargestellt. Diese zeigt mindestens folgende Informationen: 

         1. name
         2. base_experience
         3. height
         4. weight
         5. sprites.front_default

   3. Pokémon "fangen"

      1. In der Detailansicht des Pokémon-Datensatzes befindet sich ein Button zum "fangen" des Pokémon. Klicke ich darauf, wird dieses Pokémon (entspricht einer Art Warenkorb) gespeichert.
      2. Irgendwo auf der Seite befindet sich ein Pokéball Icon und zeigt die Anzahl gefangener Pokémon an.
      3. Habe ich ein Pokémon (z.B. Pikachu) bereits gefangen, ist der Button zum hinzufügen/fangen in der Detailansicht inaktiv. Jedes Pokémon kann lediglich ein einziges Mal gefangen werden.

   4. Pokéball

      1. Der Pokéball ist auch nach einem Refresh (F5) der Seite oder Schließen des Browsers noch mit den gleichen Daten gefüllt (Local Storage).
      2. Klicke ich auf den Pokéball, erscheint in einem Modal eine Auflistung der bereits gefangenen Pokémon als Liste (name und Thumbnail von sprites.front_default).
      3. An jedem Listeneintrag ist ein Icon zum "freilassen" des jeweiligen Pokémon. Bei Klick wird dieses aus der Liste entfernt.
      4. Habe ich alle Pokémon aus der Liste entfernt, schließt sich das Modal automatisch.
      5. Klicke ich auf ein Pokémon in der Liste, erscheint die in Punkt 2b erstellte Detailansicht.

3. Tests 

   1. Für alle Komponenten und Services existieren Unit Tests.
   2. Die Testabdeckung sollte stets über 90% liegen.

---

Zusatzanforderungen

Je nach Absprache mit dem zuständigen Coach sollen folgende Zusatzanforderungen erfüllt werden:

1. Weitere Informationen

   1. Die Detailansicht wird um ein Akkordeon Element mit den folgenden API Informationen erweitert:

      1. Abilities
      2. Forms
      3. Moves

   2. Bei Klick auf einen Eintrag werden die entsprechenden weiterführenden Informationen abgerufen und mindestens folgende Werte angezeigt ( die Daten sollen einmalig abgerufen werden und nicht bei jedem Klick):

      1. Abilities

         1. name
         2. generation
         3. short_effect

      2. Moves

         1. name
         2. accuracy
         3. chance_effect
         4. pp
         5. priority
         6. power
         7. damage_class

2. Vergleichen

   1. Listeneinträge (Pokémon) sollen sowohl einzeln als auch alle gleichzeitig selektierbar sein (per Checkbox).

   2. Wenn mindestens zwei Pokémon ausgewählt sind, erscheint ein Button zum Vergleich der Pokémon auf Basis ihrer Werte.

   3. Bei Klick auf den Button werde ich auf eine Seite /compare geleitet.

   4. Auf dieser Seite werden die selektierten Pokémon mit folgenden Werten nebeneinander dargestellt:

      1. base_experience
      2. height
      3. weight
      4. Anzahl der Abilities
      5. Anzahl der Moves

   5. In der Darstellung soll der höchste (grün) und der niedrigste Wert (rot) farblich markiert werden.

   6. Ebenfalls soll sich auf der Seite ein Link befinden, der den Nutzer wieder zurück zur Ausgangsseite mit geöffnetem Modal führt.