Hello computer science student, sorry for the delay, here's more or less what you should do:
The visual choices are loaded as buttons in the screen. In PhaserJS, a button has this parameters:
button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group)
That's the position where the button will be displayed, the image "key", the function that will execute when pressed and then the frames, that's where all the magic happens.
The image reference can be a static image (in which case has only one frame) or a spritesheet, with many frames. As it is in RenJS, we assume the visual choices will be a static image, so for the frames I use 0 value for all of them (line97 in LogicManager.js):
var button = game.add.button(position.x,position.y,str[0],function(){
RenJS.logicManager.choose(index,key);
},RenJS.logicManager,0,0,0,0,this.visualChoices);See all the 0,0,0,0 are the frames, you just have to load a spritesheet and use different values. You don't need to have 4 different frames, you can have two normally (normal and hover) and use the frames 1,0,1,0.
The second most important thing is, the images have to actually be spritesheets. You can load spritesheets easily in the setup.yaml file:
spritesheets:
icecream_choice: assets/effects/ice_cream.png 100 100
In this case, we're loading a spritesheet for our icecream_choice, with frames of 100x100 pixels. That means each frame in the image is 100x100. I.e. if I have 2 frames, the image will be 100x200.
With that little change then it should work. Let me know if there's any issue.
Cheers!