Hi, I don’t really know any Javascript (a literal 0%) but I needed to use some to get bits of my Sugarcube2 game working the way I wanted, I tried finding some premade code by somebody who knew what they were doing but I (google) couldn’t find anything so I “assembled” some Javascript based off of bits of code I found here and there.
The code I built works for what I wanted it to, however I am somewhat worried my guesswork Javascript will cause problems or inefficiencies down the road so with the game so I was hoping for somebody who actually knows Javascript and Sugarcube2 to take a look at what I’ve got and offer any simplifications or improvements.
Alright, so I have two bits of JS code, my “ScrollToTop” code and my “ExplorationMode/CombatMode” code.
I am making an RPG so I wanted to divide my game up into several different UI elements, a box where the player could see their HP and status (aka the “statusbox”), a box where all the text and descriptions was displayed (aka the “textbox”) and a box where all of the player controls and buttons are located (aka the “buttonbox”), so I threw together some CSS in the stylesheet.
I quickly realized there was a problem with the textbox however.
When you click on a new passage it always scrolls back up to the top of the passage text automatically, the same did not happen for any text in my textbox, the player was being forced to scroll back to the top manually every single time. So I had to throw together some Javascript that targeted the textbox and scrolled it to the top automatically.
// ScrollToTop
function ScrollToTop () {
var elmnt = document.getElementById(“textbox”);
elmnt.scrollLeft = 0;
elmnt.scrollTop = 0;
}
window.STTop = ScrollToTop;
setup.STTop = ScrollToTop;
// ScrollToTop
This was what I got with some trial and error. To trigger it I put <<run STTop()>> at the start of every relevant passage.
As for my other bits of code it’s designed to restyle my CSS boxes for an exploration and combat mode, the two codes are the same code but with different values so I will omit the duplicate code.
// ExplorationMode
function exploration_mode() {
var a = document.getElementById(‘battlebox’);
a.style.left = ‘100%’;
var b = document.getElementById(‘textbox’);
b.style.right = ‘0%’;
b.style.bottom =‘33.3%’;
var c = document.getElementById(‘buttonbox’);
c.style.right = ‘0%’;
c.style.left = ‘20%’;
c.style.top = ‘66.6%’;
var d = document.getElementById(‘statsbox’);
d.style.bottom = ‘0%’;
}
window.ExplorationMode = exploration_mode;
setup.ExplorationMode = exploration_mode;
// ExplorationMode
The two codes are triggered with <<run ExplorationMode()>> and <<run BattleMode()>> respectively, usually triggered by a button or at the start of a specific passage.
These two codes work as I intended them, however if there is anything specific that should be done to improve them or a simpler way to achieve similar functions I would be happy to hear it. Thanks for giving my Javascript guesswork a look-over.