Instruction file imported from ttrebicki/theceo (.cursor/rules/react-ui.mdc). Copyright stays with the author.

React UI

Components (reuse, don't duplicate)

ModalOverlay

<ModalOverlay onClose={onClose} variant="scene" align="side">
  <Panel title="..." onClose={onClose}>...</Panel>
</ModalOverlay>

• variant="scene" — lighter backdrop, Pixi visible behind
• align="side" — right panel (~360px), used by AdvisorPanel

Styling Rules

• No inline style={} — add classes to src/styles/global.css
• Use CSS vars: --color-bg, --vga-cyan, --font-comic, --shadow-lagoon
• Comic Sans, font-weight ≥ 500 (700 for titles)
• BEM classes: ui-panel__body, game-hud__stat, sales-warnings__list

Game State in UI

const { state, player, updatePlayer, closeAdvisor } = useGame();
updatePlayer((p) => { p.adBudget = value; });

Read-only: state.phase, state.quarter, state.lastReport.

Performance

• useCallback for handlers passed to children or memoized Pixi factories
• useMemo for derived row data (see SalesReportScreen)
• Avoid inline object/array props — const outside component or memo

Screen Layout

Full-screen Pixi + panel:

<div className="screen screen--with-scene screen--auction">
  <PixiStage className="screen__pixi" createScene={createScene} />
  <div className="screen__panel"><Panel>...</Panel></div>
</div>