72 lines
16 KiB
Markdown
72 lines
16 KiB
Markdown
---
|
|
sessionId: session-260928-131223-1ueu
|
|
---
|
|
|
|
# Delivery Steps
|
|
|
|
### ✓ Step 1: Implementation
|
|
<plan_session_history>
|
|
History processor: During the current session, you have worked on the following `<previous_issue>`.
|
|
The `<issue_description>` usually continues or extends your previous work. Consider all `<previous_issue>` and `<issue_description>` together.
|
|
If `<assistant_question>`/`<user_answer>` blocks are present, treat them as additional user-provided context that may contain important clarifications about the task.
|
|
<previous_issue>
|
|
## Plan Task
|
|
Improve the UI of the ZeroSpace.Web app.
|
|
Add a galaxy page that shows all the planetary nodes laid out by there x and y positions, and with their connections being drawn with a line. Make it so you can hover over the planet to see a hover popup of it's information.
|
|
</previous_issue>
|
|
<previous_issue_solution>
|
|
tool name: submit
|
|
tool parameters:
|
|
- "delivery_plan"=[{"name":"Implement Galaxy Map SVG rendering and connection lines","description":"A functional SVG-based Galaxy Map page (`Galaxy.razor`) renders all star system nodes and connection lines based on their world coordinates.\n\n- Create `ZeroSpace.Web/Pages/Galaxy.razor` with route `@page \"/galaxy\"` and navigation title.\n- Parse `StarSystems.All` to extract unique undirected connection pairs and planetary node coordinate models.\n- Render connection lines (`<line>`) in SVG with dark-steel futuristic line styling (`#3a4d6b`, opacity, glow).\n- Render planetary nodes (`<circle>` / `<g>`) positioned at `(system.X, system.Y)` using color coding based on `StarSystemKind` (Homeworld = green, Core = orange/amber, Side = blue/cyan).\n- Add SVG viewBox scaling (e.g. `0 0 1000 1000`) and responsive container layout to ensure crisp vector rendering on all screen sizes.\n- Implement click handlers on nodes to navigate directly to `/StarSystem/{Id}`."},{"name":"Implement dynamic planetary hover popup and interactive highlights","description":"Interactive hover tooltip overlays display rich star system details when the user hovers over any planet node on the galaxy map.\n\n- Design a floating glassmorphism hover card component / markup positioned dynamically relative to the active node or cursor.\n- Display star system metadata: system name, `Kind` badge, `OccupationBuff`, `SystemMastery` link, and `Yield` bonuses (Influence, Credits, Energy, Items).\n- Add highlight visual effects when hovering over a node (pulsing glow radius, highlight connected lines).\n- Handle edge cases such as tooltip boundary clamping near viewport edges and debounced mouse enter/leave events."},{"name":"Refine global UI, navigation menu, and dashboard landing page","description":"ZeroSpace.Web navigation, Home landing dashboard, and global UI styles are updated to match a polished sci-fi space aesthetic.\n\n- Update `ZeroSpace.Web/Layout/NavMenu.razor` with a dedicated \"Galaxy Map\" navigation link with custom star/galaxy icon.\n- Transform `ZeroSpace.Web/Pages/Home.razor` into an overview hub showcasing quick links and summary stats for Galaxy Map, Star Systems, System Masteries, and Units.\n- Enhance `ZeroSpace.Web/wwwroot/css/app.css` and component stylesheets with refined dark-theme colors, glassmorphism cards, glowing badges, and smooth hover transitions.\n- Verify solution builds cleanly and all navigation flows between the Galaxy map, system details, and other pages work seamlessly."}],
|
|
- "proposal"=[{"name":"Requirements","content":"### Overview & Goals\nThe goal of this initiative is to elevate the UI and user experience of `ZeroSpace.Web` and introduce an interactive **Galaxy Map** page. The Galaxy Map will visually display all planetary nodes positioned by their coordinates `(X, Y)`, render connection lines between interconnected systems, and provide instant hover information popups detailing yields, occupation buffs, masteries, and faction classifications.\n\n### Scope\n#### In Scope\n- **Galaxy Page (`/galaxy`)**: Interactive star map rendering all 78 star systems from `StarSystems.All` with their actual `(X, Y)` spatial coordinates.\n- **Connection Lines**: Drawing connection paths between systems based on `StarSystemData.ConnectedSystems`.\n- **Hover Information Popup**: Dynamic floating tooltip/card showing system name, kind, occupation buffs, system masteries, yield bonuses, and connections.\n- **Click Navigation**: Direct navigation from galaxy nodes to `/StarSystem/{Id}` details page.\n- **UI & Aesthetic Overhaul**:\n - Updating `NavMenu.razor` with a dedicated Galaxy Map entry and modern styling.\n - Revamping `Home.razor` from default template placeholder to an engaging sci-fi overview dashboard.\n - Enhancing theme colors, badge indicators, cards, and typography in `app.css`.\n\n#### Out of Scope\n- Backend database schema modifications (uses existing static/generated `ZeroSpace.Model` records).\n- Real-time multiplayer synchronization or editing capabilities (map editing remains in `ZeroSpace.MapEditor`).\n\n### User Stories\n- **As a player / wiki reader**, I want to view a visual galaxy map with all planetary nodes and connections so that I can understand system layout and routes across the galaxy.\n- **As a player**, I want to hover over any planetary node to immediately see its occupation buff, yields, and system mastery without having to navigate to separate pages.\n- **As a user**, I want to click on a star system node on the map to navigate directly to its detailed page.\n- **As a user**, I want a sleek, cohesive dark sci-fi web interface with clear navigation and a functional dashboard.\n\n### Functional Requirements\n1. **Galaxy Map Rendering**:\n - The map shall render an SVG canvas encompassing coordinate bounds (0 to 1000) preserving aspect ratio.\n - Lines must connect every system with its entries in `ConnectedSystems` without duplicate edge rendering.\n - Planetary nodes shall be rendered as circular nodes styled and colored according to `StarSystemKind`:\n - *Homeworld*: Vibrant Emerald / Green (`#43a047` / `#10b981`)\n - *Core*: Vibrant Amber / Orange (`#fb8c00` / `#f59e0b`)\n - *Side*: Vibrant Sky Blue / Cyan (`#4a90d9` / `#38bdf8`)\n2. **Hover Information Popup**:\n - Hovering over a planet node triggers a floating information popup.\n - Popup content includes:\n - Planet Name & Kind badge\n - Occupation buff (e.g. `+50 Starting Hexite`)\n - System mastery name (if present)\n - Higher yield indicators (Influence, Credits, Energy, Items)\n - Count and list of connected star systems\n - Tooltip disappears smoothly when the cursor leaves the node.\n3. **Map Interaction**:\n - Hovering a node highlights the node (glow ring) and highlights incoming/outgoing connection lines.\n - Clicking a node navigates to `/StarSystem/{Id}`.\n4. **App Navigation & Home Page**:\n - `NavMenu.razor` includes a link to `/galaxy` labeled \"Galaxy Map\" with an appropriate icon.\n - `Home.razor` provides quick-launch cards to Galaxy Map, Star Systems, Masteries, and Units with summary counts.\n\n### Non-Functional Requirements\n- **Performance**: Instant SVG rendering with zero lag for 78 nodes and ~200 connections; pure CSS/Blazor event handling with no external heavy mapping dependencies.\n- **Responsiveness**: Map scales smoothly inside its container across desktop and mobile screens.\n- **Accessibility**: Clear contrast ratios, readable tooltips, and keyboard/touch support for node selection."},{"name":"Technical Design","content":"### Current Implementation\n- `ZeroSpace.Model.StarSystems.All`: Contains all 78 star systems with records containing `Id`, `Name`, `Kind`, `X`, `Y`, `ConnectedSystems`, `OccupationBuff`, `SystemMastery`, and yield flags.\n- `ZeroSpace.Web`: Blazor WebAssembly application using Bootstrap 5 and Telerik Blazor components.\n- Existing pages include `StarSystemIndex.razor`, `StarSystemDetail.razor`, `SystemMasteryIndex.razor`, and `Units.razor`.\n- `Home.razor` is currently a default \"Hello World\" template placeholder.\n\n### Key Decisions\n1. **SVG Vector Graphics for Galaxy Map**:\n - *Chosen Approach*: Native Blazor SVG rendering (`<svg viewBox=\"0 0 1000 1000\">`).\n - *Rationale*: SVG offers vector sharpness at all display resolutions, reactive Blazor event binding (`@onmouseenter`, `@onmouseleave`, `@onclick`), lightweight footprint, and zero external JS dependency overhead.\n2. **Dynamic Overlay Tooltip**:\n - *Chosen Approach*: HTML/CSS floating glassmorphism card positioned relative to the hovered node/cursor with smooth fade transition.\n - *Rationale*: Allows rich formatting (badges, icons, multi-column yields) and styling that matches the dark sci-fi aesthetic better than native SVG `<title>` or basic browser tooltips.\n3. **Connection Line Optimization**:\n - *Chosen Approach*: Precompute unique undirected edge pairs `(From, To)` on initialization.\n - *Rationale*: Prevents duplicate overlapping lines between reciprocal connections `A -> B` and `B -> A`, improving render performance and visual clarity.\n\n### Proposed Architecture & Flow\n\n```mermaid\ngraph TD\n Nav[NavMenu.razor] -->|Navigate /galaxy| GalaxyPage[Galaxy.razor]\n Home[Home.razor] -->|Quick Link| GalaxyPage\n \n subgraph Galaxy.razor\n Model[StarSystems.All] --> EdgeBuilder[Connection Deduplicator]\n EdgeBuilder --> SVGCanvas[SVG Canvas ViewBox 0 0 1000 1000]\n Model --> NodeRenderer[Node Elements & Coordinates]\n \n SVGCanvas --> Lines[SVG Lines: Connection Paths]\n SVGCanvas --> Nodes[SVG Circles & Glows: Planets]\n \n Nodes -->|@onmouseenter| HoverState[Hovered System State]\n Nodes -->|@onclick| NavAction[NavigationManager.NavigateTo /StarSystem/Id]\n \n HoverState --> Popup[Floating Planet Info Card]\n end\n```\n\n### Components & File Structure\n- **New Files**:\n - `ZeroSpace.Web/Pages/Galaxy.razor`: Main Galaxy map page containing the SVG viewport, control header, node filtering/legend, and popup overlay.\n - `ZeroSpace.Web/Pages/Galaxy.razor.css`: Scoped styles for map container, SVG glow effects, connection styling, and animated hover card.\n- **Modified Files**:\n - `ZeroSpace.Web/Layout/NavMenu.razor`: Add \"Galaxy Map\" item with navigation icon.\n - `ZeroSpace.Web/Pages/Home.razor`: Overhaul into a sci-fi hub with hero banner and feature cards.\n - `ZeroSpace.Web/wwwroot/css/app.css`: Dark sci-fi styling improvements, badge colors, and glassmorphism utilities.\n\n### Data Models / Contracts\n```csharp\npublic sealed record ConnectionEdge(\n StarSystemData From,\n StarSystemData To);\n\npublic sealed class GalaxyMapState\n{\n public IReadOnlyList<StarSystemData> Systems { get; set; } = StarSystems.All;\n public IReadOnlyList<ConnectionEdge> Connections { get; set; } = [];\n public StarSystemData? HoveredSystem { get; set; }\n public double TooltipX { get; set; }\n public double TooltipY { get; set; }\n public string? SelectedKindFilter { get; set; }\n}\n```\n\n### Risks & Mitigations\n- **Tooltip overflow near screen edges**: Clamp calculated tooltip coordinates within container boundaries to prevent viewport clipping.\n- **Coordinate overlap on small screens**: Ensure viewBox preserves 1:1 aspect ratio (`preserveAspectRatio=\"xMidYMid meet\"`) and allow zooming/scaling via standard CSS/viewport responsiveness."},{"content":"### Validation Approach\nVerification will be performed through build checks, component markup analysis, and interactive scenario validation in the Blazor runtime.\n\n### Key Scenarios\n1. **Galaxy Map Rendering**:\n - Verify that all 78 star systems are rendered at their designated `(X, Y)` positions.\n - Verify that connection lines accurately connect linked systems without orphaned or broken lines.\n - Verify node color coding matches `StarSystemKind` (Homeworld, Core, Side).\n2. **Hover Information Popup**:\n - Hovering over a planet node displays the popup immediately.\n - Verify all fields render accurately (Occupation buff, System mastery, Yields, Connected systems list).\n - Moving the mouse away dismisses the popup cleanly.\n3. **Navigation & Interactivity**:\n - Clicking a node navigates to the corresponding `/StarSystem/{Id}` route.\n - Navigating via the \"Galaxy Map\" link in `NavMenu.razor` loads the page properly.\n4. **UI & Responsiveness**:\n - Verify `Home.razor` renders updated dashboard cards and quick links.\n - Verify dark-theme sci-fi visual style across desktop and smaller browser viewports.\n\n### Regressions & Edge Cases\n- Star systems without occupation buffs or masteries display clean fallback dashes (`—`) without layout breaks.\n- Rapid mouse movements over adjacent nodes update the hover popup smoothly without flickering.","name":"Testing"}],
|
|
- "name"="add-galaxy-map-and-ui-improvements"
|
|
</previous_issue_solution>
|
|
<previous_issue>
|
|
## Orchestrated Plan Task
|
|
implement according to the plan
|
|
</previous_issue>
|
|
<previous_issue_solution>
|
|
### Summary
|
|
- Implemented the planned ZeroSpace.Web UI overhaul, including a new interactive `/galaxy` SVG map with clickable star systems, hyperlane connections, and rich hover details.
|
|
- Completed the sci-fi navigation/home-page refresh and verified the web project builds cleanly after all changes.
|
|
|
|
### Changes
|
|
- Added `Galaxy.razor` and scoped styles to render all star systems from `StarSystems.All`, deduplicate/display connection lines, support click-through to `/StarSystem/{Id}`, and keep SVG numeric output locale-safe.
|
|
- Added interactive hover/focus behavior on the galaxy map with a floating info card, connected-line/node highlighting, keyboard-friendly node interaction, and tooltip edge clamping.
|
|
- Updated `NavMenu`, `Home`, and shared CSS/layout styling to add the Galaxy Map entry, create a dashboard landing page with live counts/quick links, and apply a cohesive dark sci-fi visual theme.
|
|
|
|
### Verification
|
|
- Reviewed each delivery step and resolved the only blocking issue found (culture-sensitive SVG number formatting) plus a dashboard count inconsistency.
|
|
- `dotnet build ZeroSpace.Web/ZeroSpace.Web.csproj --no-restore` and solution-level builds passed with 0 warnings and 0 errors.
|
|
|
|
### Notes
|
|
- No PR/branch workflow was used because the user asked only for implementation, not for a dedicated branch or pull request.
|
|
</previous_issue_solution>
|
|
<previous_issue>
|
|
## Plan Task
|
|
Add a new frontmatter data point to the markdown files that indicates the ownership of a planet system. The owner can be The Keeper Council, The Eden Accord, and The Obsidian Order. These factions are represented with the colour blue, green and red.
|
|
|
|
For now, assign all planets to The Eden Accord. Use the owner colour in the galaxy map.
|
|
|
|
Add filters on the galaxy map to filter highlighted planets by mastery, special yields, or system type.
|
|
|
|
Speaking of system types. Instead of the markdown being something like isHomeworldSystem: true, instead be systemCategory: Homeworld System, systemCategory: Side System, or systemCategory: Core System. Have the rest of the codebase reflect that data change
|
|
</previous_issue>
|
|
<previous_issue_solution>
|
|
tool name: submit
|
|
tool parameters:
|
|
</previous_issue_solution>
|
|
</plan_session_history>
|
|
|
|
<plan_task>
|
|
Add a new frontmatter data point to the markdown files that indicates the ownership of a planet system. The owner can be The Keeper Council, The Eden Accord, and The Obsidian Order. These factions are represented with the colour blue, green and red.
|
|
|
|
For now, assign all planets to The Eden Accord. Use the owner colour in the galaxy map.
|
|
|
|
Add filters on the galaxy map to filter highlighted planets by mastery, special yields, or system type.
|
|
|
|
Speaking of system types. Instead of the markdown being something like isHomeworldSystem: true, instead be systemCategory: Homeworld System, systemCategory: Side System, or systemCategory: Core System. Have the rest of the codebase reflect that data change
|
|
</plan_task>
|
|
|
|
This task has no prior planning phase. Before implementation, analyze the task and codebase, define acceptance criteria if not explicitly provided in the task description, and plan your approach.
|
|
The Reviewer must independently define its own acceptance criteria and will verify them. |