Add save load back in

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;
+            startX = e.clientX;
-            startY   = e.clientY;
+            startY = e.clientY;
             const rect = modal.getBoundingClientRect();
-            origX    = rect.left;
+            origX = rect.left;
-            origY    = rect.top;
+            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',
+            position:       'fixed',
-            top:           '75px',
+            top:            '75px',
-            left:          '65px',
+            left:           '65px',
-            width:         '620px',
+            width:          '620px',
             backgroundColor:'#333',
-            color:         '#fff',
+            color:          '#fff',
-            padding:       '10px',
+            padding:        '10px',
-            borderRadius:  '8px',
+            borderRadius:   '8px',
-            zIndex:        '10000',
+            zIndex:         '10000',
-            userSelect:    'none'
+            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
+    // expose createModal, output, clearOutput
-    function output(msg){
+    global.createModal = createModal;
-        const box = document.getElementById('output-box');
+    global.output     = output;
-        if(!box) return;
+    global.clearOutput= clearOutput;
-        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;
 
 })(window);