HOW THE HECK DO YOU DO STATS !!! i have been on twime for a year and still dont know how lolol
I GOTCHU, ANON! it should be known that this is for SugarCube and in the story javascript section. i'll dissect it bit by bit.
$(document).on(':passagestart', function () {
this says: every time a passage starts, do the stuff inside the curly braces {}
if (!$('#hud').length) {
// build the HUD here
}
$('#hud') means: look for something on the page with the ID hud
.length means: did we find one?
as a whole: if we don't see a HUD, we build one. now, as for building the HUD...
$('#menu-core').after(` means: take all this HTML stuff and stick it right below the menu
<div id="hud"> is finally our ID for the HUD. it's gonna be a box
<h3>Skills</h3> is our heading
<progress> makes a progress bar
id is the nickname we're giving to the variable, just like our HUD. max is the highest number, and value is the current number (and what it starts at)
and now, if we want to consistantly update the bars every time a variable's value bumps up or down:
$('#hud-strength').val(State.variables.strength || 0);
$('#hud-dexterity').val(State.variables.dexterity || 0);
$('#hud-intelligence').val(State.variables.intelligence || 0);
$('#hud-charisma').val(State.variables.charisma || 0);
$('#hud-wisdom').val(State.variables.wisdom || 0);
$('#hud-trust').val(State.variables.trust || 0);
$('#hud-obedience').val(State.variables.obedience || 0);
let's take the strength one as an example:
$('#hud-strength') is the ID we previously mentioned
.val means: set its value to something
State.variables.strength is the part that gets touched whenever you set a variable to something. like, <<set $strength = 50>>
|| 0 means: if there's nothing yet, just use 0
and if you wanna go into customization and making it look pretty in the stylesheet, you just need #hud! i hope this makes sense? feel free to DM me if you want the template
