How to Set the Perfect Dinner Table #489

Nice atmosphere! Jonathan. I'm trying, I'm trying, I'm trying. I'm starting to starve, like old Willy. Need some hint, please.

(I'm listening to the sound in my office. So... trancendental! Brrrr! )

The development of this demo took some interesting turns. I wanted to use sliders as they're more accessible than drag-and-drop, but altering the z-index position of the goblet slider also knocked out the accessibility controls.

So I had to write some additional code to remedy this.

document.querySelector("#acc-5xjQeS51pKT").addEventListener("keydown", function(e) {
    if (e.key === "ArrowLeft") {
        let currentVal = GetPlayer().GetVar("GOBLET");
        if (currentVal > 0) {
            GetPlayer().SetVar("GOBLET", Math.max(0, currentVal - 0.5));
        }
    } else if (e.key === "ArrowRight") {
        let currentVal = GetPlayer().GetVar("GOBLET");
        if (currentVal < 10) {
            GetPlayer().SetVar("GOBLET", Math.min(10, currentVal + 0.5));
        }
    }
})

When the user highlights the goblet with the Tab key (meaning they can interact with it), this code listens for whether they then press the left or right arrow keys.

If they press the left arrow, the code checks the current position of the goblet and moves it half a step to the left - but won't let it go below zero.

If they press the right arrow, it does the same thing but moves it half a step to the right - but won't let it go above ten.

I've basically replaced the accessibility controls that were affected by the z-index changes, all to ensure the goblet appears in front of the cutlery... 😃

Every day's a school day!

Loved the background music. Pirates must have their own rules.