First let’s discuss the structure of the game:

• the game is hosted on a single CloudPage
• client-side JavaScript is limited to a minimum to provide a solution mostly dependant on Ampscript while also being easy to use (and be fairly familiar to those of use to play the original game regularly)
• each new move is made by a submission of an HTML form with the HTTP POST method (which is hiding the passed parameters)
• we need to reset the board when the current word expires

STUFF​

Functionally, there are just a few elements on the page that I wanted to include (excluding the instructions on how to play):

1. A countdown showing the time left to solve the current word
   • this required a lot more code than I expected at first, but it’s something that can be universally used in other situations, so I decided to separate it into a snippet: Ampscript Countdown)
2. Past guesses made with letters styled differently:
   • gold if they’re in the daily word
   • green if they’re in the right place
   • grey if the given letter does not appear in the daily word
3. One input where we write our guess
   • should not appear if the player wins or loses by using all 6 attempts and not finding the daily word
4. Rows representing the number of left attempts
5. Feedback section
6. A virtual keyboard that’s also styled to hint at what letters to use / not use in our next guesses
7. A new, hidden Reset button
   • including this button makes logging of progress pointless, but makes it more easy to test this game

FORMS​

To make the game work, we essentially need only two forms:

1. The standard form that submits our guess for the daily word
2. A simple form that resets the game

It turns out that we don’t need to pass that many variables and can do just with the following:

• @guesses
  • the history of our guess attempts stored as a delimited string
  • this will be used to build the 2nd element of our interface
• @lastGuess
  • our 5-letter word attempt at guessing the word
  • this value is submitted by input mentioned (3rd interface element)
• @previousWord
  • the daily word that was active when the page was refreshed
  • this is used to reset the board when a new daily word is introduced

We try to retrieve those values each time the page is loaded:

/* Get the submitted values and calculate how many attempts are left*/
set @previousWord = RequestParameter('previousWord')
set @lastGuess = Uppercase(RequestParameter('lastGuess'))
set @guesses = UpperCase(RequestParameter('guesses'))

Using those 3 variables we will be able to determine the current state of the game, but we’ll discuss that later.