iv: add Shell.jsx and Section.jsx — shell foundation
This commit is contained in:
otivm
334
src/components/Section.jsx
Normal file
334
src/components/Section.jsx
Normal file
@@ -0,0 +1,334 @@
|
||||
// Section.jsx — OTIVM-IV
|
||||
// Generic panel renderer. Receives a section definition and renders
|
||||
// the appropriate sub-component based on the "type" field.
|
||||
// Does not know what it is showing — delegates entirely to type.
|
||||
//
|
||||
// Section definition shape (from context-{id}.json):
|
||||
// title — string, shown in panel header
|
||||
// type — one of the section types below
|
||||
// col — layout column assignment (read by Shell.jsx LayoutGrid)
|
||||
// [data] — type-specific data array or object
|
||||
//
|
||||
// Section types:
|
||||
// status-block — key/value pairs
|
||||
// parameter-list — actor_parameters rows
|
||||
// auctoritas — three-face auctoritas panel
|
||||
// cost-table — cost items with amounts and sources
|
||||
// drift-log — parameter_drift_log entries
|
||||
// action-bar — action buttons
|
||||
// route-list — trade route cards with cost breakdown
|
||||
// text-block — narrative text, optionally collapsible
|
||||
// map-canvas — TESSERA fog-of-war map placeholder
|
||||
//
|
||||
// The "col" prop is consumed by Shell.jsx LayoutGrid for column placement.
|
||||
// Section.jsx itself ignores it.
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function Section({ title, type, col, ...props }) {
|
||||
return (
|
||||
<div className="otivm-section">
|
||||
<div className="otivm-section-head">
|
||||
<span className="otivm-section-title">{title}</span>
|
||||
</div>
|
||||
<div className="otivm-section-body">
|
||||
<SectionBody type={type} {...props} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SectionBody({ type, ...props }) {
|
||||
switch (type) {
|
||||
case 'status-block': return <StatusBlock {...props} />
|
||||
case 'parameter-list': return <ParameterList {...props} />
|
||||
case 'auctoritas': return <Auctoritas {...props} />
|
||||
case 'cost-table': return <CostTable {...props} />
|
||||
case 'drift-log': return <DriftLog {...props} />
|
||||
case 'action-bar': return <ActionBar {...props} />
|
||||
case 'route-list': return <RouteList {...props} />
|
||||
case 'text-block': return <TextBlock {...props} />
|
||||
case 'map-canvas': return <MapCanvas {...props} />
|
||||
default:
|
||||
return <div style={{ fontSize: '0.75rem', color: 'var(--otivm-ink-ghost)', fontStyle: 'italic' }}>Unknown section type: {type}</div>
|
||||
}
|
||||
}
|
||||
|
||||
// ── Status block ──────────────────────────────────────────────────────────
|
||||
// props.items: [{ key, value, cls }]
|
||||
// cls: 'good' | 'warn' | 'bad' | ''
|
||||
|
||||
function StatusBlock({ items = [] }) {
|
||||
return (
|
||||
<div>
|
||||
{items.map((item, i) => (
|
||||
<div key={i} className="otivm-status-row">
|
||||
<span className="otivm-status-key">{item.key}</span>
|
||||
<span className={`otivm-status-val${item.cls ? ' ' + item.cls : ''}`}>{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Parameter list ────────────────────────────────────────────────────────
|
||||
// props.items: [{ token, name, true_val, perceived, conf }]
|
||||
// Shows a gap indicator when true_val !== perceived.
|
||||
|
||||
function ParameterList({ items = [] }) {
|
||||
return (
|
||||
<div>
|
||||
{items.map((item, i) => {
|
||||
const gap = item.true_val !== item.perceived
|
||||
return (
|
||||
<div key={i} className="otivm-param-row">
|
||||
<div>
|
||||
<div className="otivm-param-token">{item.token}</div>
|
||||
<div className="otivm-param-name">{item.name}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<span className={`otivm-band ${bandClass(item.perceived)}`}>
|
||||
{item.perceived}
|
||||
</span>
|
||||
{gap && (
|
||||
<div>
|
||||
<span className="otivm-band otivm-band-gap" style={{ marginTop: '3px' }}>
|
||||
true: {item.true_val}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="otivm-param-conf">{item.conf}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Auctoritas ────────────────────────────────────────────────────────────
|
||||
// props.faces: [{ label, value, discrepant }]
|
||||
// props.gap_note: string shown when discrepancy exists
|
||||
|
||||
function Auctoritas({ faces = [], gap_note }) {
|
||||
const hasGap = faces.some(f => f.discrepant)
|
||||
return (
|
||||
<div>
|
||||
<div className="otivm-auct-three">
|
||||
{faces.map((face, i) => (
|
||||
<div key={i} className={`otivm-auct-face${face.discrepant ? ' discrepant' : ''}`}>
|
||||
<div className="otivm-auct-face-label">{face.label}</div>
|
||||
<div className="otivm-auct-face-value">{face.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{hasGap && gap_note && (
|
||||
<div style={{ marginTop: '8px', fontSize: '0.72rem', fontStyle: 'italic', color: 'var(--otivm-gold)', lineHeight: 1.5 }}>
|
||||
{gap_note}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Cost table ────────────────────────────────────────────────────────────
|
||||
// props.note: optional note shown above table
|
||||
// props.items: [{ label, amount, period, source, conf, debit }]
|
||||
|
||||
function CostTable({ note, items = [] }) {
|
||||
return (
|
||||
<div>
|
||||
{note && (
|
||||
<div style={{ fontSize: '0.7rem', fontStyle: 'italic', color: 'var(--otivm-ink-ghost)', marginBottom: '10px' }}>
|
||||
{note}
|
||||
</div>
|
||||
)}
|
||||
<table className="otivm-cost-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th style={{ textAlign: 'right' }}>Amount</th>
|
||||
<th>Source · Conf.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
{item.label}
|
||||
{item.period && <div className="source">{item.period}</div>}
|
||||
</td>
|
||||
<td className={`amount ${item.debit ? 'debit' : 'credit'}`}>
|
||||
{item.debit ? '−' : '+'}{item.amount}
|
||||
</td>
|
||||
<td>
|
||||
<span className="source">{item.source} · {item.conf}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Drift log ─────────────────────────────────────────────────────────────
|
||||
// props.items: [{ param, delta, trigger, note, positive }]
|
||||
|
||||
function DriftLog({ items = [] }) {
|
||||
return (
|
||||
<div>
|
||||
{items.map((item, i) => (
|
||||
<div key={i} className="otivm-drift-entry">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||||
<span className="otivm-drift-param">{item.param}</span>
|
||||
<span className={item.positive ? 'otivm-drift-pos' : 'otivm-drift-neg'}>{item.delta}</span>
|
||||
</div>
|
||||
<div className="otivm-drift-trigger">{item.trigger}</div>
|
||||
{item.note && <div className="otivm-drift-note">{item.note}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Action bar ────────────────────────────────────────────────────────────
|
||||
// props.buttons: [{ label, style, action, disabled }]
|
||||
// props.onAction: fn(action) called when a button is clicked
|
||||
|
||||
function ActionBar({ buttons = [], onAction }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
{buttons.map((btn, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`btn ${btn.style || 'otivm-btn-dispatch'}`}
|
||||
disabled={btn.disabled}
|
||||
onClick={() => onAction && onAction(btn.action)}
|
||||
>
|
||||
{btn.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Route list ────────────────────────────────────────────────────────────
|
||||
// props.routes: [{ id, name, goods, mode, days, cost, profit,
|
||||
// vectura, portoria, other, locked, lock_reason }]
|
||||
// props.selectedRoute: id of currently selected route
|
||||
// props.onSelect: fn(id) called when a route is clicked
|
||||
|
||||
function RouteList({ routes = [], selectedRoute, onSelect }) {
|
||||
return (
|
||||
<div>
|
||||
{routes.map(route => {
|
||||
if (route.locked) {
|
||||
return (
|
||||
<div key={route.id} className="otivm-route-card locked">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }}>
|
||||
<span className="otivm-route-name">{route.name}</span>
|
||||
<span style={{ fontSize: '0.68rem', color: 'var(--otivm-ink-ghost)' }}>locked</span>
|
||||
</div>
|
||||
<div className="otivm-route-goods">{route.goods} · {route.mode}</div>
|
||||
{route.lock_reason && (
|
||||
<div style={{ fontSize: '0.7rem', fontStyle: 'italic', color: 'var(--otivm-ink-ghost)' }}>
|
||||
Requires {route.lock_reason}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const net = route.profit - route.cost
|
||||
const isSelected = selectedRoute === route.id
|
||||
return (
|
||||
<div
|
||||
key={route.id}
|
||||
className={`otivm-route-card${isSelected ? ' selected' : ''}`}
|
||||
onClick={() => onSelect && onSelect(route.id)}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }}>
|
||||
<span className="otivm-route-name">{route.name}</span>
|
||||
<span className="otivm-route-net">+{net} dn net</span>
|
||||
</div>
|
||||
<div className="otivm-route-goods">
|
||||
{route.goods} · {route.mode} · {route.days} sim. days
|
||||
</div>
|
||||
<div className="otivm-route-costs">
|
||||
<div className="otivm-cost-cell">
|
||||
<div className="otivm-cost-cell-label">Vectura</div>
|
||||
<div className="otivm-cost-cell-value">{route.vectura} dn</div>
|
||||
</div>
|
||||
<div className="otivm-cost-cell">
|
||||
<div className="otivm-cost-cell-label">Portoria</div>
|
||||
<div className="otivm-cost-cell-value">{route.portoria} dn</div>
|
||||
</div>
|
||||
<div className="otivm-cost-cell">
|
||||
<div className="otivm-cost-cell-label">Other</div>
|
||||
<div className="otivm-cost-cell-value">{route.other} dn</div>
|
||||
</div>
|
||||
<div className="otivm-cost-cell rev">
|
||||
<div className="otivm-cost-cell-label">Revenue</div>
|
||||
<div className="otivm-cost-cell-value">{route.profit} dn</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Text block ────────────────────────────────────────────────────────────
|
||||
// props.entries: [{ date, text }]
|
||||
// props.collapsible: boolean
|
||||
|
||||
function TextBlock({ entries = [], collapsible = false }) {
|
||||
const [open, setOpen] = useState(!collapsible)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{collapsible && (
|
||||
<button
|
||||
className="btn otivm-btn-dispatch"
|
||||
style={{ width: '100%', marginBottom: '8px', fontSize: '0.65rem' }}
|
||||
onClick={() => setOpen(o => !o)}
|
||||
>
|
||||
{open ? 'Hide Journal' : 'Show Journal'}
|
||||
</button>
|
||||
)}
|
||||
{open && entries.map((entry, i) => (
|
||||
<div key={i} className="otivm-journal-entry">
|
||||
<div className="otivm-journal-date">{entry.date}</div>
|
||||
<div className="otivm-journal-text">{entry.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Map canvas ────────────────────────────────────────────────────────────
|
||||
// Placeholder — the real Map.jsx component is rendered by the MAP context screen.
|
||||
// This type exists so Section.jsx can reference it; in production the MAP
|
||||
// context screen passes the real Map.jsx output as a child instead.
|
||||
|
||||
function MapCanvas() {
|
||||
return (
|
||||
<div className="otivm-map-canvas" style={{ minHeight: '480px' }}>
|
||||
<span>TESSERA H7 · roman_14bce</span>
|
||||
<span style={{ fontFamily: 'Crimson Pro, serif', fontStyle: 'italic', fontSize: '0.78rem', letterSpacing: 0, color: '#1e3040', marginTop: '8px' }}>
|
||||
Map renders here — src/screens/Map.jsx
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||||
|
||||
function bandClass(val) {
|
||||
if (!val) return 'otivm-band-low'
|
||||
const v = val.toLowerCase()
|
||||
if (v === 'high' || v === 'distinguished') return 'otivm-band-high'
|
||||
if (v === 'medium' || v === 'neutral') return 'otivm-band-medium'
|
||||
return 'otivm-band-low'
|
||||
}
|
||||
Reference in New Issue
Block a user