Pr4.md

### **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.