299 lines
10 KiB
JavaScript
299 lines
10 KiB
JavaScript
// dice-modal.js
|
|
(function(global){
|
|
'use strict';
|
|
|
|
// make the modal draggable by its header
|
|
function makeDraggable(modal, header){
|
|
let dragging = false, startX, startY, origX, origY;
|
|
|
|
header.addEventListener('mousedown', function(e){
|
|
dragging = true;
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
const rect = modal.getBoundingClientRect();
|
|
origX = rect.left;
|
|
origY = rect.top;
|
|
e.preventDefault();
|
|
});
|
|
|
|
document.addEventListener('mousemove', function(e){
|
|
if(!dragging) return;
|
|
modal.style.left = origX + (e.clientX - startX) + 'px';
|
|
modal.style.top = origY + (e.clientY - startY) + 'px';
|
|
});
|
|
|
|
document.addEventListener('mouseup', function(){
|
|
dragging = false;
|
|
});
|
|
}
|
|
|
|
// 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',
|
|
backgroundColor:'#333',
|
|
color: '#fff',
|
|
padding: '10px',
|
|
borderRadius: '8px',
|
|
zIndex: '10000',
|
|
userSelect: 'none'
|
|
});
|
|
|
|
// header bar
|
|
const header = document.createElement('div');
|
|
header.innerHTML = '<strong>Dice Tracker</strong>';
|
|
Object.assign(header.style, {
|
|
cursor: 'move',
|
|
paddingBottom: '10px',
|
|
borderBottom: '1px solid #555'
|
|
});
|
|
modal.appendChild(header);
|
|
|
|
// inputs container
|
|
const form = document.createElement('div');
|
|
form.style.display = 'flex';
|
|
form.style.gap = '10px';
|
|
form.style.marginTop = '10px';
|
|
|
|
function labeledInput(labelText, id){
|
|
const wrapper = document.createElement('div');
|
|
wrapper.style.width = '45%';
|
|
wrapper.style.marginBottom = '10px';
|
|
|
|
const label = document.createElement('label');
|
|
label.textContent = labelText;
|
|
label.style.display = 'block';
|
|
label.style.marginBottom = '5px';
|
|
wrapper.appendChild(label);
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.id = id;
|
|
Object.assign(input.style, {
|
|
width: '100%',
|
|
backgroundColor: '#222',
|
|
color: '#fff',
|
|
border: '1px solid #555',
|
|
padding: '5px'
|
|
});
|
|
wrapper.appendChild(input);
|
|
return wrapper;
|
|
}
|
|
|
|
form.appendChild(labeledInput('Base Bet', 'baseBet'));
|
|
form.appendChild(labeledInput('Base Multiplier', 'baseMultiplier'));
|
|
modal.appendChild(form);
|
|
|
|
// run/stop button
|
|
const runBtn = document.createElement('button');
|
|
runBtn.id = 'run-button';
|
|
runBtn.textContent = 'Run';
|
|
Object.assign(runBtn.style, {
|
|
width: '100%',
|
|
marginTop: '10px',
|
|
padding: '10px',
|
|
backgroundColor: '#444',
|
|
color: '#fff',
|
|
border: '1px solid #555',
|
|
cursor: 'pointer'
|
|
});
|
|
modal.appendChild(runBtn);
|
|
|
|
// code textarea
|
|
const codeArea = document.createElement('textarea');
|
|
codeArea.id = 'codeArea';
|
|
codeArea.placeholder = '// your code here\n// use settings.baseBet & settings.baseMultiplier';
|
|
Object.assign(codeArea.style, {
|
|
width: '600px',
|
|
height: '225px',
|
|
marginTop: '10px',
|
|
backgroundColor: '#222',
|
|
color: '#fff',
|
|
border: '1px solid #555',
|
|
padding: '10px'
|
|
});
|
|
modal.appendChild(codeArea);
|
|
|
|
// output box
|
|
const outputBox = document.createElement('div');
|
|
outputBox.id = 'output-box';
|
|
Object.assign(outputBox.style, {
|
|
width: '100%',
|
|
height: '150px',
|
|
overflowY: 'auto',
|
|
marginTop: '10px',
|
|
backgroundColor: '#222',
|
|
color: '#fff',
|
|
border: '1px solid #555',
|
|
padding: '10px'
|
|
});
|
|
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();
|
|
}
|
|
|
|
// expose createModal, output, clearOutput
|
|
global.createModal = createModal;
|
|
global.output = output;
|
|
global.clearOutput= clearOutput;
|
|
|
|
})(window);
|