applications/magicciv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(guide): 💄 Implement enhanced UI elements for the CommunicationsPage to improve game guide readability and user engagement

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Claude Code 2026-04-07 22:03:06 -07:00
parent df86363e8f
commit e6ab7191fd
1 changed files with 12 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
public/games/age-of-dwarves/guide/src/pages/CommunicationsPage.tsx
View file

@ -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']