Spaces:
Running
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.