From 8836dfa6b141058f7fc96168055ebcf6e5b48540 Mon Sep 17 00:00:00 2001 From: Chr1st1anG <73988455+Chr1st1anG@users.noreply.github.com> Date: Tue, 10 Feb 2026 21:15:03 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(figgos):=20add=20NativeWind=20?= =?UTF-8?q?design=20system=20with=20semantic=20color=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CSS-variable-based design system (ManaDeck pattern) with light/dark mode, semantic tokens (primary, secondary, accent, destructive, surface, muted), and game-specific rarity colors (common, rare, epic, legendary). Also adds FEATURES.md with game concept and data model. Co-Authored-By: Claude Opus 4.6 --- apps/figgos/FEATURES.md | 210 ++++++++++++++++++ apps/figgos/apps/mobile/app/(auth)/login.tsx | 16 +- .../figgos/apps/mobile/app/(tabs)/_layout.tsx | 12 +- apps/figgos/apps/mobile/app/(tabs)/create.tsx | 8 +- apps/figgos/apps/mobile/app/(tabs)/index.tsx | 8 +- apps/figgos/apps/mobile/app/(tabs)/shelf.tsx | 8 +- apps/figgos/apps/mobile/app/+not-found.tsx | 6 +- .../apps/mobile/contexts/AuthContext.tsx | 4 +- apps/figgos/apps/mobile/global.css | 82 +++++++ apps/figgos/apps/mobile/tailwind.config.js | 65 ++++-- 10 files changed, 368 insertions(+), 51 deletions(-) create mode 100644 apps/figgos/FEATURES.md diff --git a/apps/figgos/FEATURES.md b/apps/figgos/FEATURES.md new file mode 100644 index 000000000..1152539e3 --- /dev/null +++ b/apps/figgos/FEATURES.md @@ -0,0 +1,210 @@ +# Figgos — Game Features + +## Game Idea + +Figgos ist ein AI-powered Collectible Figure Game. User erstellen personalisierte Action-Figuren im Toy-Packaging-Stil — realistische Spielzeugverpackungen mit Karton-Rueckwand, Plastik-Blister und Zubehoer. Die Figuren koennen alles sein: man selbst, Freunde, Fantasy-Charaktere, Promis — egal was. Jede Figur hat ein Rarity-Level, Artefakte/Items und eine Hintergrundgeschichte. Figuren koennen gegeneinander kaempfen oder miteinander gemercht werden um neue Figuren zu erzeugen. + +--- + +## Core Features + +### 1. Figure Generation + +User erstellt eine neue Action Figure in Toy-Box-Verpackung. + +**Inputs:** + +- Foto/Gesicht (optional — fuer personalisierte Figuren) +- Name (Pflicht) +- Beruf / Rolle / Beschreibung (Pflicht) +- Accessoire-Items (optional, bis zu 4-6 Stueck) +- Accessoire-Bilder (optional — KI recreated diese exakt im Bild) +- Special Styling (optional — Farben, Themes, Hintergrund) + +**AI Pipeline:** + +1. Text-KI generiert Character-Info: + - Description + Lore + - 3 Artefakte/Items (je mit Name, Description, Lore) + - Style-Description fuer Bild-Generierung +2. Rarity wird gewuerfelt (oder vom User gewaehlt) +3. Bild-KI generiert die Figur in Toy-Box-Verpackung: + - Karton-Rueckwand mit Name + Titel + - Plastik-Blister mit Figur + - Items/Accessoires um die Figur arrangiert + - Professionelles Produktfoto-Rendering +4. Bild wird in S3 gespeichert +5. Figur wird in DB gespeichert + +**Output:** + +- Fertige Figur mit: Toy-Box-Bild, Name, Rarity, Character-Info, 3 Items + +--- + +### 2. Battle + +Zwei Figuren treten gegeneinander an. + +**Konzept:** + +- User waehlt eigene Figur + Gegner-Figur (aus Community oder eigener Sammlung) +- KI analysiert beide Figuren (Stats, Items, Rarity) und simuliert einen Kampf +- Ergebnis: Kampfbericht + Gewinner + ggf. generiertes Battle-Bild +- Rarity beeinflusst die Kampfstaerke (Legendary > Epic > Rare > Common) +- Items/Artefakte geben Boni + +> Details zur Battle-Mechanik (Rundenbasiert? Automatisch? Stats-System?) noch zu definieren. + +--- + +### 3. Merge + +Zwei Figuren werden zu einer neuen Figur verschmolzen. + +**Konzept:** + +- User waehlt zwei eigene Figuren zum Mergen +- KI kombiniert Eigenschaften beider Figuren: + - Visuell: Neues Toy-Box-Bild als Mix beider Figuren + - Character-Info: Merged Lore + kombinierte Items + - Rarity: Chance auf hoeheres Rarity-Level als die Eingangsfiguren +- Ergebnis: Neue, einzigartige Figur +- Originalfiguren bleiben erhalten (oder werden verbraucht? — zu definieren) + +> Details zur Merge-Mechanik noch zu definieren. + +--- + +### 4. Figure Detail View + +Detailansicht einer einzelnen Figur. + +- Grosses Toy-Box-Bild +- Rarity-Badge (farbig) +- Character-Info: + - Description + - Lore / Hintergrundgeschichte +- 3 Items/Artefakte (je mit Name, Description, Lore) +- Like-Button + Like-Count +- Share-Funktion +- Creator-Attribution +- Aktionen: Battle starten, Merge starten + +--- + +### 5. Collection / Shelf + +Eigene Figurensammlung. + +- Grid-Ansicht aller eigenen Figuren +- Rarity-Badges sichtbar +- Sortierung: Neueste zuerst +- Filter: nach Rarity +- Archivieren (Soft-Delete) +- Schnellzugriff auf Battle / Merge von hier aus + +--- + +### 6. Rarity System + +| Rarity | Chance | Farbe | Effekt auf Generierung | +| --------- | ------ | ----- | ----------------------------------------- | +| Common | 60% | Grau | Standard-Detaillevel | +| Rare | 25% | Blau | Mehr Details in Lore + Items | +| Epic | 12% | Lila | Elaborierte Beschreibung, besondere Items | +| Legendary | 3% | Gold | Maximale Detailtiefe, einzigartige Items | + +- Beeinflusst KI-Generierung (hoehere Rarity = aufwaendigere Figur) +- Beeinflusst Battle-Staerke +- Beeinflusst Merge-Ergebnis (hoehere Chance auf Upgrade) +- Visuell: Badge-Farben, Card-Border-Effekte, ggf. Glitter/Glow + +--- + +### 7. Settings / Profile + +- Dark/Light Mode +- Theme-Auswahl +- Account-Info +- Logout +- Figuren-Statistiken (Anzahl, Raritaeten-Verteilung) + +--- + +## Spaetere Features + +| Feature | Beschreibung | +| ------------------ | ----------------------------------------------------------------- | +| **Community Feed** | Oeffentliche Figuren aller User, Likes, Sortierung | +| **Reveal** | Reveal-Mechanik beim Erhalten neuer Figuren (Unboxing-Animation?) | +| **Credits** | Generierung kostet Credits, Free Tier + kaufbare Pakete | +| **Trading** | Figuren zwischen Usern tauschen | +| **Challenges** | Woechentliche Themes ("Erstelle eine Legendary Pirate Figure") | +| **Leaderboards** | Ranglisten: meiste Legendaries, Battle-Wins, etc. | +| **Web App** | SvelteKit Web-Version | + +--- + +## Datenmodell + +### Figure + +``` +id: UUID +name: string +subject: string +imageUrl: string +enhancedPrompt: string (optional) +rarity: 'common' | 'rare' | 'epic' | 'legendary' +characterInfo: { + character: { description, imagePrompt, lore } + items: [{ name, description, imagePrompt, lore }] // 3 Items + styleDescription?: string +} +stats: { // fuer Battle-System + attack: number + defense: number + special: number +} +parentFigures: UUID[] // leer bei generierten, gefuellt bei gemergten +isPublic: boolean +isArchived: boolean +likes: number +userId: string +createdAt: timestamp +updatedAt: timestamp +``` + +### FigureLike + +``` +id: UUID +figureId: UUID (FK -> figures) +userId: string +createdAt: timestamp +UNIQUE(figureId, userId) +``` + +### Battle (spaeter) + +``` +id: UUID +figure1Id: UUID (FK -> figures) +figure2Id: UUID (FK -> figures) +winnerId: UUID (FK -> figures) +battleLog: JSONB +userId: string +createdAt: timestamp +``` + +### Merge (spaeter) + +``` +id: UUID +parent1Id: UUID (FK -> figures) +parent2Id: UUID (FK -> figures) +resultFigureId: UUID (FK -> figures) +userId: string +createdAt: timestamp +``` diff --git a/apps/figgos/apps/mobile/app/(auth)/login.tsx b/apps/figgos/apps/mobile/app/(auth)/login.tsx index d87537a2f..b89779963 100644 --- a/apps/figgos/apps/mobile/app/(auth)/login.tsx +++ b/apps/figgos/apps/mobile/app/(auth)/login.tsx @@ -29,21 +29,21 @@ export default function LoginScreen() { }; return ( - + Figgos - Collect your fantasy figures + Collect your action figures - {error && {error}} + {error && {error}} - + {loading ? 'Signing in...' : 'Sign In'} diff --git a/apps/figgos/apps/mobile/app/(tabs)/_layout.tsx b/apps/figgos/apps/mobile/app/(tabs)/_layout.tsx index 9631d2027..7275f38bf 100644 --- a/apps/figgos/apps/mobile/app/(tabs)/_layout.tsx +++ b/apps/figgos/apps/mobile/app/(tabs)/_layout.tsx @@ -5,16 +5,16 @@ export default function TabLayout() { return ( + - Create - - Generate your own AI-powered fantasy figures. + Create + + Generate your own AI-powered action figures. diff --git a/apps/figgos/apps/mobile/app/(tabs)/index.tsx b/apps/figgos/apps/mobile/app/(tabs)/index.tsx index f2c4df074..9ff76af4a 100644 --- a/apps/figgos/apps/mobile/app/(tabs)/index.tsx +++ b/apps/figgos/apps/mobile/app/(tabs)/index.tsx @@ -3,12 +3,10 @@ import { SafeAreaView } from 'react-native-safe-area-context'; export default function CommunityScreen() { return ( - + - - Community - - + Community + Public figures from the community will appear here. diff --git a/apps/figgos/apps/mobile/app/(tabs)/shelf.tsx b/apps/figgos/apps/mobile/app/(tabs)/shelf.tsx index c7ead4e17..7c6fcd218 100644 --- a/apps/figgos/apps/mobile/app/(tabs)/shelf.tsx +++ b/apps/figgos/apps/mobile/app/(tabs)/shelf.tsx @@ -3,12 +3,10 @@ import { SafeAreaView } from 'react-native-safe-area-context'; export default function ShelfScreen() { return ( - + - - My Collection - - + My Collection + Your collected figures will appear here. diff --git a/apps/figgos/apps/mobile/app/+not-found.tsx b/apps/figgos/apps/mobile/app/+not-found.tsx index 71d5a30d4..25e0660e1 100644 --- a/apps/figgos/apps/mobile/app/+not-found.tsx +++ b/apps/figgos/apps/mobile/app/+not-found.tsx @@ -5,10 +5,8 @@ export default function NotFoundScreen() { return ( <> - - - Page not found - + + Page not found Go to home diff --git a/apps/figgos/apps/mobile/contexts/AuthContext.tsx b/apps/figgos/apps/mobile/contexts/AuthContext.tsx index 48a6b262a..79f64db0b 100644 --- a/apps/figgos/apps/mobile/contexts/AuthContext.tsx +++ b/apps/figgos/apps/mobile/contexts/AuthContext.tsx @@ -199,10 +199,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) { flex: 1, justifyContent: 'center', alignItems: 'center', - backgroundColor: '#1A1A2E', + backgroundColor: 'rgb(26, 26, 46)', }} > - + Loading... ); diff --git a/apps/figgos/apps/mobile/global.css b/apps/figgos/apps/mobile/global.css index b5c61c956..1220c7720 100644 --- a/apps/figgos/apps/mobile/global.css +++ b/apps/figgos/apps/mobile/global.css @@ -1,3 +1,85 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* ============================================================================= + Figgos Design System — Toy Collectible Theme + + Color strategy: + - Primary: Vibrant purple — playful, gaming, fun + - Secondary: Electric blue — action, energy + - Accent: Teal green — success, highlights + - Rarity colors: Common(gray), Rare(blue), Epic(purple), Legendary(gold) + + Values are RGB triplets for Tailwind alpha support: + rgb(var(--color) / ) + ============================================================================= */ + +/* Light Mode */ +:root { + --background: 248 249 250; + --foreground: 45 52 54; + --surface: 255 255 255; + --surface-elevated: 255 255 255; + --muted: 223 230 233; + --muted-foreground: 99 110 114; + + --primary: 108 92 231; + --primary-foreground: 255 255 255; + --secondary: 9 132 227; + --secondary-foreground: 255 255 255; + --accent: 0 184 148; + --accent-foreground: 255 255 255; + --destructive: 231 76 60; + --destructive-foreground: 255 255 255; + + --border: 223 230 233; + --input: 223 230 233; + --ring: 108 92 231; + + /* Rarity System */ + --rarity-common: 178 190 195; + --rarity-rare: 9 132 227; + --rarity-epic: 108 92 231; + --rarity-legendary: 248 214 43; + + /* Rarity Text (on rarity background) */ + --rarity-common-foreground: 45 52 54; + --rarity-rare-foreground: 255 255 255; + --rarity-epic-foreground: 255 255 255; + --rarity-legendary-foreground: 30 30 30; +} + +/* Dark Mode */ +.dark { + --background: 26 26 46; + --foreground: 255 255 255; + --surface: 22 33 62; + --surface-elevated: 31 52 96; + --muted: 45 52 54; + --muted-foreground: 178 190 195; + + --primary: 162 155 254; + --primary-foreground: 26 26 46; + --secondary: 116 185 255; + --secondary-foreground: 26 26 46; + --accent: 85 239 196; + --accent-foreground: 26 26 46; + --destructive: 255 107 107; + --destructive-foreground: 26 26 46; + + --border: 45 52 54; + --input: 45 52 54; + --ring: 162 155 254; + + /* Rarity System (brighter in dark mode) */ + --rarity-common: 99 110 114; + --rarity-rare: 116 185 255; + --rarity-epic: 162 155 254; + --rarity-legendary: 248 214 43; + + --rarity-common-foreground: 255 255 255; + --rarity-rare-foreground: 26 26 46; + --rarity-epic-foreground: 26 26 46; + --rarity-legendary-foreground: 30 30 30; +} diff --git a/apps/figgos/apps/mobile/tailwind.config.js b/apps/figgos/apps/mobile/tailwind.config.js index 13edfcbc1..551dd2d6c 100644 --- a/apps/figgos/apps/mobile/tailwind.config.js +++ b/apps/figgos/apps/mobile/tailwind.config.js @@ -6,24 +6,55 @@ module.exports = { theme: { extend: { colors: { - primary: '#6C5CE7', - secondary: '#A29BFE', - background: '#F8F9FA', - card: '#FFFFFF', - textColor: '#2D3436', - border: '#DFE6E9', - accent: '#00B894', - muted: '#B2BEC3', + // Semantic tokens + background: 'rgb(var(--background) / )', + foreground: 'rgb(var(--foreground) / )', + surface: { + DEFAULT: 'rgb(var(--surface) / )', + elevated: 'rgb(var(--surface-elevated) / )', + }, + muted: { + DEFAULT: 'rgb(var(--muted) / )', + foreground: 'rgb(var(--muted-foreground) / )', + }, + primary: { + DEFAULT: 'rgb(var(--primary) / )', + foreground: 'rgb(var(--primary-foreground) / )', + }, + secondary: { + DEFAULT: 'rgb(var(--secondary) / )', + foreground: 'rgb(var(--secondary-foreground) / )', + }, + accent: { + DEFAULT: 'rgb(var(--accent) / )', + foreground: 'rgb(var(--accent-foreground) / )', + }, + destructive: { + DEFAULT: 'rgb(var(--destructive) / )', + foreground: 'rgb(var(--destructive-foreground) / )', + }, + border: 'rgb(var(--border) / )', + input: 'rgb(var(--input) / )', + ring: 'rgb(var(--ring) / )', - dark: { - primary: '#A29BFE', - secondary: '#6C5CE7', - background: '#1A1A2E', - card: '#16213E', - textColor: '#FFFFFF', - border: '#2D3436', - accent: '#55EFC4', - muted: '#636E72', + // Rarity system (game-specific) + rarity: { + common: { + DEFAULT: 'rgb(var(--rarity-common) / )', + foreground: 'rgb(var(--rarity-common-foreground) / )', + }, + rare: { + DEFAULT: 'rgb(var(--rarity-rare) / )', + foreground: 'rgb(var(--rarity-rare-foreground) / )', + }, + epic: { + DEFAULT: 'rgb(var(--rarity-epic) / )', + foreground: 'rgb(var(--rarity-epic-foreground) / )', + }, + legendary: { + DEFAULT: 'rgb(var(--rarity-legendary) / )', + foreground: 'rgb(var(--rarity-legendary-foreground) / )', + }, }, }, },