Spaces:
Running
Running
| ### **NS\_Prompt\_02.txt** | |
| ' STAR DUST VOYAGER: GALAXY WANDERER \- INITIAL AND MAIN MENU SCREEN DESIGN | |
| ' CREATED BY GROK 3 (XAI) \- 01:35 PM CEST, MONDAY, JULY 21, 2025 | |
| ' DEFINES DETAILED DESIGN AND IMPLEMENTATION OF INITIALLOADINGSCREEN AND MAINMENUSCREEN | |
| ' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV) | |
| ' PURPOSE: DEVELOP THE VISUAL AND FUNCTIONAL FOUNDATION FOR THE GAME'S ENTRY SCREENS USING PIXIJS, INTEGRATING THEMATIC PIXELART, 3D DEPTH, AND CZECH LOCALIZATION, BUILDING ON NS\_PROMPT\_01 | |
| ' GOALS | |
| ' \- Design and implement the InitialLoadingScreen to display asset loading progress, thematic visuals, and tips, using PixiJS for rendering with 3D depth illusion and pixelart style. | |
| ' \- Create the MainMenuScreen as a navigational hub with thematic UI elements (buttons, panels), parallax layers, and animated background, optimized with PixiJS for performance and immersion. | |
| ' \- Ensure both screens align with the game’s retro-futuristic aesthetic, featuring detailed textures, neon accents, and lore-inspired details (e.g., serial numbers, faded logos). | |
| ' \- Integrate Czech localization using i18next, with text rendered via PixiJS Text objects, and prepare for smooth transitions managed by SceneManager. | |
| ' \- Generate high-quality placeholder assets (backgrounds, UI elements, animations) compatible with PixiJS, adhering to the project’s asset management system from NS\_Prompt\_01. | |
| ' \- Lay the groundwork for subsequent prompts (e.g., NS\_Prompt\_03 for UI refinement) by establishing PixiJS rendering patterns, animation frameworks, and screen-specific logic. | |
| ' PROJECT CONTEXT | |
| ' \- BUILDS ON: NS\_Prompt\_01, assuming the project structure (star-dust-voyager), tech stack (React, PixiJS, Zustand), and initial assets are set up. | |
| ' \- ASSUMPTIONS: PixiApplication, AssetManager, and SceneManager are functional, with placeholder assets (e.g., loading\_background.png) 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. | |
| ' SCREEN DESIGN SPECIFICATIONS | |
| ' \- INITIALLOADINGSCREEN | |
| ' \- PURPOSE: Display loading progress (0-100%), a thematic background, and randomized tips to engage players during asset loading. | |
| ' \- VISUAL STYLE: | |
| ' \- BACKGROUND: Space dock scene (1280x720px), dark \#050510 base, with a 16x16px pixelart ship silhouette, faint \#3388ff neon lights, and a 5px offset star layer for parallax (3 layers total). | |
| ' \- PROGRESS BAR: Horizontal bar (800x40px), metallic \#3388ff frame, \#050510 fill with a \#FFD700 gradient progress indicator, positioned at 640px, 500px. | |
| ' \- TEXT: Loading progress (e.g., "Načítání: 75%") in FontStyle\_PixelArt\_Thematic\_16pt (white \#FFFFFF, \#3388ff outline), and a tip (e.g., "Tip: Kontrolujte zásoby paliva před warpem\!") in FontStyle\_PixelArt\_Thematic\_12pt (gray \#CCCCCC). | |
| ' \- ANIMATION: Subtle star twinkling (8 frames, 15 FPS) and progress bar fill animation (16 frames, 20 FPS). | |
| ' \- FUNCTIONALITY: | |
| ' \- Load all assets from asset\_manifest.json using AssetManager. | |
| ' \- Update progress text and bar in real-time via PixiJS ticker. | |
| ' \- Display a random tip from cs.json on each load. | |
| ' \- Transition to MainMenuScreen when loading completes (progress \= 1), using SceneManager.transitionTo("MainMenuScreen"). | |
| ' \- MAINMENUSCREEN | |
| ' \- PURPOSE: Serve as the main navigation hub with options (New Game, Load Game, Settings, Exit), featuring a dynamic galactic background and thematic UI. | |
| ' \- VISUAL STYLE: | |
| ' \- BACKGROUND: Galactic nebula (1280x720px), dark \#050510 base, with 3 parallax layers: distant stars (zIndex \-2), nebula clouds (zIndex \-1, 64 frames, 15 FPS), and orbiting station silhouette (zIndex 0, 16 frames, 10 FPS). | |
| ' \- BUTTONS: Four buttons (200x40px each), metallic \#3388ff frames, \#050510 textured fills, neon \#FFD700 glow on hover, labels from cs.json (e.g., "Nová Hra"), arranged vertically at 640px, 200px (spacing 60px). | |
| ' \- PANEL: Optional info panel (400x200px), dark \#050510 with \#333333 border, displaying a welcome message (e.g., "Vítejte ve hvězdné galaxii\!") and serial number (e.g., "SN-4721-XK"), positioned at 640px, 400px. | |
| ' \- ANIMATION: Nebula cloud drift, station orbit, and button hover pulse (16 frames, 15 FPS). | |
| ' \- FUNCTIONALITY: | |
| ' \- Render background layers and animate via PixiJS ticker. | |
| ' \- Handle button clicks to trigger SceneManager transitions (e.g., "NewGameScreen" for New Game). | |
| ' \- Display localized text and dynamic elements (e.g., station animation) with PixiJS. | |
| ' ASSET REQUIREMENTS | |
| ' \- NEW PLACEHOLDER ASSETS: | |
| ' \- client/public/assets/images/screens/loading\_background.png | |
| ' \- DIMENSIONS: 1280x720px | |
| ' \- DESIGN: Space dock with 16x16px ship silhouette, \#050510 background, \#3388ff neon lights, 5px offset star layer, 32x32px tile precision, PixiJS Texture-compatible. | |
| ' \- TOOL: Aseprite, with parallax layer separation. | |
| ' \- client/public/assets/images/screens/mainmenu\_background.png | |
| ' \- DIMENSIONS: 1280x720px | |
| ' \- DESIGN: Galactic nebula with 3 layers (stars, clouds, station), \#050510 base, \#3388ff/\#FF3300 nebula colors, 16x16px station sprite, 64-frame cloud animation, PixiJS Texture-compatible. | |
| ' \- TOOL: Aseprite, with spritesheet export for animation. | |
| ' \- client/public/assets/images/ui/buttons/menu\_button\_base.png | |
| ' \- DIMENSIONS: 200x40px | |
| ' \- DESIGN: Metallic \#3388ff frame (2px), \#050510 textured fill (4x4px grid), white \#FFFFFF "Placeholder" text, transparent background, PixiJS Sprite-compatible. | |
| ' \- TOOL: Aseprite, with 2-frame hover animation (menu\_button\_hover.png). | |
| ' \- client/public/assets/images/ui/panels/info\_panel\_base.png (optional) | |
| ' \- DIMENSIONS: 400x200px | |
| ' \- DESIGN: Dark \#050510 fill, \#333333 2px border, subtle grid texture, PixiJS Sprite-compatible. | |
| ' \- TOOL: Aseprite. | |
| ' \- UPDATE ASSET MANIFEST: | |
| ' \- Add new entries to client/public/assets/data/asset\_manifest.json: | |
| \`\`\`json | |
| { | |
| "ui/button\_base": "images/ui/buttons/button\_base.png", | |
| "screens/loading\_background": "images/screens/loading\_background.png", | |
| "audio/loading\_theme": "audio/music/loading\_theme.ogg", | |
| "fonts/default": "fonts/pixelart\_default.ttf", | |
| "screens/mainmenu\_background": "images/screens/mainmenu\_background.png", | |
| "ui/buttons/menu\_button\_base": "images/ui/buttons/menu\_button\_base.png", | |
| "ui/buttons/menu\_button\_hover": "images/ui/buttons/menu\_button\_hover.png", | |
| "ui/panels/info\_panel\_base": "images/ui/panels/info\_panel\_base.png" | |
| } | |
| ’ PIXIJS CONFIGURATION (SCREEN-SPECIFIC) ’ \- INITIALLOADINGSCREEN: ’ \- USE: PixiApplication from NS\_Prompt\_01, with a new Container for loading elements. ’ \- SETUP: ’ \- Create a progressBar Container with a Graphics object for the bar and Text for progress. ’ \- Add a tipText Text object with random selection from cs.json. ’ \- Use ParticleContainer for star twinkling (50 particles, random alpha 0.1-0.5). ’ \- ANIMATION: Update progressBar width and tipText via ticker, with a 0.5s fade-out transition to MainMenuScreen. ’ \- MAINMENUSCREEN: ’ \- USE: PixiApplication with three Containers (stars, nebula, UI). ’ \- SETUP: ’ \- starsContainer: 100 static sprites (4x4px, \#FFFFFF), zIndex \-2. ’ \- nebulaContainer: AnimatedSprite with 64-frame spritesheet, zIndex \-1, speed 0.1. ’ \- uiContainer: Buttons as Sprites, panel as Sprite, Text for labels, zIndex 1\. ’ \- ANIMATION: Parallax scroll (stars at 0.5x speed, nebula at 0.2x), button hover with Filter (BlurFilter, 2px radius). ’ \- OPTIMIZATION: Use PixiJS batching for stars, texture atlas for button states, and limit nebula frames to 30 FPS on mobile. | |
| ’ CODE IMPLEMENTATION ’ \- InitialLoadingScreen.tsx | |
| // client/src/components/InitialLoadingScreen.tsx | |
| import { useEffect } from 'react'; | |
| import { pixiApp, PixiApplication } from '../game/rendering/PixiApplication'; | |
| import { assetManager } from '../game/core/AssetManager'; | |
| import { SceneManager } from '../game/core/SceneManager'; | |
| import { Text, Graphics, Container, ParticleContainer } from 'pixi.js'; | |
| import i18n from '../i18n'; | |
| const InitialLoadingScreen \= () \=\> { | |
| useEffect(() \=\> { | |
| const assets \= \[ | |
| "screens/loading\_background", | |
| "ui/buttons/menu\_button\_base", | |
| "audio/loading\_theme" | |
| \]; | |
| const loadingContainer \= new Container(); | |
| pixiApp.addToStage(loadingContainer); | |
| // Background | |
| const bg \= new PIXI.Sprite(assetManager.getAsset("screens/loading\_background")\!); | |
| loadingContainer.addChild(bg); | |
| // Progress Bar | |
| const progressBarBg \= new Graphics() | |
| .beginFill(0x333333) | |
| .drawRect(240, 460, 800, 40\) | |
| .endFill(); | |
| const progressBar \= new Graphics() | |
| .beginFill(0xFFD700) | |
| .drawRect(240, 460, 0, 40); | |
| loadingContainer.addChild(progressBarBg, progressBar); | |
| // Text | |
| const progressText \= new Text("Načítání: 0%", { | |
| fontFamily: 'pixelart\_default', | |
| fontSize: 16, | |
| fill: 0xFFFFFF, | |
| stroke: 0x3388ff, | |
| strokeThickness: 1 | |
| }); | |
| progressText.anchor.set(0.5); | |
| progressText.x \= 640; | |
| progressText.y \= 520; | |
| const tipText \= new Text(i18n.t('loading.tip\_1\_cz'), { | |
| fontFamily: 'pixelart\_default', | |
| fontSize: 12, | |
| fill: 0xCCCCCC | |
| }); | |
| tipText.anchor.set(0.5); | |
| tipText.x \= 640; | |
| tipText.y \= 560; | |
| loadingContainer.addChild(progressText, tipText); | |
| // Stars | |
| const stars \= new ParticleContainer(50, { | |
| position: true, | |
| alpha: true | |
| }); | |
| for (let i \= 0; i \< 50; i++) { | |
| const star \= new PIXI.Sprite(PIXI.Texture.WHITE); | |
| star.width \= star.height \= 4; | |
| star.x \= Math.random() \* 1280; | |
| star.y \= Math.random() \* 720; | |
| star.alpha \= 0.1 \+ Math.random() \* 0.4; | |
| stars.addChild(star); | |
| } | |
| loadingContainer.addChild(stars); | |
| // Loading Logic | |
| assetManager.loadAssets(assets).then(() \=\> { | |
| pixiApp.getApp().ticker.add(() \=\> { | |
| const progress \= assetManager.getProgress(); | |
| progressBar.width \= 800 \* progress; | |
| progressText.text \= \`Načítání: ${Math.round(progress \* 100)}%\`; | |
| if (progress \=== 1\) { | |
| pixiApp.getApp().ticker.removeAllListeners(); | |
| SceneManager.transitionTo("MainMenuScreen"); | |
| } | |
| }); | |
| }); | |
| return () \=\> { | |
| loadingContainer.destroy({ children: true }); | |
| }; | |
| }, \[\]); | |
| return ; | |
| }; | |
| export default InitialLoadingScreen; | |
| ’ \- MainMenuScreen.tsx | |
| // client/src/components/MainMenuScreen.tsx | |
| import { useEffect } from 'react'; | |
| import { pixiApp } from '../game/rendering/PixiApplication'; | |
| import { assetManager } from '../game/core/AssetManager'; | |
| import { SceneManager } from '../game/core/SceneManager'; | |
| import { Container, Sprite, Text, AnimatedSprite, BlurFilter } from 'pixi.js'; | |
| import i18n from '../i18n'; | |
| const MainMenuScreen \= () \=\> { | |
| useEffect(() \=\> { | |
| const menuContainer \= new Container(); | |
| pixiApp.addToStage(menuContainer); | |
| // Background Layers | |
| const starsContainer \= new Container(); | |
| for (let i \= 0; i \< 100; i++) { | |
| const star \= new Sprite(PIXI.Texture.WHITE); | |
| star.width \= star.height \= 4; | |
| star.x \= Math.random() \* 1280; | |
| star.y \= Math.random() \* 720; | |
| starsContainer.addChild(star); | |
| } | |
| starsContainer.zIndex \= \-2; | |
| const nebulaContainer \= new AnimatedSprite(\[ | |
| assetManager.getAsset("screens/mainmenu\_background")\!.clone(), | |
| // Assume 64-frame spritesheet | |
| \]); | |
| nebulaContainer.animationSpeed \= 0.1; | |
| nebulaContainer.play(); | |
| nebulaContainer.zIndex \= \-1; | |
| menuContainer.addChild(starsContainer, nebulaContainer); | |
| // UI Elements | |
| const buttons \= \[ | |
| "newGame\_cz", "loadGame\_cz", "settings\_cz", "exit\_cz" | |
| \].map((key, index) \=\> { | |
| const button \= new Sprite(assetManager.getAsset("ui/buttons/menu\_button\_base")\!); | |
| button.x \= 640 \- 100; | |
| button.y \= 200 \+ index \* 60; | |
| const text \= new Text(i18n.t(\`mainMenu.${key}\`), { | |
| fontFamily: 'pixelart\_default', | |
| fontSize: 16, | |
| fill: 0xFFFFFF, | |
| stroke: 0x3388ff, | |
| strokeThickness: 1 | |
| }); | |
| text.anchor.set(0.5); | |
| text.x \= 100; | |
| button.addChild(text); | |
| button.interactive \= true; | |
| button.on('mouseover', () \=\> button.filters \= \[new BlurFilter(2)\]); | |
| button.on('mouseout', () \=\> button.filters \= \[\]); | |
| return button; | |
| }); | |
| menuContainer.addChild(...buttons); | |
| // Parallax and Animation | |
| pixiApp.getApp().ticker.add((delta) \=\> { | |
| starsContainer.x \-= 0.5 \* delta; | |
| nebulaContainer.x \-= 0.2 \* delta; | |
| if (starsContainer.x \< \-1280) starsContainer.x \= 0; | |
| if (nebulaContainer.x \< \-1280) nebulaContainer.x \= 0; | |
| }); | |
| return () \=\> { | |
| menuContainer.destroy({ children: true }); | |
| }; | |
| }, \[\]); | |
| return ; | |
| }; | |
| export default MainMenuScreen; | |
| ’ AI DIRECTIVES FOR TRAE ’ 1\. UPDATE PROJECT STRUCTURE: ’ \- Add client/src/components/InitialLoadingScreen.tsx and client/src/components/MainMenuScreen.tsx to the existing structure from NS\_Prompt\_01. ’ \- INSTRUCTION: Ensure TypeScript compiles and integrates with PixiCanvas.tsx. ’ 2\. GENERATE NEW ASSETS: ’ \- loading\_background.png: Follow design specs, export as PixiJS Texture. ’ \- mainmenu\_background.png: Create 64-frame spritesheet, optimize for PixiJS AnimatedSprite. ’ \- menu\_button\_base.png and menu\_button\_hover.png: Design 2-frame animation, PixiJS-compatible. ’ \- info\_panel\_base.png: Optional, follow design specs. ’ \- INSTRUCTION: Use Aseprite, verify with PixiJS Loader, and update asset\_manifest.json. ’ 3\. IMPLEMENT SCREENS: ’ \- Create InitialLoadingScreen.tsx with the provided code, testing progress and transition. ’ \- Create MainMenuScreen.tsx with the provided code, testing parallax and button interactivity. ’ \- INSTRUCTION: Run with Vite (npm run dev), confirm PixiJS rendering, and log transitions. ’ 4\. INTEGRATE LOCALIZATION: ’ \- Use i18next in both screens, rendering Text with cs.json keys. ’ \- INSTRUCTION: Test with i18n.t() calls, ensure proper font rendering. ’ 5\. OUTPUT REQUIREMENTS: ’ \- PROVIDE: List of new files and updated asset\_manifest.json. ’ \- PROVIDE: Screenshots of InitialLoadingScreen (at 50% and 100%) and MainMenuScreen (with hover effect). ’ \- PROVIDE: Confirm successful PixiJS rendering and transition from loading to menu. ’ \- PROVIDE: Full code of InitialLoadingScreen.tsx and MainMenuScreen.tsx with comments. ’ \- INSTRUCTION: Include logs and performance metrics (e.g., FPS) from PixiJS ticker. |