Added Better Variable Control

jukaLang · Jan 3, 2025 · 1cd57ff · 1cd57ff
1 parent 10fbc58
commit 1cd57ff
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -82,3 +82,9 @@ If you encounter any issues or have questions, feel free to join our [Discord Ch
 
 This project is licensed under the MIT License. See the [LICENSE](https://github.com/jukaLang/JukaGUI/blob/main/LICENSE) file for details.
 
+## Special Thanks
+Special thanks to Nevrdid for finding and documenting bugs
+Special thanks to Arthur Gregorio for answering questions regarding Go structure.
+Special thanks to StarDrive and DigestPrism for supporting this app.
+Special thanks to all of Juka Discord channel for making this app possible.
+
diff --git a/index.html b/index.html
@@ -56,9 +56,11 @@ <h1>JukaGUI Generator</h1>
             <button onclick="renameScene()">Rename Scene</button>
         </div>
         <div class="variable-controls">
-            <button onclick="addVariable()">Add Variable</button>
-            <select id="variableSelector" onchange="changeVariable()"></select>
-            <button onclick="renameVariable()">Rename Variable</button>
+            <button id="addVariableButton" onclick="addVariable()">Add Variable</button>
+            <select id="variableSelector" style="display: none;" onchange="changeVariable()"></select>
+            <input type="text" id="variableValueInput" style="display: none;" readonly>
+            <button id="renameVariableButton" style="display: none;" onclick="renameVariable()">Rename Variable</button>
+            <button id="changeValueButton" style="display: none;" onclick="showChangeValue()">Change Value</button>
         </div>
         <div class="toolbar">
             <div class="element" draggable="true" data-type="button">Button</div>

diff --git a/script.js b/script.js
@@ -91,12 +91,23 @@ function renameScene() {
         delete scenes[currentScene];
         currentScene = newName;
 
+        // Update the option in the scene selector
         const selectedOption = sceneSelector.querySelector(`option[value="${sceneSelector.value}"]`);
-        selectedOption.value = newName;
-        selectedOption.textContent = newName;
+        if (selectedOption) {
+            selectedOption.value = newName;
+            selectedOption.textContent = newName;
+        }
+
+        // Reflect the change in the scene selector
+        sceneSelector.querySelector(`option[value="${sceneSelector.value}"]`).value = newName;
+        sceneSelector.querySelector(`option[value="${sceneSelector.value}"]`).textContent = newName;
 
         sceneSelector.value = newName;
         updateSceneChangeSelector();
+        loadScene(newName);
+        console.log(`Scene renamed to: ${newName}`);
+    } else {
+        console.log('Scene name already exists or invalid input.');
     }
 }
 
@@ -165,6 +176,7 @@ function addVariable() {
         variableOption.textContent = variableName;
         variableChangeSelector.appendChild(variableOption);
         variableSelector.value = variableName;
+        showVariableControls();
         changeVariable();
     }
 }
@@ -189,15 +201,71 @@ function renameVariable() {
     }
 }
 
+// Function to change variable
 function changeVariable() {
     const variableName = variableSelector.value;
-    const variableValue = prompt('Enter variable value:', variables[variableName]);
+    document.getElementById('variableValueInput').value = variables[variableName];
+}
+
+// Function to show variable controls
+function showVariableControls() {
+    document.getElementById('variableSelector').style.display = 'inline';
+    document.getElementById('variableValueInput').style.display = 'inline';
+    document.getElementById('renameVariableButton').style.display = 'inline';
+    document.getElementById('changeValueButton').style.display = 'inline';
+}
+
+// Function to show Change Value button and input field
+function showChangeValue() {
+    const variableName = variableSelector.value;
+    const variableValue = prompt('Enter new variable value:', variables[variableName]);
     if (variableValue !== null) {
         variables[variableName] = variableValue;
+        document.getElementById('variableValueInput').value = variables[variableName];
         updateVariableText();
     }
 }
 
+function showTooltip(event) {
+    const target = event.target;
+    const variableNames = target.getAttribute('data-variable');
+    if (variableNames) {
+        let tooltip = document.createElement('div');
+        tooltip.className = 'tooltip';
+        let tooltipText = '';
+        const addedVariables = new Set(); // To track added variables and avoid duplicates
+        variableNames.split(',').forEach(variableName => {
+            if (variables[variableName] !== undefined && !addedVariables.has(variableName)) {
+                tooltipText += `$${variableName}:${variables[variableName]} `;
+                addedVariables.add(variableName);
+            }
+        });
+        tooltip.textContent = tooltipText.trim();
+        document.body.appendChild(tooltip);
+        const rect = target.getBoundingClientRect();
+        tooltip.style.left = `${rect.left + window.scrollX}px`;
+        tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight}px`;
+        target._tooltip = tooltip;
+    }
+}
+
+
+function hideTooltip(event) {
+    const target = event.target;
+    if (target._tooltip) {
+        document.body.removeChild(target._tooltip);
+        delete target._tooltip;
+    }
+}
+
+function setupHoverEvents(el) {
+    el.addEventListener('mouseenter', showTooltip);
+    el.addEventListener('mouseleave', hideTooltip);
+}
+
+// Event listener for variable selector
+variableSelector.addEventListener('change', changeVariable);
+
 function updateElementFontSizes() {
     const elements = document.querySelectorAll('.canvas .element');
     elements.forEach(el => {
@@ -212,10 +280,17 @@ function updateVariableText() {
         if (el.getAttribute('data-type') === 'button' || el.getAttribute('data-type') === 'label') {
             let textSpan = el.querySelector('.text-content');
             let text = textSpan.textContent;
+            // Keep $variable names and show tooltip on hover
+            const addedVariables = new Set(); // To track added variables and avoid duplicates
             Object.keys(variables).forEach(key => {
-                text = text.replace(`$${key}`, variables[key]);
+                const variablePlaceholder = `$${key}`;
+                if (text.includes(variablePlaceholder) && !addedVariables.has(key)) {
+                    addedVariables.add(key);
+                    el.setAttribute('data-variable', `${el.getAttribute('data-variable') ? el.getAttribute('data-variable') + ',' : ''}${key}`);
+                    setupHoverEvents(el);
+                }
             });
-            textSpan.textContent = text;
+            textSpan.textContent = text; // Ensure text remains unchanged
         }
     });
 }
@@ -235,6 +310,8 @@ canvas.addEventListener('drop', event => {
 });
 
 function setupElementEvents(el) {
+    setupHoverEvents(el);
+
     el.addEventListener('mousedown', event => {
         if (event.button === 2) { // Right mouse button
             el.style.cursor = 'nwse-resize';

diff --git a/style.css b/style.css
@@ -208,3 +208,16 @@ pre {
 .contribute-banner a:hover {
     text-decoration: underline;
 }
+
+.tooltip {
+    position: absolute;
+    background-color: #333;
+    color: #fff;
+    padding: 5px;
+    border-radius: 4px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+