Skip to content

Monaco editor #607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Volte6 merged 4 commits into from
Jun 9, 2026
Merged

Monaco editor #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81c94b0
Updating to use monaco editor
Volte6 Jun 8, 2026
bed54b9
monaco editor supporting changes
Volte6 Jun 8, 2026
9f2d129
Fixing
Volte6 Jun 8, 2026
5ffe165
Merge branch 'master' into monaco-editor
Volte6 Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 24 additions & 25 deletions _datafiles/html/admin/buffs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,20 @@
.flag-desc { font-size: 0.75rem; color: var(--color-text-faint); display: block; margin-top: 0.1rem; }

/* script */
.script-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.85rem; color: var(--color-primary); font-weight: 600; padding: 0.5rem 0; user-select: none; }
.script-toggle::before { content: "\25B6"; font-size: 0.65rem; transition: transform 0.15s; }
.script-toggle.open::before { transform: rotate(90deg); }
.script-area { display: none; margin-top: 0.5rem; }
.script-area.open { display: block; }
.script-area textarea { width: 100%; min-height: 660px; font-family: monospace; font-size: 0.82rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-medium); border-radius: 4px; resize: vertical; background: var(--color-primary); color: var(--color-code-text); line-height: 1.55; }
.script-area textarea:focus { outline: 2px solid var(--color-accent-link); outline-offset: 1px; }
.script-hint { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 0.3rem; }
.script-section {
margin-top: 1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.script-section-toolbar {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.script-section-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); flex: 1; }
.script-has-badge {
font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 3px;
background: var(--color-warning-bg); color: var(--color-warning-text);
border: 1px solid var(--color-warning-text); display: none;
}
.script-has-badge.visible { display: inline; }

.action-bar { display: flex; gap: 0.6rem; margin-top: 1.25rem; align-items: center; flex-wrap: wrap; }
.btn { padding: 0.45rem 1.1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
Expand Down Expand Up @@ -237,16 +243,15 @@ <h2 id="editor-title">Buff Editor</h2>
</div>

<!-- Script editor -->
<div style="margin-top:1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;">
<div class="script-toggle" id="script-toggle" onclick="toggleScript()">Script</div>
<div class="script-area" id="script-area">
<div style="display:flex;justify-content:flex-end;margin-bottom:0.4rem;">
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
</div>
<textarea id="f-script" spellcheck="false" placeholder="// JavaScript for buff events&#10;// Leave blank to delete the script file."></textarea>
<div id="script-error" class="script-error"></div>
<div class="script-hint">Saved as a .js file alongside the buff's YAML. Clear the field and save to delete the script.</div>
<div class="script-section">
<div class="script-section-toolbar">
<span class="script-section-label">Script</span>
<span class="script-has-badge" id="script-has-badge">has script</span>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="ScriptEditor.open('f-script')">&#x26F6; Pop Out</button>
</div>
<textarea id="f-script" spellcheck="false" style="display:none"></textarea>
<div id="script-error" class="script-error"></div>
</div>

<div class="action-bar">
Expand Down Expand Up @@ -408,8 +413,7 @@ <h2 id="editor-title">Buff Editor</h2>

setVal('f-script', script);
if (scriptSync) scriptSync();
document.getElementById('script-toggle').classList.toggle('open', script.length > 0);
document.getElementById('script-area').classList.toggle('open', script.length > 0);
document.getElementById('script-has-badge').classList.toggle('visible', script.length > 0);
}

// -------------------------------------------------------------------------
Expand Down Expand Up @@ -673,13 +677,8 @@ <h2 id="editor-title">Buff Editor</h2>
// -------------------------------------------------------------------------
// Script toggle
// -------------------------------------------------------------------------
window.toggleScript = function () {
document.getElementById('script-toggle').classList.toggle('open');
document.getElementById('script-area').classList.toggle('open');
};

window.openScriptWizard = function () {
ScriptWizard.open({ scriptType: 'buff', textareaId: 'f-script', syncFn: scriptSync });
ScriptWizard.open({ scriptType: 'buff', textareaId: 'f-script' });
};

// -------------------------------------------------------------------------
Expand Down
62 changes: 26 additions & 36 deletions _datafiles/html/admin/items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,23 +149,22 @@
.buff-chip button:hover { color: var(--color-danger); }

/* script editor */
.script-toggle {
display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
font-size: 0.85rem; color: var(--color-primary); font-weight: 600; padding: 0.5rem 0;
user-select: none;
}
.script-toggle::before { content: "\25B6"; font-size: 0.65rem; transition: transform 0.15s; }
.script-toggle.open::before { transform: rotate(90deg); }
.script-area {
display: none; margin-top: 0.5rem;
}
.script-area.open { display: block; }
.script-area textarea {
width: 100%; min-height: 660px; font-family: monospace; font-size: 0.82rem;
padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-medium); border-radius: 4px;
resize: vertical; background: var(--color-primary); color: var(--color-code-text); line-height: 1.55;
}
.script-area textarea:focus { outline: 2px solid var(--color-accent-link); outline-offset: 1px; }
.script-section {
margin-top: 1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.script-section-toolbar {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.script-section-label {
font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); flex: 1;
}
.script-has-badge {
font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 3px;
background: var(--color-warning-bg); color: var(--color-warning-text);
border: 1px solid var(--color-warning-text); display: none;
}
.script-has-badge.visible { display: inline; }
.script-hint { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 0.3rem; }

/* action bar */
Expand Down Expand Up @@ -365,16 +364,15 @@ <h2 id="editor-title">Item Editor</h2>
</div>

<!-- Script editor -->
<div style="margin-top:1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;">
<div class="script-toggle" id="script-toggle" onclick="toggleScript()">Script</div>
<div class="script-area" id="script-area">
<div style="display:flex;justify-content:flex-end;margin-bottom:0.4rem;">
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
</div>
<textarea id="f-script" spellcheck="false" placeholder="// JavaScript for this item's events (onFound, onLost, onUse, onPurchase)&#10;// Leave blank to delete the script file."></textarea>
<div id="script-error" class="script-error"></div>
<div class="script-hint">Saved as a .js file alongside the item's YAML. Clear the field and save to delete the script.</div>
<div class="script-section">
<div class="script-section-toolbar">
<span class="script-section-label">Script</span>
<span class="script-has-badge" id="script-has-badge">has script</span>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="ScriptEditor.open('f-script')">&#x26F6; Pop Out</button>
</div>
<textarea id="f-script" spellcheck="false" style="display:none"></textarea>
<div id="script-error" class="script-error"></div>
</div>

<div class="action-bar">
Expand Down Expand Up @@ -601,8 +599,7 @@ <h2 id="editor-title">Item Editor</h2>
// Script
setVal('f-script', script);
if (scriptSync) scriptSync();
document.getElementById('script-toggle').classList.toggle('open', script.length > 0);
document.getElementById('script-area').classList.toggle('open', script.length > 0);
document.getElementById('script-has-badge').classList.toggle('visible', script.length > 0);
}

// -------------------------------------------------------------------------
Expand Down Expand Up @@ -807,15 +804,8 @@ <h2 id="editor-title">Item Editor</h2>
// -------------------------------------------------------------------------
// Script toggle
// -------------------------------------------------------------------------
window.toggleScript = function () {
const toggle = document.getElementById('script-toggle');
const area = document.getElementById('script-area');
toggle.classList.toggle('open');
area.classList.toggle('open');
};

window.openScriptWizard = function () {
ScriptWizard.open({ scriptType: 'item', textareaId: 'f-script', syncFn: scriptSync });
ScriptWizard.open({ scriptType: 'item', textareaId: 'f-script' });
};

// -------------------------------------------------------------------------
Expand Down
67 changes: 27 additions & 40 deletions _datafiles/html/admin/mobs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,22 +224,20 @@
.shop-field .field-hint { font-size: 0.7rem; color: var(--color-text-secondary); margin-top: 0.1rem; }

/* script editor */
.script-toggle {
display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
font-size: 0.85rem; color: var(--color-primary); font-weight: 600; padding: 0.5rem 0;
user-select: none;
}
.script-toggle::before { content: "\25B6"; font-size: 0.65rem; transition: transform 0.15s; }
.script-toggle.open::before { transform: rotate(90deg); }
.script-area { display: none; margin-top: 0.5rem; }
.script-area.open { display: block; }
.script-area textarea {
width: 100%; min-height: 660px; font-family: monospace; font-size: 0.82rem;
padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-medium); border-radius: 4px;
resize: vertical; background: var(--color-primary); color: var(--color-code-text); line-height: 1.55;
}
.script-area textarea:focus { outline: 2px solid var(--color-accent-link); outline-offset: 1px; }
.script-hint { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 0.3rem; }
.script-section {
margin-top: 1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.script-section-toolbar {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.script-section-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); flex: 1; }
.script-has-badge {
font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 3px;
background: var(--color-warning-bg); color: var(--color-warning-text);
border: 1px solid var(--color-warning-text); display: none;
}
.script-has-badge.visible { display: inline; }

/* action bar */
.action-bar { display: flex; gap: 0.6rem; margin-top: 1.25rem; align-items: center; flex-wrap: wrap; }
Expand Down Expand Up @@ -507,18 +505,18 @@ <h2 id="editor-title">Mob Editor</h2>
</div>

<!-- Script editor -->
<div style="margin-top:1.25rem; border-top: 1px solid var(--color-border-light); padding-top: 1rem;">
<div class="script-toggle" id="script-toggle" onclick="toggleScript()">Script</div>
<div class="script-area" id="script-area">
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;flex-wrap:wrap;">
<select id="script-selector" style="flex:1;min-width:160px;padding:0.3rem 0.5rem;border:1px solid var(--color-border-medium);border-radius:4px;font-size:0.85rem;background:var(--color-surface-white);" onchange="switchScript(this.value)"></select>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="promptNewInstanceScript()">+ New Instance Script</button>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
</div>
<textarea id="f-script" spellcheck="false" placeholder="// JavaScript for this mob's events (onAsk, onGive, onIdle, onShow)&#10;// Leave blank to delete the script file."></textarea>
<div id="script-error" class="script-error"></div>
<div class="script-hint" id="script-hint">Saved as a .js file alongside the mob's YAML. Clear the field and save to delete the script.</div>
<div class="script-section">
<div class="script-section-toolbar">
<span class="script-section-label">Script</span>
<span class="script-has-badge" id="script-has-badge">has script</span>
<select id="script-selector" style="padding:0.3rem 0.5rem;border:1px solid var(--color-border-medium);border-radius:4px;font-size:0.85rem;background:var(--color-surface-white);" onchange="switchScript(this.value)"></select>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="promptNewInstanceScript()">+ New Instance Script</button>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="openScriptWizard()">+ Add Event Handler</button>
<button class="btn btn-secondary" style="font-size:0.78rem;padding:0.25rem 0.7rem;" onclick="ScriptEditor.open('f-script')">&#x26F6; Pop Out</button>
</div>
<textarea id="f-script" spellcheck="false" style="display:none"></textarea>
<div id="script-error" class="script-error"></div>
<div id="script-hint" style="font-size:0.75rem;color:var(--color-text-faint);"></div>
</div>

<div class="action-bar">
Expand Down Expand Up @@ -1537,15 +1535,8 @@ <h2 id="editor-title">Mob Editor</h2>
// -------------------------------------------------------------------------
// Script toggle
// -------------------------------------------------------------------------
window.toggleScript = function () {
const toggle = document.getElementById('script-toggle');
const area = document.getElementById('script-area');
toggle.classList.toggle('open');
area.classList.toggle('open');
};

window.openScriptWizard = function () {
ScriptWizard.open({ scriptType: 'mob', textareaId: 'f-script', syncFn: scriptSync });
ScriptWizard.open({ scriptType: 'mob', textareaId: 'f-script' });
};

// -------------------------------------------------------------------------
Expand Down Expand Up @@ -1592,8 +1583,7 @@ <h2 id="editor-title">Mob Editor</h2>
// Only auto-toggle on initial load (when tags list is explicitly provided)
if (tags !== undefined) {
const hasAnyScript = script.length > 0 || resolvedTags.length > 0;
document.getElementById('script-toggle').classList.toggle('open', hasAnyScript);
document.getElementById('script-area').classList.toggle('open', hasAnyScript);
document.getElementById('script-has-badge').classList.toggle('visible', hasAnyScript);
}

const hint = document.getElementById('script-hint');
Expand Down Expand Up @@ -1634,9 +1624,6 @@ <h2 id="editor-title">Mob Editor</h2>
o.textContent = 'Instance: ' + clean;
sel.appendChild(o);
sel.value = clean;
// Ensure the script section is open
document.getElementById('script-toggle').classList.add('open');
document.getElementById('script-area').classList.add('open');
loadScriptForTag(clean);
};

Expand Down
Loading
Loading