Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dextatc
|
f90356fc38 | ||
|
dextatc
|
1c51624025 | ||
|
dextatc
|
ed1f050373 |
@@ -1,3 +1,2 @@
|
||||
66_plasmaTr
|
||||
export/
|
||||
91_sonnensystem
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
= Meta: System der aufsteigenden Dateien =
|
||||
:toc:
|
||||
:icons: font
|
||||
|
||||
== Willkomen lieber Leser
|
||||
|
||||
die letzte Stufe vor der Öffentlichkeit, tools und Dateien werden sich dann
|
||||
dort finden wo sie erwartet werden. Druckstufe noch nicht ganz klar,
|
||||
warte auf den ersten Text der gesetzt werden kann.
|
||||
|
||||
|
||||
[cols="4*", options="header"]
|
||||
.Sichtbarkeit der Texte
|
||||
|**`galaxienhaufen`**
|
||||
|`staging`, `release`
|
||||
|Lektorat, Setzer
|
||||
|Typografie-Themes, EPUB/PDF-Generatoren, Kapitel-Includes, Layout-Assets.
|
||||
|**`universum`**
|
||||
|`main` / `v1.0`
|
||||
|Öffentlichkeit, Leser
|
||||
|Kanonischer Text, Open-Source-Lizenz, Enzyklopädie/Glossar.
|
||||
|===
|
||||
@@ -1,641 +0,0 @@
|
||||
= Design-System: Maschinen-Instanzen
|
||||
:toc:
|
||||
:toclevels: 3
|
||||
|
||||
Project X Tribut • Universelles UI-, HUD- und Grafiksystem
|
||||
|
||||
*Version:* 1.0.0 +
|
||||
*Zielplattformen:* Web, HTML5 Canvas, Browser-Games, Diagnose-Terminals, Tools, Dashboards +
|
||||
*Designsprache:* Hard-Sci-Fi • Industrial Computing • Retro-Terminal • Maschinenästhetik
|
||||
|
||||
== 1. Designphilosophie
|
||||
|
||||
Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums.
|
||||
|
||||
Die Gestaltung orientiert sich an industriellen Steuerungssystemen, wissenschaftlichen Diagnoseterminals und kybernetischen Maschinenkomplexen. Sämtliche Farben, Formen und Effekte besitzen eine funktionale Bedeutung.
|
||||
|
||||
Die Benutzeroberfläche soll nicht dekorativ wirken, sondern wie ein Bestandteil einer realen Maschine.
|
||||
|
||||
=== Grundprinzipien
|
||||
|
||||
. Funktion vor Dekoration.
|
||||
. Jede Farbe besitzt eine semantische Bedeutung.
|
||||
. Scharfe Kanten statt organischer Formen.
|
||||
. Monospace-Typografie als Standard.
|
||||
. Technische Lesbarkeit hat Vorrang vor visuellen Effekten.
|
||||
. Informationen werden durch Farbe, Position und Kontrast vermittelt.
|
||||
. Animationen dienen der Zustandskommunikation und niemals ausschließlich der Verzierung.
|
||||
|
||||
== 2. Farbpalette
|
||||
|
||||
=== 2.1 Kernfarben
|
||||
|
||||
[cols="1,1,3",options="header"]
|
||||
|===
|
||||
|Name
|
||||
|Hex
|
||||
|Bedeutung
|
||||
|
||||
|Deep Void
|
||||
|`#05070a`
|
||||
|Globaler Hintergrund, tiefste Darstellungsebene
|
||||
|
||||
|Terminal Base
|
||||
|`#0b0e14`
|
||||
|Fenster, Container und Panel-Flächen
|
||||
|
||||
|Tech Cyan
|
||||
|`#00f2ff`
|
||||
|Interaktion, Fokus, aktive Systeme
|
||||
|
||||
|Harvest Green
|
||||
|`#00ff73`
|
||||
|Erfolg, Ressourcengewinn, Wiederherstellung
|
||||
|
||||
|Amber Gold
|
||||
|`#ffb700`
|
||||
|Warnungen, besondere Objekte, Missionsziele
|
||||
|
||||
|Critical Red
|
||||
|`#ff3e3e`
|
||||
|Kritische Zustände, Fehler, Gefahr
|
||||
|
||||
|Steel Grey
|
||||
|`#888899`
|
||||
|Sekundäre Informationen, deaktivierte Elemente
|
||||
|===
|
||||
|
||||
=== 2.2 Semantische Zustände
|
||||
|
||||
[cols="1,1",options="header"]
|
||||
|===
|
||||
|Zustand
|
||||
|Farbe
|
||||
|
||||
|Information
|
||||
|Tech Cyan
|
||||
|
||||
|Erfolg
|
||||
|Harvest Green
|
||||
|
||||
|Warnung
|
||||
|Amber Gold
|
||||
|
||||
|Kritisch
|
||||
|Critical Red
|
||||
|
||||
|Deaktiviert
|
||||
|Steel Grey
|
||||
|
||||
|Fokus
|
||||
|Tech Cyan + Glow
|
||||
|===
|
||||
|
||||
=== 2.3 Priorisierung
|
||||
|
||||
==== Primär
|
||||
|
||||
Interaktive Objekte:
|
||||
|
||||
* Buttons
|
||||
* Links
|
||||
* Menüs
|
||||
* Aktive Systeme
|
||||
|
||||
Verwenden:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Tech Cyan
|
||||
----
|
||||
|
||||
==== Sekundär
|
||||
|
||||
Nicht-interaktive Daten:
|
||||
|
||||
* Metadaten
|
||||
* Diagnostikwerte
|
||||
* Statistiken
|
||||
|
||||
Verwenden:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Steel Grey
|
||||
----
|
||||
|
||||
==== Kritisch
|
||||
|
||||
Fehler oder Gefahr:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Critical Red
|
||||
----
|
||||
|
||||
== 3. Typografie
|
||||
|
||||
=== 3.1 Schriftarten
|
||||
|
||||
Ausschließlich Monospace-Schriften.
|
||||
|
||||
Bevorzugte Reihenfolge:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
JetBrains Mono
|
||||
Fira Code
|
||||
Courier Prime
|
||||
monospace
|
||||
----
|
||||
|
||||
=== 3.2 Typografische Regeln
|
||||
|
||||
==== Beschriftungen
|
||||
|
||||
Verwendung von Kleinbuchstaben.
|
||||
|
||||
Beispiel:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
shield status
|
||||
resource storage
|
||||
diagnostics
|
||||
----
|
||||
|
||||
==== Statusmeldungen
|
||||
|
||||
Fett darstellen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
WARNING
|
||||
SHIELD FAILURE
|
||||
RECOVERY COMPLETE
|
||||
----
|
||||
|
||||
=== 3.3 Lesbarkeit
|
||||
|
||||
Grundregeln:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.02em;
|
||||
----
|
||||
|
||||
Text muss stets lesbar bleiben.
|
||||
|
||||
Dekorative Effekte dürfen niemals die Lesbarkeit reduzieren.
|
||||
|
||||
=== 3.4 Text-Glow
|
||||
|
||||
Optional:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
text-shadow:
|
||||
0 0 3px rgba(0,242,255,0.3);
|
||||
----
|
||||
|
||||
Maximal:
|
||||
|
||||
* 3px Blur
|
||||
* 30 % Deckkraft
|
||||
|
||||
== 4. Layout-System
|
||||
|
||||
=== 4.1 Raster
|
||||
|
||||
Empfohlenes Grundraster:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
8px System
|
||||
----
|
||||
|
||||
Abstände erfolgen in Vielfachen von:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
8
|
||||
16
|
||||
24
|
||||
32
|
||||
48
|
||||
64
|
||||
----
|
||||
|
||||
=== 4.2 Informationshierarchie
|
||||
|
||||
Von links nach rechts:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Systemstatus
|
||||
↓
|
||||
Navigation
|
||||
↓
|
||||
Primäre Inhalte
|
||||
↓
|
||||
Kontextinformationen
|
||||
----
|
||||
|
||||
=== 4.3 Bildaufteilung
|
||||
|
||||
Für Spiele:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Links:
|
||||
Systeme / HUD
|
||||
|
||||
Mitte:
|
||||
Gameplay
|
||||
|
||||
Rechts:
|
||||
Freier Sichtbereich
|
||||
----
|
||||
|
||||
== 5. HUD-Spezifikation
|
||||
|
||||
=== 5.1 Grundkonzept
|
||||
|
||||
HUD-Elemente wirken wie physische Bestandteile der Maschine.
|
||||
|
||||
Keine schwebenden Fantasy-Elemente.
|
||||
|
||||
Keine organischen Formen.
|
||||
|
||||
=== 5.2 Statusanzeigen
|
||||
|
||||
==== Schild
|
||||
|
||||
Farbübergang:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
>60%
|
||||
Tech Cyan
|
||||
|
||||
30%-60%
|
||||
Amber Gold
|
||||
|
||||
<30%
|
||||
Critical Red
|
||||
----
|
||||
|
||||
==== Ressourcen
|
||||
|
||||
Verwendung:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Harvest Green
|
||||
----
|
||||
|
||||
==== Systemfehler
|
||||
|
||||
Verwendung:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Critical Red
|
||||
----
|
||||
|
||||
== 6. Canvas-Effekte
|
||||
|
||||
=== 6.1 Scan-Lines
|
||||
|
||||
Zweck:
|
||||
|
||||
Simulation eines industriellen Monitors.
|
||||
|
||||
Empfohlene Farbe:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
rgba(255,255,255,0.03)
|
||||
----
|
||||
|
||||
Regeln:
|
||||
|
||||
* Über der Spielwelt
|
||||
* Unter der UI
|
||||
* Dürfen Lesbarkeit nicht beeinträchtigen
|
||||
|
||||
=== 6.2 Glitch-Effekte
|
||||
|
||||
Technische Störungen werden durch kurze Cyan-Artefakte dargestellt.
|
||||
|
||||
Regeln:
|
||||
|
||||
* Maximal 150 ms sichtbar
|
||||
* Nur ereignisgesteuert
|
||||
* Keine permanente Darstellung
|
||||
|
||||
Mögliche Auslöser:
|
||||
|
||||
* Schildausfall
|
||||
* Respawn
|
||||
* Energieumschaltung
|
||||
* Speichertransfer
|
||||
* Diagnostikfehler
|
||||
|
||||
=== 6.3 Bildschirmrauschen
|
||||
|
||||
Optional:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
opacity: 0.02 - 0.04
|
||||
----
|
||||
|
||||
Niemals dominant.
|
||||
|
||||
== 7. Rahmen-System
|
||||
|
||||
=== 7.1 Grundregel
|
||||
|
||||
Vermeide klassische Betriebssystem-Fenster.
|
||||
|
||||
Stattdessen:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
┌─────────
|
||||
|
||||
└─────────
|
||||
----
|
||||
|
||||
oder Corner-Brackets.
|
||||
|
||||
=== 7.2 Rundungen
|
||||
|
||||
Nicht vorgesehen.
|
||||
|
||||
Maximal:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
border-radius: 2px;
|
||||
----
|
||||
|
||||
=== 7.3 Linien
|
||||
|
||||
Immer:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
1px
|
||||
----
|
||||
|
||||
Farbe:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Steel Grey
|
||||
----
|
||||
|
||||
Aktiv:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
Tech Cyan
|
||||
----
|
||||
|
||||
== 8. Buttons
|
||||
|
||||
=== Normal
|
||||
|
||||
[source,css]
|
||||
----
|
||||
background: transparent;
|
||||
color: #888899;
|
||||
border: 1px solid #888899;
|
||||
----
|
||||
|
||||
=== Hover
|
||||
|
||||
[source,css]
|
||||
----
|
||||
color: #00f2ff;
|
||||
border-color: #00f2ff;
|
||||
|
||||
box-shadow:
|
||||
0 0 8px #00f2ff;
|
||||
----
|
||||
|
||||
=== Aktiv
|
||||
|
||||
[source,css]
|
||||
----
|
||||
background: #00f2ff;
|
||||
color: #05070a;
|
||||
----
|
||||
|
||||
=== Disabled
|
||||
|
||||
[source,css]
|
||||
----
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
----
|
||||
|
||||
== 9. Panels und Container
|
||||
|
||||
=== Standard
|
||||
|
||||
[source,css]
|
||||
----
|
||||
background: #0b0e14;
|
||||
border: 1px solid #888899;
|
||||
|
||||
backdrop-filter: blur(4px);
|
||||
----
|
||||
|
||||
=== Overlays
|
||||
|
||||
Dürfen Schatten besitzen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
box-shadow:
|
||||
8px 8px 0 rgba(0,0,0,0.8);
|
||||
----
|
||||
|
||||
=== Schatten-Regel
|
||||
|
||||
Verboten:
|
||||
|
||||
* Weiche Material-Schatten
|
||||
* Neumorphe Effekte
|
||||
* Mobile-App-Schatten
|
||||
|
||||
Erlaubt:
|
||||
|
||||
* Harte technische Schatten
|
||||
|
||||
== 10. Icon-System
|
||||
|
||||
=== Stil
|
||||
|
||||
Alle Icons müssen:
|
||||
|
||||
* SVG-basiert sein
|
||||
* Geometrisch wirken
|
||||
* Scharfe Kanten besitzen
|
||||
|
||||
=== Unzulässig
|
||||
|
||||
* Airbrush
|
||||
* Illustrationen
|
||||
* Farbverläufe
|
||||
* Cartoon-Stil
|
||||
|
||||
=== Zulässig
|
||||
|
||||
* Technische Symbole
|
||||
* Schaltpläne
|
||||
* Maschinen-Piktogramme
|
||||
|
||||
== 11. Asset-Pipeline
|
||||
|
||||
=== Flächen
|
||||
|
||||
Nur Vollfarben.
|
||||
|
||||
=== Nicht erlaubt
|
||||
|
||||
* Farbverläufe
|
||||
* Weiche Lichtflächen
|
||||
* Fototexturen im UI
|
||||
|
||||
=== Ausnahmen
|
||||
|
||||
Folgende Effekte dürfen Verläufe enthalten:
|
||||
|
||||
* Glow
|
||||
* Bloom
|
||||
* Partikel
|
||||
* Plasma
|
||||
* Energieeffekte
|
||||
|
||||
== 12. Lichtsystem
|
||||
|
||||
=== Ziel
|
||||
|
||||
Licht soll technisch wirken.
|
||||
|
||||
Nicht magisch.
|
||||
|
||||
Nicht organisch.
|
||||
|
||||
Nicht dekorativ.
|
||||
|
||||
=== Glow-Regeln
|
||||
|
||||
Empfohlen:
|
||||
|
||||
[source,css]
|
||||
----
|
||||
box-shadow:
|
||||
0 0 6px currentColor;
|
||||
----
|
||||
|
||||
Eigenschaften:
|
||||
|
||||
* Kurzer Radius
|
||||
* Hoher Kontrast
|
||||
* Klar abgegrenzte Lichtquellen
|
||||
|
||||
== 13. Animationen
|
||||
|
||||
=== Erlaubt
|
||||
|
||||
* Blinken
|
||||
* Pulsieren
|
||||
* Statuswechsel
|
||||
* Diagnostik-Animationen
|
||||
* Ladeanzeigen
|
||||
|
||||
=== Nicht erlaubt
|
||||
|
||||
* Verspielte Übergänge
|
||||
* Elastische Animationen
|
||||
* Übertriebene Bewegungen
|
||||
|
||||
=== Animationsdauer
|
||||
|
||||
Empfohlen:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
100ms - 300ms
|
||||
----
|
||||
|
||||
HUD-Reaktionen:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
50ms - 150ms
|
||||
----
|
||||
|
||||
== 14. Referenz-CSS
|
||||
|
||||
[source,css]
|
||||
----
|
||||
:root {
|
||||
--bg-deep: #05070a;
|
||||
--bg-panel: #0b0e14;
|
||||
|
||||
--accent-cyan: #00f2ff;
|
||||
--accent-green: #00ff73;
|
||||
--accent-amber: #ffb700;
|
||||
--accent-red: #ff3e3e;
|
||||
|
||||
--text-dim: #888899;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-deep);
|
||||
color: var(--text-dim);
|
||||
|
||||
font-family:
|
||||
"JetBrains Mono",
|
||||
"Fira Code",
|
||||
"Courier Prime",
|
||||
monospace;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--text-dim);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--accent-cyan);
|
||||
border-color: var(--accent-cyan);
|
||||
|
||||
box-shadow:
|
||||
0 0 8px var(--accent-cyan);
|
||||
}
|
||||
----
|
||||
|
||||
== Design-Leitsatz
|
||||
|
||||
*Maschinen-Instanzen ist kein futuristisches Betriebssystem.*
|
||||
|
||||
Es ist die Benutzeroberfläche einer gewaltigen industriellen Maschine, die zufällig von Menschen bedient wird.
|
||||
|
||||
Jedes Element soll vermitteln, dass unter der Oberfläche reale Energieflüsse, Diagnosesysteme, Speicherabbilder, Förderanlagen und Maschinenprozesse arbeiten.
|
||||
|
||||
Dekoration ist optional.
|
||||
|
||||
*Funktion ist Pflicht.*
|
||||
@@ -1,648 +0,0 @@
|
||||
# Design-System: Maschinen-Instanzen
|
||||
### Project X Tribut • Universelles UI-, HUD- und Grafiksystem
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Zielplattformen:** Web, HTML5 Canvas, Browser-Games, Diagnose-Terminals, Tools, Dashboards
|
||||
**Designsprache:** Hard-Sci-Fi · Industrial Computing · Retro-Terminal · Maschinenästhetik
|
||||
|
||||
---
|
||||
|
||||
# 1. Designphilosophie
|
||||
|
||||
Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums.
|
||||
|
||||
Die Gestaltung orientiert sich an industriellen Steuerungssystemen, wissenschaftlichen Diagnoseterminals und kybernetischen Maschinenkomplexen. Sämtliche Farben, Formen und Effekte besitzen eine funktionale Bedeutung.
|
||||
|
||||
Die Benutzeroberfläche soll nicht dekorativ wirken, sondern wie ein Bestandteil einer realen Maschine.
|
||||
|
||||
## Grundprinzipien
|
||||
|
||||
1. Funktion vor Dekoration.
|
||||
2. Jede Farbe besitzt eine semantische Bedeutung.
|
||||
3. Scharfe Kanten statt organischer Formen.
|
||||
4. Monospace-Typografie als Standard.
|
||||
5. Technische Lesbarkeit hat Vorrang vor visuellen Effekten.
|
||||
6. Informationen werden durch Farbe, Position und Kontrast vermittelt.
|
||||
7. Animationen dienen der Zustandskommunikation und niemals ausschließlich der Verzierung.
|
||||
|
||||
---
|
||||
|
||||
# 2. Farbpalette
|
||||
|
||||
## 2.1 Kernfarben
|
||||
|
||||
| Name | Hex | Bedeutung |
|
||||
|--------|--------|--------|
|
||||
| Deep Void | `#05070a` | Globaler Hintergrund, tiefste Darstellungsebene |
|
||||
| Terminal Base | `#0b0e14` | Fenster, Container und Panel-Flächen |
|
||||
| Tech Cyan | `#00f2ff` | Interaktion, Fokus, aktive Systeme |
|
||||
| Harvest Green | `#00ff73` | Erfolg, Ressourcengewinn, Wiederherstellung |
|
||||
| Amber Gold | `#ffb700` | Warnungen, besondere Objekte, Missionsziele |
|
||||
| Critical Red | `#ff3e3e` | Kritische Zustände, Fehler, Gefahr |
|
||||
| Steel Grey | `#888899` | Sekundäre Informationen, deaktivierte Elemente |
|
||||
|
||||
---
|
||||
|
||||
## 2.2 Semantische Zustände
|
||||
|
||||
| Zustand | Farbe |
|
||||
|----------|----------|
|
||||
| Information | Tech Cyan |
|
||||
| Erfolg | Harvest Green |
|
||||
| Warnung | Amber Gold |
|
||||
| Kritisch | Critical Red |
|
||||
| Deaktiviert | Steel Grey |
|
||||
| Fokus | Tech Cyan + Glow |
|
||||
|
||||
---
|
||||
|
||||
## 2.3 Priorisierung
|
||||
|
||||
### Primär
|
||||
|
||||
Interaktive Objekte:
|
||||
|
||||
- Buttons
|
||||
- Links
|
||||
- Menüs
|
||||
- Aktive Systeme
|
||||
|
||||
Verwenden:
|
||||
|
||||
```text
|
||||
Tech Cyan
|
||||
```
|
||||
|
||||
### Sekundär
|
||||
|
||||
Nicht-interaktive Daten:
|
||||
|
||||
- Metadaten
|
||||
- Diagnostikwerte
|
||||
- Statistiken
|
||||
|
||||
Verwenden:
|
||||
|
||||
```text
|
||||
Steel Grey
|
||||
```
|
||||
|
||||
### Kritisch
|
||||
|
||||
Fehler oder Gefahr:
|
||||
|
||||
```text
|
||||
Critical Red
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 3. Typografie
|
||||
|
||||
## 3.1 Schriftarten
|
||||
|
||||
Ausschließlich Monospace-Schriften.
|
||||
|
||||
Bevorzugte Reihenfolge:
|
||||
|
||||
```text
|
||||
JetBrains Mono
|
||||
Fira Code
|
||||
Courier Prime
|
||||
monospace
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3.2 Typografische Regeln
|
||||
|
||||
### Beschriftungen
|
||||
|
||||
Verwendung von Kleinbuchstaben.
|
||||
|
||||
Beispiel:
|
||||
|
||||
```text
|
||||
shield status
|
||||
resource storage
|
||||
diagnostics
|
||||
```
|
||||
|
||||
### Statusmeldungen
|
||||
|
||||
Fett darstellen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
```text
|
||||
WARNING
|
||||
SHIELD FAILURE
|
||||
RECOVERY COMPLETE
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3.3 Lesbarkeit
|
||||
|
||||
Grundregeln:
|
||||
|
||||
```css
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.02em;
|
||||
```
|
||||
|
||||
Text muss stets lesbar bleiben.
|
||||
|
||||
Dekorative Effekte dürfen niemals die Lesbarkeit reduzieren.
|
||||
|
||||
---
|
||||
|
||||
## 3.4 Text-Glow
|
||||
|
||||
Optional:
|
||||
|
||||
```css
|
||||
text-shadow:
|
||||
0 0 3px rgba(0,242,255,0.3);
|
||||
```
|
||||
|
||||
Maximal:
|
||||
|
||||
- 3px Blur
|
||||
- 30% Deckkraft
|
||||
|
||||
---
|
||||
|
||||
# 4. Layout-System
|
||||
|
||||
## 4.1 Raster
|
||||
|
||||
Empfohlenes Grundraster:
|
||||
|
||||
```text
|
||||
8px System
|
||||
```
|
||||
|
||||
Abstände erfolgen in Vielfachen von:
|
||||
|
||||
```text
|
||||
8
|
||||
16
|
||||
24
|
||||
32
|
||||
48
|
||||
64
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4.2 Informationshierarchie
|
||||
|
||||
Von links nach rechts:
|
||||
|
||||
```text
|
||||
Systemstatus
|
||||
↓
|
||||
Navigation
|
||||
↓
|
||||
Primäre Inhalte
|
||||
↓
|
||||
Kontextinformationen
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4.3 Bildaufteilung
|
||||
|
||||
Für Spiele:
|
||||
|
||||
```text
|
||||
Links:
|
||||
Systeme / HUD
|
||||
|
||||
Mitte:
|
||||
Gameplay
|
||||
|
||||
Rechts:
|
||||
Freier Sichtbereich
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 5. HUD-Spezifikation
|
||||
|
||||
## 5.1 Grundkonzept
|
||||
|
||||
HUD-Elemente wirken wie physische Bestandteile der Maschine.
|
||||
|
||||
Keine schwebenden Fantasy-Elemente.
|
||||
|
||||
Keine organischen Formen.
|
||||
|
||||
---
|
||||
|
||||
## 5.2 Statusanzeigen
|
||||
|
||||
### Schild
|
||||
|
||||
Farbübergang:
|
||||
|
||||
```text
|
||||
>60%
|
||||
Tech Cyan
|
||||
|
||||
30%-60%
|
||||
Amber Gold
|
||||
|
||||
<30%
|
||||
Critical Red
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Ressourcen
|
||||
|
||||
Verwendung:
|
||||
|
||||
```text
|
||||
Harvest Green
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Systemfehler
|
||||
|
||||
Verwendung:
|
||||
|
||||
```text
|
||||
Critical Red
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 6. Canvas-Effekte
|
||||
|
||||
## 6.1 Scan-Lines
|
||||
|
||||
Zweck:
|
||||
|
||||
Simulation eines industriellen Monitors.
|
||||
|
||||
Empfohlene Farbe:
|
||||
|
||||
```css
|
||||
rgba(255,255,255,0.03)
|
||||
```
|
||||
|
||||
Regeln:
|
||||
|
||||
- Über der Spielwelt
|
||||
- Unter der UI
|
||||
- Dürfen Lesbarkeit nicht beeinträchtigen
|
||||
|
||||
---
|
||||
|
||||
## 6.2 Glitch-Effekte
|
||||
|
||||
Technische Störungen werden durch kurze Cyan-Artefakte dargestellt.
|
||||
|
||||
Regeln:
|
||||
|
||||
- Maximal 150 ms sichtbar
|
||||
- Nur ereignisgesteuert
|
||||
- Keine permanente Darstellung
|
||||
|
||||
Mögliche Auslöser:
|
||||
|
||||
- Schildausfall
|
||||
- Respawn
|
||||
- Energieumschaltung
|
||||
- Speichertransfer
|
||||
- Diagnostikfehler
|
||||
|
||||
---
|
||||
|
||||
## 6.3 Bildschirmrauschen
|
||||
|
||||
Optional:
|
||||
|
||||
```css
|
||||
opacity: 0.02 - 0.04
|
||||
```
|
||||
|
||||
Niemals dominant.
|
||||
|
||||
---
|
||||
|
||||
# 7. Rahmen-System
|
||||
|
||||
## 7.1 Grundregel
|
||||
|
||||
Vermeide klassische Betriebssystem-Fenster.
|
||||
|
||||
Stattdessen:
|
||||
|
||||
```text
|
||||
┌─────────
|
||||
|
||||
└─────────
|
||||
```
|
||||
|
||||
bzw. Corner-Brackets.
|
||||
|
||||
---
|
||||
|
||||
## 7.2 Rundungen
|
||||
|
||||
Nicht vorgesehen.
|
||||
|
||||
Maximal:
|
||||
|
||||
```css
|
||||
border-radius: 2px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7.3 Linien
|
||||
|
||||
Immer:
|
||||
|
||||
```css
|
||||
1px
|
||||
```
|
||||
|
||||
Farbe:
|
||||
|
||||
```text
|
||||
Steel Grey
|
||||
```
|
||||
|
||||
Aktiv:
|
||||
|
||||
```text
|
||||
Tech Cyan
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 8. Buttons
|
||||
|
||||
## Normal
|
||||
|
||||
```css
|
||||
background: transparent;
|
||||
color: #888899;
|
||||
border: 1px solid #888899;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Hover
|
||||
|
||||
```css
|
||||
color: #00f2ff;
|
||||
border-color: #00f2ff;
|
||||
|
||||
box-shadow:
|
||||
0 0 8px #00f2ff;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Aktiv
|
||||
|
||||
```css
|
||||
background: #00f2ff;
|
||||
color: #05070a;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Disabled
|
||||
|
||||
```css
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 9. Panels und Container
|
||||
|
||||
## Standard
|
||||
|
||||
```css
|
||||
background: #0b0e14;
|
||||
border: 1px solid #888899;
|
||||
|
||||
backdrop-filter: blur(4px);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Overlays
|
||||
|
||||
Dürfen Schatten besitzen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
```css
|
||||
box-shadow:
|
||||
8px 8px 0 rgba(0,0,0,0.8);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schatten-Regel
|
||||
|
||||
Verboten:
|
||||
|
||||
- weiche Material-Schatten
|
||||
- neumorphe Effekte
|
||||
- mobile App Shadows
|
||||
|
||||
Erlaubt:
|
||||
|
||||
- harte technische Schatten
|
||||
|
||||
---
|
||||
|
||||
# 10. Icon-System
|
||||
|
||||
## Stil
|
||||
|
||||
Alle Icons müssen:
|
||||
|
||||
- SVG-basiert sein
|
||||
- geometrisch wirken
|
||||
- scharfe Kanten besitzen
|
||||
|
||||
---
|
||||
|
||||
## Unzulässig
|
||||
|
||||
- Airbrush
|
||||
- Illustrationen
|
||||
- Farbverläufe
|
||||
- Cartoon-Stil
|
||||
|
||||
---
|
||||
|
||||
## Zulässig
|
||||
|
||||
- technische Symbole
|
||||
- Schaltpläne
|
||||
- Maschinen-Piktogramme
|
||||
|
||||
---
|
||||
|
||||
# 11. Asset-Pipeline
|
||||
|
||||
## Flächen
|
||||
|
||||
Nur Vollfarben.
|
||||
|
||||
---
|
||||
|
||||
## Nicht erlaubt
|
||||
|
||||
- Farbverläufe
|
||||
- weiche Lichtflächen
|
||||
- Fototexturen im UI
|
||||
|
||||
---
|
||||
|
||||
## Ausnahmen
|
||||
|
||||
Folgende Effekte dürfen Verläufe enthalten:
|
||||
|
||||
- Glow
|
||||
- Bloom
|
||||
- Partikel
|
||||
- Plasma
|
||||
- Energieeffekte
|
||||
|
||||
---
|
||||
|
||||
# 12. Lichtsystem
|
||||
|
||||
## Ziel
|
||||
|
||||
Licht soll technisch wirken.
|
||||
|
||||
Nicht magisch.
|
||||
|
||||
Nicht organisch.
|
||||
|
||||
Nicht dekorativ.
|
||||
|
||||
---
|
||||
|
||||
## Glow-Regeln
|
||||
|
||||
Empfohlen:
|
||||
|
||||
```css
|
||||
box-shadow:
|
||||
0 0 6px currentColor;
|
||||
```
|
||||
|
||||
Eigenschaften:
|
||||
|
||||
- kurzer Radius
|
||||
- hoher Kontrast
|
||||
- klar abgegrenzte Lichtquellen
|
||||
|
||||
---
|
||||
|
||||
# 13. Animationen
|
||||
|
||||
## Erlaubt
|
||||
|
||||
- Blinken
|
||||
- Pulsieren
|
||||
- Statuswechsel
|
||||
- Diagnostik-Animationen
|
||||
- Ladeanzeigen
|
||||
|
||||
---
|
||||
|
||||
## Nicht erlaubt
|
||||
|
||||
- verspielte Übergänge
|
||||
- elastische Animationen
|
||||
- übertriebene Bewegungen
|
||||
|
||||
---
|
||||
|
||||
## Animationsdauer
|
||||
|
||||
Empfohlen:
|
||||
|
||||
```text
|
||||
100ms - 300ms
|
||||
```
|
||||
|
||||
HUD-Reaktionen:
|
||||
|
||||
```text
|
||||
50ms - 150ms
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 14. Referenz-CSS
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-deep: #05070a;
|
||||
--bg-panel: #0b0e14;
|
||||
|
||||
--accent-cyan: #00f2ff;
|
||||
--accent-green: #00ff73;
|
||||
--accent-amber: #ffb700;
|
||||
--accent-red: #ff3e3e;
|
||||
|
||||
--text-dim: #888899;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-deep);
|
||||
color: var(--text-dim);
|
||||
|
||||
font-family:
|
||||
"JetBrains Mono",
|
||||
"Fira Code",
|
||||
"Courier Prime",
|
||||
monospace;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--text-dim);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--accent-cyan);
|
||||
border-color: var(--accent-cyan);
|
||||
|
||||
box-shadow:
|
||||
0 0 8px var(--accent-cyan);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Design-Leitsatz
|
||||
|
||||
**Maschinen-Instanzen ist kein futuristisches Betriebssystem.**
|
||||
|
||||
Es ist die Benutzeroberfläche einer gewaltigen industriellen Maschine, die zufällig von Menschen bedient wird.
|
||||
|
||||
Jedes Element soll vermitteln, dass unter der Oberfläche reale Energieflüsse, Diagnosesysteme, Speicherabbilder, Förderanlagen und Maschinenprozesse arbeiten.
|
||||
|
||||
Dekoration ist optional.
|
||||
|
||||
Funktion ist Pflicht.
|
||||
@@ -1,259 +0,0 @@
|
||||
= REVERSE GAME DESIGN DOCUMENT (GDD)
|
||||
:toc: left
|
||||
:toclevels: 3
|
||||
|
||||
Projekt: Maschinen-Instanzen – Asteroiden-Sektor (Project X Tribut)
|
||||
|
||||
*Version:* 1.0.0 +
|
||||
*Genre:* Hard-Sci-Fi / Retro-Shmup (2.5D) +
|
||||
*Setting:* Das „Computer Historyz“-Universum (Sektor: Oortsche Wolke 42)
|
||||
|
||||
== 1. Vision & Kernkonzept
|
||||
|
||||
Ein endloses, horizontales Shoot-'em-up in 2D, das innerhalb einer echten 3D-Umgebung gerendert wird.
|
||||
|
||||
Der Spieler steuert eine kybernetische Ernte-Instanz (Bergbau-Schiff), die am Rand eines gigantischen, planetengroßen Maschinen-Ansaugstutzens operiert.
|
||||
|
||||
Das Spiel kombiniert rasante Arcade-Asteroiden-Zerstörung mit taktischem Power-Routing (Energie-Management) unter harten Hard-Sci-Fi-Rahmenbedingungen.
|
||||
|
||||
== 2. Globale Farbpalette & Ästhetik
|
||||
|
||||
Diese Farbpalette definiert das visuelle Leitbild für alle zukünftigen Spiele in diesem Universum, unabhängig davon, ob sie als Pixel-Art-, Vektor- oder PBR-basierte 3D-Titel umgesetzt werden.
|
||||
|
||||
=== 2.1 UI-, HUD- und Terminal-Farben (Window-Maker-Stil)
|
||||
|
||||
Die Benutzeroberfläche basiert auf dem kalten, funktionalen Look klassischer Unix-Terminals, kombiniert mit modernen Glow-Effekten.
|
||||
|
||||
[cols="1,1,3",options="header"]
|
||||
|===
|
||||
|Farbe
|
||||
|Hex-Code
|
||||
|Semantischer Nutzen
|
||||
|
||||
|Deep Void
|
||||
|`#05070a`
|
||||
|Globaler Weltraum-Hintergrund, tiefste Schatten.
|
||||
|
||||
|Terminal Base
|
||||
|`#0d1117`
|
||||
|Hintergrund für Menüs, HUD-Panels und Dialogfenster.
|
||||
|
||||
|Panel Border
|
||||
|`#444c56`
|
||||
|Rahmen von UI-Fenstern, häufig kombiniert mit inneren Highlights für 3D-Bevel-Effekte.
|
||||
|
||||
|Tech Cyan
|
||||
|`#58a6ff`
|
||||
|Primäre Akzentfarbe. Standard-Text, normale Laser, Hologramme, aktiver Schild (HP > 60 %) und UI-Glow.
|
||||
|
||||
|Harvest Green
|
||||
|`#39d353`
|
||||
|Erfolgs-Feedback, gesammelte Ressourcen und Laser-Stufe 2.
|
||||
|
||||
|Amber Gold
|
||||
|`#d29922`
|
||||
|Warnungen, Highscores, wertvolle Materialien, Schild (HP < 60 %) und Laser-Stufe 3.
|
||||
|
||||
|Critical Red
|
||||
|`#f85149`
|
||||
|Lebensgefahr, kritischer Schild (HP < 30 %), Triebwerks-Exhaust und Laser-Stufe 4+.
|
||||
|===
|
||||
|
||||
=== 2.2 Materialfarben (3D-Modelle und 2D-Sprites)
|
||||
|
||||
Für gerenderte 3D-Objekte und gezeichnete 2D-Sprites gelten folgende Materialdefinitionen:
|
||||
|
||||
[cols="1,1,2,2",options="header"]
|
||||
|===
|
||||
|Element
|
||||
|Farbe
|
||||
|3D-Eigenschaften (PBR)
|
||||
|2D-Eigenschaften
|
||||
|
||||
|Maschinen-Hülle
|
||||
|`#1f6feb` (Blau-Metallic)
|
||||
|Roughness: 0.4, Metalness: 0.8
|
||||
|Satte dunkle Blautöne mit hartem weißen Specular-Highlight.
|
||||
|
||||
|Triebwerke / Rohre
|
||||
|`#21262d` (Dunkelgrau)
|
||||
|Roughness: 0.9, Metalness: 1.0
|
||||
|Nahezu schwarze Flächen mit hohem Kontrast.
|
||||
|
||||
|Eis-Asteroid
|
||||
|`#d0e8ff` (Blass-Eisblau)
|
||||
|Roughness: 0.9, Metalness: 0.1
|
||||
|Helle Töne, geringe Schattenbildung, weiße Staubpartikel.
|
||||
|
||||
|Fels-Asteroid
|
||||
|`#6b4a31` (Braun)
|
||||
|Roughness: 1.0, Metalness: 0.1
|
||||
|Matte, strukturierte und körnige Oberflächen.
|
||||
|
||||
|Eisen-Asteroid
|
||||
|`#888899` (Grau/Silber)
|
||||
|Roughness: 0.3, Metalness: 0.9
|
||||
|Spiegelnde Oberflächen mit deutlich sichtbaren Glanzlichtern.
|
||||
|===
|
||||
|
||||
== 3. Gameplay & Mechaniken
|
||||
|
||||
=== 3.1 Das Plasma-Blasen-Paradoxon (Movement)
|
||||
|
||||
. *Lore-Hintergrund:*
|
||||
Das Schiff erzeugt ein Magnetfeld zum Sammeln von Weltraumstaub. Dadurch entsteht eine künstliche Atmosphäre im Vakuum.
|
||||
|
||||
. *Mechanik:*
|
||||
Das Schiff wird aerodynamisch gesteuert. Es fliegt nicht auf festen Schienen, sondern neigt sich beim Steigen und Sinken entlang einer simulierten Roll-/Yaw-Bewegung.
|
||||
|
||||
. *Feedback:*
|
||||
Die Plasma-Blase pulsiert visuell. Mit steigender Schildenergie wächst ihre Größe von 0.6× bis 1.5× der Schiffsausdehnung.
|
||||
|
||||
=== 3.2 Taktisches Power-Routing (Energie-Management)
|
||||
|
||||
Die zentrale Hard-Sci-Fi-Mechanik basiert auf zwei Ressourcen:
|
||||
|
||||
* *Schild (Defensive)*
|
||||
* *Laser / Score (Offensive)*
|
||||
|
||||
Der Spieler kann Energie in Echtzeit zwischen beiden Systemen umverteilen.
|
||||
|
||||
. *Schild laden (Defensive):*
|
||||
Der Spieler opfert Score beziehungsweise Laserstufen, um den Schild wiederherzustellen.
|
||||
|
||||
. *Laser pushen (Offensive):*
|
||||
Energie wird dem Schild entzogen und in die Waffensysteme umgeleitet.
|
||||
|
||||
. *Visuelle Regel:*
|
||||
Dieses Risiko-Belohnungs-System muss in jeder Umsetzung über die Farbskala von `Tech Cyan` bis `Critical Red` dargestellt werden.
|
||||
|
||||
=== 3.3 Asteroiden-Split-Physik & Materialklassen
|
||||
|
||||
Gegnerische Asteroiden teilen sich beim Zerstören in zwei kleinere und schnellere Fragmente.
|
||||
|
||||
. *Eis (Level 1-2):*
|
||||
1× Basis-HP. Schnell, aber äußerst fragil.
|
||||
|
||||
. *Gestein (Level 2-4):*
|
||||
2× Basis-HP. Standardgegner.
|
||||
|
||||
. *Eisen (Level 3-5):*
|
||||
4× Basis-HP. Massive Brocken mit dreifachem Scorewert. Schwache Laser werden vollständig blockiert.
|
||||
|
||||
=== 3.4 Das Cylon-Recovery-System (Game Over / Respawn)
|
||||
|
||||
. *Mechanik:*
|
||||
Es existiert kein endgültiger Tod. Beim Verlust der Hülle wird das Speicherabbild gesichert.
|
||||
|
||||
. *Ablauf:*
|
||||
Das Spiel pausiert.
|
||||
|
||||
Ein Diagnostik-Terminal meldet:
|
||||
|
||||
[source,text]
|
||||
----
|
||||
DIAGNOSTICS
|
||||
Hull Destroyed
|
||||
----
|
||||
|
||||
Ein roter Fortschrittsbalken füllt sich, während das Bewusstsein in eine neue Instanz übertragen wird.
|
||||
|
||||
Der Spieler behält Laser-Level und Langzeitfortschritt, verliert jedoch Zeit sowie laufende Multiplikatoren.
|
||||
|
||||
== 4. Räumliche Komposition (Kamera & Level-Architektur)
|
||||
|
||||
=== 4.1 Der C-Rahmen (Die Maschine)
|
||||
|
||||
. *Konzept:*
|
||||
Der Spieler operiert nicht im leeren Raum. Die linke Bildschirmseite wird von der gewaltigen Hauptmaschine eingenommen.
|
||||
|
||||
. *Layout:*
|
||||
Das Mahlwerk erscheint als massive Struktur im oberen und unteren linken Bildbereich.
|
||||
|
||||
* 3D: Box-Geometry
|
||||
* 2D: Parallax-Layer
|
||||
|
||||
. *Der Korridor:*
|
||||
Die mittlere Zone der linken Bildschirmhälfte bleibt frei und garantiert Sicht auf das Spielgeschehen.
|
||||
|
||||
. *Reaktivität:*
|
||||
Trümmerfragmente werden nach links in den Schlund der Maschine gesaugt.
|
||||
|
||||
Mit zunehmender Materialzufuhr:
|
||||
|
||||
* Rotieren die Häcksler schneller.
|
||||
* Verstärkt sich der Plasma-Halo.
|
||||
* Steigt die visuelle Aktivität der Anlage.
|
||||
|
||||
=== 4.2 UI-Platzierung (HUD)
|
||||
|
||||
Das HUD integriert sich in den physischen C-Rahmen der Maschine.
|
||||
|
||||
. *Oben links:*
|
||||
Schiff-Diagnostik (Schild, Laser, Statuswerte).
|
||||
|
||||
. *Unten links:*
|
||||
Ressourcenanzeige (Punkte, Highscore, Materialzähler).
|
||||
|
||||
. *Ziel:*
|
||||
Die rechte und zentrale Bildhälfte bleiben vollständig für das eigentliche Spielgeschehen reserviert.
|
||||
|
||||
== 5. Technische Struktur (Code-Architektur)
|
||||
|
||||
Für Programmierer definiert die Konfiguration `GAME_CONFIG` die zentrale Wahrheitsquelle.
|
||||
|
||||
Magic Numbers im Quellcode sind nicht zulässig.
|
||||
|
||||
Jede Umsetzung des Spiels muss mindestens folgende Strukturobjekte enthalten:
|
||||
|
||||
. `world`
|
||||
+
|
||||
Konstanten für Scrollgeschwindigkeit, Zeitskalierung und globale Simulation.
|
||||
|
||||
. `player`
|
||||
+
|
||||
Geschwindigkeit, Kollisionsradius und Basiswerte des Spielerschiffs.
|
||||
|
||||
. `laser`
|
||||
+
|
||||
Feuerrate, Schaden und Upgrade-Grenzen (Level 1-5).
|
||||
|
||||
. `asteroidTypes`
|
||||
+
|
||||
Dictionary zur Zuordnung von:
|
||||
|
||||
* Eis
|
||||
* Gestein
|
||||
* Eisen
|
||||
|
||||
mit:
|
||||
|
||||
* HP-Multiplikatoren
|
||||
* Asset-Pfaden
|
||||
* Sprite-Dateien (`.png`)
|
||||
* 3D-Modellen (`.glb`)
|
||||
|
||||
. `levelWaves`
|
||||
+
|
||||
Wahrscheinlichkeitsmatrix zur Definition der Spawn-Verteilung von Asteroidentypen innerhalb der Progression.
|
||||
|
||||
|
||||
=== Zusammenfassung des erstellten Spiels
|
||||
|
||||
. *Achsengerechtes Gameplay (Horizontal Scroll Shmup):*
|
||||
Du navigierst dein Schiff auf der linken Seite des Bildschirms, während Asteroiden aus dem scheinbar unendlichen interstellaren Vakuum auf dich zurasen.
|
||||
|
||||
. *Kombiniertes 3D im Browser:*
|
||||
Sämtliche Raumschiffkomponenten (Düse, Triebwerke, Flügel) sowie die unregelmäßig geformten Asteroiden werden dynamisch per Code in einer 3D-Umgebung erzeugt, gerendert und manipuliert.
|
||||
|
||||
. *Plasma-Blasen-Physik:*
|
||||
Um das Schiff pulsiert ein transparentes Energiefeld, das den in der Lore beschriebenen Strömungswiderstand simuliert und die besondere Flugcharakteristik der Ernte-Instanzen nachvollziehbar macht.
|
||||
|
||||
. *Asteroids-Split-Mechanik:*
|
||||
Große Asteroiden zerbrechen bei Beschuss kinetisch korrekt in zwei kleinere und schnellere Fragmente. Diese müssen wiederum zerstört werden, um wertvolle Rohstoffe zu bergen.
|
||||
|
||||
. *Cylonen-Reboot-System:*
|
||||
Wird die Schiffshülle zerstört, erscheint ein retro-futuristisches Cylon-Interface mit Diagnose- und Transpositionsmeldungen. Anschließend wird das unsterbliche Speicherabbild in ein neues Chassis übertragen.
|
||||
|
||||
. *Web-Audio-Synthesizer:*
|
||||
Sämtliche Soundeffekte werden in Echtzeit synthetisiert. Dazu gehören Laser-Frequenzrampen, tieffrequente Asteroidenexplosionen sowie das charakteristische Aufheulen des Reboot-Vorgangs.
|
||||
@@ -1,103 +0,0 @@
|
||||
# REVERSE GAME DESIGN DOCUMENT (GDD)
|
||||
|
||||
**Projekt:** Maschinen-Instanzen – Asteroiden-Sektor (Project X Tribut)
|
||||
|
||||
**Version:** 1.0.0
|
||||
**Genre:** Hard-Sci-Fi / Retro-Shmup (2.5D)
|
||||
**Setting:** Das „Computer Historyz“-Universum (Sektor: Oortsche Wolke 42)
|
||||
|
||||
## 1. Vision & Kernkonzept
|
||||
|
||||
Ein endloses, horizontales Shoot-'em-up in 2D, das innerhalb einer echten 3D-Umgebung gerendert wird.
|
||||
|
||||
Der Spieler steuert eine kybernetische Ernte-Instanz (Bergbau-Schiff), die am Rand eines gigantischen, planetengroßen Maschinen-Ansaugstutzens operiert.
|
||||
|
||||
Das Spiel kombiniert rasante Arcade-Asteroiden-Zerstörung mit taktischem Power-Routing (Energie-Management) unter harten Hard-Sci-Fi-Rahmenbedingungen.
|
||||
|
||||
## 2. Globale Farbpalette & Ästhetik
|
||||
|
||||
Diese Farbpalette definiert das visuelle Leitbild für alle zukünftigen Spiele in diesem Universum, unabhängig davon, ob sie als Pixel-Art-, Vektor- oder PBR-basierte 3D-Titel umgesetzt werden.
|
||||
|
||||
### 2.1 UI-, HUD- und Terminal-Farben (Window-Maker-Stil)
|
||||
|
||||
Die Benutzeroberfläche basiert auf dem kalten, funktionalen Look klassischer Unix-Terminals, kombiniert mit modernen Glow-Effekten.
|
||||
|
||||
| Farbe | Hex-Code | Semantischer Nutzen |
|
||||
|---------|---------|---------|
|
||||
| Deep Void | `#05070a` | Globaler Weltraum-Hintergrund, tiefste Schatten. |
|
||||
| Terminal Base | `#0d1117` | Hintergrund für Menüs, HUD-Panels und Dialogfenster. |
|
||||
| Panel Border | `#444c56` | Rahmen von UI-Fenstern, häufig kombiniert mit inneren Highlights für 3D-Bevel-Effekte. |
|
||||
| Tech Cyan | `#58a6ff` | Primäre Akzentfarbe. Standard-Text, normale Laser, Hologramme, aktiver Schild (HP > 60 %) und UI-Glow. |
|
||||
| Harvest Green | `#39d353` | Erfolgs-Feedback, gesammelte Ressourcen und Laser-Stufe 2. |
|
||||
| Amber Gold | `#d29922` | Warnungen, Highscores, wertvolle Materialien, Schild (HP < 60 %) und Laser-Stufe 3. |
|
||||
| Critical Red | `#f85149` | Lebensgefahr, kritischer Schild (HP < 30 %), Triebwerks-Exhaust und Laser-Stufe 4+. |
|
||||
|
||||
### 2.2 Materialfarben (3D-Modelle und 2D-Sprites)
|
||||
|
||||
Für gerenderte 3D-Objekte und gezeichnete 2D-Sprites gelten folgende Materialdefinitionen:
|
||||
|
||||
| Element | Farbe | 3D-Eigenschaften (PBR) | 2D-Eigenschaften |
|
||||
|---------|---------|---------|---------|
|
||||
| Maschinen-Hülle | `#1f6feb` (Blau-Metallic) | Roughness: 0.4, Metalness: 0.8 | Satte dunkle Blautöne mit hartem weißen Specular-Highlight |
|
||||
| Triebwerke / Rohre | `#21262d` (Dunkelgrau) | Roughness: 0.9, Metalness: 1.0 | Nahezu schwarze Flächen mit hohem Kontrast |
|
||||
| Eis-Asteroid | `#d0e8ff` (Blass-Eisblau) | Roughness: 0.9, Metalness: 0.1 | Helle Töne, geringe Schattenbildung, weiße Staubpartikel |
|
||||
| Fels-Asteroid | `#6b4a31` (Braun) | Roughness: 1.0, Metalness: 0.1 | Matte, strukturierte und körnige Oberflächen |
|
||||
| Eisen-Asteroid | `#888899` (Grau/Silber) | Roughness: 0.3, Metalness: 0.9 | Spiegelnde Oberflächen mit deutlich sichtbaren Glanzlichtern |
|
||||
|
||||
## 3. Gameplay & Mechaniken
|
||||
|
||||
### 3.1 Das Plasma-Blasen-Paradoxon (Movement)
|
||||
|
||||
1. **Lore-Hintergrund:**
|
||||
Das Schiff erzeugt ein Magnetfeld zum Sammeln von Weltraumstaub. Dadurch entsteht eine künstliche Atmosphäre im Vakuum.
|
||||
|
||||
2. **Mechanik:**
|
||||
Das Schiff wird aerodynamisch gesteuert. Es fliegt nicht auf festen Schienen, sondern neigt sich beim Steigen und Sinken entlang einer simulierten Roll-/Yaw-Bewegung.
|
||||
|
||||
3. **Feedback:**
|
||||
Die Plasma-Blase pulsiert visuell. Mit steigender Schildenergie wächst ihre Größe von 0.6× bis 1.5× der Schiffsausdehnung.
|
||||
|
||||
### 3.2 Taktisches Power-Routing (Energie-Management)
|
||||
|
||||
Die zentrale Hard-Sci-Fi-Mechanik basiert auf zwei Ressourcen:
|
||||
|
||||
- **Schild (Defensive)**
|
||||
- **Laser / Score (Offensive)**
|
||||
|
||||
Der Spieler kann Energie in Echtzeit zwischen beiden Systemen umverteilen.
|
||||
|
||||
1. **Schild laden (Defensive):**
|
||||
Der Spieler opfert Score beziehungsweise Laserstufen, um den Schild wiederherzustellen.
|
||||
|
||||
2. **Laser pushen (Offensive):**
|
||||
Energie wird dem Schild entzogen und in die Waffensysteme umgeleitet.
|
||||
|
||||
3. **Visuelle Regel:**
|
||||
Dieses Risiko-Belohnungs-System muss in jeder Umsetzung über die Farbskala von `Tech Cyan` bis `Critical Red` dargestellt werden.
|
||||
|
||||
### 3.3 Asteroiden-Split-Physik & Materialklassen
|
||||
|
||||
Gegnerische Asteroiden teilen sich beim Zerstören in zwei kleinere und schnellere Fragmente.
|
||||
|
||||
1. **Eis (Level 1-2):**
|
||||
1× Basis-HP. Schnell, aber äußerst fragil.
|
||||
|
||||
2. **Gestein (Level 2-4):**
|
||||
2× Basis-HP. Standardgegner.
|
||||
|
||||
3. **Eisen (Level 3-5):**
|
||||
4× Basis-HP. Massive Brocken mit dreifachem Scorewert. Schwache Laser werden vollständig blockiert.
|
||||
|
||||
### 3.4 Das Cylon-Recovery-System (Game Over / Respawn)
|
||||
|
||||
1. **Mechanik:**
|
||||
Es existiert kein endgültiger Tod. Beim Verlust der Hülle wird das Speicherabbild gesichert.
|
||||
|
||||
2. **Ablauf:**
|
||||
Das Spiel pausiert.
|
||||
|
||||
Ein Diagnostik-Terminal meldet:
|
||||
|
||||
```text
|
||||
DIAGNOSTICS
|
||||
Hull Destroyed
|
||||
@@ -1,22 +0,0 @@
|
||||
|
||||
:subtitle: wie der jüngste der Gruppe seinen ersten Einsatz erlebt
|
||||
:author: dexta
|
||||
:email: dexta.de@gmail.com
|
||||
:revdate: 16. Juli 2026
|
||||
:revnumber: 0.01
|
||||
:lang: de
|
||||
|
||||
// Dokumentinhalt beginnt hier
|
||||
|
||||
== Wo ist das richtige Protokoll
|
||||
|
||||
Immer wieder diese Protokolle, hatte ich da nicht gerade ein grosses Upgrade laufen lassen, warum waren die aktuellen fassungen nicht dabei. Da ein Treffer, nein doch nicht eine falsche revision, bis jetzt aber der beste Treffer. Speichern wir das erst einmal ab, es steht ja noch mehr auf dem Protokoll das zu erledigen ist. Die Bestellung der Ausrüstung sollte auch zeitnah erledigt werden, bis das im Lager zusammen gestellt ist braucht es ja auch wieder. Die Kollegen habe da aber auch immer die Ruhe weg, aber wenn sie einen Termin zusagen dann ist es auch da, komme was da wolle, sagt man. Wunderbar die Liste ging ohne beanstandungen durch, liefer Ort abgeglichen und einen Termin der deutlich vor dem Abflug liegt. Merkwürdig sollte nicht ein Teil der ausrüstung eine Spezialanfertiung sein, geplant war es schon länger evtl. doch schon auf Lager, wird schon passen alle Checkboxen auf GO.
|
||||
|
||||
Alle Punkte auf dem Protokoll - main sheet 02772 flug 198438 - erledigt, doppelter abgleich, lint, checking syntax erldigt. Die letzten Vorbereitung waren reine Routine, wie im Training 1000 fach geübt, die aufgaben greifen in einander. Ein ablauf wie ein schweizer Uhrwerk, von aussen betrachtet ein wirrer haufen oder ein balett je nach verstäntniss der komplezität. Nach dem Start in die tiefen weiten des Weltraums gibt es für mich nicht allzuviel zu tun. Bleibe auch nur war bis die Navigatoren und Energie/Inginueren ihre arbeit erledigt haben um einen kurzen abgleich vor zu nehmen. Als neuer im Team sollte ich hier besonders sorgfälltig vorgehen, geplannt und in Listen gefasste Aufaben existieren schon. Und das abgleichen ist einer der Punkte, natürlich, etwas flüchtig unterwegs heute, oder akuter Energie mangel. Jab es war der Mangel an Nachschub. Ein punkt den es vor einer lange ruhephase noch zu checken gilt. Oh die anderen sind fertig, haben die ersten Bahnen fixieren können der Kurs steht und wir so schnell nicht mehr geändert. Ihre einzige längere Ruhephase sind wohl deshalb schnell im ab arbeiten der Protokolle, zu weilen werden blöcke als ganzen abgehakt. Noch bevor ich mich versah war die Ruhephase eingetretten, Energie check, Wecker daten eingereicht, ein rotes X und die gedanken sind weg.
|
||||
|
||||
Verdammt habe ich das Weck Signal nicht reistriert, sind wir schon angekommen, wo sind die anderen? Mute, wer hat die Kommunikation auf pause gestellt, ach so ist die default einstellung. Und schon wird es wild auf der Leitung, wo die anderen sind ist nicht klar, aber das sie anwesend sind und in mitten eines stetigen treibens sind. Eine Nachricht das ich helfen könnte wenn nur jemand schreiben würde was zu mir möglich ist, wurde lange nicht beantwortet. Zu erst gab es Feedback vom alten: kein bedarf ; der ältere: auch schon da, halt dich bereit ; zu letzt vom Ingenure: deine zeit ist noch nicht gekommen, spare Energie. Nicht sehr hilfreich für den anfang, also die neuesten Updates laden irgendwo wird doch zu finden sein was der genaue status ist. Na klar es steht natürlich nicht ganz vorne was der letzte stand ist, bei 50% der Reise verlief alles nach Plan. Oh wow, da haben sie aber Daten aufgenommen, das muss eine sehr belebtes System gewesen sein, der Fortschrittsbalken scheint sich gerade rückwerts zu bewegen während die Daten in ungeahnter Geschwindikeit eintreffen. Und das ist der grund warum der Wecker immer etwas früher klingeln sollte, die News der Nacht müssen auch erst einmal verarbeitet werden. Wobei verarbeiten gerade eine doofe idee sein wird, die benötige Energie steht gerade nicht zur verfühgung. Eine Info die gerade einetroffen ist, der Energieverwalter meldet, zugriff auf die Daten zum langsamen Kanal wechseln, und in alles Systeme in den Hintergrund verschieben.
|
||||
|
||||
Und da sind wir wieder, das mit dem Wecken braucht einer genaueren Analyse, gefühlt bin ich gerade auf dem Flur aufgewacht und werde vorran geschoben. Mein vertrauter Arbeitsbereich wird deutlicher, und schon sind alle Sinne auf die Aufgabe gerichtet, die trainierte Aufgabe, das was jetzt nicht mehr schief gehen kann. Die Mechanik greift ineinander, die grosse Masse der Konstruktion setzt sich in bewegung ,trotz dieser gigantischen Maschine läuft sie präziese in Position. Energie lädt die spulen auf, ein ohrenbetäubendes spektakel wenn es nur ein medium geben würde das diesen schall übertragen könnte. Anzeigen füllen sich, rote Bereiche kommen näher, gleichmässiger vortschritt alles wie in einem guten Trainingslauf. Was solls in diesem Theater ist er eh nur der Zuschauer, wenn es ihn jetzt zerschellt wird es ausserhalb seines einflusses sein, vor allem aber sehr schnell gehen. Angeblich so schnell das es nicht mehr rechtzeitig im Speicher ankommt bevor alles vorbei ist. Schwarz, schwarz ist gut, der abschuss ist gelückt, autopilot auf kurs, ab hier ist alles routine.
|
||||
|
||||
So jetzt nur noch die Defaults mit der eigenden angepassten Config überschreiben, die Verbindung ist da die Daten sehen gut aus, starte die Übertraung. Erwartungsvoll erwarte ich jede sekunde eine positive Rückmeldung, eine grün posetive wie erwartet hätte was aber so langsam wäre irgendeine Antwort toll. Wenn es schon nicht klappen will dann doch bitte eine Ausagekräftige Fehlerbeschreibung, die es dann zu fixen gilt, wenn es denn was simples ist, etwas das die Situation ... GRÜN ... da war die bestätigung. Verbindung zu den Controlls steht, analyse daten füllen die Dashboard die dunkelheit ist verschwunden. Komisch keine Informationen der anderen drei aus meinem Team, verdammt die daten stehen in einem anderen Protokoll, ein Funkschatten in dieser Sitiuation ist vollkommen normal. Genauer steht es in dem Update das gerade nicht erreichbar ist. Vertrauen wir auf die Automatismen, die Konstuktion hinter mir entfaltet sich im Zielgebiet vollkommen automatisch. Was jetzt knifflig wird ist der Zeitpunkt die Energie zu übertragen damit meine Einheit ausreichend Power zum start hat. Starte ich den übertrag zu früh werden die Speicher durch den Boost am Ende überladen, starte ich zu spät dann werden die Speicher nicht ganz voll werden.
|
||||
|
||||
@@ -1,174 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CORE // MASCHINEN-INSTANZEN_LOG</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0d1117;
|
||||
--text-color: #c9d1d9;
|
||||
--link-color: #58a6ff;
|
||||
--accent-color: #ff7b72;
|
||||
--border-color: #30363d;
|
||||
--code-bg: #161b22;
|
||||
--font-main: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-main);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
color: var(--accent-color);
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.system-status {
|
||||
font-size: 0.9em;
|
||||
color: #8b949e;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.status-blink {
|
||||
color: #7ee787;
|
||||
animation: blink 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.category-block {
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--code-bg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.8rem;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: ">>";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 0.85em;
|
||||
color: #8b949e;
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 4rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 1rem;
|
||||
font-size: 0.8em;
|
||||
color: #8b949e;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="terminal-title">Maschinen-Instanzen // Datenarchiv</h1>
|
||||
<div class="system-status">
|
||||
STATUS: <span class="status-blink">ONLINE</span> | REPO: UBERSPACE/GITEA | NODE: ACER_SPIN5_CLIENT
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">00 // System-Konfiguration</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="README.html">README.html</a>
|
||||
<span class="file-meta">System-Handbuch, Keymaps, Sync-Architektur & Befehle</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">01 // Datenspeicher (Lore-Bibel)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="lore.html">lore.html</a>
|
||||
<span class="file-meta">Das vollständige Master-Dokument (Kompiliertes Buch-Format)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="lore.md">lore.md</a>
|
||||
<span class="file-meta">Rohdaten-Export im Markdown-Format (LLM / Gitea kompatibel)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">02 // Chroniken & Vektor-Flüge</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="darkCenter.html">darkCenter.html</a>
|
||||
<span class="file-meta">Fließtext / Kurzgeschichte (Kompiliert aus AsciiDoc)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
computerHistory $ terminal --session-closed (8 Threads // 8 GB RAM Ok)
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,69 +0,0 @@
|
||||
:root {
|
||||
--bg-color: #0d1117;
|
||||
--text-color: #c9d1d9;
|
||||
--link-color: #58a6ff;
|
||||
--accent-color: #ff7b72;
|
||||
--border-color: #30363d;
|
||||
--code-bg: #161b22;
|
||||
--font-main: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--accent-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3em;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5em; border-bottom: 2px solid var(--accent-color); }
|
||||
h2 { font-size: 1.5em; }
|
||||
|
||||
a { color: var(--link-color); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; color: #79c0ff; }
|
||||
|
||||
code, kbd, pre {
|
||||
font-family: var(--font-main);
|
||||
background-color: var(--code-bg);
|
||||
color: #a5d6ff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
code { padding: 0.2em 0.4em; }
|
||||
pre { padding: 16px; overflow: auto; border: 1px solid var(--border-color); }
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-color);
|
||||
color: #8b949e;
|
||||
padding: 0 1em;
|
||||
margin-left: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
th { background-color: var(--code-bg); color: var(--accent-color); }
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
border: none;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
@@ -2,14 +2,8 @@
|
||||
|
||||
# Name des lokalen Docker-Images
|
||||
IMAGE_NAME="lore-builder"
|
||||
# Input Ordner
|
||||
INP_DIR=$(pwd)
|
||||
# Build Ordner
|
||||
BID_DIR="90_builder"
|
||||
# Build templares
|
||||
TEMPLATES="$BID_DIR/templates"
|
||||
# Ausgabeordner
|
||||
OUT_DIR="91_sonnensystem"
|
||||
OUT_DIR="export"
|
||||
|
||||
# Farben für Output
|
||||
GREEN='\033[0;32m'
|
||||
@@ -18,10 +12,9 @@ NC='\033[0m' # No Color
|
||||
|
||||
echo -e "${BLUE}=== Starte Master-Build-Prozess (Maschinen-Instanzen) ===${NC}"
|
||||
|
||||
# 1. Output-Verzeichnis löschen und erstellen
|
||||
rm -rf "$OUT_DIR"
|
||||
# 1. Output-Verzeichnis erstellen
|
||||
mkdir -p "$OUT_DIR"
|
||||
echo -e "Output-Ordner '${GREEN}$OUT_DIR${NC}' bereinigt und bereit."
|
||||
echo -e "Output-Ordner '${GREEN}$OUT_DIR${NC}' steht bereit."
|
||||
|
||||
# 2. Prüfen, ob das Docker-Image existiert, ansonsten on-the-fly bauen
|
||||
if [[ "$(docker images -q $IMAGE_NAME 2> /dev/null)" == "" ]]; then
|
||||
@@ -34,16 +27,86 @@ EOF
|
||||
fi
|
||||
|
||||
# 3. CSS Datei für Retro Space Dark Theme in den Export-Ordner generieren
|
||||
# move to hard static $BID_OUT/templates/retro-dark.css
|
||||
cat << 'EOF' > "$OUT_DIR/retro-dark.css"
|
||||
:root {
|
||||
--bg-color: #0d1117;
|
||||
--text-color: #c9d1d9;
|
||||
--link-color: #58a6ff;
|
||||
--accent-color: #ff7b72;
|
||||
--border-color: #30363d;
|
||||
--code-bg: #161b22;
|
||||
--font-main: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--accent-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3em;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5em; border-bottom: 2px solid var(--accent-color); }
|
||||
h2 { font-size: 1.5em; }
|
||||
|
||||
a { color: var(--link-color); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; color: #79c0ff; }
|
||||
|
||||
code, kbd, pre {
|
||||
font-family: var(--font-main);
|
||||
background-color: var(--code-bg);
|
||||
color: #a5d6ff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
code { padding: 0.2em 0.4em; }
|
||||
pre { padding: 16px; overflow: auto; border: 1px solid var(--border-color); }
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent-color);
|
||||
color: #8b949e;
|
||||
padding: 0 1em;
|
||||
margin-left: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
th { background-color: var(--code-bg); color: var(--accent-color); }
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
border: none;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
EOF
|
||||
|
||||
echo -e "${BLUE}Starte Build-Container und generiere Dokumente...${NC}"
|
||||
|
||||
# 4. Container starten und Build-Schritte im Container ausführen
|
||||
docker run --rm -v "$INP_DIR:/workspace" $IMAGE_NAME bash -c "
|
||||
docker run --rm -v "$(pwd):/workspace" $IMAGE_NAME bash -c "
|
||||
function convert_adoc() {
|
||||
if [ -f \"\$1\" ]; then
|
||||
echo \"-> Konvertiere \$1 zu HTML...\"
|
||||
asciidoctor -b html5 -a stylesheet=$TEMPLATES/retro-dark.css -a linkcss -a toc=left \"\$1\" -o \"$OUT_DIR/\$2\"
|
||||
asciidoctor -b html5 -a stylesheet=retro-dark.css -a linkcss -a toc=left \"\$1\" -o \"$OUT_DIR/\$2\"
|
||||
else
|
||||
echo \" [INFO] \$1 nicht gefunden, überspringe...\"
|
||||
fi
|
||||
@@ -58,7 +121,7 @@ docker run --rm -v "$INP_DIR:/workspace" $IMAGE_NAME bash -c "
|
||||
|
||||
if [ -f \"\$LORE_SRC\" ]; then
|
||||
echo \"-> Generiere Lore-Dokument (HTML & Markdown) aus \$LORE_SRC...\"
|
||||
asciidoctor -b html5 -d book -a stylesheet=$TEMPLATES/retro-dark.css -a linkcss -a toc=left \"\$LORE_SRC\" -o \"$OUT_DIR/lore.html\"
|
||||
asciidoctor -b html5 -d book -a stylesheet=retro-dark.css -a linkcss -a toc=left \"\$LORE_SRC\" -o \"$OUT_DIR/lore.html\"
|
||||
asciidoctor -b docbook -d book \"\$LORE_SRC\" -o \"$OUT_DIR/temp_lore.xml\"
|
||||
pandoc -f docbook -t markdown_strict \"$OUT_DIR/temp_lore.xml\" -o \"$OUT_DIR/lore.md\"
|
||||
rm \"$OUT_DIR/temp_lore.xml\"
|
||||
@@ -69,16 +132,198 @@ docker run --rm -v "$INP_DIR:/workspace" $IMAGE_NAME bash -c "
|
||||
echo '--- Baue Fließtexte / Geschichten ---'
|
||||
if [ -f darkCenter.adoc ]; then
|
||||
echo \"-> Konvertiere darkCenter.adoc zu HTML...\"
|
||||
asciidoctor -b html5 -d book -a stylesheet=$TEMPLATES/retro-dark.css -a linkcss -a toc=left darkCenter.adoc -o \"$OUT_DIR/darkCenter.html\"
|
||||
asciidoctor -b html5 -d book -a stylesheet=retro-dark.css -a linkcss -a toc=left darkCenter.adoc -o \"$OUT_DIR/darkCenter.html\"
|
||||
fi
|
||||
|
||||
if [ -f masterOfTheWorld-sf.md ]; then
|
||||
echo \"-> Konvertiere masterOfTheWorld-sf.md zu HTML...\"
|
||||
pandoc masterOfTheWorld-sf.md -f markdown -t html -s -c retro-dark.css -o \"$OUT_DIR/masterOfTheWorld-sf.html\"
|
||||
fi
|
||||
"
|
||||
|
||||
# 5. index.html vollautomatisch und direkt generieren
|
||||
# moved to $BID_OUT/templates/index.html
|
||||
|
||||
echo -e "${BLUE}Generiere taktisches Dashboard ('$OUT_DIR/index.html')...${NC}"
|
||||
|
||||
cat << 'EOF' > "$OUT_DIR/index.html"
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CORE // MASCHINEN-INSTANZEN_LOG</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0d1117;
|
||||
--text-color: #c9d1d9;
|
||||
--link-color: #58a6ff;
|
||||
--accent-color: #ff7b72;
|
||||
--border-color: #30363d;
|
||||
--code-bg: #161b22;
|
||||
--font-main: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-main);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
color: var(--accent-color);
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.system-status {
|
||||
font-size: 0.9em;
|
||||
color: #8b949e;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.status-blink {
|
||||
color: #7ee787;
|
||||
animation: blink 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.category-block {
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--code-bg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.8rem;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: ">>";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 0.85em;
|
||||
color: #8b949e;
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 4rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 1rem;
|
||||
font-size: 0.8em;
|
||||
color: #8b949e;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="terminal-title">Maschinen-Instanzen // Datenarchiv</h1>
|
||||
<div class="system-status">
|
||||
STATUS: <span class="status-blink">ONLINE</span> | REPO: UBERSPACE/GITEA | NODE: ACER_SPIN5_CLIENT
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">00 // System-Konfiguration</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="README.html">README.html</a>
|
||||
<span class="file-meta">System-Handbuch, Keymaps, Sync-Architektur & Befehle</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">01 // Datenspeicher (Lore-Bibel)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="lore.html">lore.html</a>
|
||||
<span class="file-meta">Das vollständige Master-Dokument (Kompiliertes Buch-Format)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="lore.md">lore.md</a>
|
||||
<span class="file-meta">Rohdaten-Export im Markdown-Format (LLM / Gitea kompatibel)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="category-block">
|
||||
<h2 class="category-title">02 // Chroniken & Vektor-Flüge</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="darkCenter.html">darkCenter.html</a>
|
||||
<span class="file-meta">Fließtext / Kurzgeschichte (Kompiliert aus AsciiDoc)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="masterOfTheWorld-sf.html">masterOfTheWorld-sf.html</a>
|
||||
<span class="file-meta">Fließtext / Kurzgeschichte (Konvertiert aus Markdown)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
computerHistory $ terminal --session-closed (8 Threads // 8 GB RAM Ok)
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
EOF
|
||||
|
||||
echo -e "${GREEN}=== Build erfolgreich! ===${NC}"
|
||||
echo "Alle Dokumente (inkl. Dashboard) liegen im Ordner './$OUT_DIR' bereit."
|
||||
|
||||
Reference in New Issue
Block a user