Dylan/user-scripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add save load back in

Browse Source
This commit is contained in:
DylanBanta 2025-05-26 22:59:50 -04:00
parent 06fb22a383
commit 91eaf93aa4
1 changed files with 172 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
dice-modal.js
View File

@ -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);