Memory App

Ein klassisches Memory-Spiel als Web-App, entwickelt mit TypeScript, SCSS und Vite.

---

Features

• 2 Spieler - Blau und Orange spielen abwechselnd
• 3 Spielfeldgroessen - 4x4, 6x6 und 8x8 Karten
• 2 Themes - Code Vibes (futuristisch) und Foods (warm und verspielt)
• Karten-Flip-Animation - CSS-only mit 3D-Perspektive
• Score-Tracking - Punkte pro gefundenem Paar, Live-Anzeige im Header
• Spieler-Wechsel - automatisch nach jedem nicht gematchten Paar
• Game Over und Winner Screen - mit CSS-Konfetti-Animation
• Exit-Dialog - Bestaedigungsdialog vor dem Verlassen des Spiels
• Responsive Design - funktioniert auf Desktop und mobilen Geraeten

---

Tech Stack

Technologie	Version	Verwendung
TypeScript	^5.9.3	Spiellogik, State-Management, Typsicherheit
SCSS / SASS	^1.97.3	Styling, Themes, Animationen
Vite	^7.3.1	Dev-Server, Build-Tool, HMR

---

Installation

1. Abhaengigkeiten installieren:

   npm install

2. Entwicklungsserver starten:

   npm run dev

   Die App laeuft standardmaessig unter http://localhost:5173

3. Produktions-Build erstellen:

   npm run build

   Das gebaute Projekt liegt im dist/-Ordner.

4. Build-Vorschau:

   npm run preview

---

Projektstruktur

Memory App/
+-- index.html              # Einstiegspunkt
+-- src/
|   +-- main.ts             # Router und App-Bootstrap
|   +-- state.ts            # Zentraler Game-State
|   +-- types.ts            # TypeScript-Typen und Interfaces
|   +-- utils.ts            # Hilfsfunktionen (Bildpfade, Deck-Erstellung)
|   +-- pages/
|       +-- home.ts         # Startbildschirm
|       +-- settings.ts     # Spieleinstellungen (Theme, Groesse, Spieler)
|       +-- game.ts         # Spielbrett, Karten-Logik, Header
|       +-- game-over.ts    # Zwischenscreen nach Spielende
|       +-- game-winner.ts  # Sieger-Anzeige mit Konfetti
+-- scss/
|   +-- main.scss           # Import-Einstiegspunkt (7-1 Pattern)
|   +-- abstract/           # Variablen, Mixins, Funktionen
|   +-- base/               # Fonts, Reset, Typografie
|   +-- components/         # Buttons, Karten, Shared UI
|   +-- pages/              # Home- und Settings-Styles
|   +-- themes/
|       +-- _code_vibes_theme.scss
|       +-- _foods_theme.scss
+-- public/
    +-- assets/
        +-- fonts/          # Lokale WOFF2-Schriftarten
        +-- img/
            +-- codevibes_theme/
            +-- foods_theme/

---

Spielablauf

1. Home - Startbildschirm mit Play-Button
2. Settings - Spielerfarbe, Spielfeldgroesse und Theme auswaehlen
3. Game - Karten aufdecken, Paare finden, Punkte sammeln
4. Game Over - kurze Zusammenfassung der Endpunkte
5. Game Winner - Siegeranzeige mit Konfetti und Zurueck-Button

---

Architektur

• Kein Framework - reines TypeScript mit DOM-Manipulation
• SPA-Routing - navigateTo() in main.ts tauscht den Seiteninhalt aus
• Theme-System - data-theme-Attribut am main-Element, SCSS-Overrides per [data-theme]-Selector
• State-Management - zentraler State in state.ts
• 7-1 SCSS Pattern - abstract, base, components, pages, themes

---

Entwickelt von

Raphael Neuberger - Developer Akademie, Modul 14 (TypeScript und SCSS)