From e6ab7191fdb3c7ae14b77318f3e37697f721eac2 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Tue, 7 Apr 2026 22:03:06 -0700 Subject: [PATCH] =?UTF-8?q?ui(guide):=20=F0=9F=92=84=20Implement=20enhance?= =?UTF-8?q?d=20UI=20elements=20for=20the=20CommunicationsPage=20to=20impro?= =?UTF-8?q?ve=20game=20guide=20readability=20and=20user=20engagement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Lilith Autocommit --- .../guide/src/pages/CommunicationsPage.tsx | 133 ++---------------- 1 file changed, 12 insertions(+), 121 deletions(-) diff --git a/public/games/age-of-dwarves/guide/src/pages/CommunicationsPage.tsx b/public/games/age-of-dwarves/guide/src/pages/CommunicationsPage.tsx index 7cdecd76..960a4359 100644 --- a/public/games/age-of-dwarves/guide/src/pages/CommunicationsPage.tsx +++ b/public/games/age-of-dwarves/guide/src/pages/CommunicationsPage.tsx @@ -1,133 +1,24 @@ import { useState, useMemo, type ReactElement } from 'react' -import styled from 'styled-components' import { FadeIn } from '@magic-civ/guide-engine' import { Tabs } from '@lilith/ui-feedback' import { buildings, allUnits } from '@/data' import { Sprite } from '@magic-civ/guide-engine' import type { Building, Unit } from '@magic-civ/guide-engine' -import { PageTitle, PageHeading, PageSubtitle, CardCompact, SectionHeading as SectionHeadingBase } from '@magic-civ/guide-engine' +import { PageTitle, PageHeading, PageSubtitle, CardCompact } from '@magic-civ/guide-engine' import orbitsData from '@data/communications/orbits.json' - -// ─── Styled Components ──────────────────────────────────────────────────────── - -const Grid = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); - gap: 0.875rem; -` - -const Card = CardCompact - -const CardHeader = styled.div` - display: flex; - gap: 0.625rem; - align-items: flex-start; -` - -const CardMeta = styled.div` - display: flex; - flex-direction: column; - gap: 0.2rem; - flex: 1; - min-width: 0; -` - -const CardName = styled.h3` - font-size: 0.875rem; - font-weight: 700; - color: ${({ theme }) => theme.colors.text.primary}; - margin: 0; - line-height: 1.3; -` - -const CardStats = styled.div` - display: flex; - flex-wrap: wrap; - gap: 0.25rem; -` - -const Stat = styled.span` - font-size: 0.6875rem; - padding: 0.1rem 0.375rem; - background: ${({ theme }) => theme.colors.background.secondary}; - border-radius: 3px; - color: ${({ theme }) => theme.colors.text.muted}; -` - -const CardDesc = styled.p` - font-size: 0.8rem; - color: ${({ theme }) => theme.colors.text.muted}; - line-height: 1.45; - margin: 0; -` - -const RulesBlock = styled.div` - margin-top: 1.5rem; - background: ${({ theme }) => theme.colors.surface}; - border: 1px solid ${({ theme }) => theme.colors.border.default}; - border-left: 3px solid ${({ theme }) => theme.colors.border.default}; - border-radius: 7px; - padding: 1rem 1.25rem; - display: flex; - flex-direction: column; - gap: 0.625rem; -` - -const RulesTitle = styled.h4` - font-size: 0.875rem; - font-weight: 700; - color: ${({ theme }) => theme.colors.text.primary}; - margin: 0; -` - -const RulesList = styled.ul` - margin: 0; - padding-left: 1.25rem; - display: flex; - flex-direction: column; - gap: 0.3rem; -` - -const RulesItem = styled.li` - font-size: 0.8rem; - color: ${({ theme }) => theme.colors.text.muted}; - line-height: 1.45; -` - -const SectionHeading = styled(SectionHeadingBase)` - margin-top: 2rem; - margin-bottom: 0.875rem; -` - -const MechTable = styled.table` - width: 100%; - border-collapse: collapse; - font-size: 0.8rem; - margin-bottom: 1.5rem; -` - -const MechTh = styled.th` - text-align: left; - padding: 0.4rem 0.75rem; - background: ${({ theme }) => theme.colors.background.secondary}; - color: ${({ theme }) => theme.colors.text.secondary}; - font-weight: 600; - font-size: 0.75rem; - border-bottom: 1px solid ${({ theme }) => theme.colors.border.default}; -` - -const MechTd = styled.td` - padding: 0.4rem 0.75rem; - color: ${({ theme }) => theme.colors.text.muted}; - border-bottom: 1px solid ${({ theme }) => theme.colors.border.default}; - vertical-align: top; -` +import { + Grid, CardHeader, CardMeta, CardName, CardStats, Stat, CardDesc, + RulesBlock, RulesTitle, RulesList, RulesItem, + SectionHeading, MechTable, MechTh, MechTd, +} from './communications/styled' // ─── Static Data ────────────────────────────────────────────────────────────── const ORBIT_MATRIX = orbitsData.orbit_matrix const DECAY_STATES = orbitsData.decay_states +const Card = CardCompact + // ─── Sub-components ─────────────────────────────────────────────────────────── function BuildingCard({ b }: { b: Building }): ReactElement { @@ -355,10 +246,10 @@ function MechanicsTab(): ReactElement { // ─── Page ───────────────────────────────────────────────────────────────────── const TABS = [ - { key: 'ground', label: 'Ground Network' }, - { key: 'space', label: 'Space Program' }, - { key: 'orbital', label: 'Orbital Units' }, - { key: 'mechanics',label: 'Mechanics' }, + { key: 'ground', label: 'Ground Network' }, + { key: 'space', label: 'Space Program' }, + { key: 'orbital', label: 'Orbital Units' }, + { key: 'mechanics', label: 'Mechanics' }, ] as const type TabKey = (typeof TABS)[number]['key']