diff options
Diffstat (limited to 'internal/admin/static/hazardeditor.js')
| -rw-r--r-- | internal/admin/static/hazardeditor.js | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/internal/admin/static/hazardeditor.js b/internal/admin/static/hazardeditor.js new file mode 100644 index 0000000..b07456e --- /dev/null +++ b/internal/admin/static/hazardeditor.js @@ -0,0 +1,226 @@ +var hazardData = null; +var hazardID = null; +var expandedCards = {}; +var addedSections = {}; +var cardWidths = {}; + +var HAZARD_SECTIONS = [ + { + id: 'core', label: 'Core', always: true, + fields: [ + ['name', 'Name', 'text'], + ['description', 'Description', 'textarea', '', 'wide'], + ['warn_message', 'Warn Message', 'text', '', 'wide'], + ['hit_message', 'Hit Message', 'text'], + ['miss_message', 'Miss Message', 'text'], + ['required_item', 'Required Item', 'text'], + ['speed', 'Speed', 'number', '', 'narrow'], + ] + }, + { + id: 'combat', label: 'Combat', + detect: function(d) { return d.attack_type || d.attack || d.attack_bonus || d.max_hit; }, + fields: [ + ['attack_type', 'Attack Type', 'select', 'stab|slash|crush|ranged|science'], + ['attack', 'Attack', 'number', '', 'narrow'], + ['attack_bonus', 'Attack Bonus', 'number', '', 'narrow'], + ['max_hit', 'Max Hit', 'number', '', 'narrow'], + ] + } +]; + +function initHazardEditor() { + editorType = 'hazards'; + editorFields = []; + loadList(); + if (window.location.hash) loadHazardEditor(window.location.hash.substring(1)); +} + +function cardPath(sec) { return sec.path || ''; } + +function getVal(data, sec, key) { + return ced_getVal(data, sec, key); +} + +function fieldID(sec, key, idx) { + return ced_fieldID(sec, key, idx); +} + +function setupSearchFields() { ced_setupSearchFields(); } + +function collectFieldValue(el, type) { return ced_collectFieldValue(el, type); } + +function loadHazardEditor(id) { + hazardID = id; + currentID = id; + renderList(''); + window.location.hash = id; + API.get('/api/hazards/' + encodeURIComponent(id)).then(function(data) { + hazardData = data; + renderHazardEditor(id, data); + }).catch(function(e) { + $('#editorMain').innerHTML = '<p style="color:var(--danger)">Failed to load: ' + esc(e.message) + '</p>'; + }); +} + +function loadItem(id) { loadHazardEditor(id); } + +function renderHazardEditor(id, data) { + var html = '<h2>Hazard: ' + esc(id) + '</h2>'; + html += '<div class="tabs"><button class="tab active" onclick="switchTab(event,\'fields\')">Fields</button>'; + html += '<button class="tab" onclick="switchTab(event,\'yaml\')">Raw YAML</button></div>'; + + html += '<div class="tab-content" id="tabFields">'; + html += '<div class="obj-fields-wrap">'; + HAZARD_SECTIONS.forEach(function(sec) { + if (!sec.always && sec.detect && !sec.detect(data) && !addedSections[sec.id]) return; + html += renderCard(sec, data); + }); + html += '</div>'; + + html += '<div class="add-section-bar">'; + html += '<select id="addSectionSelect">'; + html += '<option value="">+ Add Section...</option>'; + HAZARD_SECTIONS.forEach(function(sec) { + if (sec.always) return; + if (sec.detect && sec.detect(data)) return; + if (addedSections[sec.id]) return; + html += '<option value="' + sec.id + '">' + esc(sec.label) + '</option>'; + }); + html += '</select>'; + html += '<button class="btn btn-primary btn-sm" onclick="addSection()">Add</button>'; + html += '</div>'; + html += '</div>'; + + html += '<div class="tab-content" id="tabYaml" style="display:none">'; + html += '<pre>' + esc(data._raw || JSON.stringify(data, null, 2)) + '</pre>'; + html += '</div>'; + + html += '<div class="btn-row">'; + html += '<button class="btn btn-primary" onclick="saveHazard()">Save</button>'; + html += '<button class="btn btn-danger" onclick="deleteHazard()">Delete</button>'; + html += '</div>'; + + $('#editorMain').innerHTML = html; + setupSearchFields(); +} + +function renderCurrent() { + if (!hazardData || !hazardID) return; + renderHazardEditor(hazardID, hazardData); +} + +function renderCard(sec, data) { + var collapsed = expandedCards[sec.id] === false; + var isFull = cardWidths[sec.id] !== undefined ? cardWidths[sec.id] : (sec.fullWidth || false); + var fullClass = isFull ? ' obj-card-full' : ''; + var h = '<div class="obj-card' + fullClass + '" data-card="' + sec.id + '">'; + h += '<div class="obj-card-header" onclick="toggleCard(\'' + sec.id + '\')">'; + h += '<span class="obj-card-arrow">' + (collapsed ? '▶' : '▼') + '</span>'; + h += '<button class="btn btn-sm obj-card-expand" onclick="event.stopPropagation();toggleCardWidth(\'' + sec.id + '\')" title="' + (isFull ? 'Half width' : 'Full width') + '">' + (isFull ? '\u229F' : '\u229E') + '</button>'; + h += '<span class="obj-card-label">' + sec.label + '</span>'; + if (!sec.always) { + h += '<button class="btn btn-sm btn-danger obj-card-remove" onclick="event.stopPropagation();removeSection(\'' + sec.id + '\')">X</button>'; + } + h += '</div>'; + if (!collapsed) { + h += '<div class="obj-card-body">'; + h += '<div class="obj-card-grid">'; + sec.fields.forEach(function(f) { + h += renderField(sec, f, data, -1); + }); + h += '</div>'; + h += '</div>'; + } + h += '</div>'; + return h; +} + +function renderField(sec, f, data, idx) { + return ced_renderField(sec, f, data, idx, null, null, cardPath, fieldID, getVal); +} + +function toggleCard(id) { + expandedCards[id] = expandedCards[id] === false ? true : false; + renderCurrent(); +} + +function toggleCardWidth(id) { + cardWidths[id] = !cardWidths[id]; + renderCurrent(); +} + +function removeSection(id) { + var sec = HAZARD_SECTIONS.find(function(s) { return s.id === id; }); + if (!sec) return; + if (sec.fields) sec.fields.forEach(function(f) { delete hazardData[f[0]]; }); + delete addedSections[id]; + renderCurrent(); +} + +function addSection() { + var sel = $('#addSectionSelect'); + var id = sel.value; + if (!id) return; + var sec = HAZARD_SECTIONS.find(function(s) { return s.id === id; }); + if (!sec) return; + + if (id === 'combat') { + hazardData.attack_type = ''; + hazardData.attack = 0; + hazardData.attack_bonus = 0; + hazardData.max_hit = 0; + } + addedSections[id] = true; + expandedCards[id] = true; + renderCurrent(); +} + +function saveHazard() { + if (!ced_validateFields(HAZARD_SECTIONS, fieldID, null)) return; + + var out = {}; + HAZARD_SECTIONS.forEach(function(sec) { + var sectionObj = {}; + var hasValues = sec.always; + + if (sec.fields) { + sec.fields.forEach(function(f) { + var fid = fieldID(sec, f[0]); + var el = document.getElementById(fid); + if (!el) return; + var val = collectFieldValue(el, f[2]); + if (val !== '' && val !== false && val !== 0 && val !== null) hasValues = true; + sectionObj[f[0]] = val; + }); + } + + if (sec.always) { + Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; }); + } else if (hasValues) { + Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; }); + } + }); + + ced_cleanOutput(out); + out.id = hazardID; + + API.put('/api/hazards/' + encodeURIComponent(hazardID), out).then(function(resp) { + notify('Hazard ' + hazardID + ' saved', 'success'); + updateUndoBar(); + if (resp && resp._raw) hazardData._raw = resp._raw; + }).catch(function(e) { notify('Save failed: ' + e.message, 'error'); }); +} + +function deleteHazard() { + if (!confirm('Delete hazard "' + hazardID + '"?')) return; + API.del('/api/hazards/' + encodeURIComponent(hazardID)).then(function() { + notify('Hazard ' + hazardID + ' deleted', 'success'); + updateUndoBar(); + hazardID = null; + currentID = null; + hazardData = null; + $('#editorMain').innerHTML = '<p style="color:#888;text-align:center;margin-top:60px">Deleted</p>'; + loadList(); + }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); }); +} |
