Inspired by "let it snow" from SNL Celebrity Jeopardy, wordplayground is a simple game where you guess an ambiguous word-pair from their shared middle section. For example, the title itself could be interpreted as "word playground" or "wordplay ground", which you would guess from

  _ _ _ _ p l a y _ _ _ _ _ _ 

plus 4 emoji hints (I might be a bit too proud of the self-reference).

I had approximately zero front-end experience coming into this, but Copilot's agent mode was able to do an impressive amount of heavy lifting. It spit out good-looking, functional features instantly for many components that would have taken me orders of magnitude longer to figure out (especially since I'm completely new to React/front-end development).

It was particularly adept at prompts like:

  - create empty boxes for users to input letter guesses

  - add an 'x' animation and disable input during that animation for wrong guesses

  - show/hide hints, add date navigation and reset buttons

Other prompts had mixed success:

  - move inline <div style={...}> into reusable css classes (stuff it previously generated)

  - make this button/section/colorscheme look better

  - refactor/reuse/cleanup duplicate code

Visual style edits worked okay, and though I ended up manually tweaking most elements, AI was definitely helpful for exposing relevant CSS-fields I wouldn't've known to search for. Code cleanup/modularization was so-so, as things looked more copy-paste/verbose than what I'd imagine an experienced human would produce (though I don't really have a good basis for comparison).

(Un)fortunately, there were many things Copilot would get hopelessly wrong despite multiple rounds of feedback:

  - use @nanostores/persistentMap to save user state

  - <the last change> didn't work and now there's just a blank screen

  - display over/under-braces to visually indicate the sections each hint corresponds to*

The last point was especially frustrating, as I spent a lot of time both prompting agents and manually trying out various solutions found through old fashioned google/stackoverflow (svg drawing, mathjax, square brackets using borders, etc). I guess this is a less common problem, as I couldn't find complete solutions nor successfully adapt any of the approaches I could find online, and perhaps that's why llms failed too. I'm sure an experienced person could knock this out in short order, and I could probably solve it too with a good chunk more of effort, but to keep things tractable I went for a simpler ui.

Overall this was a quick and fun weekend project that I maybe could but almost certainly would not have built without AI.

---

*something like $\overbrace{word}^{HINT_EMOJI}playground$ in latex, though mixing overlapping over/under-braces in latex isn't exactly straightforward either