<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Редактор диалогов — Пепельные луга</title>
<link rel="stylesheet" href="/editor.css" />
</head>
<body>
<header id="topbar">
<h1>Редактор диалогов</h1>
<span id="graph-title" class="muted">—</span>
<span class="spacer"></span>
<label>пресет
<select id="preset">
<option value="fresh">fresh</option>
<option value="quest-taken+flowers">quest-taken+flowers</option>
<option value="quest-done">quest-done</option>
</select>
</label>
<button id="btn-dry" title="Прогнать граф через раннер">dry-run</button>
<button id="btn-reload" title="Перечитать с диска (сброс локальных правок)">Перечитать</button>
<button id="btn-save" class="accent" title="Записать на диск (с валидацией)">Сохранить</button>
<span id="status" class="muted"></span>
</header>
<main id="layout">
<nav id="graph-list" aria-label="Графы"></nav>
<section id="canvas-wrap">
<svg id="canvas" xmlns="http://www.w3.org/2000/svg">
<g id="edges"></g>
<g id="nodes"></g>
</svg>
<div id="run-output" hidden></div>
<div id="problems" hidden></div>
</section>
<aside id="inspector" aria-label="Узел">
<div class="muted" id="inspector-empty">Выберите узел на графе.</div>
<div id="inspector-form" hidden>
<div class="row">
<label>id<input id="f-id" /></label>
</div>
<div class="row">
<label>speaker<input id="f-speaker" placeholder="Старейшина Ирвин" /></label>
<label>mood<input id="f-mood" placeholder="sad / warm / angry" /></label>
</div>
<div class="row">
<label class="grow">text<textarea id="f-text" rows="3"></textarea></label>
</div>
<div class="row">
<label>textKey<input id="f-textkey" placeholder="line.key" /></label>
<label>tags<input id="f-tags" placeholder="через запятую" /></label>
</div>
<div class="row">
<label>next
<select id="f-next"><option value="">— конец —</option></select>
</label>
</div>
<details>
<summary>условия и эффекты</summary>
<div class="row">
<label class="grow">when (флаги, через запятую)<input id="f-when" /></label>
</div>
<div class="row">
<label class="grow">whenNot (флаги)<input id="f-whennot" /></label>
</div>
<div class="row">
<label>whenVar.key<input id="f-whenvar-key" /></label>
<label>op
<select id="f-whenvar-op">
<option>eq</option><option>ne</option><option>gt</option>
<option>lt</option><option>ge</option><option>le</option>
</select>
</label>
<label>value<input id="f-whenvar-value" type="number" /></label>
</div>
<div class="row">
<label class="grow">setFlags (через запятую)<input id="f-setflags" /></label>
</div>
<div class="row">
<label class="grow">setVars (ключ=число, через запятую)<input id="f-setvars" /></label>
</div>
<div class="row">
<label class="grow">do[] (kind:id:count — giveItem/takeItem/sound/toast/custom)<input id="f-do" /></label>
</div>
</details>
<details open>
<summary>выборы (choices)</summary>
<div id="choices"></div>
<button id="btn-add-choice" type="button">+ выбор</button>
</details>
<div class="row buttons">
<button id="btn-add-node" type="button">+ узел</button>
<button id="btn-del-node" type="button" class="danger">удалить узел</button>
</div>
</div>
</aside>
</main>
<script src="/editor.js"></script>
</body>
</html>
