# Retro Arcade Platform — Design Spec

**Date:** 2026-03-31

## Overview

Erweiterung des bestehenden Snake-Spiels zu einer kleinen Retro-Arcade-Plattform mit vier Spielen. Alle Dateien sind plain HTML/CSS/JS, kein Build-Schritt, kein Server, kein Package Manager — direkt im Browser öffenbar.

## Spiele

1. **Snake** — bestehendes `snake.html`, minimal angepasst
2. **Tetris** — neu
3. **Breakout** — neu
4. **Space Invaders** — neu

## Dateistruktur

```
testprojekt/
├── index.html          ← Startmenü (neu)
├── style.css           ← gemeinsame Styles (neu)
├── scores.js           ← Highscore-Logik (neu)
├── snake.html          ← angepasst (shared assets einbinden)
├── tetris.html         ← neu
├── breakout.html       ← neu
└── spaceinvaders.html  ← neu
```

## Architektur

### Gemeinsame Assets

**`style.css`**
- Navy/Teal-Theme: Hintergrund `#1a1a2e`, Akzent `#4ecca3`, Schrift `Courier New`
- Gemeinsame Klassen: Body-Layout, Überschriften, HUD, Canvas-Border, Overlay, Buttons, Game-Kacheln
- Wird von allen HTML-Dateien via `<link rel="stylesheet" href="style.css">` eingebunden

**`scores.js`**
- `getHighscore(game)` — liest aus `localStorage` (`hs_snake`, `hs_tetris`, `hs_breakout`, `hs_spaceinvaders`), gibt `0` zurück wenn kein Eintrag
- `setHighscore(game, score)` — speichert nur wenn `score > getHighscore(game)`
- Wird via `<script src="scores.js"></script>` eingebunden

### Startmenü (`index.html`)

- Titel: "RETRO ARCADE" in Teal, zentriert
- 2×2 Grid mit einer Kachel pro Spiel
- Jede Kachel zeigt: Spielname + aktuellen Highscore (gelesen beim Seitenload via `scores.js`)
- Klick auf Kachel → öffnet die jeweilige Spieldatei (`href="snake.html"` etc.)
- Highscores werden beim Öffnen von `index.html` frisch aus `localStorage` gelesen — immer aktuell

### Einzelne Spiele

Jedes Spiel bekommt:
- `<link rel="stylesheet" href="style.css">` und `<script src="scores.js"></script>` im Head
- "← Menü"-Button oben links, verlinkt auf `index.html`
- Beim Game Over: `setHighscore('tetris', score)` (bzw. jeweiliger Spielname) aufrufen, bevor der Overlay angezeigt wird
- Spielspezifische Styles (z.B. Tetris-Blockfarben) inline im jeweiligen `<style>`-Block

### Snake-Anpassung

`snake.html` wird minimal geändert:
- Inline-CSS für gemeinsame Stile auf `style.css` auslagern
- `scores.js` einbinden
- "← Menü"-Button hinzufügen
- `setHighscore('snake', score)` bei Game Over aufrufen

## Highscore-Speicherung

| localStorage-Key    | Spiel         |
|---------------------|---------------|
| `hs_snake`          | Snake         |
| `hs_tetris`         | Tetris        |
| `hs_breakout`       | Breakout      |
| `hs_spaceinvaders`  | Space Invaders|

Ein Highscore wird nur überschrieben wenn der neue Score höher ist.

## Visueller Stil

Einheitliches Navy/Teal-Theme, abgeleitet vom bestehenden Snake-Design:

- Background: `#1a1a2e`
- Akzentfarbe: `#4ecca3`
- Text: `#e0e0e0`
- Sekundärtext: `#a0a0c0`
- Schrift: `'Courier New', monospace`
- Canvas/Kachel-Border: `2px solid #4ecca3`, Glow via `box-shadow`

Jedes Spiel behält seine eigenen Spielmechanik-spezifischen Farben (z.B. Tetris-Blockfarben), aber das Rahmenlayout (HUD, Overlay, Menübutton) ist identisch.

## Nicht im Scope

- Sound / Musik
- Mobile-Touch-Steuerung
- Globale Ranglisten / Server
- Animierte Übergänge zwischen Spielen
- Schwierigkeitsstufen