Almah

Almah

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

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?

First Post!

krasenyp

krasenyp

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.

Where Next?

Popular in Questions Top

vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

Other popular topics Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40165 209
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement