Give entrance its own dedicated section separate from objects

This commit is contained in:
2026-10-17 21:36:14 -04:00
parent 1ecac34502
commit 73bdecef2b
2 changed files with 48 additions and 52 deletions
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>furniture-app</title>
<script type="module" crossorigin src="/assets/index-r1bklXRq.js"></script>
<script type="module" crossorigin src="/assets/index-CEvVbPGt.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Gl7EQEpA.css">
</head>
<body>
+47 -51
View File
@@ -284,64 +284,60 @@ export function ControlPanel({
<div className="section">
<div className="section-title">Scene</div>
<div className="row">
<button onClick={placeEntrance} style={{ flex: 1 }}>
<button onClick={createObject} style={{ width: '100%' }}>
Create Object
</button>
</div>
<div className="section">
<div className="section-title">Entrance</div>
{state.entrance ? (
<>
<div className="grid-2">
<label className="field">
<span>X</span>
<NumberField value={state.entrance.x} width="100%" onChange={(v) => setEntrance({ x: v })} />
</label>
<label className="field">
<span>Y</span>
<NumberField value={state.entrance.y} width="100%" onChange={(v) => setEntrance({ y: v })} />
</label>
<label className="field">
<span>Width</span>
<NumberField
value={state.entrance.width ?? 20}
min={10}
width="100%"
onChange={(v) => setEntrance({ width: v })}
/>
</label>
<label className="field">
<span>Height</span>
<NumberField
value={state.entrance.height ?? 20}
min={10}
width="100%"
onChange={(v) => setEntrance({ height: v })}
/>
</label>
</div>
<button
style={{ marginTop: 8, width: '100%' }}
onClick={() => onStateChange({ ...state, entrance: null })}
>
Remove Entrance
</button>
</>
) : (
<button onClick={placeEntrance} style={{ width: '100%' }}>
Place Entrance
</button>
<button onClick={createObject} style={{ flex: 1 }}>
Create Object
</button>
</div>
)}
</div>
<div className="section">
<div className="section-title">Objects</div>
<div className="obj-list">{objects.map(renderObjectCard)}</div>
{state.entrance && (
<div
className={`obj-card ${selectedId === '__entrance__' ? 'selected' : ''}`}
style={{ marginTop: 6 }}
>
<div className="obj-head" onClick={() => onSelect('__entrance__')}>
<span className="obj-swatch" style={{ background: '#3fbf7f' }} />
<span className="obj-name">Entrance</span>
<span className="obj-badge">fixed</span>
</div>
{selectedId === '__entrance__' && (
<div className="obj-body">
<div className="grid-2">
<label className="field">
<span>X</span>
<NumberField value={state.entrance.x} width="100%" onChange={(v) => setEntrance({ x: v })} />
</label>
<label className="field">
<span>Y</span>
<NumberField value={state.entrance.y} width="100%" onChange={(v) => setEntrance({ y: v })} />
</label>
<label className="field">
<span>Width</span>
<NumberField
value={state.entrance.width ?? 20}
min={10}
width="100%"
onChange={(v) => setEntrance({ width: v })}
/>
</label>
<label className="field">
<span>Height</span>
<NumberField
value={state.entrance.height ?? 20}
min={10}
width="100%"
onChange={(v) => setEntrance({ height: v })}
/>
</label>
</div>
</div>
)}
</div>
)}
</div>
</>
)}