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