Ep 2 - SVG dice faces with dark mode support

Our Dice Roller

• live demo
• github repo
• Related projects
  • King of Calgary (Live Demo)
  • Vanilla Dice Tower (Live Demo)

Housekeeping

• Next week: Pair Coding with Ian Sutherland
• Meta streams happening this week
• Website and socials are up!
  • Home page
  • Discord
  • Newsletter
• Weekly Journal Review
  • Code Journal
  • Teaching Journal
• We need a mod for Twitch

Ideas from last week

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

Agenda for this week

1. King of Tokyo Recap
   • A reminder of why you’re spending a Saturday afternoon online.
2. Walk-through of last week
3. Simple dice faces with Font Awesome (maybe custom SVG?)
   • The current design is non-existent. Gotta make it pretty!
   • Goal: Make the dice minimally pretty
   • TODOs:
     • Find and download(?) Font Awesome icons dice faces
       • One
       • Two
       • Three
       • Heal
       • Attack
       • Money
     • Install FA CDN
     • Add CSS logic for displaying the the proper icons
     • Centre the dice on the page
     • Make size relative to the screen width using clamp()
     • Choose a colour theme
4. Dark Mode (i.e. Dark Edition)
   • The whole game will support different themes in light and dark modes. We might as well start with the dice.
5. Plan out a new roll interface
   • Let’s fix some problems with the way our dice roller looks and behaves.