Ep 1 - Let's Build a Dice Roller

Agenda

1. What is Browser Therapy?
2. Introduction to King of Tokyo
3. Build Session: rolling a traditional die
4. Build Session: add support for a custom die
5. Build Session: creating SVG die faces

What is Browser Therapy

Goals

1. Have fun and escape!
   • First series will be building a board game.
2. Be accountable to yourself and code regularly.
   • Weekly episodes are scheduled so we stick with the process.
3. Master your craft.
   • How we code is more important than what we code.

Some Coding Processes

• Build sessions
• Learning Journals breakdown
  • Tony’s Learning Journals
    • Coding Journal
    • Teaching Journal
  • A learning journal entry about learning journals

Introduction to King of Tokyo

Background resources

• Directory of Board Game Mechanics
  • Dice related mechanics in the list:
    • dice rolling
    • die icon resolution
    • different dice movement
    • worker placement with dice workers
• White, Brown, and Pink: The Flavors of Tabletop Game Randomness by Geoff Engelstein

Build sessions

Source repos

• King of Calgary Mockup
• First attempt at a dice tower
• State diagram - first attempt

Session Notes

Define the Problem and Goal

Problem: I can’t roll a die!

Solution: Let’s build a roll() that will role one die, either traditional (i.e. 1-6) or a custom die.

• All dice will be fair dice (isohedral)
• Focus on traditional game dice
  • 2, 4, 6, 8, 10, 12 and 20-sided dice only
• Dice can have either numbered or custom faces

Plan it out: base dice roller functionality

One utility funtion

• one parameter
  • if integer x, roll an x-sided die by finding random integer between 1 and x
    • return integer
  • if array y, roll custom die by finding a random index between 0 and y - 1
    • return array item

Brute force: base dice roller functionality

• Initial commit
• Walk-through
• Optimized

Session Goal: Build an interface for the dice roller

• Copy the functionality at the top of this page:
  • King of Calgary

Plan it out

• take the code from the above repo and centre it on the page

Brute force

• added roll interface
• Walk-through

Ideas for next week

• SVGs!!!
• Plan out a new interface???
• Build a proper Dice Tower!!!