so i’m trying to get my options menu to remember which boxes were checkmarked. so, when i click on a 'setTexture' checkbox, how, after I leave the options menu & come back or go to the next option page & come back, how can I make the game remember which boxes were checkmarked?
Any help as always, is GREATLY appreciated! 
Thank You!
If you sleep and wake the scenes, I think that will be unnecessary.
But if you start and stop the scenes, maybe use this.registry.
When clicking the 'Options' button on the title screen, what is keeping 'Option 1', 'Option 2', 'Option 3', & 'Option 4' from remembering that these checkboxes are checkmarked, but 'Sound Enabled' & 'Music Enabled' remembers which checkboxes are checkmarked just fine? I want to create my own variable IN 'Model.js' for EVERY single option in order to save the checkbox data by using ES6’ 'get' & 'set' if that makes sense.
I am trying to make the following function work with ANY option{s} :
updateOptions : function ( ) {
if ( this.model.musicOn === false ) {
this.__musicButton.setTexture ( 'box' );
this.sys.game.globals.sound.stop ( );
this.model.bgMusicPlaying = false;
}
else
{
this.__musicButton.setTexture ( 'checkedBox' );
if ( this.model.bgMusicPlaying === false ) {
this.sys.game.globals.sound.play ( );
this.model.bgMusicPlaying = true;
}
}
if ( this.model.soundOn === false ) {
this.__soundButton.setTexture ( 'box' );
}
else
{
this.__soundButton.setTexture ( 'checkedBox' );
}
},
how can i make the 'Option 1', 'Option 2', 'Option 3' & 'Option 4' checkboxes work like the 'Sound Enabled' & 'Music Enabled' checkboxes?
the above function is a modification of 'updateAudio ( )' function.
i want to remove all the audio references, but keep the checkbox references in order to allow for ALL options to be remembered via the 'Model.js' file
https://thundros.github.io/menu-system-doosan/
Source for 'OptionsScene.js' :
https://thundros.github.io/menu-system-doosan/src/Scenes/OptionsScene.js
It has something to do with 'Model.js' :
https://thundros.github.io/menu-system-doosan/src/Model.js
& is based on this tutorial :
Any help as always, is EXTREMELY appreciated!
Thank You!
I think you have most functionality there. Use localStorage to persist things across refreshes, etc.
Something like
localStorage.setItem("settings", JSON.stringify(this.sys.game.globals.model))
and
JSON.parse(localStorage.getItem("settings"))
@ldd : But 'Model.js' is already doing what I want it to. It’s just not doing it to the other options in the other parts of the menu.
this.model.optionOn instead of this.model.soundOn otherwise you are using the wrong value from this.model.
On the other hand, you should really consider using prettier
@ldd : You misinterpret what I need to do. I simply need the OTHER options ( NOT 'Sound Enabled' & 'Music Enabled' ) to save their values with 'Model.js'' ES6 'get ( )' & 'set ( )' methods.
this is still not working :
class Model {
constructor ( ) {
this._soundOn = true;
this._musicOn = true;
this._optionOn = true;
this._bgMusicPlaying = false;
}
set musicOn ( value ) {
this._musicOn = value;
}
get musicOn ( ) {
return this._musicOn;
}
set soundOn ( value ) {
this._soundOn = value;
}
get soundOn ( ) {
return this._soundOn;
}
set bgMusicPlaying ( value ) {
this._bgMusicPlaying = value;
}
get bgMusicPlaying ( ) {
return this._bgMusicPlaying;
}
set optionOn ( value ) {
this._optionOn = value;
}
get optionOn ( ) {
return this._optionOn;
}
}
updateOptions : function ( __opt ) {
this.__opt = __opt;
if ( this.model.optionOn === false ) {
this.__opt.setTexture ( 'box' );
this.model.optionOn = false;
}
else
{
this.__opt.setTexture ( 'checkedBox' );
this.model.optionOn = true;
}
},
this.__Option [ 0 ].on ( 'pointerdown', function ( ) {
// this.__Option [ 0 ].setTexture ( 'checkedBox' );
// this.__Option [ 0 ].setTexture ( 'box' );
// this.__on1 = ! this.__on1;
// this.__ActivateAction ( this.__Option [ 0 ], this.__on1 );
this.model.optionOn = ( ! ( this.model.optionOn ) );
this.updateOptions ( this.__Option [ 0 ] );
}.bind ( this ) );
this.__Option [ 1 ].on ( 'pointerdown', function ( ) {
// this.__Option [ 1 ].setTexture ( 'checkedBox' );
// this.__Option [ 1 ].setTexture ( 'box' );
// this.__on2 = ! this.__on2;
// this.__ActivateAction ( this.__Option [ 1 ], this.__on2 );
this.model.optionOn = ( ! ( this.model.optionOn ) );
this.updateOptions ( this.__Option [ 1 ] );
}.bind ( this ) );
What am I doing wrong here??
In order to get one Button fixed, this is the diff necessary:
--- a/src/Scenes/key1.js
+++ b/src/Scenes/key1.js
@@ -180,14 +180,14 @@
if ( this.model.optionOn === false ) {
- this.__opt.setTexture ( 'box' );
+ this.__Option [ 0 ].setTexture ( 'box' );
this.model.optionOn = false;
}
if ( this.model.optionOn === true ) {
- this.__opt.setTexture ( 'checkedBox' );
+ this.__Option [ 0 ].setTexture ( 'checkedBox' );
this.model.optionOn = true;
}
@@ -481,7 +481,7 @@
*/
- // this.updateAudio ( );
+ this.updateOptions ( );
},
Now, since you want multiple options you need multiple setters and getters and you are going to manually add them to the Model class.
I personally think that your Model class is not maintainable, and what you really want is
model = {
options: [
{label: "cool option1", value: false},
{label: "cool option2", value: false},
{label: "cool option3", value: false},
{label: "cool option4", value: false},
]
}
then, using just this.__Option[0] and this.__Option[1] set and get values to our new model.
The arrow buttons should change the starting index that you use, and presto! your menu works. It would probably be a good idea to keep all of that in one Scene though. I don’t really see why you need 3.
based on the code you already have, and my suggested new Model:
this.updateOptions (__OPTIONS_CURR_PAGE_COUNT);
function updateOptions(page){
if (this.model.options[page * 2].value) this.__Option[0].setTexture ( 'box' );
else this.__Option[0].setTexture ( 'checkedBox' );
if (this.model.options[page * 2 + 1].value) this.__Option[1].setTexture ( 'box' );
else this.__Option[1].setTexture ( 'checkedBox' );
}
and then
this.__musicButton.on ( 'pointerdown', function ( ) {
this.model.options[CURR_PAGE * 2].value = ( ! ( this.model.options[CURR_PAGE * 2].value ) );
}.bind ( this ) );
etc, etc.
Basically use the current page to calculate whether you are modifying indexes 0 and 1
or 1 and 2 (etc) in model.options
on top of that, you’d probably want to use the labels that I’ve defined and change those too, and test things out a little bit. ( you may need to call updateOptions on page change, for example.)
But besides that, one scene is enough.
@ldd : it’s still not working. what am I doing wrong here? :
Direct link to demo : https://thundros.github.io/menu-system-doosan/
Direct link to 'key1.js' : https://thundros.github.io/menu-system-doosan/src/Scene/key1.js
My goal isn’t to click on 'this.__musicButton' & 'this.__soundButton', those work. My goal is to click on 'Option 1', 'Option 2', 'Option 3' & 'Option 4'
Inside 'key1.js' :
Line{s} 177 - 194 :
updateOptions : function ( __page ) {
this.__page = __page;
if ( this.model.options [ this.__page * 2 ].value ) {
this.__Option [ 0 ].setTexture ( 'box' );
}-
else {
this.__Option [ 0 ].setTexture ( 'checkedBox' );
}
if ( this.model.options [ this.__page * 2 + 1 ].value ) {
this.__Option [ 1 ].setTexture ( 'box' );
}
else {
this.__Option [ 1 ].setTexture ( 'checkedBox' );
}
},
Line{s} 400 - 406 ::
this.__Option [ 0 ].on ( 'pointerdown', function ( ) {
this.updateOptions ( __OPTIONS_CURR_PAGE_COUNT );
}.bind ( this ) );
this.__Option [ 1 ].on ( 'pointerdown', function ( ) {
this.updateOptions ( __OPTIONS_CURR_PAGE_COUNT );
}.bind ( this ) );
someone can help?
? 
Getting tired of being ignored.