Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Dungeons and Dragons and Rails

Dungeons and Dragons and Rails

You’ve found your way through the dungeon, charmed your way past that goblin checkpoint, and even slain a dragon. Now you face your biggest challenge yet - building a digital character sheet in Rails. Normally taking on an interactive beast like this requires a powerful spell like “react” but you’re all out of spell slots. Luckily you found an unlikely weapon in the dragon’s lair. They call it Turbo. Attune to your keyboards and roll for initiative! This task is no match for us!

Given at RailsConf Detroit 2024

Joël Quenneville

May 09, 2024
Tweet

More Decks by Joël Quenneville

Other Decks in Technology

Transcript

  1. Basic character show page Classic Rails CRUD # app/views/characters/show.html.erb <h1><%=

    @character.name %>'s Character Sheet</h1> <section> <h2>Bio</h2> <dl> <dd>Level</dd><dt><%= @character.level %></dt> <dd>Race</dd><dt><%= @character.race %></dt> </dl> <p><%= @character.bio %></p> </section>
  2. ???

  3. CLASSIC RAILS Ability Partial # app/views/abilities/_ability.html.erb <dt><%= ability.name %><dt> <dl>

    <%= ability.value %> <%= link_to "Edit", [:edit, ability.character, ability] %> </dl>
  4. Ability Partial Classic Rails # app/views/abilities/_ability.html.erb <%= turbo_frame_tag dom_id(ability) do

    %> <dt><%= ability.name %><dt> <dl> <%= ability.value %> <%= link_to "Edit", [:edit, ability.character, ability] %> </dl> <% end %>
  5. Editing an attribute Now with Turbo # app/views/abilities/edit.html.erb <h1>Edit <%=

    @ability.name %> for <%= @character.name %></h1> <p><%= @ability.description %></p> <%= turbo_frame_tag dom_id(@ability) do %> # form in here <% end %>
  6. Modifiers Based on Ability Scores ABILITY SCORE MODIFIER Skill modifier

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 -6 -4 -2 0 2 4 6 0 AVERAGE
  7. Add Weapons to Character Sheet Reuse a partial # app/views/characters/show.html.erb

    <section> <h2>Weapons</h2> <%= render "weapons/weapons_table", weapons: @character.weapons %> <section>
  8. Weapons: Dynamic List Single frame # app/views/characters/show.html.erb <%= turbo_frame_tag :weapons_table

    do %> <%= render "weapons/weapons_table", weapons: @character.weapons %> <%= render "weapons/form", character: @character, weapon: Weapon.new %> <% end %>
  9. Weapons: Dynamic List Two frames # app/views/characters/show.html.erb <%= turbo_frame_tag :weapons_table

    do %> <%= render "weapons/weapons_table", weapons: @character.weapons %> <% end %> <%= turbo_frame_tag :weapons_form, target: :weapons_table do %> <%= render "weapons/form", character: @character, weapon: Weapon.new %> <% end %>
  10. Skills These depend on one of the core abilities STRENGTH

    Athletics DEXTERITY Acrobatics Sleight of Hand Stealth CONSTITUTION INTELLIGENCE Arcana History Investigation Nature Religion WISDOM Animal Handling Insight Medicine Perception Survival CHARISMA Deception Intimidation Performance Persuasion
  11. Controller rendering turbo stream # app/controllers/abilities_controller.rb def update # actually

    update the ability respond_to do |response| response.turbo_stream end end
  12. Turbo Stream template Replace both ability and skills # app/views/abilities/update.turbo_stream.erb

    <%= turbo_stream.replace dom_id(@ability), @ability %> <% @ability.skills.each do |skill| %> <%= turbo_stream.replace dom_id(skill), skill %> <% end %>
  13. Controller rendering turbo stream # app/controllers/abilities_controller.rb def update # actually

    update the ability respond_to do |response| response.html { redirect_to [@character, @ability] } response.turbo_stream end end
  14. ActionCable Broadcasting stream in controller # app/controllers/abilities_controller.rb def update #

    actually update the ability Turbo::StreamsChannel.broadcast_render_to( @character, template: "abilities/update", locals: {ability: @ability} ) # respond end
  15. What Turbo can do EMBED OTHER FRAGMENTS WITH FRAMES FRAMES

    CAN TARGET OTHER FRAMES CUSTOM MODIFY THE DOM WITH TURBO-STREAM SYNCHRONIZE CHANGES WITH ACTION CABLE Optional
  16. Tips for working with Turbo Tips from Sagefire PRETEND TURBO

    DOESN'T EXIST EMPHASIZE REST LEAN ON DOM_ID DRAW BOXES