Structuring LiveViews and routes for multi-step process with and without back button

Phoenix Forum Questions / Help
, ,
1

This is in the context of a tabletop roleplaying game, think Dungeons & Dragons. In such a game you create a character by going through a branching multi-step process such as determining attributes, picking a species, selecting a class and so on. My game’s a little more complex. Character creation uses a randomizer called a “Life Path” to prevent you from choosing your own options. Instead it often rolls and picks a result for you. You can spend a limited quantity of Life Points to say, “No, I really want to be able to decide for myself in this step.”

Here’s a part of the process:

  1. Set Attributes (Strength, Agility, Mind, etc)
  2. (Optional) Spend Life Points to augment Attributes
  3. Randomly determine species OR spend Life Point to pick (Human, Dwarf, Elf).
    3a. If Dwarf or Elf, choose a subculture.
  4. Randomly determine a faction.
    4a. Except if roll == 100, then you get to choose!

And so on. Branching paths, but at least no backtracking required. There are also two ways in which you can create a character, traditional and GodMode:

  • Traditional: You follow the steps I highlighted and create a character you had a hand in guiding, but there are still random events out of your control that shaped their life.
  • GodMode: No Life Points, but you can choose instead of rolling at every step.

I already have a naive solution from a few months ago that worked for the Traditional path. It was a monolothic LiveView with a single route and several LiveComponents.

# route "/character/create", CharacterCreationLive

CharacterCreationLive
- AttributesComponent
- AttributeLifePointComponent
- HostBodyComponent
- SubHostBodyComponent

My LiveComponents would notify my LiveView whenever a step completed and what the result was. My LiveView would then append the results to my domain which would slowly piece together a character for me. Finally, it determined what the next step would be and invoked the corresponding LiveComponent. It worked well, but the single LiveView got pretty large and had to handle a lot of events and branching paths.

I’m wondering if there’s a better way? I don’t want to use multiple routes for my Traditional approach because it’s all or nothing. You can’t go back to a previous step, you have to live with the results or use GodMode. Therefore my routes look something like this:

      # Choose Traditional or GodMode character creation
      live "/character/create", CharacterCreationLive.BuildPath

      # No further routes, everything happens in this View, but gets quite large
      live "/character/create/traditional", CharacterCreationLive.Traditional
      
      # GodMode doesn't have this problem, you can always go back and make a different choice
      live "/character/create/godmode/attributes", CharacterCreationLive.GodMode, :attributes
      live "/character/create/godmode/host", CharacterCreationLive.GodMode, :host

      # Or maybe using LiveNavigation instead? I'm not sure
      live "/character/create/godmode/attributes", CharacterCreationLive.GodMode.Attributes
      live "/character/create/godmode/host", CharacterCreationLive.GodMode.Host

Is there a better way that I could structure my app or routes? How would you do it?

2

I see you’ve started brainstorming from the interface backwards but in my opinion it’s better to first model your functionality using the functional programming means and then make it concurrent and devise an interface.