Help with Basic C-Gen/Drop Down Menus

So I’m trying to build off of the web portal goals tutorial to create some sort of basic character generation system. Pretty much just looking to create simple drop-down menu options for things and I’m just spinning my wheels. I can’t seem to get anything to work.

I’m trying to keep it in the custom plugin to avoid future potential merge conflicts.

So I was hoping to fish around for some suggestions or tips? Any resources that might help me here? Anything I should keep in mind when looking for resources?

My initial problem, I think, was using Ruby on Rails but Ares uses EmberJS, correct?

Yes, Ares uses EmberJS for the web client. Ruby on Rails is a server-side framework, so that won’t help you here.

The “custom plugin” is only a server-side thing. Coding on the web portal is very different. I would suggest trying the “Web Goals” tutorial just to get your feet wet coding things on the web portal and understanding how the different pieces fit together.

After that, you can check out the “code hooks” that have been provided in the chargen plugin to let you hook new things into chargen without having to entangle your code with the core stuff.

Yes, I’ve looked at those. Like I said, I’m trying to expand on the goals tutorial. Thanks.

OK - since you’d gone down a path with Rails I thought maybe you hadn’t done the web goals yet.

I’m not really sure what types of resources you’re looking for specifically.

Learning Ember in general? There are some guides listed here: https://aresmush.com/tutorials/code/ember.html

For the Ares stuff specifically, the web goals tutorial is really the best resource with the most detailed steps about what you need to modify where. There are also more advanced web topics under the Code tutorials section.

You can also look at existing code for examples. The gender dropdown is one example of a dropdown in the existing chargen code (in chargen.hbs). Most dropdowns use Ember’s PowerSelect widget.

 <PowerSelect 
@selected={{model.char.demographics.gender}} 
@options={{genders}} 
@searchField="value" 
@onchange={{action "genderChanged"}} 
as |gender|>
    {{gender.value}}
</PowerSelect>

@selected references a field (typically in the model) where the currently-selected value is tracked.
@options is the list of available options. That may come from the model, or from a function in the controller that generates a list.
@searchField is needed if your list of options is a hash (like the demographics each have a name (“Gender”) and a value (your current gender)), so you tell Ember which field to search on.
@onChange references an action in your controller that updates when a new value is selected.
And the last bit controls what gets shown on the dropdown list. In this case our option is named ‘gender’ and we’re showing just the value ({{gender.value}}).

You’ll find genderChanged in the controller (chargen.js). It changes the selected gender value:

    actions: {
        
        genderChanged(val) {
           this.set('model.char.demographics.gender.value', val.value);
        },
   // Other actions...
   }

Hope that helps? If not please give me some more details about what you’re struggling with. You can also join the discord and get live help.

Ahhh, that’s very helpful. Thanks. I think this should(hopefully) get me to where I’m going. Thank you! :slight_smile:

1 Like

Okay, last question on this I hope. Then either I’m gonna get it and life will be joyous or I’m gonna give up, put the computer away, and fire up the BBQ. :slight_smile:

So for the @options would the controller for all of this be found in ares-webportal/app/components/chargen-custom.js? If not, where would that be?

If you’re feeling extra helpful(and I get it if you’re not, you’re not my Yoda)…how would I insert the options? I’ve tried some things and the website redeploy did not go well. LOL

Anyway, thanks in advance for all the help. :slight_smile:

1 Like

Well, an important question first - where do the options actually come from? Is it a fixed list you can just hard-code like “A, B or C” - is it configurable? - is it based on some other properties, like only certain characters can have access to B?

The solutions are different depending, and obviously the more complex you make the decision-making, the more complex the code will be.

It’s be a combination of static choices(numbers -1 through +5) and a list taken from a config file. What I’m looking for is to create a very simple c-gen system that has 4 attributes, a number of skills(taken from a config file), and a number of boons/flaws(no rating, just selectable from a config file). The attributes and skills would be rated -1 through +5. Boons and flaws have no rating.

If any part of it is coming from config, it’s probably easiest to build the list on the server side and return it in your custom chargen fields.

Then you’d access it on the web side using char.custom.available_boons.

Technically it’s not really associated with the character, but you can still return it that way.

First, thank you for all the patience you’re showing with my inexperience. I really do appreciate it.

Second, so would it be something like this…

Under get_fields_for_chargen put something like boons = Global.read_config(“custom”, “boons”) ?

1 Like

Close. Your get_fields_for_chargen is going to return ALL of your custom chargen stuff, so it’s going to get a little complicated. So for example:

  def self.get_fields_for_chargen(char)
    return {
       boons:  char.boons,
       flaws: char.flaws,
       available_boons: Global.read_config(“custom”, “boons”),
       available_flaws: Global.read_config(“custom”, “flaws”)
      }
  end

That’s assuming your boons, flaws, and boons/flaws config are each just stored as simple arrays. If they’re more complex data structures, you’ll probably need to do some massaging of the data to get it into a form that’s more readily consumed by the web side.

For instance, when returning FS3 abilities to web there’s a translation between the ability object (which is meaningless to the web side) and a data hash that contains the necessary data in a web-happy format. (That’s done here for reference.)

Chargen is hard. Don’t hesitate to ask if you get stuck!

Very awesome. Thank you! :slight_smile: