Basic modal for user scripts

dice-modal.js

@@ -0,0 +1,161 @@
+(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;
+        });
+    }
+
+    // create the styled modal with inputs, code area, and output box
+    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);
+
+        document.body.appendChild(modal);
+        makeDraggable(modal, header);
+    }
+
+    // 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;
+
+})(window);