{"id":1763,"date":"2022-11-19T23:36:05","date_gmt":"2022-11-20T07:36:05","guid":{"rendered":"https:\/\/www.bradleycbuchanan.com\/b\/?p=1763"},"modified":"2022-11-29T11:12:42","modified_gmt":"2022-11-29T19:12:42","slug":"building-esthers-cafe","status":"publish","type":"post","link":"https:\/\/www.bradleycbuchanan.com\/b\/building-esthers-cafe\/","title":{"rendered":"Building Esther’s Cafe"},"content":{"rendered":"\n

This year Alleson and I submitted a short story called Esther’s<\/a><\/em> to the 28th annual Interactive Fiction Competition<\/a>. We placed 17th, which is great!<\/p>\n\n\n\n\n\n\n\n

We live in Seattle, Washington. Alleson runs Radiant Neon<\/a>, an art studio near Pike Place Market. I’m an engineering manager at Discord. This is the first game we’ve released together.<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

The Avocado Pit of an Idea<\/h2>\n\n\n\n

Esther’s<\/em> started as an idea for the Together Breakfast 2022 Narrative Jam<\/a>, which I heard about from David van Duzer at Narrascope<\/a> in July. I’ve been chipping away at a bigger Twine project with a friend for about a year, and thought maybe I could borrow that foundation and build something small for the jam. Alleson helped me brainstorm a little story about two mice who worked together to get their brunch. There was about a day left in the jam when I heard about it, and it quickly became clear that we couldn’t do the idea justice so we put it on the shelf. But it’s always been a modest idea; something small and polished that could elicit a smile.<\/p>\n\n\n\n

About a month later I had the privilege of taking September away from work before joining Discord. I’ve wanted to enter something in IFComp for a long time, so I asked Alleson if she’d help me write the game. We spent about 50 hours building Esther’s<\/em> in the month of September. I was hands-on-the-keyboard and did the illustrations. Alleson did the narrative design and endless editing passes. She contributed the “speak squeak” moment and many other clever turns of phrase.<\/p>\n\n\n\n

I don’t remember exactly how we landed on brunch, but I know the “mimosa mice” alliteration caught our ear very early. As reviewers have guessed, we are (and consequently wrote) hipster millennials. We both grew up in Portland, Oregon and we lived on Mississippi Avenue in 2011, right at the societal inflection point for avocado toast<\/a>. Mississippi Ave is a stellar food street, with brunch standbys like Gravy<\/a> and Miss Delta<\/a>. We still miss Muddy’s Coffeehouse<\/a>. If you’re ever in the area make sure to check out Lovely’s Fifty Fifty<\/a> for some of the best pizza in the country. Beech Street, where our mice live, crosses Mississippi Ave on our old block.<\/p>\n\n\n\n

In the first version of the story Harold and Janie visited a real cafe\/diner in their neighborhood, and Esther was the young adult proprietor whose Disney princess complex drove her to ignore local health codes and set the mice a tiny table on the end of the counter. The central idea that Esther wouldn’t understand our order was in place, but we were having trouble painting the rest of the world. Why wouldn’t Esther just go down the menu with the mice? Do they have the run of the kitchen, and retrieve the ingredients themselves? What do the other patrons think of the mice on the counter? We could have explained each of these away, but we were starting to run afoul of The Lens of The Weirdest Thing<\/a>. We also allowed the mice to get increasingly frustrated trying to communicate their order; at one point “Bite Esther” was an option! It felt wrong and I’d hit a writer’s block; I spent about a day mentally tearing elements out of the piece, looking for the right pivot.<\/p>\n\n\n\n

Making Esther a kid fixed a lot of problems at once. The make-believe cafe has no health codes, or complaining patrons, or expectation of pay. Of course the mice can’t make sense of the menu – it’s scrawled on a chalkboard, and even the pictures don’t reveal much. Of course, it also introduced a problem: Why are the mice ordering alcohol from a kid? We considered backing off the “mimosa mice” thing and having them just order orange juice. But we were attached to the “mimosas and avocado toast” brunch cliche, so instead we made the mice not actually know what a mimosa is. This felt like a mice… sorry, a nice <\/em>compromise, and left parents room to explain as much or as little as they liked.<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

Structure and Tech<\/h2>\n\n\n\n

Though small, the game mixes up a few CYOA structures. The first six-ish pages are basically linear. About page seven it opens up into a set of single-visit storylets which act as locks and keys for one another; there’s this blob of hacked-together menu logic<\/a> that curates and limits the options we’ll show the player. The space naturally narrows as the storylets dry up, and we bottleneck into the last three linear pages for the pudding cup gag. I won’t claim this structure got a lot<\/em> of thought. It seemed like a good way to let the player try lots of silly actions, and it let us keep the total number of pages small and write one strong ending.<\/p>\n\n\n\n

On top of that is a little “eatable foods” inventory system, that will put an extra option into the menu<\/a> anytime there aren’t enough choices. None of the six “Eat” storylets<\/a> are critical-path, so we used them to hide little hints and nudges that remind the player about the brunch goal. Because of this they have some of the most complex conditional logic in the game, to ensure Janie’s comments appropriately on the state of the world.<\/p>\n\n\n\n

:: Eat crackers\n\n\"Crackers are very good too,\" crunched <span.harold>Harold<\/span> with his mouth full.\n\n<% if (s.hasMimosa) { %>\n\"They pair well with our mimosas,\" conceded <span.janie>Janie<\/span>.\n<% } else { %>\n\"They would pair well with a mimosa,\" said <span.janie>Janie<\/span>.\n\"All we need is <%= (s.hasOrangeSlice && s.hasEmptyCup) ? \"orange juice in these cups\" : [!s.hasOrangeSlice && \"some orange juice\", !s.hasEmptyCup && \"an empty cup\"].filter(x => x).join(' and ') %>.\"\n<% } %>\n\n<span.esther>Esther<\/span> giggled at <span.harold>Harold<\/span>. \"What a good appetite you have today!\"\n\n<% removeFrom(s.eatableFoods, 'crackers') %>\n<%= story.render('Menu') %><\/code><\/pre>\n\n\n\n
Esther’s<\/em> is built with Tweego<\/a> and Snowman<\/a>, which is to say it’s a Twine game but eschews some of Twine’s writer-friendly defaults in favor of tools a web developer like me would be comfortable with. I did all my writing in VSCode. You can see the project on GitHub<\/a>. I liked the look of default Chapbook and built out something visually in that vein, with a skeuomorphic page.<\/p>\n\n\n\n
Although it’s a small game, it can be annoying to re-navigate to a particular page every time you rebuild. So I added a small developer tools panel to help with this, with savestates and autosave. It’s actually in the release; you can enable it by adding ?dev=true to the URL<\/a>.<\/p>\n\n\n\n
Esther’s<\/em> was small enough to test exhaustively and I geek out about automated testing, so I wrote a Puppeteer<\/a> script that actually launches the game in a browser and plays it. I hid a lot of the complexity in this SyntheticPlayer class<\/a>, and then used it with a very light JavaScript test runner called tape<\/a>. I ended up with this test<\/a> that plays through every possible path, not just visiting every passage but also every possible game-state you could be in when you reach that passage.<\/p>\n\n\n\n
await player.restart()\nawait player.walk(['Play'])\nawait player.exploreTo(['Now all we need is dessert'])<\/code><\/pre>\n\n\n\n
The exploreTo<\/code> command checks for some problems along the way:<\/p>\n\n\n\n