476 lines
25 KiB
TypeScript
476 lines
25 KiB
TypeScript
|
export const WORLDSHAPER_STUDIO_MARKUP_SHELL = `
|
|||
|
|
<body>
|
|||
|
|
<div class="shell">
|
|||
|
|
<div class="menu-bar" id="menuBar">
|
|||
|
|
<button class="menu-btn" id="undoBtn" type="button">Undo</button>
|
|||
|
|
<button class="menu-btn" id="redoBtn" type="button">Redo</button>
|
|||
|
|
<button class="menu-btn" id="saveBtn" type="button">Save</button>
|
|||
|
|
<button class="menu-btn" id="testHeightBtn" type="button">Test Height</button>
|
|||
|
|
<div class="menu-bar-center">
|
|||
|
|
<label class="menu-layer-label" for="menuLayerSelect">Change Layer:</label>
|
|||
|
|
<select class="menu-layer-select" id="menuLayerSelect"></select>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-bar-right">
|
|||
|
|
<div class="theme-preset-bar" role="group" aria-label="Editor theme presets">
|
|||
|
|
__THEME_PRESET_BUTTONS__
|
|||
|
|
</div>
|
|||
|
|
<span id="saveStatus" class="save-status" title="Ready" aria-label="Ready">Ready</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="body" id="editorBody">
|
|||
|
|
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
export const WORLDSHAPER_STUDIO_MARKUP_SIDEBAR = `
|
|||
|
|
<aside class="sidebar" id="sidebar">
|
|||
|
|
<div class="sidebar-tabs" id="sidebarTabs">
|
|||
|
|
<div class="sidebar-tab-row">
|
|||
|
|
<button class="sidebar-tab-btn" id="informationTabBtn" type="button">Settings</button>
|
|||
|
|
<button class="sidebar-tab-btn" id="historyTabBtn" type="button">History</button>
|
|||
|
|
<button class="sidebar-tab-btn" id="newsTabBtn" type="button">News</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="sidebar-tab-row">
|
|||
|
|
<button class="sidebar-tab-btn" id="instancesTabBtn" type="button">Entities</button>
|
|||
|
|
<button class="sidebar-tab-btn" id="tilesTabBtn" type="button">Graphics</button>
|
|||
|
|
<button class="sidebar-tab-btn active" id="layersTabBtn" type="button">Layers</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="sidebar-tab-row">
|
|||
|
|
<button class="sidebar-tab-btn" id="triggersTabBtn" type="button">Triggers</button>
|
|||
|
|
<button class="sidebar-tab-btn" id="pathsTabBtn" type="button">Paths</button>
|
|||
|
|
<button class="sidebar-tab-btn" id="transitionsTabBtn" type="button">Transitions</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="sidebar-tab-row">
|
|||
|
|
<span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panels-host" id="sidebarPanelsHost">
|
|||
|
|
<div class="sidebar-panel hidden" id="informationPanel">
|
|||
|
|
<h3>Settings</h3>
|
|||
|
|
<div class="information-panel-layout">
|
|||
|
|
<div class="selector-section">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleInformationSettingsSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>World Info</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="informationSettingsSectionBody">
|
|||
|
|
<div class="map-manager">
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="mapIdLocked">World Id</label>
|
|||
|
|
<input id="mapIdLocked" class="info-readonly" type="text" readonly />
|
|||
|
|
</div>
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="mapNameInput">World Name</label>
|
|||
|
|
<input id="mapNameInput" type="text" />
|
|||
|
|
</div>
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="mapWidthInput">Loaded Width</label>
|
|||
|
|
<div class="info-cell-value info-dim-value" id="mapWidthValue">
|
|||
|
|
<input id="mapWidthInput" class="info-dim-input info-readonly" type="number" min="1" max="512" readonly />
|
|||
|
|
<div class="info-dim-controls" id="mapWidthControls">
|
|||
|
|
<button class="icon-action-btn" id="confirmWidthBtn" type="button" title="Apply width change">✓</button>
|
|||
|
|
<button class="icon-action-btn danger" id="cancelWidthBtn" type="button" title="Discard width change">Ãâ€â€</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="mapHeightInput">Loaded Height</label>
|
|||
|
|
<div class="info-cell-value info-dim-value" id="mapHeightValue">
|
|||
|
|
<input id="mapHeightInput" class="info-dim-input info-readonly" type="number" min="1" max="512" readonly />
|
|||
|
|
<div class="info-dim-controls" id="mapHeightControls">
|
|||
|
|
<button class="icon-action-btn" id="confirmHeightBtn" type="button" title="Apply height change">✓</button>
|
|||
|
|
<button class="icon-action-btn danger" id="cancelHeightBtn" type="button" title="Discard height change">Ãâ€â€</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="mapBackgroundColorInput">Background Color</label>
|
|||
|
|
<input id="mapBackgroundColorInput" type="color" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleInformationConfigurationSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Configuration</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="informationConfigurationSectionBody">
|
|||
|
|
<div class="map-manager">
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="engineOverridesBtn">Engine Overrides</label>
|
|||
|
|
<div>
|
|||
|
|
<button id="engineOverridesBtn" class="mini-btn engine-overrides-launch-btn" type="button">Open Override Manager</button>
|
|||
|
|
<div class="engine-overrides-summary" id="engineOverridesSummary">No engine overrides active.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="field-row">
|
|||
|
|
<label for="backgroundModeBtn">Background Brush</label>
|
|||
|
|
<button id="backgroundModeBtn" class="background-mode-btn" type="button">
|
|||
|
|
<span class="background-mode-preview" id="backgroundModePreview"></span>
|
|||
|
|
<span class="background-mode-copy">
|
|||
|
|
<span class="background-mode-title" id="backgroundModeTitle">Inherit</span>
|
|||
|
|
<span class="background-mode-meta" id="backgroundModeMeta">Click to cycle tile, hole, inherit.</span>
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="information-utility-actions">
|
|||
|
|
<button class="mini-btn" id="restoreToolWindowsBtn" type="button">Restore all windows</button>
|
|||
|
|
<button class="mini-btn" id="resetWorkspaceLayoutBtn" type="button">Reset workspace layout</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="experimental-import-panel">
|
|||
|
|
<button id="experimentalImportToggleBtn" class="experimental-import-toggle" type="button" aria-expanded="false">
|
|||
|
|
<span class="experimental-import-check" id="experimentalImportCheck">[ ]</span>
|
|||
|
|
<span class="experimental-import-copy">
|
|||
|
|
<span class="experimental-import-title">Experimental Imports</span>
|
|||
|
|
<span class="experimental-import-meta">Import compatible sprite or tile JSON from other editor builds.</span>
|
|||
|
|
</span>
|
|||
|
|
<span class="experimental-import-chevron">▾</span>
|
|||
|
|
</button>
|
|||
|
|
<div class="experimental-import-body hidden" id="experimentalImportBody">
|
|||
|
|
<div class="experimental-import-warning">Warning: supports a single entry or a full <code>sprites.json</code> / <code>tiles.json</code> gallery. Matching art is deduped and only new images are kept.</div>
|
|||
|
|
<div class="experimental-import-actions">
|
|||
|
|
<button class="mini-btn" id="importSpritesBtn" type="button">Import Sprites</button>
|
|||
|
|
<button class="mini-btn" id="importTilesBtn" type="button">Import Tiles</button>
|
|||
|
|
<button class="mini-btn experimental-import-icon-btn" id="importJsonBtn" type="button" title="Paste JSON import" aria-label="Paste JSON import">📝</button>
|
|||
|
|
</div>
|
|||
|
|
<input id="importSpritesInput" class="hidden" type="file" accept=".json,application/json" />
|
|||
|
|
<input id="importTilesInput" class="hidden" type="file" accept=".json,application/json" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="experimental-import-modal hidden" id="importJsonModal">
|
|||
|
|
<div class="experimental-import-modal-card" role="dialog" aria-modal="true" aria-labelledby="importJsonModalTitle">
|
|||
|
|
<div class="experimental-import-modal-head">
|
|||
|
|
<h4 class="experimental-import-modal-title" id="importJsonModalTitle">Paste Import JSON</h4>
|
|||
|
|
<select id="importJsonTypeSelect">
|
|||
|
|
<option value="sprites">Sprites</option>
|
|||
|
|
<option value="tiles">Tiles</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="experimental-import-modal-copy">Paste a single entry or a full compatible gallery payload, then confirm to import only new art.</div>
|
|||
|
|
<div class="experimental-import-modal-body">
|
|||
|
|
<textarea id="importJsonTextarea" rows="12" spellcheck="false" placeholder="{ "tiles": [ ... ] }"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="experimental-import-modal-actions">
|
|||
|
|
<button class="mini-btn" id="importJsonConfirmBtn" type="button" title="Import JSON">✓</button>
|
|||
|
|
<button class="mini-btn danger" id="importJsonCancelBtn" type="button" title="Cancel import">✕</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="information-bottom-stack">
|
|||
|
|
<div class="selector-section">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleInformationHotkeysSectionBtn" type="button" aria-expanded="false">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Hotkeys</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body hidden" id="informationHotkeysSectionBody">
|
|||
|
|
<div class="info-help-panel" aria-label="Worldshaper Studio keyboard help">
|
|||
|
|
<div class="info-help-title">Editor Controls</div>
|
|||
|
|
<div class="info-help-list">
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Ctrl</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Wheel</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Zoom canvas</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">MMB</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Drag</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Pan the room view</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">L Shift</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Drag</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Straight line draw</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Alt</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Drag</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Erase on active layer</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">L Ctrl</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Drag</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action"><span class="shortcut-shape-icon square" aria-hidden="true"></span><span>Rectangle outline</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">R Ctrl</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-mouse-shell">
|
|||
|
|
<span class="shortcut-mouse-dot"></span>
|
|||
|
|
<span class="shortcut-mouse-label">Drag</span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action"><span class="shortcut-shape-icon circle" aria-hidden="true"></span><span>Circle outline</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">R Shift</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Hold to hide the grid</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">M</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Open world overview</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">O</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Toggle chunk bounds</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Ctrl</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-keycap">Z</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Undo</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Ctrl</span>
|
|||
|
|
<span class="shortcut-plus">+</span>
|
|||
|
|
<span class="shortcut-keycap">Y</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Redo</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Escape</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Clear canvas selection / collapse cells</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-row">
|
|||
|
|
<div class="shortcut-keys">
|
|||
|
|
<span class="shortcut-keycap">Delete</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shortcut-action">Delete focused tile or entity</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel" id="layersPanel">
|
|||
|
|
<h3>Layers</h3>
|
|||
|
|
<div class="selector-section">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleDrawLayerSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Draw Layers</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="mini-btn" id="addLayerBtn" type="button">Add Layer</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="drawLayerSectionBody">
|
|||
|
|
<div class="layer-list" id="layerList"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleHeightLayerSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Height Layers</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="mini-btn" id="addHeightLayerBtn" type="button">Add Height Layer</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="heightLayerSectionBody">
|
|||
|
|
<div class="layer-list" id="heightLayerList"></div>
|
|||
|
|
<p class="muted selector-hint">Select a height layer, then paint tiles to grow its sparse patch footprint. The list order is the height stack: top entry is Z1, next is Z2, and so on.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden" id="tilesPanel">
|
|||
|
|
<h3>Graphics</h3>
|
|||
|
|
<div class="entity-filter-tabs" role="tablist" aria-label="Graphics categories">
|
|||
|
|
<button class="entity-filter-tab active" id="graphicsTilesBtn" type="button" aria-pressed="true">Tiles</button>
|
|||
|
|
<button class="entity-filter-tab" id="graphicsSpritesBtn" type="button" aria-pressed="false">Sprites</button>
|
|||
|
|
<button class="entity-filter-tab" id="graphicsOtherBtn" type="button" aria-pressed="false">Other</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-toolbar">
|
|||
|
|
<button class="panel-square-btn" id="newTileFolderBtn" type="button" title="Create graphics folder">📁</button>
|
|||
|
|
<button class="panel-square-btn" id="newTileBtn" type="button" title="Create new graphic" aria-label="Create new graphic">
|
|||
|
|
<span class="panel-icon-image-plus" aria-hidden="true">
|
|||
|
|
<span class="panel-icon-image-frame"></span>
|
|||
|
|
<span class="panel-icon-image-plus-mark">+</span>
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="panel-square-btn" id="tileSearchModeBtn" type="button" title="Search graphics" aria-label="Search graphics" aria-pressed="false">
|
|||
|
|
<span class="panel-icon-search" aria-hidden="true">🔍</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="npc-list" id="paintPalette"></div>
|
|||
|
|
<p class="muted selector-hint">Tiles paint the world. Sprites power entities. Other graphics stay stored without entering the entity picker.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden" id="instancesPanel">
|
|||
|
|
<h3>Entities</h3>
|
|||
|
|
<div class="entity-filter-tabs" role="tablist" aria-label="Entity categories">
|
|||
|
|
<button class="entity-filter-tab active" id="entityTypeFriendlyBtn" type="button" aria-pressed="true">Friendly</button>
|
|||
|
|
<button class="entity-filter-tab" id="entityTypeHostileBtn" type="button" aria-pressed="false">Hostile</button>
|
|||
|
|
<button class="entity-filter-tab" id="entityTypePropBtn" type="button" aria-pressed="false">Props</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="hidden" id="entitySearchModeHost"></div>
|
|||
|
|
<div class="selector-section" id="entityCatalogSection">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="toggleTemplateSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Catalog</span>
|
|||
|
|
</button>
|
|||
|
|
<div class="selector-section-actions">
|
|||
|
|
<button class="panel-square-btn" id="newTemplateFolderBtn" type="button" title="Create entity catalog folder">📁</button>
|
|||
|
|
<button class="panel-square-btn" id="entitySearchModeBtn" type="button" title="Search entities" aria-label="Search entities" aria-pressed="false">
|
|||
|
|
<span class="panel-icon-search" aria-hidden="true">🔍</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="instanceTemplateSectionBody">
|
|||
|
|
<div class="npc-list" id="instancePalette"></div>
|
|||
|
|
<p class="muted selector-hint">Select a catalog entity, then click the canvas to place it. The selection stays active for multi-click placement.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section" id="placedEntitiesSection">
|
|||
|
|
<div class="selector-section-header">
|
|||
|
|
<button class="selector-section-toggle" id="togglePlacedSectionBtn" type="button" aria-expanded="true">
|
|||
|
|
<span class="selector-section-chevron">▾</span>
|
|||
|
|
<span>Placed Entities</span>
|
|||
|
|
</button>
|
|||
|
|
<div class="selector-section-actions">
|
|||
|
|
<button class="mini-btn" id="newNpcBtn" type="button">New Entity</button>
|
|||
|
|
<button class="panel-square-btn" id="newPlacedFolderBtn" type="button" title="Create placed entity folder">📁</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="selector-section-body" id="placedInstanceSectionBody">
|
|||
|
|
<div class="npc-list" id="npcList"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden" id="triggersPanel">
|
|||
|
|
<h3>Triggers</h3>
|
|||
|
|
<div class="selector-toolbar">
|
|||
|
|
<button class="panel-square-btn" id="newTriggerFolderBtn" type="button" title="Create trigger folder">📁</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="npc-list" id="triggerList"></div>
|
|||
|
|
<p class="muted selector-hint">Trigger placement UI will land here next.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden" id="pathsPanel">
|
|||
|
|
<h3>Paths</h3>
|
|||
|
|
<div class="selector-toolbar">
|
|||
|
|
<button class="panel-square-btn" id="newPathFolderBtn" type="button" title="Create path folder">📁</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="npc-list" id="pathList"></div>
|
|||
|
|
<p class="muted selector-hint">Path placement UI will land here next.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden" id="transitionsPanel">
|
|||
|
|
<h3>Transitions</h3>
|
|||
|
|
<div class="selector-toolbar">
|
|||
|
|
<button class="panel-square-btn" id="newTransitionFolderBtn" type="button" title="Create transition folder">📁</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="npc-list" id="transitionList"></div>
|
|||
|
|
<p class="muted selector-hint">Transition placement UI will land here next.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sidebar-panel hidden history-panel-layout" id="historyPanel">
|
|||
|
|
<h3>History</h3>
|
|||
|
|
<div class="history-stack">
|
|||
|
|
<div class="history-list-scroll">
|
|||
|
|
<div class="history-list" id="historyList"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="history-current" id="historyCurrent">
|
|||
|
|
<div class="history-current-label">Current State</div>
|
|||
|
|
<div class="history-current-empty">No history yet.</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="history-preview" id="historyPreview">
|
|||
|
|
<h4>Change Preview</h4>
|
|||
|
|
<div class="history-preview-empty">Select a history entry to inspect it.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sidebar-static-footer" aria-label="Tool pane links">
|
|||
|
|
<div class="sidebar-footer-links">
|
|||
|
|
<div class="sidebar-footer-linkbar">
|
|||
|
|
<a class="sidebar-footer-link" href="http://www.andraxion.net" target="_blank" rel="noreferrer">Andraxion Studios</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
export const WORLDSHAPER_STUDIO_MARKUP_STAGE = `
|
|||
|
|
<section class="stage" id="stage">
|
|||
|
|
<div class="meta" id="meta">
|
|||
|
|
<div class="meta-main" id="metaMain"></div>
|
|||
|
|
<div class="meta-stats" id="metaStats"></div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
class="canvas-tool-btn"
|
|||
|
|
id="canvasSelectToolBtn"
|
|||
|
|
type="button"
|
|||
|
|
title="Tile selector: off"
|
|||
|
|
aria-label="Toggle tile selector"
|
|||
|
|
aria-pressed="false"
|
|||
|
|
>
|
|||
|
|
<span class="canvas-tool-btn-icon" aria-hidden="true"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="viewport" id="viewport">
|
|||
|
|
<div class="viewport-layer"><div class="pixi-host" id="pixiHost" aria-hidden="true"></div><canvas id="roomCanvas"></canvas></div>
|
|||
|
|
<div class="viewport-spacer" id="viewportSpacer" aria-hidden="true"></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<div class="tool-window-layer" id="toolWindowLayer" aria-hidden="true"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
`;
|