Skip to content
This repository has been archived by the owner on Sep 15, 2023. It is now read-only.

Commit

Permalink
update event editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@RatWasHere
RatWasHere committed Aug 21, 2023
1 parent 776ad30 commit ae25ed0
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 103 deletions.
40 changes: 7 additions & 33 deletions AppData/Kits/EditorBones.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ ipcRenderer.on('botWindowStatus', (event, botOn) => {
document.getElementById('turnBotOn').innerHTML = 'Turn Bot On'
}
})
ipcRenderer.on("eventSave", (event, eventData) => {
botData.commands[lastObj].eventFile = eventData.file;
botData.commands[lastObj].eventData = eventData.data;
highlight(document.getElementById(`Group${lastObj}`))
});
function toggleBotStatus() {
if (!isBotOn) {
console.log('rundown')
Expand Down Expand Up @@ -644,33 +649,6 @@ function highlight(element) {
} catch (err) {console.log(err)}
}

function openBar(iftr) {
let bottombar = document.getElementById("bottombar");
bottombar.style.animationDuration = "";
bottombar.style.animationName = "";
bottombar.style.animationDuration = "0.5s";
bottombar.style.animationName = "expandFrom";
bottombar.style.height = "30%";
bottombar.style.width = "40%";
bottombar.style.backdropFilter = "blur(22px)";
bottombar.style.border = "#00000030 solid 2px";
bottombar.style.marginTop = "-90vh";
bottombar.style.zIndex = "50";
bottombar.style.marginLeft = "30%";
bottombar.style.borderRadius = "22px";
bottombar.style.backgroundColor = "#3d3d3d40";
bottombar.style.boxShadow = "#00000050 0px 0px 12px";
if (!iftr) {
bottombar.onclick = () => {
unmodify();
};
}
setTimeout(() => {
bottombar.style.animationName = "";
bottombar.style.animationDuration = "";
}, 500);
}

function sltTxt() {
botData.commands[lastObj].trigger = "textCommand";
fs.writeFileSync(
Expand Down Expand Up @@ -947,11 +925,7 @@ function openEvent() {
}
}

ipcRenderer.on("eventSave", (event, eventData) => {
console.log(eventData);
botData.commands[lastObj].eventFile = eventData.file;
botData.commands[lastObj].eventData = eventData.data;
});


function openPermissionEditor() {
ipcRenderer.send("openPerms", botData.commands[lastObj]);
Expand All @@ -971,7 +945,7 @@ function setGroupColor(elm) {
refreshGroups();
}

function toggleColorsVisibility(button) {
function toggleColorsVisibility() {
if (botData.colorsVisibility == undefined) {
botData.colorsVisibility = false;
}
Expand Down
2 changes: 1 addition & 1 deletion AppData/presence.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"firstHeader":"Viewing Commands - 7 Commands in total","secondHeader":"Highlighted: warn - 14 actions","botName":"Studio Bot!"}
{"firstHeader":"Viewing Commands - 10 Commands in total","secondHeader":"Highlighted: - 2 actions","botName":"Studio Bot!"}
167 changes: 100 additions & 67 deletions eventEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@
</div>
</div>
<div class="barbuttontexta" id="event-name"></div>
<div class="betaIndicator">BETA</div>
<div
class="barbuttonshift flexbox"
style="margin-right: 1vw; width: 13vw; margin-left: auto"
Expand Down Expand Up @@ -101,7 +100,7 @@
document.body.style.transition = "all 0.2s ease";
document.body.style.backgroundColor = "#FFFFFF00";
const { ipcRenderer } = require("electron");
let data;
let data, event, __data;
document.onkeydown = function (event) {
if (event.key == "Tab" && event.ctrlKey == true) {
closeEvent();
Expand All @@ -121,7 +120,6 @@
data[at] = content;
__data.data[at] = content;
}
let __data;
ipcRenderer.on("eventData", (builtinEvent, _data) => {
document.getElementById(
"everything_container",
Expand All @@ -132,34 +130,26 @@
"blur(0px)";
__data = _data;
data = _data.data;
let event = require(`./AppData/Events/${__data.file}`);
console.log(event);
event = require(`./AppData/Events/${__data.file}`);

document.getElementById(
"event-name",
).innerHTML = `<span style="opacity: 50%">Event:</span> ${event.name}`;

if (event.inputSchemes > 1) {
document.getElementById("editorContent").innerHTML = `
<br>
<div class="barbuttontexta" style="margin-left: 2vw; margin-right: 0%; text-align: left; font-size: 23px;">On ${event.name}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${event.nameSchemes[0]}</div>
<div class="input" oninput="validateInput(event); updateEventData(0, this.innerText)" onblur="storeEventField(this)" style="height: 26px; text-align: left;" contenteditable="true">${data[0]}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${event.nameSchemes[1]}</div>
<div class="input" oninput="validateInput(event); updateEventData(1, this.innerText)" onblur="storeEventField(this)" style="height: 26px; text-align: left;" contenteditable="true">${data[1]}</div>
<div class="sepbars"></div>`;
} else {
document.getElementById("editorContent").innerHTML = `
<br>
<div class="barbuttontexta" style="margin-left: 2vw; margin-right: 0%; text-align: left; font-size: 23px;">On ${event.name}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${event.nameSchemes[0]}</div>
<div class="input" oninput="validateInput(event); updateEventData(0, this.innerText)" style="height: 26px; text-align: left;" contenteditable="true">${data[0]}</div>`;
document.getElementById('editorContent').innerHTML = `
<div class="barbuttontext" style="margin-top: 12px; margin-left: 1.5vw;"><span style="opacity: 0.5">On</span> ${event.name}</div>
<div class="sepbar noanims" style="margin-top: 4px; margin-bottom: 7px; width: 97%;"></div>
`
for (let element in event.nameSchemes) {
document.getElementById('editorContent').innerHTML += `
<btext style="margin-left: 3vw; text-align: left;">${event.nameSchemes[element]}</btext>
<input oninput="updateEventData(${element}, this.value)" value="${data[element]}">
`
}
});

function updateEventData(dataIndex, data) {
__data.data[dataIndex] = data
}
function validateInput(event) {
const div = event.target;
const text = div.textContent;
Expand Down Expand Up @@ -189,7 +179,7 @@
document.getElementById("everything_container").style.filter =
"blur(40px)";
setTimeout(() => {
ipcRenderer.send("eventClosed" + __data.time, __data);
ipcRenderer.send("eventClosed", __data);
}, 500);
}
let pendingSearchStart = false;
Expand Down Expand Up @@ -224,10 +214,13 @@

searchContainer.innerHTML += `
<div id="eventSearchCloseButton" onclick="closeEvents()" class="barbuttonshift" style="width: 95% !important; margin: auto; margin-top: 1vh; margin-bottom: 1vh;"><div class="barbuttontexta">Close</div></div>
<input class="input" oninput="queryEvents(this.value)" placeholder="Search" style="padding: 20px; width: 97%; padding-left: 11px; padding-right: 11px;">
<div id="searchEvents" style="height: 67vh; overflow: auto; margin-top: 2vh; align-items: flex-start; align-content: start;" class="flexbox"></div>
<input class="input" id="searchHolder" oninput="queryEvents(this.value)" placeholder="Search" style="padding: 20px; width: 97%; padding-left: 11px; padding-right: 11px;">
<div class='flexbox' id="searchEvents" style="height: 67vh; overflow: auto; margin-top: 2vh; align-items: flex-start; align-content: start; width: 100%;"></div>
`;
viewAllEvents();
setTimeout(() => {
document.getElementById('searchHolder').focus()
}, 600);
}
let cachedEvents = [];

Expand All @@ -236,33 +229,42 @@
viewAllEvents();
return;
}
document.getElementById("searchEvents").innerHTML = "";
let matchNo = 0;
document.getElementById("searchEvents").innerHTML = "";
for (let event in cachedEvents) {
if (fuzzyMatch(cachedEvents[event].name, query, 0.02)) {
if (matchNo == 0) {
document.getElementById("searchEvents").innerHTML += `
<div class="dimension fade" style="background-color: #FFFFFF08; padding: 7px; border-radius: 12px; width: calc(95% - 14px); margin-bottom: 2vh;">
<div class="barbuttontexta" style="margin-left: 1vw !important; text-align: left;">Best Match</div>
<div onclick="switchOutEvent('${cachedEvents[event].file}')" class="hoverablez dimension" style="border-radius: 40px; width: 95%; margin-left: auto !important; margin-right: auto !important; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw;"><div class="barbuttontexta">${cachedEvents[event].name}</div></div>
</div>
`;
} else {
document.getElementById("searchEvents").innerHTML += `
<div onclick="switchOutEvent('${cachedEvents[event].file}')" class="hoverablez dimension fade" style="border-radius: 40px; width: 29%; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw; margin-bottom: 1vh;"><div class="barbuttontexta">${cachedEvents[event].name}</div></div>
`;
}
matchNo++
if (editorSettings.searchStyling == 'grid') {
const animationId = cachedEvents[event].file
document.getElementById("searchEvents").innerHTML += `
<div class="hoverablez dimension fade" onclick="switchOutEvent('${cachedEvents[event].file}')" style="border-radius: 8px; width: 29%; overflow: auto; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw; margin-bottom: 1vh;"><div class="barbuttontexta">${cachedEvents[event].name}</div></div>
`;
} else {
document.getElementById("searchEvents").style.alignItems = ''
document.getElementById("searchEvents").innerHTML = "";

matchNo++;
}
document.getElementById("searchEvents").innerHTML += `
<div class="hoverablez dimension fade" onclick="switchOutEvent('${cachedEvents[event].file}')" class="hoverablez dimension fade" style="border-radius: 7px; width: calc(95% - 10px); padding: 5px; margin-bottom: 1vh; margin-right: auto; margin-left: auto; overflow: auto;"><div class="barbuttontexta" style="margin-left: 1vw; text-align: left;">${cachedEvents[event].name}</div></div>
`;
}
}
}
if (matchNo == 0) {
document.getElementById("searchEvents").innerHTML += `
if (editorSettings.searchStyling == 'grid') {
document.getElementById("searchEvents").innerHTML += `
<div class="dimension fade" style="background-color: #FFFFFF08; padding: 7px; border-radius: 12px; width: calc(95% - 14px); margin-bottom: 2vh;">
<div class="barbuttontexta" style="margin-left: 1vw !important; text-align: left;">No Events Found</div>
<div onclick="viewAllEvents()" class="hoverablez dimension" style="border-radius: 40px; width: 95%; margin-left: auto !important; margin-right: auto !important; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw;"><div class="barbuttontexta">View All Events</div></div>
<div class="barbuttontexta" style="margin-left: 1vw !important; text-align: left;">No Matches Found</div>
<div onclick="viewAllEvents()" class="hoverablez dimension" style="border-radius: 9px; width: 95%; margin-left: auto !important; margin-right: auto !important; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw;"><div class="barbuttontexta">View All Events</div></div>
</div>
`;
} else {
document.getElementById('searchEvents').innerHTML = `
<div class="dimension fade" style="background-color: #FFFFFF08; padding: 7px; border-radius: 7px; width: calc(95% - 14px); margin-bottom: 2vh; margin: auto;">
<div class="barbuttontexta" style="margin-left: 0.3vw !important; text-align: left;">No Matches Found</div>
<div onclick="viewAllEvents()" class="hoverablez dimension" style="border-radius: 7px; width: calc(100% - 10px); padding: 5px; padding-left: 5px; padding-right: 5px; margin: auto;"><div class="barbuttontexta">View All Events</div></div>
</div>
`
}
}
}

Expand Down Expand Up @@ -307,36 +309,40 @@
eventView.style.borderRadius = "0px";
eventView.style.height = "90vh";
}
function fuzzyMatch(str, pattern, accuracy) {
pattern = pattern.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
pattern = pattern.split("").reduce((a, b) => a + `.*${b}`, "");

const regex = new RegExp(pattern, "i");
const matchScore = str.match(regex) ? str.match(regex)[0].length : 0;
const requiredScore = str.length * accuracy;

return matchScore >= requiredScore;
}
function switchOutEvent(newEventFile) {
let newEvent = require(`./AppData/Events/${newEventFile}`);
__data.name = newEvent.name;
__data.file = newEventFile;
event = newEvent;
if (newEvent.inputSchemes > 1) {
document.getElementById("editorContent").innerHTML = `
<br>
<div class="barbuttontexta" style="margin-left: 2vw; margin-right: 0%; text-align: left; font-size: 23px;">On ${newEvent.name}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${newEvent.nameSchemes[0]}</div>
<div class="input" oninput="validateInput(event); updateEventData(0, this.innerText)" style="height: 26px; text-align: left;" contenteditable="true">${data[0]}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${newEvent.nameSchemes[1]}</div>
<div class="input" oninput="validateInput(event); updateEventData(0, this.innerText)" style="height: 26px; text-align: left;" contenteditable="true">${data[1]}</div>`;
} else {
document.getElementById("editorContent").innerHTML = `
<br>
<div class="barbuttontexta" style="margin-left: 2vw; margin-right: 0%; text-align: left; font-size: 23px;">On ${newEvent.name}</div>
<div class="sepbars"></div>
<div class="barbuttontexta" style="margin-left: 2vw; margin-top: 2vh; margin-right: 0%; text-align: left;">${newEvent.nameSchemes[0]}</div>
<div class="input" oninput="validateInput(event); updateEventData(0, this.innerText)" style="height: 26px; text-align: left;" contenteditable="true">${data[0]}</div>`;
document.getElementById(
"event-name",
).innerHTML = `<span style="opacity: 50%">Event:</span> ${event.name}`;
document.getElementById('editorContent').innerHTML = `
<div class="barbuttontext" style="margin-top: 12px; margin-left: 1.5vw;"><span style="opacity: 0.5">On</span> ${event.name}</div>
<div class="sepbar noanims" style="margin-top: 4px; margin-bottom: 7px; width: 97%;"></div>
`
for (let element in event.nameSchemes) {
document.getElementById('editorContent').innerHTML += `
<btext style="margin-left: 3vw; text-align: left;">${event.nameSchemes[element]}</btext>
<input oninput="updateEventData(${element}, this.value)" value="${data[element]}">
`
}

closeEvents();
}

function viewAllEvents() {
let timeout = 0;
document.getElementById("searchEvents").innerHTML = "";

if (cachedEvents[0] == undefined) {
Expand All @@ -350,11 +356,38 @@
}
}

for (let event in cachedEvents) {
for (let event in cachedEvents) {
if (editorSettings.searchStyling == 'grid') {
timeout++;
const animationId = cachedEvents[event].file
document.getElementById("searchEvents").innerHTML += `
<div onclick="switchOutEvent('${cachedEvents[event].file}')" class="hoverablez dimension fade" style="border-radius: 40px; width: 29%; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw; margin-bottom: 1vh;"><div class="barbuttontexta">${cachedEvents[event].name}</div></div>
<div class="hoverablez dimension" id="${animationId}" onclick="switchOutEvent('${cachedEvents[event].file}')" style="border-radius: 8px; width: 29%; overflow: auto; padding: 5px; padding-left: 5px; padding-right: 5px; margin-left: 0.5vw; margin-right: 0.5vw; margin-bottom: 1vh; transition: all 0.5s cubic-bezier(.17,.67,.31,1.34), scale 0.3s cubic-bezier(.17,.67,.31,1.36), opacity 0.1s ease; opacity: 0%; scale: 0.7;"><div class="barbuttontexta">${cachedEvents[event].name}</div></div>
`;
setTimeout(() => {
document.getElementById(animationId).style.opacity = "100%";
document.getElementById(animationId).style.width = "29%";
document.getElementById(animationId).style.scale = "1";
}, timeout * 15);
} else {
document.getElementById("searchEvents").style.alignItems = ''
document.getElementById("searchEvents").innerHTML = "";
for (let event in cachedEvents) {
timeout++;
const animationId = cachedEvents[event].file

document.getElementById("searchEvents").innerHTML += `
<div class="hoverablez dimension" id='${animationId}' onclick="switchOutEvent('${cachedEvents[event].file}')" class="hoverablez dimension fade" style="border-radius: 7px; scale: 0.1; opacity: 10%; width: calc(50% - 10px); padding: 5px; margin-bottom: 1vh; margin-right: auto; margin-left: auto; transition: all 0.5s cubic-bezier(.17,.67,.31,1.34), scale 0.3s ease, opacity 0.3s ease; overflow: auto;"><div class="barbuttontexta" style="margin-left: 1vw; text-align: left;">${cachedEvents[event].name}</div></div>
`;
try {
setTimeout(() => {
document.getElementById(animationId).style.opacity = "100%";
document.getElementById(animationId).style.width = "calc(95% - 10px)";
document.getElementById(animationId).style.scale = "1";
}, timeout * 15);
} catch (e) {}
}
}
}
}
</script>
</html>
3 changes: 2 additions & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,8 @@ ipcMain.on("editEvent", (event, data) => {
});
});

ipcMain.on(`eventClosed${time}`, (event, data) => {
ipcMain.once(`eventClosed`, (event, data) => {
console.log(data)
EventEditorWindow.getParentWindow().focus();
win.webContents.send("eventSave", data);
try {
Expand Down
2 changes: 1 addition & 1 deletion permissionEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
endHTML += `
<div id="${permission}" onclick="toggleBoundary('${permission}')" class="hoverablez dimension flexbox" style="width: calc(49% - 18px); padding: 9px; border-radius: 9px; transition: all 0.1s ease, background-color 0.06s ease; margin: auto; margin-top: 1vh;">
<div class="barbuttontexta" style="margin-left: 1vw; text-align: left;">${boundaries[permission]}</div>
<div class="barbuttontexta flexbox" style="margin-right: 2vw; opacity: 50%;"><div id="${permission}selected" style="opacity: ${selected == true ? 0 : 1}; transition: width 0.6s cubic-bezier(1,-0.96,0,1.92), opacity 0.2s ease; width: 28px; overflow-x: auto; margin-right: 4px;">Not</div> Required</div>
<div class="barbuttontexta flexbox" style="margin-right: 2vw; opacity: 50%;"><div id="${permission}selected" style="transition: width 0.6s cubic-bezier(1,-0.96,0,1.92), opacity 0.2s ease; width: ${selected == true ? '0' : '28'}px; overflow-x: auto; margin-right: 4px;">Not</div> Required</div>
<div class="dimension" id="${permission}color" style="transition: all 0.2s ease; background-color: ${selected == true ? '#32a85080' : '#a8323280' }; width: 2.5vw; height: 2.5vw; margin-top: auto; margin-bottom: auto; margin-right: 1vw; border-radius: 0.5vw;"></div>
</div>
`
Expand Down

0 comments on commit ae25ed0

Please sign in to comment.