Skip to content

Commit

Permalink
Alpha v0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheAndreiM
TheAndreiM committed Jan 2, 2025
1 parent 002f571 commit 14d031f
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 104 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/docker-image.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,14 +281,14 @@ jobs:
cd player
cp jukaconfig.json Roboto-Black.ttf background.jpg SDL2.dll SDL2_image.dll SDL2_ttf.dll ../JukaGUI-Trimui-Windows/
cd ..
zip -r JukaGUI-Trimui-Windows.zip JukaGUI-Trimui-Windows/
zip -r JukaGUI-Windows.zip JukaGUI-Trimui-Windows/
- name: Upload Release Assets
uses: actions/upload-release-asset@v1
with:
upload_url: ${{ needs.create-tag.outputs.upload_url }}
asset_path: ./JukaGUI-Trimui-Windows.zip
asset_name: JukaGUI-Trimui-Windows.zip
asset_path: ./JukaGUI-Windows.zip
asset_name: JukaGUI-Windows.zip
asset_content_type: application/zip
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# JukaGUI

[![Netlify Status](https://api.netlify.com/api/v1/badges/dea0cf4b-3799-41d9-8f2a-b4fd2a270b15/deploy-status)](https://app.netlify.com/sites/jukagenerator/deploys)
[![Netlify Status](https://api.netlify.com/api/v1/badges/dea0cf4b-3799-41d9-8f2a-b4fd2a270b15/deploy-status)](https://generate.jukalang.com)

**Juka GUI Creator**

Expand Down
10 changes: 6 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,23 @@ <h1>JukaGUI Generator</h1>
</div>
<div class="color-controls">
<!-- Color Picker for Modifying Text Color -->
<label for="colorPicker" class="control-label">Font Color:</label>
<label for="colorPicker" class="control-label" style="display:none;">Font Color:</label>
<input type="color" id="colorPicker" class="color-picker" value="#000000" style="display:none;" />
<!-- Background Color Picker for Buttons -->
<label for="bgColorPicker" class="control-label">Background Color:</label>
<label for="bgColorPicker" class="control-label" style="display:none;">Background Color:</label>
<input type="color" id="bgColorPicker" class="bg-color-picker" value="#ffffff" style="display:none;" />


<!-- Font Size Picker -->
<label for="fontSizePicker" class="control-label">Text Size:</label>
<label for="fontSizePicker" class="control-label" style="display:none;">Text Size:</label>
<select id="fontSizePicker" class="font-size-picker" style="display:none;">
<option value="title">Title</option>
<option value="big">Big</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</select>
<!-- Trigger Selector for Buttons -->
<label for="triggerSelector" class="control-label">Trigger:</label>
<label for="triggerSelector" class="control-label" style="display:none;">Trigger:</label>
<select id="triggerSelector" class="trigger-selector" style="display:none;">
<option value="">None</option>
<option value="change_scene">Change Scene</option>
Expand Down
62 changes: 41 additions & 21 deletions player/main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,27 +217,48 @@ func renderScene(renderer *sdl.Renderer, config *Config, sceneConfig SceneConfig
fontCache[element.Font] = font
}

// Calculate text dimensions
textWidth, textHeight := getTextDimensions(font, element.Text)
width := textWidth + 20 // Add padding to text width
height := textHeight + 10 // Add padding to text height

// Override width and height if specified
if element.Width != "" {
w, _ := strconv.Atoi(element.Width)
width = int32(w)
}
if element.Height != "" {
h, _ := strconv.Atoi(element.Height)
height = int32(h)
}
if element.Type == "image" && element.Image != "" {
imageTexture, err := img.LoadTexture(renderer, element.Image)
if err == nil {
defer imageTexture.Destroy()
width, err := strconv.Atoi(element.Width)
if err != nil {
width = 0 // Default width if conversion fails
}
height, err := strconv.Atoi(element.Height)
if err != nil {
height = 0 // Default height if conversion fails
}
imageRect := sdl.Rect{X: element.X, Y: element.Y, W: int32(width), H: int32(height)}
renderer.Copy(imageTexture, nil, &imageRect)
}
} else {
// Calculate text dimensions
textWidth, textHeight := getTextDimensions(font, element.Text)
width := textWidth + 20 // Add padding to text width
height := textHeight + 10 // Add padding to text height

// Override width and height if specified
if element.Width != "" {
w, err := strconv.Atoi(element.Width)
if err == nil {
width = int32(w)
}
}
if element.Height != "" {
h, err := strconv.Atoi(element.Height)
if err == nil {
height = int32(h)
}
}

// Render button background
renderer.SetDrawColor(bgColor.R, bgColor.G, bgColor.B, bgColor.A)
renderer.FillRect(&sdl.Rect{X: element.X - width/2, Y: element.Y - height/2, W: width, H: height})
// Render button background or label background
renderer.SetDrawColor(bgColor.R, bgColor.G, bgColor.B, bgColor.A)
renderer.FillRect(&sdl.Rect{X: element.X, Y: element.Y, W: width, H: height})

// Render button text
renderText(renderer, font, element.Text, color, element.X, element.Y)
// Render button text or label text
renderText(renderer, font, element.Text, color, element.X+width/2, element.Y+height/2)
}
}

for _, font := range fontCache {
Expand Down Expand Up @@ -315,7 +336,6 @@ func main() {
for event := sdl.PollEvent(); event != nil; event = sdl.PollEvent() {
switch e := event.(type) {
case *sdl.KeyboardEvent: // Use pointer receiver
fmt.Printf("Keyboard Event: Type: %d, Keysym: %+v, State: %d\n", e.Type, e.Keysym, e.State)
if e.Type == sdl.KEYDOWN {
switch e.Keysym.Sym {
case sdl.K_UP, sdl.K_w:
Expand All @@ -334,7 +354,7 @@ func main() {
running = false
case *sdl.MouseButtonEvent: // Use pointer receiver
fmt.Printf("Mouse event")
if e.Button == 1 {
if e.Button == sdl.BUTTON_LEFT {
mouseX := int(e.X)
mouseY := int(e.Y)

Expand Down
179 changes: 104 additions & 75 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function updateScenes() {
}



function loadScene(sceneName) {
canvas.innerHTML = '';
scenes[sceneName].forEach(el => {
Expand Down Expand Up @@ -318,88 +319,86 @@ function setupElementEvents(el) {
}
});

el.addEventListener('click', () => {
// Hide all potential fields first
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';

if (el.getAttribute('data-type') !== 'image') {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'block';
colorPicker.value = el.getAttribute('data-color') || '#000000';
colorPicker.style.display = 'block';
colorPicker.oninput = function() {
el.style.color = colorPicker.value;
el.setAttribute('data-color', colorPicker.value);
};
el.addEventListener('click', () => {
hideControls(); // Hide all controls first

document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'block';
fontSizePicker.value = el.getAttribute('data-font') || 'medium';
fontSizePicker.style.display = 'block';
fontSizePicker.onchange = function() {
el.setAttribute('data-font', fontSizePicker.value);
el.style.fontSize = getFontSize(fontSizePicker.value) + 'px';
};
if (el.getAttribute('data-type') !== 'image') {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'block';
colorPicker.value = el.getAttribute('data-color') || '#000000';
colorPicker.style.display = 'block';
colorPicker.oninput = function() {
el.style.color = colorPicker.value;
el.setAttribute('data-color', colorPicker.value);
};

document.querySelector('.control-label[for="bgColorPicker"]').style.display = 'block';
bgColorPicker.value = el.getAttribute('data-bg-color') || '#ffffff';
bgColorPicker.style.display = 'block';
bgColorPicker.oninput = function() {
el.style.backgroundColor = bgColorPicker.value;
el.setAttribute('data-bg-color', bgColorPicker.value);
};
document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'block';
fontSizePicker.value = el.getAttribute('data-font') || 'medium';
fontSizePicker.style.display = 'block';
fontSizePicker.onchange = function() {
el.setAttribute('data-font', fontSizePicker.value);
el.style.fontSize = getFontSize(fontSizePicker.value) + 'px';
};

document.querySelector('.control-label[for="triggerSelector"]').style.display = 'block';
triggerSelector.value = el.getAttribute('data-trigger') || '';
triggerSelector.style.display = 'block';
triggerSelector.onchange = function() {
el.setAttribute('data-trigger', triggerSelector.value);
// Hide all fields initially
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';

if (triggerSelector.value === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
sceneChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', sceneChangeSelector.value);
};
} else if (triggerSelector.value === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
externalAppPath.oninput = function() {
el.setAttribute('data-trigger-target', externalAppPath.value);
};
} else if (triggerSelector.value === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
variableChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', variableChangeSelector.value);
};
variableChangeValue.oninput = function() {
el.setAttribute('data-trigger-value', variableChangeValue.value);
};
}
};
document.querySelector('.control-label[for="bgColorPicker"]').style.display = 'block';
bgColorPicker.value = el.getAttribute('data-bg-color') || '#ffffff';
bgColorPicker.style.display = 'block';
bgColorPicker.oninput = function() {
el.style.backgroundColor = bgColorPicker.value;
el.setAttribute('data-bg-color', bgColorPicker.value);
};

// Set initial state based on current trigger
if (el.getAttribute('data-trigger') === 'change_scene') {
document.querySelector('.control-label[for="triggerSelector"]').style.display = 'block';
triggerSelector.value = el.getAttribute('data-trigger') || '';
triggerSelector.style.display = 'block';
triggerSelector.onchange = function() {
el.setAttribute('data-trigger', triggerSelector.value);
// Hide all trigger-related fields initially
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';

if (triggerSelector.value === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'external_app') {
sceneChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', sceneChangeSelector.value);
};
} else if (triggerSelector.value === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'set_variable') {
externalAppPath.oninput = function() {
el.setAttribute('data-trigger-target', externalAppPath.value);
};
} else if (triggerSelector.value === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
variableChangeSelector.onchange = function() {
el.setAttribute('data-trigger-target', variableChangeSelector.value);
};
variableChangeValue.oninput = function() {
el.setAttribute('data-trigger-value', variableChangeValue.value);
};
}
};

// Set initial state based on the current trigger
if (el.getAttribute('data-trigger') === 'change_scene') {
sceneChangeSelector.style.display = 'block';
sceneChangeSelector.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'external_app') {
externalAppPath.style.display = 'block';
externalAppPath.value = el.getAttribute('data-trigger-target') || '';
} else if (el.getAttribute('data-trigger') === 'set_variable') {
variableChangeSelector.style.display = 'block';
variableChangeValue.style.display = 'block';
variableChangeSelector.value = el.getAttribute('data-trigger-target') || '';
variableChangeValue.value = el.getAttribute('data-trigger-value') || '';
}


} else {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'none';
colorPicker.style.display = 'none';
Expand Down Expand Up @@ -451,18 +450,25 @@ function addElement(type, x, y) {
removeButton.classList.add('remove-button');
el.appendChild(removeButton);

removeButton.addEventListener('click', (event) => {
event.stopPropagation();
el.remove();
updateScenes();
});
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const parent = el.parentNode;
parent.removeChild(el);
const sceneElements = scenes[currentScene];
const elementIndex = sceneElements.indexOf(el);
if (elementIndex > -1) {
sceneElements.splice(elementIndex, 1);
}
});


setupElementEvents(el); // Ensure events are set up

canvas.appendChild(el);
return el;
}



function getFontSize(fontSize) {
const sizes = {
title: titleSizeInput.value,
Expand Down Expand Up @@ -541,6 +547,29 @@ function createJukaApp() {
}


canvas.addEventListener('click', (event) => {
if (event.target === canvas) {
hideControls();
}
});

function hideControls() {
document.querySelector('.control-label[for="colorPicker"]').style.display = 'none';
colorPicker.style.display = 'none';
document.querySelector('.control-label[for="bgColorPicker"]').style.display = 'none';
bgColorPicker.style.display = 'none';
document.querySelector('.control-label[for="fontSizePicker"]').style.display = 'none';
fontSizePicker.style.display = 'none';
document.querySelector('.control-label[for="triggerSelector"]').style.display = 'none';
triggerSelector.style.display = 'none';
sceneChangeSelector.style.display = 'none';
externalAppPath.style.display = 'none';
variableChangeSelector.style.display = 'none';
variableChangeValue.style.display = 'none';
}




document.getElementById('loadFile').addEventListener('change', function(event) {
const file = event.target.files[0];
Expand Down

0 comments on commit 14d031f

Please sign in to comment.