From 1cd57ff0152e51e467dccb3a943361f70de0fe4c Mon Sep 17 00:00:00 2001 From: AndreiM Date: Thu, 2 Jan 2025 19:50:37 -0500 Subject: [PATCH] Added Better Variable Control --- README.md | 6 ++++ index.html | 8 +++-- script.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++---- style.css | 13 ++++++++ 4 files changed, 106 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index b1c8220..a61c1e2 100644 --- 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 index 3cf8a3e..2073efb 100644 --- a/index.html +++ b/index.html @@ -56,9 +56,11 @@

JukaGUI Generator

- - - + + + + +
Button
diff --git a/script.js b/script.js index e6df7d1..48b57b9 100644 --- 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 index 3cb289f..3adece8 100644 --- 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; +} + +