From 91eaf93aa42648c603bd7f037e0600b2776ae2e3 Mon Sep 17 00:00:00 2001 From: DylanBanta Date: Mon, 26 May 2025 22:59:50 -0400 Subject: [PATCH] Add save load back in --- dice-modal.js | 207 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 172 insertions(+), 35 deletions(-) diff --git a/dice-modal.js b/dice-modal.js index a52c645..d88594d 100644 --- a/dice-modal.js +++ b/dice-modal.js @@ -1,3 +1,4 @@ +// dice-modal.js (function(global){ 'use strict'; @@ -7,11 +8,11 @@ header.addEventListener('mousedown', function(e){ dragging = true; - startX = e.clientX; - startY = e.clientY; + startX = e.clientX; + startY = e.clientY; const rect = modal.getBoundingClientRect(); - origX = rect.left; - origY = rect.top; + origX = rect.left; + origY = rect.top; e.preventDefault(); }); @@ -26,20 +27,97 @@ }); } - // create the styled modal with inputs, code area, and output box + // helper to write to the output box + function output(msg){ + const box = document.getElementById('output-box'); + if(!box) return; + const div = document.createElement('div'); + div.textContent = msg; + box.appendChild(div); + box.scrollTop = box.scrollHeight; + } + + // helper to clear the output box + function clearOutput(){ + const box = document.getElementById('output-box'); + if(!box) return; + box.innerHTML = ''; + } + + // list all localStorage keys ending in .dice.js + function getDiceScriptKeys(){ + return Object.keys(localStorage).filter(key => key.endsWith('.dice.js')); + } + + // rebuild the dropdown of saved dice scripts + function populateSavedScripts(){ + const dropdown = document.getElementById('scriptDropdown'); + dropdown.innerHTML = ''; + const defaultOpt = document.createElement('option'); + defaultOpt.textContent = 'Select script'; + defaultOpt.value = ''; + dropdown.appendChild(defaultOpt); + getDiceScriptKeys().forEach(key => { + const opt = document.createElement('option'); + opt.value = key; + opt.textContent = key; + dropdown.appendChild(opt); + }); + } + + // save current codeArea under scriptNameInput + .dice.js + function saveScript(){ + const nameInput = document.getElementById('scriptNameInput'); + let name = nameInput.value.trim(); + if(!name){ + output('Please enter a script name'); + return; + } + if(!name.endsWith('.dice.js')){ + name += '.dice.js'; + } + const code = document.getElementById('codeArea').value; + localStorage.setItem(name, code); + output(`Saved ${name}`); + populateSavedScripts(); + } + + // load selected script into codeArea + function loadScript(){ + const dropdown = document.getElementById('scriptDropdown'); + const key = dropdown.value; + if(!key) return; + const code = localStorage.getItem(key); + document.getElementById('codeArea').value = code; + // remove the suffix in the input for clarity + document.getElementById('scriptNameInput').value = key.replace(/\.dice\.js$/, ''); + output(`Loaded ${key}`); + } + + // delete selected script + function deleteScript(){ + const dropdown = document.getElementById('scriptDropdown'); + const key = dropdown.value; + if(!key) return; + localStorage.removeItem(key); + output(`Deleted ${key}`); + populateSavedScripts(); + } + + // build and attach the modal function createModal(){ const modal = document.createElement('div'); Object.assign(modal.style, { - position: 'fixed', - top: '75px', - left: '65px', - width: '620px', + position: 'fixed', + top: '75px', + left: '65px', + width: '620px', backgroundColor:'#333', - color: '#fff', - padding: '10px', - borderRadius: '8px', - zIndex: '10000', - userSelect: 'none' + color: '#fff', + padding: '10px', + borderRadius: '8px', + zIndex: '10000', + userSelect: 'none' }); // header bar @@ -132,30 +210,89 @@ }); modal.appendChild(outputBox); + // script save/load controls + const scriptControls = document.createElement('div'); + Object.assign(scriptControls.style, { + display: 'flex', + alignItems: 'center', + gap: '5px', + marginTop: '10px' + }); + + const scriptNameInput = document.createElement('input'); + scriptNameInput.id = 'scriptNameInput'; + scriptNameInput.type = 'text'; + scriptNameInput.placeholder = 'script name'; + Object.assign(scriptNameInput.style, { + flex: '1', + backgroundColor: '#222', + color: '#fff', + border: '1px solid #555', + padding: '5px' + }); + scriptControls.appendChild(scriptNameInput); + + const saveBtn = document.createElement('button'); + saveBtn.id = 'saveScriptBtn'; + saveBtn.textContent = 'Save'; + Object.assign(saveBtn.style, { + padding: '5px 10px', + backgroundColor: '#444', + color: '#fff', + border: '1px solid #555', + cursor: 'pointer' + }); + scriptControls.appendChild(saveBtn); + + const dropdown = document.createElement('select'); + dropdown.id = 'scriptDropdown'; + Object.assign(dropdown.style, { + backgroundColor: '#222', + color: '#fff', + border: '1px solid #555', + padding: '5px' + }); + scriptControls.appendChild(dropdown); + + const loadBtn = document.createElement('button'); + loadBtn.id = 'loadScriptBtn'; + loadBtn.textContent = 'Load'; + Object.assign(loadBtn.style, { + padding: '5px 10px', + backgroundColor: '#444', + color: '#fff', + border: '1px solid #555', + cursor: 'pointer' + }); + scriptControls.appendChild(loadBtn); + + const deleteBtn = document.createElement('button'); + deleteBtn.id = 'deleteScriptBtn'; + deleteBtn.textContent = 'Delete'; + Object.assign(deleteBtn.style, { + padding: '5px 10px', + backgroundColor: '#444', + color: '#fff', + border: '1px solid #555', + cursor: 'pointer' + }); + scriptControls.appendChild(deleteBtn); + + modal.appendChild(scriptControls); + document.body.appendChild(modal); + + // wire up drag, save/load/delete, and dropdown population makeDraggable(modal, header); + saveBtn.addEventListener('click', saveScript); + loadBtn.addEventListener('click', loadScript); + deleteBtn.addEventListener('click', deleteScript); + populateSavedScripts(); } - // write a line to the output box - function output(msg){ - const box = document.getElementById('output-box'); - if(!box) return; - const div = document.createElement('div'); - div.textContent = msg; - box.appendChild(div); - box.scrollTop = box.scrollHeight; - } - - // clear all lines from the output box - function clearOutput(){ - const box = document.getElementById('output-box'); - if(!box) return; - box.innerHTML = ''; - } - - // expose to global scope for the main script to use - global.createModal = createModal; - global.output = output; - global.clearOutput = clearOutput; + // expose createModal, output, clearOutput + global.createModal = createModal; + global.output = output; + global.clearOutput= clearOutput; })(window);