Pr3.md

### **NS\_Prompt\_03.txt**

' STAR DUST VOYAGER: GALAXY WANDERER \- TRANSITION LOADING SCREEN AND NEW GAME SETUP MODULE  
' CREATED BY GROK 3 (XAI) \- 02:15 PM CEST, MONDAY, JULY 21, 2025  
' SPECIFIES DESIGN, VISUALS, LAYOUT, FUNCTIONALITY, ANIMATIONS, AND ASSETS FOR TRANSITIONLOADINGSCREEN AND NEWGAMESETUPSCREEN  
' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV)  
' PURPOSE: DEVELOP TRANSITION LOADING SCREENS AND A MULTI-STEP NEW GAME SETUP WITH PILOT CREATION, SHIP SELECTION, CREW CHOICE, AND DIFFICULTY SETTINGS IN COMPLEX PIXELART STYLE, WITH CZECH LOCALIZATION

' GOALS  
' \- Design and implement the TransitionLoadingScreen for smooth scene transitions, featuring animated warp lines and a pulsating nexus symbol, rendered with PixiJS.  
' \- Create a multi-step NewGameSetupScreen with detailed UI for difficulty selection, pilot creation (with procedural portraits), ship selection, optional crew and scenario choices, and a summary step, all in retro-futuristic pixelart style.  
' \- Ensure all player-facing text is in Czech using i18next, with dynamic updates and tooltips for enhanced UX.  
' \- Generate high-quality pixelart assets (backgrounds, sprites, icons) and sound effects, optimized for PixiJS rendering and the game’s aesthetic from NS\_Prompt\_01 and Prompt 35\.  
' \- Integrate with SceneManager for seamless transitions and gameSessionStore for saving player choices.  
' \- Prepare for subsequent prompts (e.g., NS\_Prompt\_04 for InSystemScene) by establishing reusable UI patterns and procedural generation logic.

' PROJECT CONTEXT  
' \- BUILDS ON: NS\_Prompt\_01 (project structure, tech stack), NS\_Prompt\_02 (InitialLoadingScreen, MainMenuScreen), and references Prompt 35 (global visual style) and Prompt 27/40 (alien races, portrait generation).  
' \- ASSUMPTIONS: PixiApplication, AssetManager, and SceneManager are functional; placeholder assets and localization (cs.json) are available.  
' \- DEPENDENCIES: client/src/game/rendering/PixiApplication.ts, client/src/game/core/AssetManager.ts, client/src/game/core/SceneManager.ts, client/public/locales/cs.json.

' 0\. ASSUMPTIONS AND GLOBAL STYLES  
' \- PIXEL ART STYLE: Strict adherence to "Complex Detailed Pixel Art Style with Retro Touch" (Prompt 1, 35), 16x16px base tile, with 3D depth via parallax and lighting effects.  
' \- ASSET DIRECTORY: Follows NS\_Prompt\_01 structure (e.g., client/public/assets/).  
' \- UI COMPONENTS: Uses global styles (ButtonStyle\_Standard\_PixelArt, FontStyle\_PixelArt\_DefaultText) from NS\_Prompt\_01.  
' \- LOCALIZATION: All text uses i18next keys with Czech defaults.

' 1\. TRANSITIONLOADINGSCREEN  
' \- PURPOSE: Short loading screen between main scenes (e.g., MainMenu to NewGameSetup), displaying contextual text and animations.  
' \- SPECIFICATION (TransitionLoadingScreenConfig):  
\`\`\`json  
{  
    "id": "TransitionLoadingScreen",  
    "screenName\_cz": "Načítání...",  
    "background": {  
        "type": "Subtle\_Animated\_PixelArt",  
        "assetPath": "client/public/assets/images/ui/loading\_screens/transition\_warp\_lines\_subtle\_pixel\_anim\_sheet.png",  
        "animationParams": { "frameCount": 32, "speed": 5, "loop": true },  
        "overlayColor": "\#000000B0"  
    },  
    "loadingIndicator": {  
        "type": "Pulsating\_Nexus\_Symbol\_Small\_PixelArt",  
        "assetPath": "client/public/assets/images/ui/icons/nexus\_symbol\_loading\_pulsate\_pixelart\_anim.png",  
        "animationParams": { "frameCount": 16, "speed": 2, "loop": true },  
        "position": { "x\_percent": 50, "y\_percent": 45, "anchor\_x": 0.5, "anchor\_y": 0.5 },  
        "sizePx": { "x": 48, "y": 48 }  
    },  
    "loadingText": {  
        "display": true,  
        "dynamicKey\_cz": "loading.text.contextual\_cz",  
        "defaultText\_cz": "PROSÍM ČEKEJTE...",  
        "fontStyleKey": "FontStyle\_PixelArt\_Loading\_Transition",  
        "position": { "x\_percent": 50, "y\_percent": 55, "anchor\_x": 0.5, "anchor\_y": 0.5 }  
    },  
    "displayDuration\_IfNoRealTask\_ms": 300,  
    "fadeInOut\_Animation": { "type": "FadeToFromBlack", "durationMs": 200 }  
}

’ \- DESCRIPTION: ’ \- Displays animated warp lines and a pulsating nexus symbol during scene transitions or data loading. ’ \- Text updates dynamically (e.g., “Generování Postavy…”) via SceneManager. ’ \- PIXIJS IMPLEMENTATION: ’ \- Use PixiApplication with a Container for background (AnimatedSprite) and indicator (AnimatedSprite). ’ \- Apply overlay with Graphics and Text for loading message. ’ \- Animate via ticker with fade-in/out using PixiJS AlphaFilter. ’ \- REQUIRED ASSETS: ’ \- client/public/assets/images/ui/loading\_screens/transition\_warp\_lines\_subtle\_pixel\_anim\_sheet.png: 1280x720px, 32-frame spritesheet, warp effect with \#3388ff lines on \#050510. ’ \- client/public/assets/images/ui/icons/nexus\_symbol\_loading\_pulsate\_pixelart\_anim.png: 48x48px, 16-frame spritesheet, pulsating \#FFD700 symbol on \#050510. ’ \- FontStyle\_PixelArt\_Loading\_Transition: 16px, white \#FFFFFF with \#00AACC outline.

’ 2\. NEWGAMESETUPSCREEN ’ \- PURPOSE: Multi-step screen for configuring a new game, including difficulty, pilot creation, ship selection, crew choice, scenario, and summary. ’ \- SPECIFICATION (NewGameSetupScreenConfig):

{  
    "id": "NewGameSetupScreen",  
    "screenName\_cz": "Nová Hra \- Nastavení",  
    "panelStyle": {  
        "backgroundImageAsset\_Subtle\_Path": "client/public/assets/images/ui/backgrounds/new\_game\_setup\_bg\_blueprint\_grid\_animated.png",  
        "backgroundColor": "\#080A18F8",  
        "borderColor": "\#00AACC",  
        "borderWidthPx": 2,  
        "widthPercentOfScreen": 90,  
        "heightPercentOfScreen": 90,  
        "paddingPx": 30  
    },  
    "steps": \[  
        { "stepId": "difficulty\_selection", "titleKey\_cz": "newgame.step1.title\_cz", "defaultTitle\_cz": "Nastavení Obtížnosti a Módů Hry", "ui\_Component\_Key": "NewGameStep\_Difficulty" },  
        { "stepId": "pilot\_creation", "titleKey\_cz": "newgame.step2.title\_cz", "defaultTitle\_cz": "Vytvoření Pilota", "ui\_Component\_Key": "NewGameStep\_PilotCreation" },  
        { "stepId": "ship\_selection", "titleKey\_cz": "newgame.step3.title\_cz", "defaultTitle\_cz": "Výběr Počáteční Lodi", "ui\_Component\_Key": "NewGameStep\_ShipSelection" },  
        { "stepId": "crew\_selection", "titleKey\_cz": "newgame.step4.title\_cz", "defaultTitle\_cz": "Sestavení Počáteční Posádky (Volitelné)", "ui\_Component\_Key": "NewGameStep\_CrewSelection" },  
        { "stepId": "scenario\_selection", "titleKey\_cz": "newgame.step5.title\_cz", "defaultTitle\_cz": "Zvolte Počáteční Scénář (Volitelné)", "ui\_Component\_Key": "NewGameStep\_ScenarioSelection" },  
        { "stepId": "summary", "titleKey\_cz": "newgame.step6.title\_cz", "defaultTitle\_cz": "Souhrn Vašich Voleb", "ui\_Component\_Key": "NewGameStep\_Summary" }  
    \],  
    "navigationButtons": {  
        "nextButton\_TextKey\_cz": "newgame.next\_cz", "defaultNextButton\_Text\_cz": "Další \>",  
        "previousButton\_TextKey\_cz": "newgame.previous\_cz", "defaultPreviousButton\_Text\_cz": "\< Zpět",  
        "startGameButton\_TextKey\_cz": "newgame.start\_cz", "defaultStartGameButton\_Text\_cz": "Zahájit Dobrodružství\!",  
        "buttonStyleKey": "ButtonStyle\_Large\_Confirm\_PixelArt",  
        "layout\_Position": "Bottom\_Center\_Spread"  
    },  
    "stepIndicator\_UI": {  
        "displayType": "DotSequence\_Highlighted",  
        "dotStyle\_Active\_Asset": "assets/images/ui/dot\_active\_gold\_pixelart.png",  
        "dotStyle\_Inactive\_Asset": "assets/images/ui/dot\_inactive\_gray\_pixelart.png",  
        "position": "TopCenter"  
    },  
    "music\_NewGameSetup\_AssetPath": "client/public/assets/audio/music/themes/new\_game\_setup\_theme\_contemplative\_tech\_loop.ogg",  
    "transitionTo\_OnStartGame\_ScreenId": "TransitionLoadingScreen\_To\_InGame"  
}

’ 2.1 STEP 1: DIFFICULTY AND GAME MODE SELECTION ’ \- SPECIFICATION (NewGame\_Step\_DifficultyConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_Difficulty",  
    "titleKey\_cz": "newgame.step1.title\_cz", "defaultTitle\_cz": "Nastavení Obtížnosti a Módů Hry",  
    "layout\_Columns": 2,  
    "difficultySelection\_UI": {  
        "labelKey\_cz": "newgame.difficulty.label\_cz", "defaultLabel\_cz": "Zvolte Obtížnost:",  
        "options": \[  
            { "value": "Easy", "labelKey\_cz": "difficulty.easy\_cz", "defaultLabel\_cz": "Lehká (Tulák Začátečník)", "description\_cz": "Mírnější nepřátelé, více zdrojů, menší postihy.", "iconAsset": "assets/images/icons/ui/difficulty\_easy\_shield.png" },  
            { "value": "Normal", "labelKey\_cz": "difficulty.normal\_cz", "defaultLabel\_cz": "Normální (Ostřílený Poutník)", "description\_cz": "Vyvážený zážitek.", "iconAsset": "assets/images/icons/ui/difficulty\_normal\_sword\_shield.png" },  
            { "value": "Hard", "labelKey\_cz": "difficulty.hard\_cz", "defaultLabel\_cz": "Těžká (Vesmírný Vlk Samotář)", "description\_cz": "Silnější nepřátelé, méně zdrojů.", "iconAsset": "assets/images/icons/ui/difficulty\_hard\_skull.png" },  
            { "value": "Roguelike", "labelKey\_cz": "difficulty.roguelike\_cz", "defaultLabel\_cz": "Nemilosrdná (Legenda Prázdnoty)", "description\_cz": "Trvalá smrt, extrémní výzva.", "iconAsset": "assets/images/icons/ui/difficulty\_roguelike\_broken\_skull.png" }  
        \],  
        "displayType": "LargeButtons\_With\_IconAndDescription",  
        "selectedOption\_HighlightStyleKey": "SelectionHighlight\_GoldBorder\_Animated",  
        "defaultSelection": "Normal"  
    },  
    "gameModes\_UI": {  
        "labelKey\_cz": "newgame.gamemodes.label\_cz", "defaultLabel\_cz": "Speciální Herní Módy:",  
        "options": \[  
            { "id": "permadeath\_mode", "labelKey\_cz": "gamemode.permadeath\_cz", "defaultLabel\_cz": "Trvalá Smrt", "tooltip\_cz": "Hra končí při explozi lodi (pouze pro 'Nemilosrdná').", "checkboxStyleKey": "Checkbox\_RetroTech\_Large", "isEnabled\_Condition": "difficulty \=== 'Roguelike'" },  
            { "id": "ironman\_mode", "labelKey\_cz": "gamemode.ironman\_cz", "defaultLabel\_cz": "Režim Ironman", "tooltip\_cz": "Zakázané manuální ukládání.", "checkboxStyleKey": "Checkbox\_RetroTech\_Large" }  
        \]  
    },  
    "galaxySeed\_UI": {  
        "labelKey\_cz": "newgame.galaxyseed.label\_cz", "defaultLabel\_cz": "Seed Galaxie (volitelné):",  
        "inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Medium",  
        "randomizeButton\_Text\_cz": "Náhodný", "randomizeButton\_IconAsset": "assets/images/icons/ui/dice\_random\_icon.png", "randomizeButton\_StyleKey": "Button\_Small\_IconOnly\_PixelArt"  
    }  
}

’ \- PIXIJS: Render buttons as Sprites with AnimatedSprite highlights, text via Text objects.

’ 2.2 STEP 2: PILOT CREATION ’ \- SPECIFICATION (NewGame\_Step\_PilotCreationConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_PilotCreation",  
    "titleKey\_cz": "newgame.step2.title\_cz", "defaultTitle\_cz": "Vytvoření Pilota",  
    "layout\_Columns": 2,  
    "pilotName\_Input\_UI": {  
        "labelKey\_cz": "newgame.pilot.name\_cz", "defaultLabel\_cz": "Jméno Pilota:",  
        "inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Large",  
        "maxLength": 24  
    },  
    "pilotRace\_Selection\_UI": {  
        "labelKey\_cz": "newgame.pilot.race\_cz", "defaultLabel\_cz": "Rasa:",  
        "displayType": "Dropdown\_With\_RaceIcons\_And\_InfoTooltip",  
        "options\_Source\_AlienRaceDefinitions\_Playable": true,  
        "onRaceChange\_Action": "UpdatePortraitGenerator\_WithRaceParts\_And\_ResetAppearance"  
    },  
    "pilotPortrait\_Customization\_UI": {  
        "previewArea\_SizePx": { "x": 256, "y": 256 },  
        "previewBackground\_AssetPath": "assets/images/ui/new\_game\_setup/portrait\_preview\_bg\_tech.png",  
        "componentCategories\_cz": \[  
            { "categoryId": "HeadShape", "label\_cz": "Tvar Hlavy", "partType\_Reference": "HeadShape" },  
            { "categoryId": "HairStyle", "label\_cz": "Účes/Hlavové Útvary", "partType\_Reference": "HairOrHeadFeature" },  
            { "categoryId": "Eyes", "label\_cz": "Oči", "partType\_Reference": "Eyes" },  
            { "categoryId": "Mouth", "label\_cz": "Ústa", "partType\_Reference": "Mouth" },  
            { "categoryId": "SkinPatterns", "label\_cz": "Vzory Kůže", "partType\_Reference": "SkinPattern" },  
            { "categoryId": "Clothing", "label\_cz": "Oblečení \- Trup", "partType\_Reference": "Clothing" },  
            { "categoryId": "Accessories", "label\_cz": "Doplňky", "partType\_Reference": "Accessory" }  
        \],  
        "partSelection\_UI\_Type": "Horizontal\_IconStrip\_With\_Arrows",  
        "colorSelection\_UI\_Type\_ForColorableParts": "PaletteGrid\_SmallSwatches",  
        "randomizeAppearance\_Button\_cz": {  
            "text\_cz": "Náhodný Vzhled", "iconAsset": "assets/images/icons/ui/dice\_random\_icon\_large.png",  
            "styleKey": "Button\_Standard\_PixelArt\_WithIcon",  
            "action": "Call\_ProceduralPortraitGenerator\_RandomizeForCurrentRace"  
        },  
        "genderOrEquivalent\_Selection\_IfRaceHasMultiple\_cz": true  
    },  
    "pilotOrigin\_Selection\_UI\_Optional": {  
        "labelKey\_cz": "newgame.pilot.origin\_cz", "defaultLabel\_cz": "Původ:",  
        "options\_Path": "assets/data/player\_setup/pilot\_origins\_cz.json",  
        "displayType": "Dropdown\_With\_DescriptionTooltip"  
    }  
}

’ \- PIXIJS: Render preview as Sprite, use AnimatedSprite for part changes, Text for labels.

’ 2.3 STEP 3: SHIP SELECTION ’ \- SPECIFICATION (NewGame\_Step\_ShipSelectionConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_ShipSelection",  
    "titleKey\_cz": "newgame.step3.title\_cz", "defaultTitle\_cz": "Výběr Počáteční Lodi",  
    "layout\_Type": "Horizontal\_ShipCarousel\_With\_StatsDisplay",  
    "availableStartingShips\_Ids": \["explorer\_scout\_nomad\_player\_start", "fighter\_light\_arrow\_starter", "transport\_small\_hauler\_starter", "corvette\_stealth\_shadow\_starter"\],  
    "shipDisplay\_InUI": {  
        "sprite\_AssetPath\_From\_ShipClassDefinition": true,  
        "sprite\_ScaleFactor": 1.0,  
        "animation\_Idle\_SubtleRotation\_Or\_EngineFlicker": { "frameCount": 8, "speed": 3, "loop": true },  
        "background\_ForShipSprite\_AssetPath": "assets/images/ui/new\_game\_setup/ship\_display\_hangar\_bay\_bg.png"  
    },  
    "shipStats\_Display\_KeyElements\_cz": \["Název Třídy", "Role", "Max. Trup", "Max. Štíty", "Rychlost", "Obratnost", "Nákladový Prostor", "Počet Zbraňových Slotů", "Stručný Popis Výhod/Nevýhod"\],  
    "shipStats\_Comparison\_UI\_Optional": true,  
    "shipName\_Input\_UI": {  
        "labelKey\_cz": "newgame.ship.name\_cz", "defaultLabel\_cz": "Pojmenujte Svou Loď:",  
        "inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Medium"  
    },  
    "shipColor\_Selection\_UI\_Basic": {  
        "labelKey\_cz": "newgame.ship.color\_cz", "defaultLabel\_cz": "Primární Barva Lodi:",  
        "colorPalette\_Options\_Path": "assets/data/player\_setup/ship\_starting\_colors.json",  
        "displayType": "ColorSwatch\_Buttons\_Selectable"  
    }  
}

’ \- PIXIJS: Use Carousel with AnimatedSprite for ships, Text for stats.

’ 2.4 STEP 4: CREW SELECTION (OPTIONAL) ’ \- SPECIFICATION (NewGame\_Step\_CrewSelectionConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_CrewSelection",  
    "titleKey\_cz": "newgame.step4.title\_cz", "defaultTitle\_cz": "Sestavení Počáteční Posádky (Volitelné)",  
    "allowSkip\_Button\_Text\_cz": "Začít Sám",  
    "maxSelectableCrew\_Initial": 2,  
    "candidatePool\_Generation\_Logic\_cz": "4-6 random candidates with procedural portraits and traits.",  
    "candidateDisplay\_UI\_ListItem": {  
        "layout\_cz": "Portrét vlevo, Jméno/Rasa/Hlavní Dovednost/Rys vpravo.",  
        "portraitSizePx": { "x": 48, "y": 48 },  
        "fontStyle\_NameKey": "StandardText\_Bold",  
        "fontStyle\_InfoKey": "SmallText\_Default",  
        "selectionCheckbox\_StyleKey": "Checkbox\_RetroTech\_Small"  
    },  
    "selectedCrew\_Summary\_Panel\_cz": "Small panel with portraits and names."  
}

’ \- PIXIJS: Render candidates as Sprites, use Text for details.

’ 2.5 STEP 5: SCENARIO SELECTION (OPTIONAL) ’ \- SPECIFICATION (NewGame\_Step\_ScenarioSelectionConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_ScenarioSelection",  
    "titleKey\_cz": "newgame.step5.title\_cz", "defaultTitle\_cz": "Zvolte Počáteční Scénář (Volitelné)",  
    "allowSkip\_Button\_Text\_cz": "Standardní Začátek",  
    "scenarioOptions\_Path": "assets/data/player\_setup/starting\_scenarios\_cz.json",  
    "displayType": "SelectableCards\_With\_ImageAndDescription",  
    "cardStyle\_AssetPath\_Template": "assets/images/ui/new\_game\_setup/scenario\_card\_{scenarioId}.png"  
}

’ \- PIXIJS: Render cards as Sprites with Text overlays.

’ 2.6 STEP 6: SUMMARY ’ \- SPECIFICATION (NewGame\_Step\_SummaryConfig):

{  
    "ui\_Component\_Key": "NewGameStep\_Summary",  
    "titleKey\_cz": "newgame.step6.title\_cz", "defaultTitle\_cz": "Souhrn Vašich Voleb",  
    "layout\_Display\_ReadAllChoices\_cz": "Display all choices: Difficulty, Pilot Name/Race/Portrait, Origin, Ship, Crew, Scenario.",  
    "confirmationText\_cz": "Jste připraveni zahájit své vesmírné dobrodružství?",  
    "startGame\_Button\_Reference": "NewGameSetupScreenConfig.navigationButtons.startGameButton"  
}

’ \- PIXIJS: Use Container for summary layout, Text for details.

’ 3\. REQUIRED GRAPHIC ASSETS ’ \- BACKGROUND: client/public/assets/images/ui/backgrounds/new\_game\_setup\_bg\_blueprint\_grid\_animated.png: 1280x720px, animated grid, \#00AACC lines. ’ \- DIFFICULTY ICONS: assets/images/icons/ui/difficulty\_easy\_shield.png, difficulty\_normal\_sword\_shield.png, difficulty\_hard\_skull.png, difficulty\_roguelike\_broken\_skull.png: 32x32px each. ’ \- GAME MODE ICONS: assets/images/icons/ui/gamemode\_permadeath\_icon.png, gamemode\_ironman\_icon.png: 24x24px. ’ \- RANDOMIZE BUTTONS: assets/images/icons/ui/dice\_random\_icon.png (24x24px), dice\_random\_icon\_large.png (48x48px). ’ \- PORTRAIT PARTS: client/public/assets/images/portraits/procedural/{raceId}/{partType}/: 64x64px PNGs for 3-4 races \+ Humans (e.g., human/HeadShape\_01.png). ’ \- PORTRAIT PREVIEW: assets/images/ui/new\_game\_setup/portrait\_preview\_bg\_tech.png: 256x256px, tech frame. ’ \- SHIP SPRITES: assets/images/ships/player\_starters/explorer\_nomad\_detailed\_preview.png, etc.: 128x256px, animated. ’ \- SHIP DISPLAY: assets/images/ui/new\_game\_setup/ship\_display\_hangar\_bay\_bg.png: 300x200px. ’ \- SCENARIO CARDS: assets/images/ui/new\_game\_setup/scenario\_card\_{scenarioId}.png: 200x150px each.

’ 4\. REQUIRED SOUND ASSETS ’ \- MUSIC: client/public/assets/audio/music/themes/new\_game\_setup\_theme\_contemplative\_tech\_loop.ogg: 3-min loop, 44.1kHz. ’ \- UI SOUNDS: sfx/ui/new\_game\_step\_next\_confirm.wav, previous\_click.wav, start\_adventure\_confirm\_epic.wav, dropdown\_select\_option\_click.wav, checkbox\_toggle\_tech\_click.wav, text\_input\_keypress\_pixel.wav, portrait\_part\_change\_click.wav, ship\_select\_confirm\_chime.wav, crew\_candidate\_select\_click.wav, randomize\_button\_dice\_roll.wav: 0.5-2s each.

’ 5\. AI DIRECTIVES FOR TRAE ’ \- IMPLEMENT TRANSITIONLOADINGSCREEN: ’ \- Create TransitionLoadingScreen.tsx with PixiJS logic (AnimatedSprite for background/indicator, Text for loading). ’ \- Ensure display during SceneManager transitions, update text dynamically. ’ \- Generate assets (warp lines, nexus symbol, font). ’ \- IMPLEMENT NEWGAMESETUPSCREEN: ’ \- Create NewGameSetupScreen.tsx to manage steps and navigation. ’ \- Implement each step (NewGameStep\_\*.tsx) with PixiJS rendering: ’ \- Step 1: Difficulty selection with buttons and checkboxes. ’ \- Step 2: Pilot creation with input, dropdown, and portrait customization (procedural generation). ’ \- Step 3: Ship selection with carousel and stats. ’ \- Step 4: Crew selection with random candidates. ’ \- Step 5: Scenario selection with cards. ’ \- Step 6: Summary with all choices. ’ \- Store choices in gameSessionStore.newGameConfig. ’ \- Generate all specified assets (pixelart sprites, sounds). ’ \- ENSURE: ’ \- Pixelart style with retro touch, Czech localization, smooth transitions. ’ \- Test with Vite, log FPS and transitions. ’ \- OUTPUT: ’ \- List of new files and assets. ’ \- Screenshots of each step and transition screen. ’ \- Full code of TransitionLoadingScreen.tsx and NewGameSetupScreen.tsx with subcomponents.

’ DIAGRAM UPDATE ’ graph TD A\[Spuštění Aplikace\] –\> B(NS\_Prompt\_02: Úvodní Načítací Obrazovka); B –\> C{NS\_Prompt\_02: Hlavní Menu Hry}; C –\> |“NOVÁ HRA”| D(NS\_Prompt\_03: Přechodová Načítací Obrazovka); D –\> E\[NS\_Prompt\_03: Tvorba Nové Hry (Vícekroková)\]; E –\> |Zahájit Hru| D2(NS\_Prompt\_03: Přechodová Načítací Obrazovka  
 “Generuji Galaxii…”); D2 –\> F\_GAME\[NS\_Prompt\_42: Hlavní Herní Scéna\]; C –\> |“NAČÍST HRU”| G(NS\_Prompt\_03: Přechodová Načítací Obrazovka); G –\> H\[Obrazovka Načtení Uložené Hry\]; H –\> |Načíst| G2(NS\_Prompt\_03: Přechodová Načítací Obrazovka  
 “Načítám Hru…”); G2 –\> F\_GAME; C –\> |“NASTAVENÍ”| I\[NS\_Prompt\_13: Nastavení Hry\]; C –\> |“KNIHOVNA”| J\[NS\_Prompt\_19 & 47: Knihovna Znalostí\]; C –\> |“TVŮRCI”| K\[Obrazovka Tvůrců\]; C –\> |“UKONČIT HRU”| L\[Potvrzovací Dialog Ukončení\]; style D fill:\#ff9900,stroke:\#fff,stroke-width:2px style E fill:\#ff9900,stroke:\#fff,stroke-width:2px style D2 fill:\#ff9900,stroke:\#fff,stroke-width:2px style G fill:\#ff9900,stroke:\#fff,stroke-width:2px style G2 fill:\#ff9900,stroke:\#fff,stroke-width:2px

\#\#\# Podrobnosti pro Trae  
1\. \*\*TransitionLoadingScreen\*\*:  
   \- Animated background and indicator with PixiJS, short duration for fluidity.  
2\. \*\*NewGameSetupScreen\*\*:  
   \- Multi-step UI with detailed customization (portraits, ships, crew), all rendered with PixiJS.  
   \- Procedural generation for portraits and crew, integrated with race data.  
3\. \*\*Assets\*\*:  
   \- Extensive pixelart library for portraits, ships, and UI, generated with Aseprite.  
4\. \*\*Code\*\*:  
   \- React components with PixiJS for each step, managed by a parent component.