part 3: debugging

2020-04-21
#games

goals

  • Debugging: The sounds don't always play, which kills some of the motivation to keep playing.

  • Customization: Besides asking for the dino to grow (cause you feed him), my son kept asking for different colors for the dino.

I suspected that one issue was that the sounds were not loaded in time for immediate playback. So my idea was to pre-fetch the sounds and "hide" the pre-fetching with a modal that would show up when the page is loaded. That would also allow me to offer a selection of colors so that you could select your own colorful dino.

To pre-fetch the sounds as much as I can, I create HTMLAudioElement's for them, trigger a load and register a listener for canplaythrough. While that pre-fetches the sounds, it didn't fix the issue.

Turns out that the browser is protecting us from annoying websites by preventing automatic playback. After enabling automatic playback in Firefox' settings, the sounds now play every time 🎉. But two issues remain:

  1. Why does it work sometimes? My best guess is that my sons sometimes managed to interact with the page in a way that enabled playback. One thing that seems to work is selecting some text or element, opening the context menu for it. That left the page in a state were playback was enabled for some reason that I didn't look into.

  2. The "resolution" also raises the question of how to ensure that playback is enabled on first load. I added a quick check (The promise returned by play on the HTMLAudioElement fails in case the browser stops playback) but I would prefer to add a reasonable "dialog" to explain what's going on, but ran out of time to implement that and the modal.

So now I have pre-fetching strategy implemented that I don't really need 🤷 But hey, maybe it helps when there's a bit of latency 😜

lessons

  • Javascript: Should default to for (x of xs) rather than for (x in xs) or even for each (x in xs). Check MDN for details.

  • There seems to be no way to be certain that I can use a HTMLAudioElement fully offline. That is, I want to make sure it is fully downloaded versus it is partially cached enough that it can be played back if the current download rate is maintained.

  • appcache is deprecated.

  • A reminder of why I appreciate error handling in Go. While it often feels repetitive or even cumbersome, it makes failure points explicit and probably would have saved me some time here.

  • There still are tons of formatters for Javascript out there, for now I've decided to go with prettier using Google's gts setup. Setup for Emacs is straight-forward. Install prettier-js via your favorite package manager, add a hook for your javascript major mode and configure prettier-js:

(setq prettier-js-args
      '(
         "--trailing-comma" "es5"
         "--bracket-spacing" "false"
         "--single-quote" "true"
         "--arrow-parens" "avoid"
       ))

result

knut-03

knut-03 - spent about 1.5 hours.

  1. Debugging ✅ Pretty sure that the automatic playback setting was the "bug" I was hunting.
  2. Customization ❌ Didn't find the time to tackle it this time.

No visual changes in this one - so will probably try to get back to that next.