mbkarle / mind-the-fog

Roguelike JavaScript game--mind the fog!
2 stars 1 forks source link

Introducing a New Text Module #123

Closed akarle closed 6 years ago

akarle commented 6 years ago

Motivation

So as discussed in #120 , I found a lot of duplicated code when it came to interacting with html (we sort of caught onto this with the whole addition of revertTextModule() function way back, but we never were thorough).

Further, after 6 months of not looking at this code, I had NO way of telling what "stay", "descend" and "enter" were as the three buttons. Which one should I show? Which one should I hide?

I realized there were patterns to this whole TextModule thing that could be abstracted and used in this way. (Oh and the whole print('last-message') thing drove me crazy).

Also, just as a side note... if we ever wanted to open this up to open-source development, having standardized ways of interacting with the html and all that is a good thing! Don't want newcomers to have to figure out which buttons to hide and show and which are on by default and all that... abstract it all!

How

I, in parallel, created a new text module class. Only one is instantiated (in world/init.js) called txtmd, and the main portal to access it is parseTxtMdJSON().

There are currently 4 types of views that have been coded as the basic building blocks, and by assembling them as a js object, it can be strung together into a coherent stream:

  1. Transition View: Simply show the text with one arrow that when clicked shows the next view
  2. Final Text View: Show given text with an "X" button that closes the module
  3. Final Function View: Show given text, display one button (no choice) that executes function given
  4. Decision View: Show given text, display 2 buttons, one to close the module, one to execute a function that is given.

I think it is easiest to explain in example. Say I want to:

  1. Say "hello"
  2. Next view says "Can I heal you?" with "yes/no"
  3. Next view has results of healing (random number) + an arrow to last screen
  4. Final view says "Now Im gonna kill you!" and the user must engage in combat

First, establish a heal function that effects the hero and then returns the string to display:

var heal = function() {hero.vit += Math.random()*5; return "the hero is healed!"}

Now create the JSON to parse and parse it!:

var msg = {
    "speaker": "strange healer", // carried throughout
    "msgs": [ //array of msgs to do
        ["trans", "Hello hero!"],
        ["dec", "Can I heal you?", "Yeeee", "Nope!"] //text, posBtnTxt, negBtnTxt, cb is automatically next view
        ["trans", heal] // heal func executed and returned text placed in
        ["finfunc", "now im gonna kill you!", "Engage", fight_enemy(hero, Healer)]
}

txtmd.parseTxtMdJSON(msg)

Simple as that! Note that dialogs have their own special function wrapper that simply creates a json and parses it using the dialogs.json lookup!

Other Major Changes

The biggest change other than that is that I did some hacking away at combat.js.

enter_combat() is now ONLY used for normal combat, custom combats should use fight_enemy(). It seemed odd to do all this checking for if it was custom or not, when really the non-custom stuff is only a few lines to decide what enemy to fight!

Work in Progress / Future Work

I want to pull this in + document it before it gets too crazy large. Nothing uses the old text module currently EXCEPT for chests. The reason for this is that I want to implement an entire new system of inventory's (#119) and when I get that done, then I will implement a txtmd function to display an inventory, whether that be a mob-drop or a chest or a dog-interaction!

This said...

Broken Things

  1. The prompt in the tutorial is broken... I'll get to it later. I'm thinking a view with a prompt in TextModule would be helpful if we plan on incorporating this more than once (we should!). The rest of the tutorial is A-OK (promises and all!).
  2. Mob-drops are currently off because of the inventory refactor... sorry! Its next on my list!

Please give feedback! @mbkarle Thanks! Alex

mbkarle commented 6 years ago

Looks good; I think you're all set to merge

akarle commented 6 years ago

Thanks for reviewing dude!