I'm building a text RPG in plain HTML/JavaScript. I've set up local storage using simple storage to make my life easier. That said, I'm running into a funny issue with treasure chests. If you open a chest, the function properly hides the button to prevent opening the chest again. But if you reload the page after saving, the chest re-appears! The class that was added to the chest is removed, allowing the player to pull from it again. Since their inventory properly saves they could in theory get infinite potions.
HTML:
<button id="chest-1" onclick="openChest(potion, this.id)" onload="toggleChests()">Open Chest</button>
JS:
let opened = document.getElementsByClassName("opened"); opened.hidden = true;
function openChest(item, id){
inventory.push(item);
document.getElementById(id).hidden = true;
document.getElementById(id).classList.add("opened");
alert("You found: " + item.name + " - in the chest!");
simpleStorage.set("opened", opened);
};
When the game loads, it should check if a chest class has been saved and if so then apply it. I think this is where I'm definitely getting things wrong.
function toggleChests(){
opened = simpleStorage.get("opened", opened);
if (opened === true){
opened.hidden = true;
}
};
Project source code: https://github.com/AndyDaMandy/Textia
I figured it out thanks to some of the hints from Heretic Monkey and Cbroe.
I solved the issue by pushing the id string of each opened chest into an array called "opened". When you save, the array is saved. When you load, opened is reloaded. Then the load function calls the applyOpened function, which then applies a .map to the array. It takes each id and places it into a document.getElementById, then adding the hidden attribute to it. This is done ahead of loading the page for the player, preventing them from accessing the element without using the console (and that would be cheating!). Again, simple storage makes it so I don't need to convert the array to a string, but it should work with regular local storage as well!
Here's the code:
let opened = [];
function openChest(item, id){
inventory.push(item);
document.getElementById(id).hidden = true;
opened.push(id);
alert("You found: " + item.name + " - in the chest!");
};
function applyOpened () {
function apply(arr) {
document.getElementById(arr).hidden = true;
}
opened.map(apply);
};
function save() {
simpleStorage.set("opened", opened);
};
function load(){
opened = simpleStorage.get("opened", opened);
applyOpened();
};
And here's the html for the chest:
<button id="chest-1" onclick="openChest(potion, this.id)">Open Chest</button>