part 3: debugging 2020-04-21 games


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 😜


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



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.