AMP for Email: Making a Blackjack Game for the Inbox

Before I began working at Dyspatch, I had no idea that using AMP for an App inside of an Email was even possible. For the better part of three decades, it really wasn’t.

However, when I learned about AMP for Email and how Dyspatch could help me develop with it, I became excited. Like real excited.

My journey into becoming a developer started with the love of one thing: video games. I played them all the time, and one day I decided that I wanted to learn how to make one. This is how I discovered coding and found a passion for it.

So it’s really no surprise that my first immediate thought about AMP for Email and Dyspatch was: “I wonder if I can make a game with this?”

After some reading, learning the ins-and-outs, and a lot of experimenting, the answer was clear: Yes, you totally can! And in this post I’m going to walk you through how one might go about doing just that.

And considering gamification is one of the best ways to increase marketing engagement, you can consider this some light pro-D research 😉

While I have made a few working games with AMP for Email that work inside my Gmail inbox (it’s kinda my thing,) one that stands out to me is my take on the classic card game, Blackjack. I lovingly refer to this game as AMPJack.

The Setup for our AMP for Email Game

The rules to AMPJack are fairly simple:

• A player and a dealer both get dealt two cards each, the player can see both of their own cards, but only one of the dealer’s cards.
• A player can ask for more cards, one at a time, by “hitting” or if they think they have enough to beat the dealer they can “stay”.
• The goal is to try and have a hand that totals as close to 21 without going over. If either dealer or player go over 21, they “bust” and lose. If neither go over, then it’s whomever has the highest value hand of the two.

There are other things that you can do in Blackjack, such as splitting and betting. But I elected to try and keep things simple as I wasn’t entirely sure how to pull this off at first!

Armed with a plan of how a basic AMPJack game will play out, I began thinking about what I needed to do:

1. I would need to display and update the Dealer’s cards
2. I would need to display and update the Player’s cards
3. I would need buttons for “hitting“, “staying” and I also wanted to add a “new game” option
4. In addition to displaying cards, I would need to be able to display and update the total of all cards in each hand
5. I also wanted to display a message based on the status of the game, like if the player wins or loses.

The next question was… how can I do all of this in an email without being able to use my trusty friend, Javascript?

AMP for Email adds a lot of functionality to emails, but one of the coolest things it does is give you the ability to receive and send data via GET and POST requests right from your inbox! You can then use those requests inside of an Email and update the content dynamically.

In an “aha!” sort of moment, I came up with the idea that I could track both dealer and player cards on a server, make logic decisions based on end points coming from the client, and serve the updated values via an API back to the client to update the game.

Let’s Talk About the Server

The first iteration of this server used Node/Express, but I then discovered Fastapi, which uses Python, and was perfect for what I was trying to accomplish. As for hosting, I went with Heroku since it gave me the ability to containerize it all in a Docker container and have Heroku handle the rest.

There are 6 endpoints that AMPJack hits on the API:

1. /playerCards,
2. /dealerCards,
3. /gameStatus,
4. /hit,
5. /stay,
6. /reset.

While I could have just used one end point for everything, I wanted to segregate everything into its own areas of concern so that I could debug easier if something were to go wrong with any of the endpoints.

/playerCards

A GET request that returns an array of objects representing each card currently in the player’s hand. It also returns the total value of the cards together, and each object has an image property to make sure the player sees the correct card.

/dealerCards

This is the same as /playerCards except it handles the dealer’s hand, and will initially only return one of the cards as the other is face down until a player “stays”.

/gameStatus

This returns a string based on what stage of the game we are in. If a player wins, loses or busts it returns a phrase indicating what has happened. If the game is still being played it returns an empty string.

/hit

This is a POST request that adds one more card to the Player’s Hand.

/stay

This is another POST request that triggers an action to show the Dealer’s entire hand and continuously adds cards to the dealer’s hand until it either reaches 17 or goes over 21.

/reset

A GET request that resets the Player’s Hand, Dealer’s Hand, game status, shuffles the deck and deals again.

With the API all set up and ready to go, it was time to put this into the Dyspatch drag-and-drop editor, and use the power of AMP for Email to make a fun and interactive email!

Making a GET Request

Dyspatch comes with its own markup language—similar to HTML—called DML.

Using different components you can quickly put together beautiful looking Emails that will be translated into Email HTML (compatible with any email client) when you’re ready to export. Some of the components in DML are especially made for working with AMP for Email. Making a GET request and displaying the returned data requires a component called <dys-list>.

<dys-list> expects to have a src, in this case our API endpoint, as well as a height and width. We specify how much space in our Email the list will take up. A safe Email width is 600px wide and I chose 150px for the height so it has enough space to show an entire card with a little wiggle room. I have also given it an id of “playersHand” as we’ll need this as a reference point later on in our program.

AMP for Email lists expect a JSON response starting with an array of “items”. So any response that you want to use inside of your Email should look similar to this:

{
items: [
{
content: “Content”
}
]
}

In the case of the in-game screenshot above, the response would look like this:

It’s important to know that not all Email clients support AMP for Email. This is why with <dys-list> we need to include two other components, <dys-dynamic> and <dys-static>.

<dys-dynamic> is what displays our dynamic content if AMP for Email is supported, but it’s important that we use a “static fallback” so that users receive some sort of message saying that the Email needs to be viewed in a client that supports AMP for Email.

An alternative here would be to add a link or a button that takes the user to the web where a similar functioning app lives, but as my intent with this project was to focus on the Email aspect of this app, a simple text message should suffice.

Now For the Dynamic Content!

To update an HTML email without the use of a fancy framework like React, we need to use a templating language. Lucky for us Dyspatch/AMP for Email has support for using and displaying content with the Mustache templating language. We have to place this inside of <dys-template> so it knows to render the content correctly.

What this does is allow us to use the Mustache templating language to show dynamic content. Since we know <dys-list> expects an array of “items” we don’t have to include that in our code.

Mustache is a logicless templating language, which means we can’t use a typical loop, or IF statements. We need to be able to loop through our playersHand array so that we can get all the information out of it. Luckily, Mustache does have a way to loop through arrays by placing our code in between {{#nameOfArray}} and {{/nameOfArray}}.

Knowing that, we can see that the above bit of code is actually looping through the “playersHand” array that is returned from the API. Specifically we are pulling out the “img” property from each object inside the playersHand array (src = “{{img}}”). This is how the proper cards are displayed in the browser.

So altogether what this is doing is requesting JSON from the /playersHand endpoint from our server. It expects an array called “items” that includes another array called “playersHand” that it can then loop through and specifically pull out the img property from all objects in the “playersHand” array.

Groovy.

Making an AMP for Email POST Request

Another aspect that I needed to think about was how I would go about updating the hands of both player and dealer whenever a player hits or stays. Luckily AMP for Email has a way I can do just that.

When the email is first loaded, <dys-list> immediately makes the GET request to receive the initial state of the Player’s Hand. As I mentioned earlier, <dys-list> has an “id” property that I’ve given the value “playersHand”.

This allows me to use AMP for Email to specifically select it for an action based on an event.

The event in this case would be if the user clicks on the “Hit” button. I elected to put this inside a form because it’s essentially sending a signal to the server as a POST request that the user has clicked on the “hit button”.

Inside of that <dys-form> you’ll notice an attribute called “on=”, this is an AMP for Email attribute.

AMP for Email uses Events and Actions, which you can read more about here.

One of the events the “on” attribute can listen for is a successful form submit. When a user clicks “hit”, the server adds another card to the playersHand array and responds that it successfully received and processed the request. AMP for Email then takes an action: “on=’submit-success: playersHand.refresh”

What this is saying is that “on a successful submit, refresh the list with the id playersHand.” This is how we trigger the GET request again with the updated information so that the current and proper hand is being displayed.

With AMP for Email, we can also take multiple actions based on one event. This is really important for our AMPJack game because not only are we adding new cards when a player clicks on “hit”, we’re also checking if a player’s total hand goes over 21. If, while hitting, a player goes over 21 they automatically lose and is considered a bust.

As I previously mentioned we have an endpoint that serves the current game status. This is also a <dys-list> that is hitting the “/gameStatus” endpoint.

Just like with the player’s hand, we receive a JSON response and pull out the “gameStatus” property from the “items” array that is being returned. It also has an id of “gameStatus” so we can reference it when we want to take an action with it.

The way we create multiple actions based on one event, is by separating them by commas.

Now we are not only refreshing the playersHand on a successful form submit, we are also refreshing the gameStatus. If the player goes over 21 the gameStatus list is refreshed and displays a message saying the player has lost.

We know how to set up the player’s hands and we have a space in our email that is listening to and can display the game status, but what about the dealer’s hand?

With the player’s hand setup, it’s basically the same, only instead of pointing at the playersHand endpoint, we point it to the dealersHand endpoint. We would also give it an id, so that when a player clicks on the “stay” button, we handle it like we would a hit. Our client sends a POST request to the “stay” endpoint, and refreshes the dealersHand, which also updates the gameStatus list.

The AMP for Email part for setting up our game is complete 🥳

Polishing Up the Front End

The final step is to set up what our front end is going to look like. There are lots of options that you can do, and yet another great thing about AMP for Email is that it supports a lot more fun and useful CSS. In my final version I used Flexbox to make sure that the cards lined up the way I wanted. Definitely not something I could have done in normal email HTML!

You can read about what CSS is supported by AMP for Email in their official docs.

Ultimately it’s up to you how you want your AMPJack App to look!

What Will You Do with AMP for Email?

AMP for Email really is a game changer when it comes to Email technology. I hope from reading this post you take some inspiration that with a little creative use of GET/POST requests, and the power of AMP for Email + Dyspatch, you can create some pretty engaging, fun and unique experiences for your customers right inside of their inbox!

If you do decide to create your own variation of AMPJack—or any cool AMP for Email experiences for the inbox—we’d surely love to see it! Send the Dyspatch team a copy to us@dyspatch.io!