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

Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&query=perfume&page=2, I would like to get: ...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
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
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement