Spaces:
Sleeping
Sleeping
| import { ReactNode } from 'react'; | |
| import { useI18n, type Language } from '../i18n'; | |
| // Shell components ported from components/Shell.jsx — class names preserved | |
| // so the paper/ink/oxblood Board Console look is identical. | |
| export function TopBar(props: { | |
| game?: { id: string; turn: number; max: number; recon_remaining: number } | null; | |
| route: string; | |
| onNav: (r: string) => void; | |
| }) { | |
| const { game, route, onNav } = props; | |
| const { t, lang, setLang } = useI18n(); | |
| return ( | |
| <header className="nh-topbar"> | |
| <div className="nh-topbar__l"> | |
| <button className="nh-brand" onClick={() => onNav('list')}> | |
| Norhard<em>/</em>War<span className="nh-brand__tag">{t('shell.brand.tag')}</span> | |
| </button> | |
| <nav className="nh-nav"> | |
| <button className={route === 'list' ? 'on' : ''} onClick={() => onNav('list')}> | |
| {t('shell.nav.cases')} | |
| </button> | |
| <button className={route === 'new' ? 'on' : ''} onClick={() => onNav('new')}> | |
| {t('shell.nav.newCase')} | |
| </button> | |
| </nav> | |
| </div> | |
| <div className="nh-topbar__r" style={{ display: 'flex', alignItems: 'center', gap: 12 }}> | |
| {game && ( | |
| <div className="nh-status"> | |
| <span>{t('shell.status.case')} <b className="mono">{game.id.slice(0, 4)}…{game.id.slice(-4)}</b></span> | |
| <span className="nh-sep"></span> | |
| <span>{t('shell.status.turn')} <b>{game.turn} / {game.max}</b></span> | |
| <span className="nh-sep"></span> | |
| <span>{t('shell.status.recon')} <b>{game.recon_remaining} / 3</b></span> | |
| </div> | |
| )} | |
| <LangToggle lang={lang} setLang={setLang} ariaLabel={t('shell.lang.toggle.aria')} /> | |
| </div> | |
| </header> | |
| ); | |
| } | |
| function LangToggle({ | |
| lang, setLang, ariaLabel, | |
| }: { | |
| lang: Language; | |
| setLang: (l: Language) => void; | |
| ariaLabel: string; | |
| }) { | |
| return ( | |
| <div | |
| role="group" | |
| aria-label={ariaLabel} | |
| className="nh-lang" | |
| style={{ | |
| display: 'inline-flex', | |
| gap: 2, | |
| fontFamily: 'var(--font-mono)', | |
| fontSize: 11, | |
| textTransform: 'uppercase', | |
| letterSpacing: '0.06em', | |
| }} | |
| > | |
| <button | |
| type="button" | |
| onClick={() => setLang('en')} | |
| aria-pressed={lang === 'en'} | |
| style={{ | |
| background: 'transparent', | |
| border: 0, | |
| padding: '4px 6px', | |
| cursor: 'pointer', | |
| color: lang === 'en' ? 'var(--ink)' : 'var(--slate)', | |
| fontWeight: lang === 'en' ? 700 : 400, | |
| textDecoration: lang === 'en' ? 'underline' : 'none', | |
| textUnderlineOffset: 3, | |
| fontFamily: 'inherit', | |
| fontSize: 'inherit', | |
| letterSpacing: 'inherit', | |
| textTransform: 'inherit', | |
| }} | |
| > | |
| EN | |
| </button> | |
| <span style={{ color: 'var(--slate)' }}>|</span> | |
| <button | |
| type="button" | |
| onClick={() => setLang('de')} | |
| aria-pressed={lang === 'de'} | |
| style={{ | |
| background: 'transparent', | |
| border: 0, | |
| padding: '4px 6px', | |
| cursor: 'pointer', | |
| color: lang === 'de' ? 'var(--ink)' : 'var(--slate)', | |
| fontWeight: lang === 'de' ? 700 : 400, | |
| textDecoration: lang === 'de' ? 'underline' : 'none', | |
| textUnderlineOffset: 3, | |
| fontFamily: 'inherit', | |
| fontSize: 'inherit', | |
| letterSpacing: 'inherit', | |
| textTransform: 'inherit', | |
| }} | |
| > | |
| DE | |
| </button> | |
| </div> | |
| ); | |
| } | |
| const PHASES: { n: string; key: 'briefing' | 'recon' | 'action' | 'deliberation' | 'adjudication' }[] = [ | |
| { n: '01', key: 'briefing' }, | |
| { n: '02', key: 'recon' }, | |
| { n: '03', key: 'action' }, | |
| { n: '04', key: 'deliberation' }, | |
| { n: '05', key: 'adjudication' }, | |
| ]; | |
| export function PhaseRail({ current }: { current: 'briefing' | 'recon' | 'action' | 'deliberation' | 'adjudication' }) { | |
| const { t } = useI18n(); | |
| const order = ['briefing', 'recon', 'action', 'deliberation', 'adjudication']; | |
| const idx = order.indexOf(current); | |
| return ( | |
| <div className="nh-rail"> | |
| {PHASES.map((p, i) => ( | |
| <div key={p.n} className={`nh-rail__p ${i < idx ? 'done' : ''} ${i === idx ? 'active' : ''}`}> | |
| <span className="n mono">{p.n}</span> | |
| <span className="t">{t(`phaseRail.${p.key}` as const)}</span> | |
| </div> | |
| ))} | |
| </div> | |
| ); | |
| } | |
| export function Dossier(props: { | |
| tag?: string; title?: string; children?: ReactNode; footnote?: string[]; | |
| className?: string; fog?: boolean; inverse?: boolean; | |
| }) { | |
| const { tag, title, children, footnote, className = '', fog = false, inverse = false } = props; | |
| const { t } = useI18n(); | |
| return ( | |
| <article className={`nh-dossier ${fog ? 'fog' : ''} ${inverse ? 'inverse' : ''} ${className}`}> | |
| {fog && <span className="nh-dossier__fog">{t('shell.dossier.fog')}</span>} | |
| {tag && <span className="nh-dossier__tag">{tag}</span>} | |
| {title && <h3 className="nh-dossier__h">{title}</h3>} | |
| {children} | |
| {footnote && ( | |
| <div className="nh-dossier__fn"> | |
| {footnote.map((f, i) => <span key={i}>{f}</span>)} | |
| </div> | |
| )} | |
| </article> | |
| ); | |
| } | |
| export function Panel({ tag, title, children }: { tag?: string; title?: string; children: ReactNode }) { | |
| return ( | |
| <section className="nh-panel"> | |
| {tag && <span className="nh-panel__tag">{tag}</span>} | |
| {title && <h3>{title}</h3>} | |
| {children} | |
| </section> | |
| ); | |
| } | |
| export function Spinner() { | |
| return <span className="nh-typing"><i /><i /><i /></span>; | |
| } | |