This is a very complicated issue to explain.
Nutshell version of flow:
- Call a function to save game state
- Refresh browser to reset all code in game
- Call a function to load game state
- Game is restored correctly, except 3 elements no longer update in the browser when calling the next animation frame, even though if you console.log() the elements, the actual values for the elements on that particular game loop iteration are set and correct.
Best checked by cloning repo at https://github.com/leighhobson89/ChipshopChopper as this issue involves lots of functions (all stated below) and all appears to be working until you load a game and see the issue. I have a video I can upload if someone can tell me the best place to upload it, showing how to reproduce the issue.
Steps To Reproduce Scenario (video will show this if requested and place to upload given)
- Start Game
- Click give $10000 (a debug button I set up)
- Click new game
- Click all bottom row buttons except Start Shift
- Click Improve Fryer cap. once
- Click all auto buyers on second row once (this will make the elements below appear on screen)
- Click “Start Shift”
- Click “Buy Investment Fund” (this will make the buttons change to the ones below)
- Increment the cash and risk values and see the reflection in the table
- Now click Menu and Save game
- Now Refresh browser
- Now Load game back
- Now see everything is fine and restored, but problem 1) the buttons wont increment and the investment money is not going up anymore
- In Dev Tools, observe the console spitting out the correct value of element with id
investmentDataScreenBottomRowColumn3but problem 2) the DOM not updating it
Elements in question in the DOM having issues with after loading have ids of:
investmentCashComponent (buttons not triggering event handler so nothing happening only after loading, and are the following 2 children of this element):
investmentCashComponent_IncrementButton
investmentCashComponent_DecrementButton
investmentRiskComponent (buttons not triggering event handler so nothing happening only after loading, and are the following 2 children of this element):
investmentRiskComponent_IncrementButton
investmentRiskComponent_DecrementButton
investmentDataScreen (data fields not updating in DOM per animation frame for the children listed below, but if you console out the whole element the data is correct in the console, again only after loading.)
investmentDataScreenBottomRowColumn1
investmentDataScreenBottomRowColumn2
investmentDataScreenBottomRowColumn3
Following functions are those that handle the saving and loading process:
ui.js
createGameWindow() - last part of this function calls functions to set up click event handlers for buttons
actions.js
saveGame() //converts object into JSON and saves to a text file
loadGame() //reads the JSON and sub functions set the variables etc back
handleFileSelect()
constantsAndGlobalVars.js
captureGameStatusForSaving() //reads all variables and DOM element values except buttons into an object
captureButtonStates() //adds all button states, classes, values to the object.
restoreGameStatus()
restoreButtonStates()
- Console outputs to validate the elements are being set with their correct values which they are.
- Reinitialising event handlers after loading the game
- Checking elements all have same css classes before and after load and none are disabled.
Feel free to give feedback on a better way to ask this question rather than downvoting if thats what you are thinking, as I dont know how to express such an interwoven set of functions in a minimalised way, I have explained what things I have tried, and it just doesnt make sense to me why the buttons arent working and the data not updating ONLY in the UI but the elements do have the correct data when console.log(element) is called in the dev tools.