How can I preserve array references when loading a similar but new array?

Question

I've been fiddling around with javascript making a game, and while trying to create a save/load mechanism I've come into some trouble.

This could potentially come from how the game is set up, but primarily I'm going to describe the gameData that is saved and loaded in an abstracted example.

let farm = {
  amount: 0
}

let hut = {
  amount: 0
}

let gameData = {
  buildingArray: [farm, hut]
}

function saveGame() {
    let saveData = gameData
    localStorage.setItem(localStorageName, JSON.stringify(saveData))
    console.log("Data Saved")
}

function loadGame() {
    if (localStorage.getItem(localStorageName)) {
        loadData = JSON.parse(localStorage.getItem(localStorageName))
        gameData = loadData
        console.log("Data Loaded")
    }
}

To save and load this, I am simply storying the JSON of gameData in local storage and then parsing it to load.

The main issue I'm having from this is when gameData is loaded, with say farms and huts of amount 1. The gameData object will reflect this, but the individual farm and hut objects will still show an amount of 0.

In my project I declare all of these variables separately and then associate them all together in gameData for readability, and perhaps that implementation is reckless, so if there is a way to fix this issue and reorganize, that would also be appreciated.

The reason why this is confusing me is because until the game is loaded, these referenced objects will update if for example a farm is purchased. After loading, it seems like the references stored in the array are decoupled and I was wondering - is there a way to fix this?

trincot · Accepted Answer · 2021-09-14 21:49:39Z

2

In your loadData function you could add an assignment to farm and hut so they are synchronised with the loaded data:

gameData = loadData;
[farm, hut] = gameData.buildingArray; // <--- add this

However, I would suggest you use a more OOP approach, avoiding such global variables:

class Game {
    static localStorageName = "myGame";
    constructor() {
        this.farm = 0;
        this.hut = 0;
    }
    save() {
        localStorage.setItem(Game.localStorageName, JSON.stringify(this))
        console.log("Data Saved");
    }
    load() {
        let loadData = localStorage.getItem(Game.localStorageName);
        if (loadData) {
            Object.assign(this, JSON.parse(loadData));
            console.log("Data Loaded")
        } else {
            console.log("No data to load")
        }
    }
}

// Example run
let game = new Game();
game.hut++;
game.save();
game.hut = 0;
game.load();
console.log(game.hut); // 1

answered Sep 14, 2021 at 21:49

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carcanken Over a year ago

Thank you for your response! As a quick question because I would like to have a proper OOP implementation - how will the constructor be affected if the farm for example has multiple attributes such as amount, cost and a buy effect? In what I have currently I have around 100 objects and each object has about 10 different 'sub properties'.

trincot Over a year ago

In that case create a second class, something like Building , whose constructor will initialise such properties (this.amount, this.cost,..etc) based on arguments passed to that constructor. Then in the Game constructor (or in a method), create an instance of Building for hut, and one for farm. You'll also need to extend the code for loading and saving. Have a go at it, and if you get stuck, ask a specific, new question about it.

Collectives™ on Stack Overflow

How can I preserve array references when loading a similar but new array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related