From ab07b38c98a973e65e37f9e24d558f612e1b89b7 Mon Sep 17 00:00:00 2001 From: 6d486f49 Date: Mon, 28 Sep 2026 14:17:59 -0400 Subject: [PATCH] Vibe galaxy map --- .../add-galaxy-map-and-ui-improvements.md | 182 ++++++++ .../ZeroSpace.Web/Layout/MainLayout.razor.css | 28 +- ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor | 26 +- .../ZeroSpace.Web/Layout/NavMenu.razor.css | 92 ++++- ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor | 390 ++++++++++++++++++ .../ZeroSpace.Web/Pages/Galaxy.razor.css | 390 ++++++++++++++++++ ZeroSpace/ZeroSpace.Web/Pages/Home.razor | 306 +++++++++++++- ZeroSpace/ZeroSpace.Web/Pages/Home.razor.css | 182 ++++++++ .../Pages/StarSystemDetail.razor | 13 +- .../ZeroSpace.Web/Pages/StarSystemIndex.razor | 45 +- .../Pages/SystemMasteryIndex.razor | 12 +- ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css | 247 ++++++++++- 12 files changed, 1844 insertions(+), 69 deletions(-) create mode 100644 .junie/plans/add-galaxy-map-and-ui-improvements.md create mode 100644 ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor create mode 100644 ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor.css create mode 100644 ZeroSpace/ZeroSpace.Web/Pages/Home.razor.css diff --git a/.junie/plans/add-galaxy-map-and-ui-improvements.md b/.junie/plans/add-galaxy-map-and-ui-improvements.md new file mode 100644 index 0000000..ca55775 --- /dev/null +++ b/.junie/plans/add-galaxy-map-and-ui-improvements.md @@ -0,0 +1,182 @@ +--- +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. + +- 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}`. + +### ✓ 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. + +- 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. + +### ✓ 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. + +- 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 diff --git a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css b/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css index cd870cb..2103f55 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css +++ b/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css @@ -2,21 +2,32 @@ position: relative; display: flex; flex-direction: column; + min-height: 100vh; + background-color: #080c14; + background-image: + radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.04) 0%, transparent 40%), + radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 40%); } main { flex: 1; + min-width: 0; } .sidebar { - background-image: linear-gradient(180deg, #0d1117 0%, #161b22 70%); + background-color: #0b0f19; + background-image: linear-gradient(180deg, #0d131f 0%, #080c14 100%); + border-right: 1px solid rgba(56, 189, 248, 0.12); + box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35); + z-index: 100; } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; + background-color: rgba(13, 19, 31, 0.8); + backdrop-filter: blur(8px); + border-bottom: 1px solid rgba(56, 189, 248, 0.15); justify-content: flex-end; - height: 3.5rem; + height: 3.75rem; display: flex; align-items: center; } @@ -25,10 +36,12 @@ main { white-space: nowrap; margin-left: 1.5rem; text-decoration: none; + color: #38bdf8; } .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { text-decoration: underline; + color: #7dd3fc; } .top-row ::deep a:first-child { @@ -56,6 +69,7 @@ main { height: 100vh; position: sticky; top: 0; + flex-shrink: 0; } .top-row { @@ -70,8 +84,10 @@ main { width: 0; } - .top-row, article { + article { padding-left: 2rem !important; - padding-right: 1.5rem !important; + padding-right: 2rem !important; + padding-top: 1.5rem !important; + padding-bottom: 2.5rem !important; } } diff --git a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor index da4dede..1a6b694 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor +++ b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor @@ -1,6 +1,9 @@ 
- ZeroSpace + + ✦ + ZeroSpace + @@ -11,22 +14,33 @@ diff --git a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css index 04764da..f6e22ae 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css +++ b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css @@ -1,14 +1,44 @@ .navbar-toggler { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(56, 189, 248, 0.1); + border: 1px solid rgba(56, 189, 248, 0.25); } .top-row { - min-height: 3.5rem; - background-color: rgba(0,0,0,0.4); + min-height: 3.75rem; + background: linear-gradient(180deg, rgba(13, 19, 31, 0.95) 0%, rgba(9, 13, 22, 0.95) 100%); + border-bottom: 1px solid rgba(56, 189, 248, 0.15); } .navbar-brand { - font-size: 1.1rem; + font-size: 1.15rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #f0f6fc; +} + +.brand-glow { + color: #38bdf8; + text-shadow: 0 0 10px rgba(56, 189, 248, 0.8); + font-size: 1.25rem; +} + +.brand-text { + background: linear-gradient(135deg, #ffffff 30%, #38bdf8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.badge-nav-live { + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.2rem 0.45rem; + border-radius: 4px; + background: rgba(56, 189, 248, 0.2); + color: #38bdf8; + border: 1px solid rgba(56, 189, 248, 0.4); + box-shadow: 0 0 6px rgba(56, 189, 248, 0.3); } .bi { @@ -18,24 +48,34 @@ height: 1.25rem; margin-right: 0.75rem; top: -1px; - background-size: cover; + background-size: contain; + background-repeat: no-repeat; + background-position: center; } .bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); } -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); +.bi-galaxy-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2338bdf8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%2338bdf8'/%3E%3Ccircle cx='2.5' cy='4' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='13.5' cy='5' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='4' cy='13' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2338bdf8'/%3E%3Cpath stroke='%2338bdf8' stroke-width='1.2' stroke-linecap='round' d='M2.5 4L8 8m0 0l5.5-3M8 8l-4 5m4-5l4 4' opacity='.65'/%3E%3C/svg%3E"); } -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); +.bi-star-systems-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f59e0b' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23f59e0b'/%3E%3Cpath stroke='%23f59e0b' stroke-width='1.2' stroke-linecap='round' d='M8 1v2.5M8 12.5V15M1 8h2.5M12.5 8H15M3 3l1.8 1.8M11.2 11.2l1.8 1.8M3 13l1.8-1.8M11.2 4.8l1.8-1.8' opacity='.75'/%3E%3C/svg%3E"); +} + +.bi-masteries-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a78bfa' viewBox='0 0 16 16'%3E%3Cpath d='M8 0.5l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.6 5-.7L8 0.5z' fill='%23a78bfa'/%3E%3C/svg%3E"); +} + +.bi-units-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2310b981' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%2310b981' stroke-width='1.3' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2310b981'/%3E%3Cpath stroke='%2310b981' stroke-width='1.3' d='M8 0v4M8 12v4M0 8h4M12 8h4'/%3E%3C/svg%3E"); } .nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; + font-size: 0.92rem; + padding-bottom: 0.4rem; } .nav-item:first-of-type { @@ -47,22 +87,30 @@ } .nav-item ::deep a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; + color: #94a3b8; + border-radius: 8px; + height: 2.75rem; display: flex; align-items: center; - line-height: 3rem; + line-height: 2.75rem; + padding: 0 0.85rem; + font-weight: 500; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid transparent; } .nav-item ::deep a.active { - background-color: rgba(88, 166, 255, 0.2); - color: #58a6ff; + background: linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.05) 100%); + color: #38bdf8; + border-color: rgba(56, 189, 248, 0.35); + box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.12), 0 0 8px rgba(56, 189, 248, 0.1); + font-weight: 600; } -.nav-item ::deep a:hover { - background-color: rgba(88, 166, 255, 0.1); - color: #58a6ff; +.nav-item ::deep a:hover:not(.active) { + background-color: rgba(56, 189, 248, 0.08); + color: #e2e8f0; + border-color: rgba(56, 189, 248, 0.15); } @media (min-width: 641px) { @@ -77,7 +125,7 @@ .nav-scrollable { /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); + height: calc(100vh - 3.75rem); overflow-y: auto; } } diff --git a/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor new file mode 100644 index 0000000..6a9ee88 --- /dev/null +++ b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor @@ -0,0 +1,390 @@ +@page "/galaxy" +@using System.Globalization +@inject NavigationManager Navigation + +Galaxy Map + +
+
+
+

Galaxy Map

+

Interactive tactical star chart displaying all planetary systems and + hyperlane routes.

+
+
+
+
+ + Homeworld +
+
+ + Core +
+
+ + Side +
+
+
+ @_systems.Count Systems + • + @_connections.Count Hyperlanes +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @foreach (var edge in _connections) + { + var isHighlighted = _hoveredSystem is not null && + (string.Equals(edge.From.Id, _hoveredSystem.Id, StringComparison.OrdinalIgnoreCase) || + string.Equals(edge.To.Id, _hoveredSystem.Id, StringComparison.OrdinalIgnoreCase)); + var isDimmed = _hoveredSystem is not null && !isHighlighted; + var lineClass = isHighlighted ? "hyperlane-line hyperlane-highlighted" : + isDimmed ? "hyperlane-line hyperlane-dimmed" : "hyperlane-line"; + + } + + + + + @foreach (var system in _systems) + { + var kindClass = GetKindCssClass(system.Kind); + var radius = GetNodeRadius(system.Kind); + var isHovered = _hoveredSystem is not null && string.Equals(system.Id, _hoveredSystem.Id, StringComparison.OrdinalIgnoreCase); + var isNeighbor = _hoveredConnectedIds.Contains(system.Id); + var isDimmed = _hoveredSystem is not null && !isHovered && !isNeighbor; + var stateClass = isHovered ? "is-hovered" : + isNeighbor ? "is-neighbor" : + isDimmed ? "is-dimmed" : ""; + + + + + + + + + + + @if (system.Kind != StarSystemKind.Side) + { + + } + + + @system.Name + + } + + + + + @if (_hoveredSystem is not null) + { + var kindClass = GetKindCssClass(_hoveredSystem.Kind); + var higherYields = GetHigherYields(_hoveredSystem); + + } +
+
+ +@code { + + public sealed record ConnectionEdge(StarSystemData From, StarSystemData To); + + private IReadOnlyList _systems = []; + private IReadOnlyList _connections = []; + private StarSystemData? _hoveredSystem; + private readonly HashSet _hoveredConnectedIds = new(StringComparer.OrdinalIgnoreCase); + + protected override void OnInitialized() + { + _systems = StarSystems.All; + _connections = BuildUniqueConnections(_systems); + } + + private static IReadOnlyList BuildUniqueConnections(IReadOnlyList allSystems) + { + var edges = new List(); + var seen = new HashSet(StringComparer.OrdinalIgnoreCase); + + foreach (var system in allSystems) + { + foreach (var targetName in system.ConnectedSystems) + { + if (!StarSystems.ByName.TryGetValue(targetName, out var target)) + { + continue; + } + + var edgeKey = string.Compare(system.Id, target.Id, StringComparison.OrdinalIgnoreCase) < 0 + ? $"{system.Id}::{target.Id}" + : $"{target.Id}::{system.Id}"; + + if (seen.Add(edgeKey)) + { + edges.Add(new ConnectionEdge(system, target)); + } + } + } + + return edges; + } + + private void SetHoveredSystem(StarSystemData? system) + { + _hoveredSystem = system; + _hoveredConnectedIds.Clear(); + if (system is not null) + { + foreach (var connName in system.ConnectedSystems) + { + if (StarSystems.ByName.TryGetValue(connName, out var target)) + { + _hoveredConnectedIds.Add(target.Id); + } + } + } + } + + private void OnNodeMouseEnter(StarSystemData system) + { + SetHoveredSystem(system); + } + + private void OnNodeMouseLeave(StarSystemData system) + { + if (_hoveredSystem?.Id == system.Id) + { + SetHoveredSystem(null); + } + } + + private void OnNodeFocus(StarSystemData system) + { + SetHoveredSystem(system); + } + + private void OnNodeBlur() + { + SetHoveredSystem(null); + } + + private void OnContainerMouseLeave() + { + SetHoveredSystem(null); + } + + private void OnNodeKeyDown(KeyboardEventArgs e, string systemId) + { + if (e.Key is "Enter" or " ") + { + OnNodeClick(systemId); + } + } + + private void OnNodeClick(string systemId) + { + Navigation.NavigateTo($"/StarSystem/{systemId}"); + } + + private static IReadOnlyList GetHigherYields(StarSystemData system) + { + var yields = new List(4); + if (system.HigherInfluenceYield) yields.Add("Influence"); + if (system.HigherCreditYield) yields.Add("Credits"); + if (system.HigherEnergyYield) yields.Add("Energy"); + if (system.HigherChanceForItems) yields.Add("Items"); + return yields; + } + + private static string GetTooltipStyle(StarSystemData system) + { + var posX = system.X / 10.0; + var posY = system.Y / 10.0; + + string transform; + + if (posX > 65.0) + { + if (posY < 20.0) + { + transform = "translate(calc(-100% - 16px), 0%)"; + } + else if (posY > 80.0) + { + transform = "translate(calc(-100% - 16px), -100%)"; + } + else + { + transform = "translate(calc(-100% - 16px), -50%)"; + } + } + else if (posX < 35.0) + { + if (posY < 20.0) + { + transform = "translate(16px, 0%)"; + } + else if (posY > 80.0) + { + transform = "translate(16px, -100%)"; + } + else + { + transform = "translate(16px, -50%)"; + } + } + else + { + if (posY > 50.0) + { + transform = "translate(-50%, calc(-100% - 16px))"; + } + else + { + transform = "translate(-50%, 16px)"; + } + } + + return $"left: {SvgNumber(posX)}%; top: {SvgNumber(posY)}%; transform: {transform};"; + } + + private static string GetKindCssClass(StarSystemKind kind) => kind switch + { + StarSystemKind.Homeworld => "kind-homeworld", + StarSystemKind.Core => "kind-core", + _ => "kind-side" + }; + + private static double GetNodeRadius(StarSystemKind kind) => kind switch + { + StarSystemKind.Homeworld => 7.0, + StarSystemKind.Core => 6.0, + _ => 4.5 + }; + + private static string SvgNumber(double value) => value.ToString(CultureInfo.InvariantCulture); + +} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor.css b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor.css new file mode 100644 index 0000000..5c339cb --- /dev/null +++ b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor.css @@ -0,0 +1,390 @@ +.galaxy-page { + width: 100%; + margin-bottom: 2rem; +} + +.map-legend, +.map-stats { + background: rgba(22, 27, 34, 0.85); + border: 1px solid rgba(56, 189, 248, 0.15); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.legend-dot { + width: 10px; + height: 10px; + border-radius: 50%; + display: inline-block; +} + +.dot-homeworld { + background-color: #10b981; + box-shadow: 0 0 8px rgba(16, 185, 129, 0.7); +} + +.dot-core { + background-color: #f59e0b; + box-shadow: 0 0 8px rgba(245, 158, 11, 0.7); +} + +.dot-side { + background-color: #38bdf8; + box-shadow: 0 0 8px rgba(56, 189, 248, 0.7); +} + +.legend-text { + font-size: 0.85rem; + color: #c9d1d9; +} + +.galaxy-map-container { + position: relative; + width: 100%; + max-width: 1100px; + margin: 0 auto; + border-radius: 12px; + overflow: hidden; + background: #080b10; + border: 1px solid rgba(56, 189, 248, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.05); +} + +.galaxy-svg { + display: block; + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + user-select: none; +} + +.map-bg { + fill: #080b10; +} + +/* Hyperlanes (Connection Lines) */ +.hyperlane-line { + stroke: #3a4d6b; + stroke-width: 1.5; + stroke-opacity: 0.65; + stroke-linecap: round; + transition: stroke 0.2s ease, stroke-opacity 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease; +} + +.hyperlane-line.hyperlane-highlighted { + stroke: #38bdf8; + stroke-width: 2.75; + stroke-opacity: 1; + filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.85)); +} + +.hyperlane-line.hyperlane-dimmed { + stroke-opacity: 0.15; +} + +/* Node Groups */ +.node-group { + cursor: pointer; + outline: none; + transition: opacity 0.2s ease, transform 0.2s ease; +} + +.node-circle { + stroke-width: 1.5; + transition: all 0.2s ease; +} + +.node-aura { + opacity: 0.35; + transform-origin: 0 0; + transition: opacity 0.2s ease, r 0.2s ease; +} + +.node-core-dot { + fill: #ffffff; + opacity: 0.9; + pointer-events: none; +} + +.node-label { + fill: #8b949e; + font-size: 8.5px; + font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + font-weight: 500; + pointer-events: none; + letter-spacing: 0.2px; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); + transition: fill 0.2s ease, font-weight 0.2s ease, font-size 0.2s ease; +} + +/* Kinds */ +.kind-homeworld .node-circle { + fill: #10b981; + stroke: #34d399; +} + +.kind-homeworld .node-aura { + fill: #10b981; + filter: url(#glow-homeworld); +} + +.kind-core .node-circle { + fill: #f59e0b; + stroke: #fbbf24; +} + +.kind-core .node-aura { + fill: #f59e0b; + filter: url(#glow-core); +} + +.kind-side .node-circle { + fill: #38bdf8; + stroke: #7dd3fc; +} + +.kind-side .node-aura { + fill: #38bdf8; + filter: url(#glow-side); +} + +/* Node State Styles */ +.node-group.is-hovered .node-circle, +.node-group:focus-visible .node-circle { + stroke: #ffffff; + stroke-width: 2.75; + filter: brightness(1.35) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); +} + +.node-group.is-hovered .node-aura, +.node-group:focus-visible .node-aura { + opacity: 0.95; + animation: pulseAura 1.4s infinite alternate ease-in-out; +} + +.node-group.is-hovered .node-label, +.node-group:focus-visible .node-label { + fill: #ffffff; + font-weight: 700; + font-size: 9.5px; + text-shadow: 0 0 6px rgba(56, 189, 248, 0.9), 0 2px 4px rgba(0, 0, 0, 1); +} + +.node-group.is-neighbor .node-aura { + opacity: 0.7; +} + +.node-group.is-neighbor .node-label { + fill: #f0f6fc; + font-weight: 600; +} + +.node-group.is-neighbor .node-circle { + stroke-width: 2; + filter: brightness(1.15); +} + +.node-group.is-dimmed { + opacity: 0.35; +} + +/* Pulse Aura Animation */ +@keyframes pulseAura { + 0% { + transform: scale(1); + opacity: 0.75; + } + 100% { + transform: scale(1.35); + opacity: 1; + } +} + +/* Floating Glassmorphism Hover Card */ +.planet-hover-card { + position: absolute; + z-index: 100; + min-width: 260px; + max-width: 310px; + padding: 14px 16px; + background: rgba(13, 17, 23, 0.94); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 10px; + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(56, 189, 248, 0.12); + border: 1px solid rgba(56, 189, 248, 0.35); + pointer-events: none; + animation: popupFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); + transition: transform 0.12s ease-out, left 0.12s ease-out, top 0.12s ease-out; +} + +@keyframes popupFadeIn { + from { + opacity: 0; + scale: 0.96; + } + to { + opacity: 1; + scale: 1; + } +} + +.system-kind-indicator { + width: 9px; + height: 9px; + border-radius: 50%; + display: inline-block; +} + +.system-title { + font-size: 1.05rem; + letter-spacing: 0.3px; +} + +.kind-badge { + font-size: 0.75rem; + font-weight: 600; + padding: 3px 8px; + border-radius: 6px; +} + +/* Kind Variant Themes for Hover Card */ +.planet-hover-card.kind-homeworld { + border-color: rgba(16, 185, 129, 0.45); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(16, 185, 129, 0.18); +} +.planet-hover-card.kind-homeworld .kind-badge { + background: rgba(16, 185, 129, 0.2); + color: #34d399; + border: 1px solid rgba(16, 185, 129, 0.4); +} +.planet-hover-card.kind-homeworld .system-kind-indicator { + background-color: #10b981; + box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); +} + +.planet-hover-card.kind-core { + border-color: rgba(245, 158, 11, 0.45); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 158, 11, 0.18); +} +.planet-hover-card.kind-core .kind-badge { + background: rgba(245, 158, 11, 0.2); + color: #fbbf24; + border: 1px solid rgba(245, 158, 11, 0.4); +} +.planet-hover-card.kind-core .system-kind-indicator { + background-color: #f59e0b; + box-shadow: 0 0 8px rgba(245, 158, 11, 0.8); +} + +.planet-hover-card.kind-side { + border-color: rgba(56, 189, 248, 0.45); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(56, 189, 248, 0.18); +} +.planet-hover-card.kind-side .kind-badge { + background: rgba(56, 189, 248, 0.2); + color: #7dd3fc; + border: 1px solid rgba(56, 189, 248, 0.4); +} +.planet-hover-card.kind-side .system-kind-indicator { + background-color: #38bdf8; + box-shadow: 0 0 8px rgba(56, 189, 248, 0.8); +} + +/* Card Details Grid */ +.card-details-grid { + display: flex; + flex-direction: column; + gap: 8px; +} + +.detail-row { + font-size: 0.82rem; +} + +.detail-label { + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.6px; + color: #8b949e; + margin-bottom: 2px; + display: block; +} + +.detail-value { + font-size: 0.85rem; + display: block; + line-height: 1.35; +} + +.text-buff { + color: #34d399; + font-weight: 600; +} + +.text-mastery { + color: #60a5fa; + font-weight: 600; +} + +/* Yield Badges */ +.yield-badges { + margin-top: 3px; +} + +.yield-badge { + font-size: 0.72rem; + font-weight: 600; + padding: 2px 7px; + border-radius: 4px; + display: inline-flex; + align-items: center; +} + +.yield-influence { + background: rgba(168, 85, 247, 0.18); + color: #c084fc; + border: 1px solid rgba(168, 85, 247, 0.4); +} + +.yield-credits { + background: rgba(234, 179, 8, 0.18); + color: #facc15; + border: 1px solid rgba(234, 179, 8, 0.4); +} + +.yield-energy { + background: rgba(6, 182, 212, 0.18); + color: #22d3ee; + border: 1px solid rgba(6, 182, 212, 0.4); +} + +.yield-items { + background: rgba(16, 185, 129, 0.18); + color: #34d399; + border: 1px solid rgba(16, 185, 129, 0.4); +} + +.yield-standard { + background: rgba(100, 116, 139, 0.15); + color: #94a3b8; + border: 1px solid rgba(100, 116, 139, 0.3); +} + +.connected-systems-list { + line-height: 1.4; + font-size: 0.76rem; + color: #8b949e; + word-break: break-word; +} + +.card-footer-hint { + margin-top: 4px; +} + +.hint-text { + color: #38bdf8; + font-weight: 500; + font-size: 0.72rem; + letter-spacing: 0.2px; +} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/Home.razor b/ZeroSpace/ZeroSpace.Web/Pages/Home.razor index dfcdf75..fc983d1 100644 --- a/ZeroSpace/ZeroSpace.Web/Pages/Home.razor +++ b/ZeroSpace/ZeroSpace.Web/Pages/Home.razor @@ -1,7 +1,305 @@ -@page "/" +@page "/" +@using ZeroSpace.Model -Home +ZeroSpace Database & Command Hub -

Hello, world!

+
+ +
+
+
+
+ + SYSTEM ONLINE + + ZEROSPACE INTEL ARCHIVE v1.0 +
+

ZeroSpace Database & Command Hub

+

+ Comprehensive tactical star map diagnostics, planetary sector dossiers, doctrine masteries, and unit combat intelligence. +

+
+ + + + + + + + + + Launch Galaxy Map + + + + + + + Browse Systems + + + + + + + + Unit Intel + +
+
+
-Welcome to your new app. \ No newline at end of file + +
+
+
+
+ + + + +
+
+
@totalSystemsCount
+
Star Systems
+
+
+
+
+
+
+ + + +
+
+
@totalHyperlanesCount+
+
Hyperlanes
+
+
+
+
+
+
+ + + +
+
+
@totalMasteriesCount
+
Masteries
+
+
+
+
+
+
+ + + + + +
+
+
@totalUnitsCount
+
Combat Units
+
+
+
+
+ + +
+

Database Modules

+
+
+ +
+ +
+
+
+
+ + + + + + + + +
+ INTERACTIVE SVG +
+

Interactive Galaxy Map

+

+ Visual SVG star chart rendering all 78 star systems and hyperlane connection networks. Features instant hover intel cards, planetary buff diagnostics, and direct dossier navigation. +

+
+ @homeworldsCount Homeworlds + @coreCount Core + @sideCount Side +
+ + Launch Galaxy Map + → + +
+
+ + +
+
+
+
+ + + + +
+ 78 DOSSIERS +
+

Star Systems Directory

+

+ Complete catalog of planetary systems. Review sector classifications, starting hexite buffs, system masteries, item drop chances, and resource yield bonuses. +

+
+ @buffsCount Occupation Buffs + @higherYieldCount Yield Modifiers +
+ + Browse Star Systems + → + +
+
+ + +
+
+
+
+ + + +
+ @totalMasteriesCount DOCTRINES +
+

System Masteries

+

+ Strategic progression doctrines offering tiered battle bonuses, economic multipliers, and global faction enhancements with system availability matrices. +

+
+ Includes 3-Tier Multiplier Progression per Doctrine +
+ + Explore Masteries + → + +
+
+ + +
+
+
+
+ + + + + +
+ @totalUnitsCount COMBAT UNITS +
+

Unit Roster & Intel

+

+ Tactical combat unit encyclopedia with detailed Hexite/Flux cost breakdowns, health, DPS-per-cost efficiency metrics, armor classes, and faction hotkeys. +

+
+ Interactive Sortable & Filterable Data Grid +
+ + View Unit Intel + → + +
+
+
+ + +
+

+ ◈ + Galaxy System Classification +

+
+
+
+
+ Homeworlds + @homeworldsCount systems +
+ Primary faction command centers with critical strategic value. +
+
+
+
+
+ Core Systems + @coreCount systems +
+ High-density central systems connecting major hyperlane corridors. +
+
+
+
+
+ Side Sectors + @sideCount systems +
+ Outer rim border systems offering specialized tactical yields. +
+
+
+
+
+ +@code { + private int totalSystemsCount; + private int homeworldsCount; + private int coreCount; + private int sideCount; + private int totalHyperlanesCount; + private int totalMasteriesCount; + private int totalUnitsCount; + private int buffsCount; + private int higherYieldCount; + + protected override void OnInitialized() + { + totalSystemsCount = StarSystems.All.Count; + homeworldsCount = StarSystems.All.Count(s => s.Kind == StarSystemKind.Homeworld); + coreCount = StarSystems.All.Count(s => s.Kind == StarSystemKind.Core); + sideCount = StarSystems.All.Count(s => s.Kind == StarSystemKind.Side); + + // Calculate unique hyperlanes + var edges = new HashSet(StringComparer.OrdinalIgnoreCase); + foreach (var s in StarSystems.All) + { + foreach (var connected in s.ConnectedSystems) + { + var edgeKey = string.Compare(s.Id, connected, StringComparison.OrdinalIgnoreCase) < 0 + ? $"{s.Id}--{connected}" + : $"{connected}--{s.Id}"; + edges.Add(edgeKey); + } + } + totalHyperlanesCount = edges.Count; + + totalMasteriesCount = SystemMasteries.All.Count; + totalUnitsCount = ZeroSpace.Model.Units.All.Count; + buffsCount = StarSystems.All.Count(s => !string.IsNullOrWhiteSpace(s.OccupationBuff)); + higherYieldCount = StarSystems.All.Count(s => s.HigherCreditYield || s.HigherInfluenceYield || s.HigherEnergyYield || s.HigherChanceForItems); + } +} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/Home.razor.css b/ZeroSpace/ZeroSpace.Web/Pages/Home.razor.css new file mode 100644 index 0000000..48aa1e1 --- /dev/null +++ b/ZeroSpace/ZeroSpace.Web/Pages/Home.razor.css @@ -0,0 +1,182 @@ +.home-container { + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.hero-glow-orb { + position: absolute; + width: 350px; + height: 350px; + top: -100px; + right: -50px; + background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(16, 185, 129, 0.05) 50%, transparent 70%); + border-radius: 50%; + filter: blur(40px); + pointer-events: none; +} + +.hero-title { + background: linear-gradient(135deg, #ffffff 40%, #7dd3fc 80%, #38bdf8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: -0.02em; +} + +.hero-subtitle { + max-width: 750px; + line-height: 1.6; +} + +.hero-status-pulse { + display: inline-block; + width: 7px; + height: 7px; + background-color: #38bdf8; + border-radius: 50%; + box-shadow: 0 0 6px #38bdf8; + animation: statusPulse 2s infinite; +} + +@keyframes statusPulse { + 0% { + transform: scale(0.9); + box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); + } + 70% { + transform: scale(1.1); + box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); + } + 100% { + transform: scale(0.9); + box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); + } +} + +.stat-card { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.stat-card:hover { + transform: translateY(-2px); +} + +.stat-icon-wrapper { + width: 44px; + height: 44px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.icon-cyan { + background: rgba(56, 189, 248, 0.15); + color: #38bdf8; + border: 1px solid rgba(56, 189, 248, 0.3); + box-shadow: 0 0 10px rgba(56, 189, 248, 0.2); +} + +.icon-emerald { + background: rgba(16, 185, 129, 0.15); + color: #10b981; + border: 1px solid rgba(16, 185, 129, 0.3); + box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); +} + +.icon-amber { + background: rgba(245, 158, 11, 0.15); + color: #f59e0b; + border: 1px solid rgba(245, 158, 11, 0.3); + box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); +} + +.icon-purple { + background: rgba(167, 139, 250, 0.15); + color: #a78bfa; + border: 1px solid rgba(167, 139, 250, 0.3); + box-shadow: 0 0 10px rgba(167, 139, 250, 0.2); +} + +.feature-card { + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +.feature-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.4); +} + +.feature-icon-badge { + width: 52px; + height: 52px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; +} + +.feature-meta { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.arrow-icon { + font-size: 1.1rem; + line-height: 1; + transition: transform 0.2s ease; +} + +.feature-card:hover .arrow-icon { + transform: translateX(4px); +} + +.classification-box { + background: rgba(0, 0, 0, 0.35); + border: 1px solid rgba(255, 255, 255, 0.08); + transition: all 0.2s ease; +} + +.classification-box:hover { + background: rgba(0, 0, 0, 0.5); + transform: translateY(-2px); +} + +.border-homeworld { + border-left: 3px solid #10b981; +} + +.border-core { + border-left: 3px solid #f59e0b; +} + +.border-side { + border-left: 3px solid #38bdf8; +} + +.text-cyan { + color: #38bdf8; +} + +.text-emerald { + color: #10b981; +} + +.text-amber { + color: #f59e0b; +} + +.text-purple { + color: #a78bfa; +} + +.text-dim { + color: #64748b; +} + +.fs-7 { + font-size: 0.78rem; +} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/StarSystemDetail.razor b/ZeroSpace/ZeroSpace.Web/Pages/StarSystemDetail.razor index 08b7cf4..f367115 100644 --- a/ZeroSpace/ZeroSpace.Web/Pages/StarSystemDetail.razor +++ b/ZeroSpace/ZeroSpace.Web/Pages/StarSystemDetail.razor @@ -12,8 +12,11 @@ else {

@system.Name

- @system.Kind + @system.Kind
+ + View on Map +
@@ -83,6 +86,14 @@ else system = StarSystems.All.FirstOrDefault(s => s.Id.Equals(Id, StringComparison.OrdinalIgnoreCase)); } + private static string KindBadgeClass(StarSystemKind kind) => kind switch + { + StarSystemKind.Homeworld => "badge-homeworld", + StarSystemKind.Core => "badge-core", + StarSystemKind.Side => "badge-side", + _ => "badge-side" + }; + private static string YieldText(StarSystemData s) { var yields = new List(); diff --git a/ZeroSpace/ZeroSpace.Web/Pages/StarSystemIndex.razor b/ZeroSpace/ZeroSpace.Web/Pages/StarSystemIndex.razor index bc4b7f6..7ef3afc 100644 --- a/ZeroSpace/ZeroSpace.Web/Pages/StarSystemIndex.razor +++ b/ZeroSpace/ZeroSpace.Web/Pages/StarSystemIndex.razor @@ -5,18 +5,45 @@

Star Systems

+ + + + + + + + Galaxy Map +
@foreach (var kind in Enum.GetValues()) { var systems = StarSystems.All.Where(s => s.Kind == kind).OrderBy(s => s.Name).ToList(); -

@kind (@systems.Count)

-
    - @foreach (var system in systems) - { -
  • - @system.Name -
    • - } -
+ var badgeClass = kind switch { + StarSystemKind.Homeworld => "badge-homeworld", + StarSystemKind.Core => "badge-core", + StarSystemKind.Side => "badge-side", + _ => "badge-side" + }; + +
+
+

@kind Systems

+ @systems.Count +
+ +
} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/SystemMasteryIndex.razor b/ZeroSpace/ZeroSpace.Web/Pages/SystemMasteryIndex.razor index d27a3ed..8bd1b12 100644 --- a/ZeroSpace/ZeroSpace.Web/Pages/SystemMasteryIndex.razor +++ b/ZeroSpace/ZeroSpace.Web/Pages/SystemMasteryIndex.razor @@ -4,15 +4,19 @@

System Masteries

+ @SystemMasteries.All.Count Doctrines
-
+
@foreach (var mastery in SystemMasteries.All.OrderBy(m => m.Name)) { - -
@mastery.Name
- @mastery.Levels[0] · available on @mastery.AvailableSystems.Count systems + +
+ @mastery.Name + @mastery.AvailableSystems.Count systems +
+
@mastery.Levels[0]
 }
diff --git a/ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css b/ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css index 2b5f274..11fec2a 100644 --- a/ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css +++ b/ZeroSpace/ZeroSpace.Web/wwwroot/css/app.css @@ -1,7 +1,25 @@ +:root { + --zs-bg-base: #080c14; + --zs-bg-surface: #0f172a; + --zs-bg-card: rgba(15, 23, 42, 0.75); + --zs-bg-card-hover: rgba(30, 41, 59, 0.85); + --zs-border-subtle: rgba(56, 189, 248, 0.15); + --zs-border-glow: rgba(56, 189, 248, 0.45); + --zs-cyan: #38bdf8; + --zs-emerald: #10b981; + --zs-amber: #f59e0b; + --zs-purple: #a78bfa; + --zs-rose: #f43f5e; + --zs-text-main: #f0f6fc; + --zs-text-muted: #94a3b8; + --zs-text-dim: #64748b; +} + html, body { - font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background-color: #0d1117; - color: #c9d1d9; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background-color: var(--zs-bg-base); + color: var(--zs-text-main); + min-height: 100vh; } h1:focus { @@ -9,25 +27,210 @@ h1:focus { } h1, h2, h3, h4, h5, h6 { - color: #e6edf3; + color: #ffffff; + font-weight: 700; + letter-spacing: -0.01em; } a, .btn-link { - color: #58a6ff; + color: var(--zs-cyan); + text-decoration: none; + transition: color 0.15s ease, text-shadow 0.15s ease; +} + +a:hover, .btn-link:hover { + color: #7dd3fc; + text-shadow: 0 0 8px rgba(56, 189, 248, 0.5); } p { - color: #8b949e; + color: var(--zs-text-muted); + line-height: 1.6; +} + +/* Custom Scrollbars */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} +::-webkit-scrollbar-track { + background: #080c14; +} +::-webkit-scrollbar-thumb { + background: #1e293b; + border-radius: 4px; + border: 1px solid rgba(56, 189, 248, 0.2); +} +::-webkit-scrollbar-thumb:hover { + background: #334155; + border-color: rgba(56, 189, 248, 0.4); +} + +/* Sci-Fi Glass Panels & Cards */ +.zs-glass-card { + background: var(--zs-bg-card); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--zs-border-subtle); + border-radius: 12px; + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +.zs-glass-card:hover { + border-color: var(--zs-border-glow); + box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.15); +} + +.zs-hero { + background: radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.12) 0%, transparent 60%), + radial-gradient(ellipse at bottom left, rgba(16, 185, 129, 0.08) 0%, transparent 60%), + rgba(15, 23, 42, 0.85); + backdrop-filter: blur(16px); + border: 1px solid rgba(56, 189, 248, 0.25); + border-radius: 16px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +/* Sci-Fi Badges */ +.badge-homeworld { + background: rgba(16, 185, 129, 0.18); + color: #34d399; + border: 1px solid rgba(16, 185, 129, 0.45); + box-shadow: 0 0 8px rgba(16, 185, 129, 0.25); + font-weight: 600; +} + +.badge-core { + background: rgba(245, 158, 11, 0.18); + color: #fbbf24; + border: 1px solid rgba(245, 158, 11, 0.45); + box-shadow: 0 0 8px rgba(245, 158, 11, 0.25); + font-weight: 600; +} + +.badge-side { + background: rgba(56, 189, 248, 0.18); + color: #7dd3fc; + border: 1px solid rgba(56, 189, 248, 0.45); + box-shadow: 0 0 8px rgba(56, 189, 248, 0.25); + font-weight: 600; +} + +.badge-mastery { + background: rgba(167, 139, 250, 0.18); + color: #c4b5fd; + border: 1px solid rgba(167, 139, 250, 0.45); + box-shadow: 0 0 8px rgba(167, 139, 250, 0.25); + font-weight: 600; +} + +.badge-pill-scifi { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.25rem 0.65rem; + border-radius: 9999px; + font-size: 0.75rem; + letter-spacing: 0.03em; +} + +/* Sci-Fi Buttons */ +.btn-scifi-primary { + background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); + color: #ffffff; + border: 1px solid #38bdf8; + box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); + font-weight: 600; + letter-spacing: 0.04em; + padding: 0.6rem 1.4rem; + border-radius: 8px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + display: inline-flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; +} + +.btn-scifi-primary:hover { + background: linear-gradient(135deg, #0369a1 0%, #075985 100%); + color: #ffffff; + box-shadow: 0 0 24px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); + transform: translateY(-1px); +} + +.btn-scifi-outline { + background: rgba(15, 23, 42, 0.6); + color: var(--zs-cyan); + border: 1px solid rgba(56, 189, 248, 0.4); + box-shadow: 0 0 8px rgba(56, 189, 248, 0.15); + font-weight: 600; + letter-spacing: 0.04em; + padding: 0.6rem 1.4rem; + border-radius: 8px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + display: inline-flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; +} + +.btn-scifi-outline:hover { + background: rgba(56, 189, 248, 0.15); + color: #ffffff; + border-color: #38bdf8; + box-shadow: 0 0 16px rgba(56, 189, 248, 0.35); + transform: translateY(-1px); +} + +/* List group dark theme styling */ +.list-group-item { + background-color: rgba(15, 23, 42, 0.7); + border-color: rgba(56, 189, 248, 0.12); + color: var(--zs-text-main); + transition: all 0.2s ease; +} + +.list-group-item-action:hover, .list-group-item-action:focus { + background-color: rgba(30, 41, 59, 0.8); + border-color: rgba(56, 189, 248, 0.3); + color: #38bdf8; + transform: translateX(4px); +} + +/* Tables in dark theme */ +.table { + --bs-table-bg: transparent; + --bs-table-color: var(--zs-text-main); + --bs-table-border-color: rgba(56, 189, 248, 0.15); +} + +.table th { + color: var(--zs-cyan); + font-weight: 600; + border-bottom: 2px solid rgba(56, 189, 248, 0.3); +} + +/* Section Header Cyber Line */ +.section-header h1 { + font-size: 1.75rem; + font-weight: 700; + letter-spacing: -0.02em; +} + +.section-header .border-bottom { + border-color: rgba(56, 189, 248, 0.2) !important; } .btn-primary { color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; + background-color: #0284c7; + border-color: #0369a1; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; + box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0284c7; } .content { @@ -43,14 +246,16 @@ p { } .validation-message { - color: red; + color: #f43f5e; } #blazor-error-ui { - color-scheme: light only; - background: lightyellow; + color-scheme: dark only; + background: #1e1b4b; + color: #f87171; + border-top: 1px solid rgba(244, 63, 94, 0.4); bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5); box-sizing: border-box; display: none; left: 0; @@ -65,10 +270,11 @@ p { position: absolute; right: 0.75rem; top: 0.5rem; + color: #f87171; } .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #881337; padding: 1rem 1rem 1rem 3.7rem; color: white; } @@ -88,16 +294,17 @@ p { .loading-progress circle { fill: none; - stroke: #e0e0e0; + stroke: #1e293b; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { - stroke: #1b6ec2; + stroke: #38bdf8; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; + filter: drop-shadow(0 0 6px #38bdf8); } .loading-progress-text { @@ -105,6 +312,8 @@ p { text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; + color: #38bdf8; + letter-spacing: 0.05em; } .loading-progress-text:after { @@ -112,7 +321,11 @@ p { } code { - color: #c02d76; + color: #f43f5e; + background: rgba(244, 63, 94, 0.1); + padding: 0.15rem 0.35rem; + border-radius: 4px; + font-size: 0.875em; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {