Spaces:
Running
NS_Prompt_04.txt
' STAR DUST VOYAGER: GALAXY WANDERER - SETTINGS, CREDITS, EXIT DIALOG, AND LOAD GAME MODULE
' CREATED BY GROK 3 (XAI) - 02:45 PM CEST, MONDAY, JULY 21, 2025
' SPECIFIES DESIGN, VISUALS, LAYOUT, FUNCTIONALITY, ANIMATIONS, AND ASSETS FOR SETTINGS, CREDITS, EXIT DIALOG, AND LOAD GAME SCREENS
' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV)
' PURPOSE: IMPLEMENT SYSTEM SCREENS WITH PIXELART STYLE, CZECH LOCALIZATION, AND INTEGRATION WITH SCENEMANAGER AND STATE MANAGER
' GOALS
' - Design and implement SettingsScreen as a modal UI for graphics, sound, and controls, with save/apply logic.
' - Create CreditsScreen with scrolling text and animated starfield background.
' - Develop ExitGameDialog for game termination with unsaved changes handling.
' - Build LoadGameScreen for loading and deleting saved games with version compatibility checks.
' - Generate all required pixelart assets and sound effects, optimized for PixiJS.
' - Ensure responsive UI and integration with SceneManager and StateManager.
' PROJECT CONTEXT
' - BUILDS ON: NS_Prompt_01 (project structure), NS_Prompt_02 (MainMenu), NS_Prompt_03 (TransitionLoadingScreen), and references Prompt 35 (visual style).
' - ASSUMPTIONS: PixiApplication, AssetManager, SceneManager, and StateManager are functional.
' - DEPENDENCIES: client/src/game/core/SceneManager.ts, client/src/game/core/StateManager.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 depth effects.
' - ASSET DIRECTORY: Follows NS_Prompt_01 (e.g., client/public/assets/).
' - UI COMPONENTS: Uses global styles (ButtonStyle_Standard_PixelArt_Retro, FontStyle_PixelArt_DefaultText) or generated by AI.
' - LOCALIZATION: All text uses i18next keys with Czech defaults.
' - SCENE/STATE MANAGEMENT: SceneManager and StateManager handle transitions and data persistence.
' 1. SETTINGSSCREEN
' - PURPOSE: Configurable modal screen for graphics, sound, and controls, accessible from MainMenu or In-Game Menu.
' - SPECIFICATION (SettingsScreenConfig):
```json
{
"id": "SettingsScreen",
"screenName_cz": "Nastavení Hry",
"isModal": true,
"panelStyle": {
"backgroundImageAsset_Subtle_Path": "client/public/assets/images/ui/backgrounds/settings_panel_bg_tech_circuitry_anim_sheet.png",
"backgroundColor": "#0A0F18F5",
"borderColor": "#2070A0", "borderWidthPx": 2,
"widthPercentOfScreen_IfModal": 80, "heightPercentOfScreen_IfModal": 85, "paddingPx": 25,
"titleBar_HeightPx": 40, "titleBar_TextStyleKey": "FontStyle_PixelArt_Header_Large_PanelTitle_Teal"
},
"tabDefinitions": [
{
"id": "graphicsSettingsTab", "tabLabelKey_cz": "settings.tab.graphics_cz", "defaultTabLabel_cz": "GRAFIKA",
"iconAsset": "client/public/assets/images/icons/tabs/icon_tab_graphics_pixelart.png",
"layoutColumns": 2,
"items": [
{ "itemType": "Label", "id": "gfx_display_header", "labelKey_cz": "settings.graphics.display_header_cz", "defaultLabel_cz": "NASTAVENÍ ZOBRAZENÍ", "labelStyleKey": "FontStyle_PixelArt_SectionHeader_Orange" },
{ "itemType": "Dropdown", "id": "gfx_resolution", "labelKey_cz": "settings.graphics.resolution_cz", "defaultLabel_cz": "Rozlišení Obrazovky:", "options": [{"value": "native", "label_cz": "Nativní"}, {"value": "800x600", "label_cz": "800x600"}, {"value": "1280x720", "label_cz": "1280x720"}], "defaultValue": "native", "currentValue_StoreKey": "settings.graphics.resolution", "styleKey": "Dropdown_RetroTech_PixelArt", "requiresRestart": true, "tooltipTextKey_cz": "settings.graphics.resolution.tooltip_cz", "defaultTooltipText_cz": "Nastaví rozlišení hry. Změna může vyžadovat restart." },
{ "itemType": "Checkbox", "id": "gfx_colorblind_protanopia", "labelKey_cz": "settings.graphics.colorblind_protanopia_cz", "defaultLabel_cz": "Režim Protanopie", "defaultValue": false, "currentValue_StoreKey": "settings.accessibility.colorblindMode_Protanopia", "styleKey": "Checkbox_RetroTech_PixelArt_Toggle" }
]
},
{
"id": "soundSettingsTab", "tabLabelKey_cz": "settings.tab.sound_cz", "defaultTabLabel_cz": "ZVUK",
"iconAsset": "client/public/assets/images/icons/tabs/icon_tab_sound_pixelart.png",
"layoutColumns": 2,
"items": [
{ "itemType": "Label", "id": "snd_volume_header", "labelKey_cz": "settings.sound.volume_header_cz", "defaultLabel_cz": "HLOUBKA ZVUKU", "labelStyleKey": "FontStyle_PixelArt_SectionHeader_Orange" },
{ "itemType": "Slider", "id": "snd_master_volume", "labelKey_cz": "settings.sound.master_volume_cz", "defaultLabel_cz": "Hlavní Hlasitost:", "min": 0, "max": 100, "defaultValue": 75, "currentValue_StoreKey": "settings.sound.masterVolume", "styleKey": "Slider_RetroTech_PixelArt" }
]
},
{
"id": "controlSettingsTab", "tabLabelKey_cz": "settings.tab.controls_cz", "defaultTabLabel_cz": "OVLÁDÁNÍ",
"iconAsset": "client/public/assets/images/icons/tabs/icon_tab_controls_pixelart.png",
"layoutColumns": 2,
"items": [
{ "itemType": "Label", "id": "ctrl_input_header", "labelKey_cz": "settings.controls.input_header_cz", "defaultLabel_cz": "NASTAVENÍ OVLÁDÁNÍ", "labelStyleKey": "FontStyle_PixelArt_SectionHeader_Orange" },
{ "itemType": "KeybindList", "id": "ctrl_move_up", "labelKey_cz": "settings.controls.move_up_cz", "defaultLabel_cz": "Posun Vzhůru:", "defaultValue": "W", "currentValue_StoreKey": "settings.controls.moveUp", "styleKey": "KeybindListItem_PixelArt" }
]
}
],
"actionButtons": {
"applyButton": { "id": "settings_apply", "textLabelKey_cz": "settings.button.apply_cz", "defaultText_cz": "POUŽÍT ZMĚNY", "action": { "type": "APPLY_SETTINGS" }, "styleKey": "ButtonStyle_Primary_PixelArt_Large" },
"defaultsButton": { "id": "settings_defaults", "textLabelKey_cz": "settings.button.defaults_cz", "defaultText_cz": "VÝCHOZÍ", "action": { "type": "RESET_TO_DEFAULTS", "scope": "CurrentTab" }, "styleKey": "ButtonStyle_Secondary_PixelArt_Medium" },
"backOrCloseButton": { "id": "settings_back", "textLabelKey_cz": "settings.button.back_cz", "defaultText_cz": "ZPĚT", "action": { "type": "SAVE_AND_NAVIGATE_BACK", "target": "PreviousScreen" }, "styleKey": "ButtonStyle_Secondary_PixelArt_Medium",
"confirmDialog_IfChangesUnapplied_OnBack": {
"titleKey_cz": "dialog.unsaved_settings.title_cz", "defaultTitle_cz": "Neuložené Změny",
"messageKey_cz": "dialog.unsaved_settings.message_cz", "defaultMessage_cz": "Máte neuložené změny v nastavení. Chcete je použít před odchodem, nebo je zahodit?",
"button_ApplyAndBack_Text_cz": "Použít a Zpět",
"button_DiscardAndBack_Text_cz": "Zahodit a Zpět",
"button_StayOnSettings_Text_cz": "Zůstat v Nastavení"
}
},
"layout": "Horizontal_RightAligned_Footer", "spacingPx": 15
},
"sharedTooltipStyleKey": "TooltipStyle_Standard_PixelArt_Dark",
"onSettingsChanged_NeedsRestart_Indicator_cz": { "text_cz": "(vyžaduje restart hry)", "iconAsset": "client/public/assets/images/icons/ui/restart_required_pixelart_icon.png", "color": "#FFA500" },
"settingsStorage_Mechanism": "LocalStorage_Via_SettingsStore",
"soundEffects": {
"openScreen": "sfx/ui/settings_screen_open_interface.wav",
"closeScreen": "sfx/ui/settings_screen_close_confirm.wav",
"tab_Change": "sfx/ui/settings_tab_switch_click.wav",
"setting_ValueChange_Generic": "sfx/ui/settings_value_change_tick.wav",
"button_Apply_Click": "sfx/ui/settings_apply_changes_confirm.wav",
"button_Defaults_Click": "sfx/ui/settings_reset_defaults_action.wav"
}
}
’ - PIXIJS: Render as Container with AnimatedSprite background, Text for labels, and interactive UI elements.
’ 2. CREDITSSCREEN ’ - PURPOSE: Displays credits and thanks with scrolling text and animated background. ’ - SPECIFICATION (CreditsScreenConfig):
{
"id": "CreditsScreen",
"screenName_cz": "Tvůrci Hry",
"isModal": true,
"background": {
"type": "Animated_Starfield_DeepSpace_PixelArt",
"assetPath_Template": "client/public/assets/images/ui/backgrounds/credits_bg_starfield_parallax_layer_{1,2,3}.png",
"layerCount": 3,
"animationParams_StarScroll": { "frameCount": 1, "speed": -0.5, "loop": true }
},
"scrollingText_Content_Path_cz": "client/public/assets/data/ui_config/credits_text_cz.json",
"scrollingText_Style": {
"fontFamily_Title": "FontStyle_PixelArt_Header_Large_Gold",
"fontFamily_Entry": "FontStyle_PixelArt_Credits_White",
"lineSpacingPx": 8,
"scrollSpeed_PixelsPerSecond": 30,
"alignment": "center"
},
"music_CreditsTheme_AssetPath": "client/public/assets/audio/music/themes/credits_theme_reflective_epic_loop.ogg",
"interactionButtons": {
"skipButton_Text_cz": "Přeskočit", "skipButton_Key": "Escape", "skipButton_StyleKey": "ButtonStyle_Transparent_Small_TopRight",
"speedUpButton_Text_cz": "Zrychlit (Držet)", "speedUpButton_Key": "ArrowDown",
"backButton_Text_cz": "Zpět do Menu", "backButton_StyleKey": "ButtonStyle_Standard_PixelArt_BottomCenter"
},
"autoReturnTo_PreviousScreen_AfterScrollEnd": true
}
’ - PIXIJS: Use ParallaxContainer with AnimatedSprite layers, Text for scrolling content.
’ 3. EXITGAMEDIALOG ’ - PURPOSE: Confirmation dialog for game exit with unsaved changes handling. ’ - SPECIFICATION (ExitGameDialogConfig):
{
"id": "ExitGameConfirmationDialog",
"dialogStyleKey": "DialogStyle_PixelArt_Warning_Retro",
"titleKey_cz": "dialog.exit.title_cz", "defaultTitle_cz": "Ukončit Hru?",
"messageText_cz_Template": "Opravdu si přejete ukončit {GameTitle}?{UnsavedChangesWarning_IfPresent}",
"buttons": {
"confirmExit_Button": { "textKey_cz": "dialog.exit.button_confirm_cz", "defaultText_cz": "Ano, Ukončit", "styleKey": "ButtonStyle_Danger_PixelArt", "action": "APPLICATION_QUIT" },
"cancelExit_Button": { "textKey_cz": "dialog.exit.button_cancel_cz", "defaultText_cz": "Ne, Zpět do Hry", "styleKey": "ButtonStyle_Secondary_PixelArt", "action": "CLOSE_DIALOG" },
"saveAndExit_Button_IfUnsavedChanges": { "textKey_cz": "dialog.exit.button_save_and_exit_cz", "defaultText_cz": "Uložit a Ukončit", "styleKey": "ButtonStyle_Primary_PixelArt", "action": "SAVE_GAME_THEN_APPLICATION_QUIT" }
},
"iconAsset_Warning_Path": "client/public/assets/images/icons/ui/warning_icon_pixelart_large.png",
"soundEffect_OpenDialog": "sfx/ui/dialog_open_warning_chime.wav"
}
’ - PIXIJS: Render as Container with Sprite background and Text/buttons.
’ 4. LOADGAMESCREEN ’ - PURPOSE: Screen for loading and deleting saved game slots. ’ - SPECIFICATION (LoadGameScreenConfig):
{
"id": "LoadGameScreen",
"screenName_cz": "Načíst Uloženou Hru",
"isModal": true,
"panelStyle": {
"backgroundImageAsset_Path": "client/public/assets/images/ui/backgrounds/load_game_bg_data_archives_pixelart.png"
},
"layout": {
"saveSlotList_Position": { "x_percent": 30, "y_percent": 20, "width_percent": 40, "height_percent": 60 },
"selectedSavePreviewPanel_Position": { "x_percent": 70, "y_percent": 20, "width_percent": 25, "height_percent": 60 },
"actionButtons_Panel_Position": "Bottom_Row_Spread"
},
"saveSlotList_MaxVisible_BeforeScroll": 5,
"saveSlotItem_Style": {
"heightPx": 100,
"backgroundColor_Default": "#0A0F18",
"backgroundColor_Hover": "#1A1F28",
"backgroundColor_Selected": "#2A2F38",
"borderColor_Selected": "#2070A0",
"thumbnail_SizePx": { "x": 160, "y": 90 },
"thumbnail_Placeholder_AssetPath": "client/public/assets/images/ui/save_load/save_slot_thumbnail_placeholder.png",
"fontStyle_SlotName": { "styleKey": "FontStyle_PixelArt_DefaultText_Bold" },
"fontStyle_PlayerName": { "styleKey": "FontStyle_PixelArt_DefaultText" },
"fontStyle_GameTime": { "styleKey": "FontStyle_PixelArt_SmallText" },
"fontStyle_RealDateTime": { "styleKey": "FontStyle_PixelArt_SmallText" },
"fontStyle_GameVersion_MismatchWarning": { "color": "#FFA500" },
"deleteButton_IconAsset": "client/public/assets/images/icons/ui/delete_icon_pixelart_small.png",
"deleteButton_StyleKey": "ButtonStyle_IconOnly_Danger_Small"
},
"selectedSavePreviewPanel_Content_cz": {
"largerThumbnail": true,
"currentLocation_Text_cz": "Poslední Lokace: {SystemName} / {PlanetName}",
"mainQuest_Progress_Text_cz": "Hlavní Úkol: {QuestName} ({PercentComplete}%)",
"shipName_And_Class_Text_cz": "Loď: {ShipName} (Třída {ShipClass})"
},
"actionButtons": {
"loadButton": { "id": "load_game", "textLabelKey_cz": "load.button.load_cz", "defaultText_cz": "NAČÍST HRU", "action": { "type": "LOAD_SELECTED_GAME" }, "styleKey": "ButtonStyle_Primary_PixelArt_Large" },
"deleteButton": { "id": "delete_save", "textLabelKey_cz": "load.button.delete_cz", "defaultText_cz": "SMAZAT", "action": { "type": "DELETE_SELECTED_SAVE" }, "confirmDialog_MessageKey_cz": "load.dialog.delete_confirm_cz", "defaultConfirmDialog_Message_cz": "Opravdu smazat {SaveName}?", "styleKey": "ButtonStyle_Danger_PixelArt_Medium" },
"backButton": { "id": "load_back", "textLabelKey_cz": "load.button.back_cz", "defaultText_cz": "ZPĚT", "action": { "type": "NAVIGATE_BACK", "target": "PreviousScreen_Or_MainMenu" }, "styleKey": "ButtonStyle_Secondary_PixelArt_Medium" }
},
"emptySaveList_MessageKey_cz": "load.message.no_saves_cz", "defaultEmptySaveList_Message_cz": "Žádné uložené hry nebyly nalezeny.",
"saveFileVersion_CompatibilityCheck_Logic_cz": "Varovat hráče, pokud se snaží načíst uložení z nekompatibilní verze. Možnost 'Načíst na vlastní riziko'.",
"soundEffects": {
"openScreen": "sfx/ui/load_game_screen_open_data_access.wav",
"slot_Select": "sfx/ui/load_game_slot_hover.wav",
"button_Load_Confirm": "sfx/ui/load_game_confirm_systems_online.wav",
"button_Delete_Confirm": "sfx/ui/load_game_delete_confirm.wav",
"delete_Success_Sound": "sfx/ui/load_game_delete_success.wav",
"delete_Fail_Sound": "sfx/ui/load_game_delete_fail.wav"
}
}
’ - PIXIJS: Use ScrollContainer for slots, Sprite for thumbnails, Text for details.
’ 5. AI DIRECTIVES FOR TRAE ’ - IMPLEMENT SETTINGSSCREEN: ’ - Create SettingsScreen.tsx with tabs (Graphics, Sound, Controls) and UI elements. ’ - Integrate with settingsStore for persistence. ’ - Handle apply, defaults, and back logic with confirmation dialog. ’ - IMPLEMENT CREDITSSCREEN: ’ - Create CreditsScreen.tsx with scrolling Text and Parallax background. ’ - Add skip, speed-up, and back controls. ’ - IMPLEMENT EXITGAMEDIALOG: ’ - Create ExitGameDialog.tsx with conditional buttons for unsaved changes. ’ - Link to application quit logic. ’ - IMPLEMENT LOADGAMESCREEN: ’ - Create LoadGameScreen.tsx with slot list and preview panel. ’ - Integrate with SaveLoadManager for metadata and deletion. ’ - Add version compatibility check. ’ - GENERATE ASSETS: ’ - Settings: settings_panel_bg_tech_circuitry_anim_sheet.png, tab icons, UI styles. ’ - Credits: starfield_parallax_layer_{1,2,3}.png, fonts, music. ’ - Exit: dialog_warning_bg_pixelart.png, warning_icon_pixelart_large.png. ’ - Load: load_game_bg_data_archives_pixelart.png, save_slot_thumbnail_placeholder.png, delete_icon_pixelart_small.png. ’ - ENSURE: ’ - Pixelart style with retro touch, Czech localization, responsive UI. ’ - Test with SceneManager and StateManager. ’ - OUTPUT: ’ - List of new files and assets. ’ - Screenshots of each screen/dialog.
’ 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[NS_Prompt_04: 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_04: Nastavení Hry (Modální)]; I – Zpět –> C; C –> |“KNIHOVNA”| J[NS_Prompt_19 & 47: Knihovna Znalostí (Modální)]; J – Zpět –> C; C –> |“TVŮRCI”| K[NS_Prompt_04: Obrazovka Tvůrců (Modální)]; K – Zpět –> C; C –> |“UKONČIT HRU”| L[NS_Prompt_04: Potvrzovací Dialog Ukončení]; L – Ano –> M[Ukončení Aplikace]; L – Ne –> C; subgraph InGameInteractions [Interakce ve Hře] F_GAME –> N[NS_Prompt_XX: Menu ve Hře (In-Game Menu - Modální)]; N –> I_GM[NS_Prompt_04: Nastavení Hry (Modální)]; I_GM – Zpět –> N; N –> L_GM[NS_Prompt_04: Potvrzovací Dialog Ukončení]; L_GM – Ano –> M; L_GM – Ne –> N; N –> H_GM[NS_Prompt_04: Obrazovka Načtení Uložené Hry (Modální)]; H_GM – Zpět –> N; N – Uložit Hru –> O[Obrazovka Uložení Hry (Modální)]; O – Zpět –> N; end style H fill:#ff9900,stroke:#fff,stroke-width:2px style I fill:#ff9900,stroke:#fff,stroke-width:2px style K fill:#ff9900,stroke:#fff,stroke-width:2px style L fill:#ff9900,stroke:#fff,stroke-width:2px style I_GM fill:#ff9900,stroke:#fff,stroke-width:2px style L_GM fill:#ff9900,stroke:#fff,stroke-width:2px style H_GM fill:#ff9900,stroke:#fff,stroke-width:2px style O fill:#ff9900,stroke:#fff,stroke-width:2px
### Podrobnosti pro Trae
1. **SettingsScreen**:
- Modal UI with tabs, integrated with settingsStore, and restart indicators.
2. **CreditsScreen**:
- Scrolling text with parallax starfield, interactive controls.
3. **ExitGameDialog**:
- Confirmation with unsaved changes logic.
4. **LoadGameScreen**:
- Slot list with preview, deletion, and version checks.
5. **Assets**:
- Detailed pixelart for backgrounds, icons, and UI styles.