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

Transcript

7. Dungeons and Dragons and Rails
8. Our Goal: Build a D&D character sheet Using Turbo
11. Basic Bio Rails Classic
12. 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>
14. Bonus speed with Turbo Drive Not the point of this talk
16. Make a Dexterity Saving Throw
17. ???
18. D&D Abilities
19. Strength bodily power, athletic training, and the extend you can exert raw physical force
20. Dexterity agility, reflexes, and balance
21. Constitution health, stamina, and vital force
22. Intelligence mental acuity, accuracy of recall, and the ability to reason
23. Wisdom how attuned you are to the world around you, perceptiveness, and intuition
24. Charisma ability to interact effectively with others, confidence, eloquence, can represent a charming or commanding personality
25. 6 D&D Core Abilities Range: 1-20 STRENGTH DEXTERITY CONSTITUTION INTELLIGENCE WISDOM CHARISMA
26. Before we roll dice, let's represent this on a character sheet
27. Time to bring in Turbo!!!
28. Pretend Turbo doesn't exist SAGEFIRE'S ADVICE
29. Think RESTfully SAGEFIRE'S ADVICE
31. CLASSIC RAILS Add Abilities Section # app/views/characters/show.html.erb <section> <h2>Abilities</h2> <dl><%= render @character.abilities %></dl> </section>
32. 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>
36. What if you want to edit inline?
37. Pages in pages with frames
38. 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 %>
39. 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 %>
42. What happens when you submit the form?
45. So how does one do a dexterity saving throw?
46. Roll 20-sided die (d20) and add modifier
47. (skill - 10) / 2 MODIFIER FORMULA
48. 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
50. Glittersense has a 14 DEX (+2)
54. Adding Weapons Controlling other frames
55. Weapons Index Extract a partial # app/views/weapons/index.html.erb <h1>Weapons</h1> <%= render "weapons/weapons_table", weapons: @weapons %>
56. 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>
58. Layer in some Turbo
59. 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 %>
62. Controlling other frames
63. 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 %>
67. What's an athletics check?
68. 6 D&D Core Abilities STRENGTH DEXTERITY CONSTITUTION INTELLIGENCE WISDOM CHARISMA
69. 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
70. CLASSIC RAILS Add Skills Section # app/views/characters/show.html.erb <section> <h2>Skills</h2> <dl><%= render @character.skills %></dl> </section>
73. Updates that modify multiple frames
74. Controlling the parent frame
75. Two Turbo facts YOU CAN NEST FRAMES WITHIN FRAMES YOU CAN TARGET ANY OTHER FRAME
77. Draw Boxes Stop coding and start drawing! SAGEFIRE'S ADVICE
78. Works best when frames are related or sit next to each other
79. At an extreme, target the whole page with _top
81. We get to try again on our turn (instead of attacking)
82. Try again with our character sheet
84. Custom mode with turbo-stream
85. Think of this as "custom mode" not "streaming updates"
86. Controller rendering turbo stream # app/controllers/abilities_controller.rb def update # actually update the ability respond_to do |response| response.turbo_stream end end
87. 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 %>
88. Use dom_id to ensure consistent ids SAGEFIRE'S ADVICE
91. What if JS is disabled? Progressive Enhancement
92. 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
93. This kind of slicing makes you mobile-ready
94. The fight is getting to be too much!
96. Sharing with others with ActionCable
97. 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
98. ActionCable Subscribe to updates in view # app/views/characters/show.html.erb <%= turbo_stream_from @character %>
99. No JavaScript Required!
102. Together we could take on the bandit chieftain
104. 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
105. Tips for working with Turbo Tips from Sagefire PRETEND TURBO DOESN'T EXIST EMPHASIZE REST LEAN ON DOM_ID DRAW BOXES
107. Joël Quenneville PRINCIPAL DEVELOPER thoughtbot CO-HOST bikeshed.fm @JOELQUEN X JOËL QUENNEVILLE