From 508283738257ea058815436ac53d591b8da37ef4 Mon Sep 17 00:00:00 2001 From: 6d486f49 Date: Mon, 28 Sep 2026 15:50:03 -0400 Subject: [PATCH] Vibe filters --- .../add-galaxy-map-and-ui-improvements.md | 232 ++++----------- ZeroSpace/ZeroSpace.Build/Program.cs | 80 +++-- .../Services/StarSystemDocStore.cs | 14 +- .../ZeroSpace.MapEditor/Views/MapDrawable.cs | 18 +- .../Views/MapEditorPage.xaml | 7 +- .../Views/MapEditorPage.xaml.cs | 3 +- ZeroSpace/ZeroSpace.Model/StarSystemData.cs | 52 +++- ZeroSpace/ZeroSpace.Model/StarSystems.g.cs | 278 ++++++++++++------ ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor | 252 +++++++++++++--- .../ZeroSpace.Web/Pages/Galaxy.razor.css | 93 +++--- ZeroSpace/ZeroSpace.Web/Pages/Home.razor | 6 +- .../Pages/StarSystemDetail.razor | 27 +- .../ZeroSpace.Web/Pages/StarSystemIndex.razor | 31 +- ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css | 24 ++ zs.docs/.obsidian/types.json | 4 +- zs.docs/StarSystem/Andus Reach.md | 3 +- zs.docs/StarSystem/Aquila Rift.md | 3 +- zs.docs/StarSystem/Artemis Grotto.md | 3 +- zs.docs/StarSystem/Ashes of Revenge.md | 3 +- zs.docs/StarSystem/Astral Haven.md | 3 +- zs.docs/StarSystem/Aurora Vale.md | 3 +- zs.docs/StarSystem/Beta Clarity.md | 3 +- zs.docs/StarSystem/Burning Cairn.md | 3 +- zs.docs/StarSystem/Calm Belt.md | 3 +- .../StarSystem/Celestial Forge Stronghold.md | 3 +- zs.docs/StarSystem/Corundum Dream.md | 3 +- zs.docs/StarSystem/Crimson Expanse.md | 3 +- zs.docs/StarSystem/Crystallic Genesis.md | 3 +- zs.docs/StarSystem/Devil's Trident.md | 3 +- zs.docs/StarSystem/Draconis Reach.md | 3 +- zs.docs/StarSystem/Ebony Keep.md | 3 +- zs.docs/StarSystem/Eden's Heart.md | 3 +- zs.docs/StarSystem/Endless Wastes.md | 3 +- zs.docs/StarSystem/Epsilon Arc.md | 3 +- zs.docs/StarSystem/Erebus Deep.md | 3 +- zs.docs/StarSystem/Forge of Souls.md | 3 +- zs.docs/StarSystem/Galactic Zenith.md | 3 +- zs.docs/StarSystem/Gamma Swarm.md | 3 +- zs.docs/StarSystem/Gelid Storm.md | 3 +- zs.docs/StarSystem/Glittering Hope.md | 3 +- zs.docs/StarSystem/Heigen Stream.md | 3 +- zs.docs/StarSystem/Helios Crossing.md | 3 +- zs.docs/StarSystem/Hyperion Nebula.md | 3 +- zs.docs/StarSystem/Idal's Word.md | 3 +- zs.docs/StarSystem/Igneous Cascade.md | 3 +- .../StarSystem/Inferno's Edge Stronghold.md | 3 +- zs.docs/StarSystem/Iotan Tears.md | 3 +- zs.docs/StarSystem/Ivory Fields.md | 3 +- zs.docs/StarSystem/Ivory Steel.md | 3 +- zs.docs/StarSystem/Lambda Gateway.md | 3 +- zs.docs/StarSystem/Leviathan's Wake.md | 3 +- zs.docs/StarSystem/Lights Bounty.md | 3 +- zs.docs/StarSystem/Magenta Bloom.md | 3 +- zs.docs/StarSystem/Magnetic Folly.md | 3 +- zs.docs/StarSystem/Mercury Forge.md | 3 +- zs.docs/StarSystem/Nebulon Drift.md | 3 +- zs.docs/StarSystem/Neera's Gift.md | 3 +- zs.docs/StarSystem/Negative Ion.md | 3 +- zs.docs/StarSystem/Nexus Prime.md | 3 +- zs.docs/StarSystem/Noxious Energy.md | 3 +- zs.docs/StarSystem/Nucleic Redux.md | 3 +- zs.docs/StarSystem/Obsidian Palace.md | 3 +- zs.docs/StarSystem/Occam's Abode.md | 3 +- zs.docs/StarSystem/Orion's Gate.md | 3 +- zs.docs/StarSystem/Pleiades Cluster.md | 3 +- zs.docs/StarSystem/Proxima Prime.md | 3 +- zs.docs/StarSystem/Quartzalian Berth.md | 3 +- zs.docs/StarSystem/Raider's Reef.md | 3 +- zs.docs/StarSystem/Scarlett Ire.md | 3 +- zs.docs/StarSystem/Shattered Light.md | 3 +- zs.docs/StarSystem/Sigma Vortex.md | 3 +- zs.docs/StarSystem/Solaris Reach.md | 3 +- zs.docs/StarSystem/Starless Sky.md | 3 +- zs.docs/StarSystem/Steel Depths.md | 3 +- zs.docs/StarSystem/Stellar Forge.md | 3 +- zs.docs/StarSystem/Stronghold Atlas.md | 3 +- zs.docs/StarSystem/Stronghold Cronus.md | 3 +- zs.docs/StarSystem/Stronghold Leo.md | 3 +- .../StarSystem/Stronghold Nova Centauri.md | 4 +- zs.docs/StarSystem/Stronghold Orion.md | 3 +- zs.docs/StarSystem/Stronghold Tau.md | 3 +- zs.docs/StarSystem/Stronghold Vega.md | 3 +- zs.docs/StarSystem/Sullen Dwarf.md | 3 +- zs.docs/StarSystem/Tartarus Expanse.md | 3 +- zs.docs/StarSystem/The Crucible.md | 3 +- zs.docs/StarSystem/The High Council.md | 3 +- zs.docs/StarSystem/The Undergrowth.md | 3 +- zs.docs/StarSystem/Titan's Fall.md | 3 +- zs.docs/StarSystem/Typhon's Call.md | 3 +- zs.docs/StarSystem/Uanachian Whirlpool.md | 3 +- zs.docs/StarSystem/Void Star.md | 3 +- zs.docs/StarSystem/Vulcan's Breath.md | 3 +- zs.docs/StarSystem/Wild's End.md | 3 +- zs.docs/StarSystem/Xenon Abyss.md | 3 +- zs.docs/StarSystem/Xenthic Fields.md | 3 +- zs.docs/StarSystem/Yellow Dawn.md | 3 +- zs.docs/StarSystem/Zeta Horizon.md | 3 +- zs.docs/_StarSystems.base | 5 +- 98 files changed, 860 insertions(+), 513 deletions(-) diff --git a/.junie/plans/add-galaxy-map-and-ui-improvements.md b/.junie/plans/add-galaxy-map-and-ui-improvements.md index ca55775..230df71 100644 --- a/.junie/plans/add-galaxy-map-and-ui-improvements.md +++ b/.junie/plans/add-galaxy-map-and-ui-improvements.md @@ -2,181 +2,71 @@ sessionId: session-260928-131223-1ueu --- -# Requirements - -### Overview & Goals -The 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. - -### Scope -#### In Scope -- **Galaxy Page (`/galaxy`)**: Interactive star map rendering all 78 star systems from `StarSystems.All` with their actual `(X, Y)` spatial coordinates. -- **Connection Lines**: Drawing connection paths between systems based on `StarSystemData.ConnectedSystems`. -- **Hover Information Popup**: Dynamic floating tooltip/card showing system name, kind, occupation buffs, system masteries, yield bonuses, and connections. -- **Click Navigation**: Direct navigation from galaxy nodes to `/StarSystem/{Id}` details page. -- **UI & Aesthetic Overhaul**: - - Updating `NavMenu.razor` with a dedicated Galaxy Map entry and modern styling. - - Revamping `Home.razor` from default template placeholder to an engaging sci-fi overview dashboard. - - Enhancing theme colors, badge indicators, cards, and typography in `app.css`. - -#### Out of Scope -- Backend database schema modifications (uses existing static/generated `ZeroSpace.Model` records). -- Real-time multiplayer synchronization or editing capabilities (map editing remains in `ZeroSpace.MapEditor`). - -### User Stories -- **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. -- **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. -- **As a user**, I want to click on a star system node on the map to navigate directly to its detailed page. -- **As a user**, I want a sleek, cohesive dark sci-fi web interface with clear navigation and a functional dashboard. - -### Functional Requirements -1. **Galaxy Map Rendering**: - - The map shall render an SVG canvas encompassing coordinate bounds (0 to 1000) preserving aspect ratio. - - Lines must connect every system with its entries in `ConnectedSystems` without duplicate edge rendering. - - Planetary nodes shall be rendered as circular nodes styled and colored according to `StarSystemKind`: - - *Homeworld*: Vibrant Emerald / Green (`#43a047` / `#10b981`) - - *Core*: Vibrant Amber / Orange (`#fb8c00` / `#f59e0b`) - - *Side*: Vibrant Sky Blue / Cyan (`#4a90d9` / `#38bdf8`) -2. **Hover Information Popup**: - - Hovering over a planet node triggers a floating information popup. - - Popup content includes: - - Planet Name & Kind badge - - Occupation buff (e.g. `+50 Starting Hexite`) - - System mastery name (if present) - - Higher yield indicators (Influence, Credits, Energy, Items) - - Count and list of connected star systems - - Tooltip disappears smoothly when the cursor leaves the node. -3. **Map Interaction**: - - Hovering a node highlights the node (glow ring) and highlights incoming/outgoing connection lines. - - Clicking a node navigates to `/StarSystem/{Id}`. -4. **App Navigation & Home Page**: - - `NavMenu.razor` includes a link to `/galaxy` labeled "Galaxy Map" with an appropriate icon. - - `Home.razor` provides quick-launch cards to Galaxy Map, Star Systems, Masteries, and Units with summary counts. - -### Non-Functional Requirements -- **Performance**: Instant SVG rendering with zero lag for 78 nodes and ~200 connections; pure CSS/Blazor event handling with no external heavy mapping dependencies. -- **Responsiveness**: Map scales smoothly inside its container across desktop and mobile screens. -- **Accessibility**: Clear contrast ratios, readable tooltips, and keyboard/touch support for node selection. - -# Technical Design - -### Current Implementation -- `ZeroSpace.Model.StarSystems.All`: Contains all 78 star systems with records containing `Id`, `Name`, `Kind`, `X`, `Y`, `ConnectedSystems`, `OccupationBuff`, `SystemMastery`, and yield flags. -- `ZeroSpace.Web`: Blazor WebAssembly application using Bootstrap 5 and Telerik Blazor components. -- Existing pages include `StarSystemIndex.razor`, `StarSystemDetail.razor`, `SystemMasteryIndex.razor`, and `Units.razor`. -- `Home.razor` is currently a default "Hello World" template placeholder. - -### Key Decisions -1. **SVG Vector Graphics for Galaxy Map**: - - *Chosen Approach*: Native Blazor SVG rendering (``). - - *Rationale*: SVG offers vector sharpness at all display resolutions, reactive Blazor event binding (`@onmouseenter`, `@onmouseleave`, `@onclick`), lightweight footprint, and zero external JS dependency overhead. -2. **Dynamic Overlay Tooltip**: - - *Chosen Approach*: HTML/CSS floating glassmorphism card positioned relative to the hovered node/cursor with smooth fade transition. - - *Rationale*: Allows rich formatting (badges, icons, multi-column yields) and styling that matches the dark sci-fi aesthetic better than native SVG `` or basic browser tooltips. -3. **Connection Line Optimization**: - - *Chosen Approach*: Precompute unique undirected edge pairs `(From, To)` on initialization. - - *Rationale*: Prevents duplicate overlapping lines between reciprocal connections `A -> B` and `B -> A`, improving render performance and visual clarity. - -### Proposed Architecture & Flow - -```mermaid -graph TD - Nav[NavMenu.razor] -->|Navigate /galaxy| GalaxyPage[Galaxy.razor] - Home[Home.razor] -->|Quick Link| GalaxyPage - - subgraph Galaxy.razor - Model[StarSystems.All] --> EdgeBuilder[Connection Deduplicator] - EdgeBuilder --> SVGCanvas[SVG Canvas ViewBox 0 0 1000 1000] - Model --> NodeRenderer[Node Elements & Coordinates] - - SVGCanvas --> Lines[SVG Lines: Connection Paths] - SVGCanvas --> Nodes[SVG Circles & Glows: Planets] - - Nodes -->|@onmouseenter| HoverState[Hovered System State] - Nodes -->|@onclick| NavAction[NavigationManager.NavigateTo /StarSystem/Id] - - HoverState --> Popup[Floating Planet Info Card] - end -``` - -### Components & File Structure -- **New Files**: - - `ZeroSpace.Web/Pages/Galaxy.razor`: Main Galaxy map page containing the SVG viewport, control header, node filtering/legend, and popup overlay. - - `ZeroSpace.Web/Pages/Galaxy.razor.css`: Scoped styles for map container, SVG glow effects, connection styling, and animated hover card. -- **Modified Files**: - - `ZeroSpace.Web/Layout/NavMenu.razor`: Add "Galaxy Map" item with navigation icon. - - `ZeroSpace.Web/Pages/Home.razor`: Overhaul into a sci-fi hub with hero banner and feature cards. - - `ZeroSpace.Web/wwwroot/css/app.css`: Dark sci-fi styling improvements, badge colors, and glassmorphism utilities. - -### Data Models / Contracts -```csharp -public sealed record ConnectionEdge( - StarSystemData From, - StarSystemData To); - -public sealed class GalaxyMapState -{ - public IReadOnlyList Systems { get; set; } = StarSystems.All; - public IReadOnlyList Connections { get; set; } = []; - public StarSystemData? HoveredSystem { get; set; } - public double TooltipX { get; set; } - public double TooltipY { get; set; } - public string? SelectedKindFilter { get; set; } -} -``` - -### Risks & Mitigations -- **Tooltip overflow near screen edges**: Clamp calculated tooltip coordinates within container boundaries to prevent viewport clipping. -- **Coordinate overlap on small screens**: Ensure viewBox preserves 1:1 aspect ratio (`preserveAspectRatio="xMidYMid meet"`) and allow zooming/scaling via standard CSS/viewport responsiveness. - -# Testing - -### Validation Approach -Verification will be performed through build checks, component markup analysis, and interactive scenario validation in the Blazor runtime. - -### Key Scenarios -1. **Galaxy Map Rendering**: - - Verify that all 78 star systems are rendered at their designated `(X, Y)` positions. - - Verify that connection lines accurately connect linked systems without orphaned or broken lines. - - Verify node color coding matches `StarSystemKind` (Homeworld, Core, Side). -2. **Hover Information Popup**: - - Hovering over a planet node displays the popup immediately. - - Verify all fields render accurately (Occupation buff, System mastery, Yields, Connected systems list). - - Moving the mouse away dismisses the popup cleanly. -3. **Navigation & Interactivity**: - - Clicking a node navigates to the corresponding `/StarSystem/{Id}` route. - - Navigating via the "Galaxy Map" link in `NavMenu.razor` loads the page properly. -4. **UI & Responsiveness**: - - Verify `Home.razor` renders updated dashboard cards and quick links. - - Verify dark-theme sci-fi visual style across desktop and smaller browser viewports. - -### Regressions & Edge Cases -- Star systems without occupation buffs or masteries display clean fallback dashes (`—`) without layout breaks. -- Rapid mouse movements over adjacent nodes update the hover popup smoothly without flickering. - # Delivery Steps -### ✓ Step 1: Implement Galaxy Map SVG rendering and connection lines -A functional SVG-based Galaxy Map page (`Galaxy.razor`) renders all star system nodes and connection lines based on their world coordinates. +### ✓ Step 1: Implementation + +History processor: During the current session, you have worked on the following ``. +The `` usually continues or extends your previous work. Consider all `` and `` together. +If ``/`` blocks are present, treat them as additional user-provided context that may contain important clarifications about the task. + +## 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. + + +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 (``) in SVG with dark-steel futuristic line styling (`#3a4d6b`, opacity, glow).\n- Render planetary nodes (`` / ``) 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 (``).\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 `` 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 Systems { get; set; } = StarSystems.All;\n public IReadOnlyList 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" + + +## Orchestrated Plan Task +implement according to the plan + + +### 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. -- Create `ZeroSpace.Web/Pages/Galaxy.razor` with route `@page "/galaxy"` and navigation title. -- Parse `StarSystems.All` to extract unique undirected connection pairs and planetary node coordinate models. -- Render connection lines (``) in SVG with dark-steel futuristic line styling (`#3a4d6b`, opacity, glow). -- Render planetary nodes (`` / ``) positioned at `(system.X, system.Y)` using color coding based on `StarSystemKind` (Homeworld = green, Core = orange/amber, Side = blue/cyan). -- Add SVG viewBox scaling (e.g. `0 0 1000 1000`) and responsive container layout to ensure crisp vector rendering on all screen sizes. -- Implement click handlers on nodes to navigate directly to `/StarSystem/{Id}`. +### 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. -### ✓ Step 2: Implement dynamic planetary hover popup and interactive highlights -Interactive hover tooltip overlays display rich star system details when the user hovers over any planet node on the galaxy map. +### 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. -- Design a floating glassmorphism hover card component / markup positioned dynamically relative to the active node or cursor. -- Display star system metadata: system name, `Kind` badge, `OccupationBuff`, `SystemMastery` link, and `Yield` bonuses (Influence, Credits, Energy, Items). -- Add highlight visual effects when hovering over a node (pulsing glow radius, highlight connected lines). -- Handle edge cases such as tooltip boundary clamping near viewport edges and debounced mouse enter/leave events. +### Notes +- No PR/branch workflow was used because the user asked only for implementation, not for a dedicated branch or pull request. + + +## 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. -### ✓ Step 3: Refine global UI, navigation menu, and dashboard landing page -ZeroSpace.Web navigation, Home landing dashboard, and global UI styles are updated to match a polished sci-fi space aesthetic. +For now, assign all planets to The Eden Accord. Use the owner colour in the galaxy map. -- Update `ZeroSpace.Web/Layout/NavMenu.razor` with a dedicated "Galaxy Map" navigation link with custom star/galaxy icon. -- 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. -- Enhance `ZeroSpace.Web/wwwroot/css/app.css` and component stylesheets with refined dark-theme colors, glassmorphism cards, glowing badges, and smooth hover transitions. -- Verify solution builds cleanly and all navigation flows between the Galaxy map, system details, and other pages work seamlessly. \ No newline at end of file +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 + + +tool name: submit +tool parameters: + + + + +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 + + +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. \ No newline at end of file diff --git a/ZeroSpace/ZeroSpace.Build/Program.cs b/ZeroSpace/ZeroSpace.Build/Program.cs index 69a3dff..5845c72 100644 --- a/ZeroSpace/ZeroSpace.Build/Program.cs +++ b/ZeroSpace/ZeroSpace.Build/Program.cs @@ -529,31 +529,58 @@ static bool TryReadStarSystem( { system = default!; - var kind = string.Empty; - var kindCount = 0; - if (IsTrue(frontMatter, "isSideSystem")) + string category; + if (frontMatter.TryGetValue("systemCategory", out var categoryVal) && !string.IsNullOrWhiteSpace(categoryVal.Scalar)) { - kind = "Side"; - kindCount++; + var catStr = categoryVal.Scalar.Trim(); + if (catStr.Equals("Homeworld System", StringComparison.OrdinalIgnoreCase) || catStr.Equals("Homeworld", StringComparison.OrdinalIgnoreCase)) + { + category = "HomeworldSystem"; + } + else if (catStr.Equals("Core System", StringComparison.OrdinalIgnoreCase) || catStr.Equals("Core", StringComparison.OrdinalIgnoreCase)) + { + category = "CoreSystem"; + } + else if (catStr.Equals("Side System", StringComparison.OrdinalIgnoreCase) || catStr.Equals("Side", StringComparison.OrdinalIgnoreCase)) + { + category = "SideSystem"; + } + else + { + reason = $"unknown systemCategory '{catStr}'"; + return false; + } + } + else + { + var kindCount = 0; + category = string.Empty; + if (IsTrue(frontMatter, "isSideSystem")) + { + category = "SideSystem"; + kindCount++; + } + + if (IsTrue(frontMatter, "isHomeworldSystem")) + { + category = "HomeworldSystem"; + kindCount++; + } + + if (IsTrue(frontMatter, "isCoreSystem")) + { + category = "CoreSystem"; + kindCount++; + } + + if (kindCount != 1) + { + reason = "missing or invalid systemCategory"; + return false; + } } - if (IsTrue(frontMatter, "isHomeworldSystem")) - { - kind = "Homeworld"; - kindCount++; - } - - if (IsTrue(frontMatter, "isCoreSystem")) - { - kind = "Core"; - kindCount++; - } - - if (kindCount != 1) - { - reason = "expected exactly one system kind flag"; - return false; - } + var owner = TryGetOptionalString(frontMatter, "owner") ?? "The Eden Accord"; var name = Path.GetFileNameWithoutExtension(path); var connectedSystems = frontMatter.TryGetValue("connectedSystems", out var connectedValue) @@ -563,7 +590,8 @@ static bool TryReadStarSystem( system = new StarSystemSource( ToUniqueIdentifier(name, usedIds), name, - kind, + category, + owner, IsTrue(frontMatter, "higherInfluenceYield"), IsTrue(frontMatter, "higherCreditYield"), IsTrue(frontMatter, "higherEnergyYield"), @@ -660,7 +688,8 @@ static string GenerateStarSystems(IReadOnlyList systems) builder.AppendLine($" public static readonly StarSystemData {system.Id} = new("); builder.AppendLine($" Id: {Literal(system.Id)},"); builder.AppendLine($" Name: {Literal(system.Name)},"); - builder.AppendLine($" Kind: StarSystemKind.{system.Kind},"); + builder.AppendLine($" SystemCategory: StarSystemCategory.{system.SystemCategory},"); + builder.AppendLine($" Owner: {Literal(system.Owner)},"); builder.AppendLine($" HigherInfluenceYield: {BoolLiteral(system.HigherInfluenceYield)},"); builder.AppendLine($" HigherCreditYield: {BoolLiteral(system.HigherCreditYield)},"); builder.AppendLine($" HigherEnergyYield: {BoolLiteral(system.HigherEnergyYield)},"); @@ -784,7 +813,8 @@ internal sealed record UnitSource( internal sealed record StarSystemSource( string Id, string Name, - string Kind, + string SystemCategory, + string Owner, bool HigherInfluenceYield, bool HigherCreditYield, bool HigherEnergyYield, diff --git a/ZeroSpace/ZeroSpace.MapEditor/Services/StarSystemDocStore.cs b/ZeroSpace/ZeroSpace.MapEditor/Services/StarSystemDocStore.cs index b00514f..72501c9 100644 --- a/ZeroSpace/ZeroSpace.MapEditor/Services/StarSystemDocStore.cs +++ b/ZeroSpace/ZeroSpace.MapEditor/Services/StarSystemDocStore.cs @@ -11,7 +11,8 @@ public sealed class StarSystemDoc { public string FilePath { get; set; } = string.Empty; public string Name { get; set; } = string.Empty; - public string Kind { get; set; } = string.Empty; + public string SystemCategory { get; set; } = string.Empty; + public string Owner { get; set; } = string.Empty; public bool HigherInfluenceYield { get; set; } public bool HigherCreditYield { get; set; } public bool HigherEnergyYield { get; set; } @@ -119,13 +120,18 @@ public static class StarSystemDocStore { FilePath = path, Name = Path.GetFileNameWithoutExtension(path), + SystemCategory = scalars.TryGetValue("systemCategory", out var categoryVal) ? categoryVal : string.Empty, + Owner = scalars.TryGetValue("owner", out var ownerVal) ? ownerVal : "The Eden Accord", OccupationBuff = scalars.TryGetValue("occupationBuff", out var buff) ? buff : null, SystemMastery = scalars.TryGetValue("systemMastery", out var mastery) ? mastery : null, }; - if (IsTrue(scalars, "isSideSystem")) doc.Kind = "Side"; - if (IsTrue(scalars, "isHomeworldSystem")) doc.Kind = "Homeworld"; - if (IsTrue(scalars, "isCoreSystem")) doc.Kind = "Core"; + if (string.IsNullOrEmpty(doc.SystemCategory)) + { + if (IsTrue(scalars, "isSideSystem")) doc.SystemCategory = "Side System"; + if (IsTrue(scalars, "isHomeworldSystem")) doc.SystemCategory = "Homeworld System"; + if (IsTrue(scalars, "isCoreSystem")) doc.SystemCategory = "Core System"; + } doc.HigherInfluenceYield = IsTrue(scalars, "higherInfluenceYield"); doc.HigherCreditYield = IsTrue(scalars, "higherCreditYield"); diff --git a/ZeroSpace/ZeroSpace.MapEditor/Views/MapDrawable.cs b/ZeroSpace/ZeroSpace.MapEditor/Views/MapDrawable.cs index 26cba9d..1add6d8 100644 --- a/ZeroSpace/ZeroSpace.MapEditor/Views/MapDrawable.cs +++ b/ZeroSpace/ZeroSpace.MapEditor/Views/MapDrawable.cs @@ -57,7 +57,7 @@ public sealed class MapDrawable : IDrawable var center = ToScreen(node.X, node.Y); var radius = (float)(NodeRadius * Scale); - canvas.FillColor = ColorForKind(node.Doc.Kind); + canvas.FillColor = ColorForOwner(node.Doc.Owner); canvas.FillCircle(center, radius); if (node.IsHighlighted) @@ -85,11 +85,19 @@ public sealed class MapDrawable : IDrawable } } - public static Color ColorForKind(string kind) => kind switch + public static Color ColorForOwner(string owner) => owner switch { - "Homeworld" => Color.FromArgb("#43a047"), - "Core" => Color.FromArgb("#fb8c00"), - "Side" => Color.FromArgb("#4a90d9"), + "The Eden Accord" => Color.FromArgb("#10b981"), + "The Keeper Council" => Color.FromArgb("#38bdf8"), + "The Obsidian Order" => Color.FromArgb("#ef4444"), + _ => Color.FromArgb("#9aa5b1"), + }; + + public static Color ColorForCategory(string category) => category switch + { + "Homeworld System" or "Homeworld" => Color.FromArgb("#43a047"), + "Core System" or "Core" => Color.FromArgb("#fb8c00"), + "Side System" or "Side" => Color.FromArgb("#4a90d9"), _ => Color.FromArgb("#9aa5b1"), }; } diff --git a/ZeroSpace/ZeroSpace.MapEditor/Views/MapEditorPage.xaml b/ZeroSpace/ZeroSpace.MapEditor/Views/MapEditorPage.xaml index d08411f..e9a14a0 100644 --- a/ZeroSpace/ZeroSpace.MapEditor/Views/MapEditorPage.xaml +++ b/ZeroSpace/ZeroSpace.MapEditor/Views/MapEditorPage.xaml @@ -37,8 +37,11 @@