SCORE

With the daily word and submission validation having been taken care of, we can concentrate our efforts on checking the game state:

• calculating how many attempts are left
• checking if the player has won or lost
• assigning the proper colors to cells with past attempts and the on-screen keyboard

LIMIT

We calculate how many attempts are left in the current session:

/* Calculation of left attempts */
set @guessLimit = 6
set @guessRowset = BuildRowsetFromString(@guesses, '|')
set @guessesMade = RowCount(@guessRowset)
set @guessesLeft = Subtract(@guessLimit, @guessesMade)

SCORE

We are now finally ready to determine if the player has won by guessing the daily word and if the input text field should be displayed or not:

/* Check if the player has won */ 
IF 
    @lastGuess == @theWord
    THEN
        set @input = ''
        set @feedback = '🎉 VICTORY ACHIEVED 🎉'
ELSEIF
    @guessesLeft > 0
    THEN
        set @input = '<input name="lastGuess" type="text" class="mainInput" pattern="[A-Za-z]{5}" title="This needs to be a 5-letter word" id="main"><br>'
        set @guessesLeft = Subtract(@guessesLeft, 1)
ENDIF

To add some extra flair, the @feedback let's congratulates the player.

LOGIC

We arrive at the most complex part - giving the players visual feedback on how they're doing by coloring past guesses and keys on our virtual keyboard.

All of this will live inside of our standard submission form:

<form method="post" action="#">
    <div class="board">
        <input name="previousWord" type="hidden" value="%%=v(@theWordEncoded)=%%">
        <input name="guesses" type="hidden" value="%%=v(@guesses)=%%">
        
        %%=v(@guessesHtml)=%% <br>
        %%=v(@input)=%% 
        %%=v(@remainingHtml)=%% <br>
    </div>
    <div class="feedback">
        <b>%%=v(@feedback)=%%</b>
    </div>
    <br>
    %%=v(@letters)=%%
    <br>
    <div>
        <input type="button" onclick="backspace()" value="←" class="letter control">
        <input type="submit" value="Enter" class="letter control" style="margin-top: 5px">
    </div>
</form>

Here's how the Ampscript variables correspond to the various elements of the interface:

/* This will determine the colors assigned to each letter for the bottom keyboard output */ 
set @alphabet   = 'QWERTYUIOPASDFGHJKLZXCVBNM'
set @evaluation = '--------------------------'

We list all letters of the alphabet in the order they appear in the default QWERTY keyboard layout. Our job will be to assign a color to each of the letters. To do so, we create another string named @evaluation with the exact same length as our @alphabet string. In this script, those two variables will be bound together in a 1:1 relationship - for any letter of the @alphabet there's a single character of the same position in the @evaluation string.

We then replace each - in the @evaluation variable with a letter:

• c when the letter was in the correct spot in at least one of our guesses
• m when the letter is misplaced - it's in the daily word, but we never had it's position right
• w when the letter is wrong and doesn't appear in the word of the day

Those letters above will be also used later to represent CSS classes giving elements on the page corresponding colors.

This might be quite complex, so consider those examples:

Example 1

Let's imagine our daily word is ROUGE, but we submit CRANE as our guess.

Here's how the @alphabet and @evaluation strings would look like:

set @alphabet   = 'QWERTYUIOPASDFGHJKLZXCVBNM'
set @evaluation = '--cm------w----------w--w-'

This tells us:

• E is in the right spot
• R is misplaced
• A, C & N don't appear in the daily word

Example 2

We we make another guess and try with STORE:

set @alphabet   = 'QWERTYUIOPASDFGHJKLZXCVBNM'
set @evaluation = '--cmw---m-ww---------w--w-'

This tells us:

• E is in the right spot
• R, O are misplaced
• A, C, N, T, S don't appear in the daily word

note

Open the console of your browser to see how those values change as you player.

COLOR

Coming back to the script, we will be building the @guessesHtml and @letters with the same loop which will be iterating through each letter of the @guesses string.

CELLS

set @guessesHtml = ''
set @template = '<div class="cell {class}">{letter}</div>'

Here's the plan:

• First we take care of the @guessesHtml we'll use the @template to build the HTML code - we just need to replace {class} with a corresponding to the CSS class from the @evaluation string and {letter} with the current letter we are checking in the @guesses string.

/* Iterate through each letter of the @guesses string */
FOR @i = 1 TO Length(@guesses) DO
    set @letter = Substring(@guesses, @i, 1)
    IF 
        @letter == '|'
        THEN
            set @guessesHtml = Concat(@guessesHtml, "<br>")
    ELSE

        /* Find the correct class to assign */
        IF
            Substring(@theWord, Mod(@i, 6), 1) == @letter
            THEN
                set @class = 'c' /* Correct letter in the right spot */
        ELSEIF
            IndexOf(@theWord, @letter) > 0
            THEN
                set @class = 'm' /* Misplaced letter */
        ELSE
                set @class = 'w' /* Wrong letter */
        ENDIF
        
        /* Modify the @cellTemplate */
        set @cell = Replace(@cellTemplate, "{letter}", @letter)
        set @cell = Replace(@cell, "{class}", @class)
        set @guessesHtml = Concat(@guessesHtml, @cell)

        /* Only change the color IF the letter was not in the correct position already */
        set @index = IndexOf(@alphabet, @letter)
        
        IF Substring(@evaluation, @index, 1) != 'c'
            THEN
                set @evaluation = Concat(
                    Substring(@evaluation, 1, Subtract(@index, 1)),
                    @class,
                    Substring(@evaluation, Add(1, @index))
                )
        ENDIF
    ENDIF
NEXT @i

The script does the following:

• It goes through each character of this string assigning it to the @letter variable
• It checks if the characters is the | separator
  • If yes, it will add a line break tag (<br>) to our @guessesHtml string - this ensures that three words from our previous attempts appear as separate lines
  • If it's a proper letter:
    • The @index variable stores the position of this letter is in the @alphabet string
    • Another set of checks occurs which will determine which CSS class will be assigned:
      • We compare the each letter of the daily word with our current letter and assign the letter c (correct) when they match
      • If the above is not true, we just check if our current letter exists in our daily word - if it does, we assign the letter m (misplaced)
      • If both the conditions above are not true, we just use the letter w (wrong)
    • We modify the @cellTemplate replacing the placeholders with our current letter and the correct CSS class. This is then added to the @guessesHtml string
    • Since we are looping through the letters of our past guesses, it can occur that we assign colors to a single letter in the @evaluation string multiple times. This is the desired behaviour, but we just need to make sure that we don't overwrite any c with m classes - if the letter was green in the bottom keyboard, let it remain green and not become gold.

SHOTS

With the past guesses sorted, we just need to make sure that we also display rows of cells showing that indicate how many attempts are left to guess the correct word.

The approach is similar to the one above:

• we replace letters with a non-breaking space (forcing HTML to render the element)
• and replace the {class} placeholders with an empty strings - no letter was checked, so no color can be assigned

/* Build the rows with empty cells to visualize remaining guesses */
FOR @i = 1 TO @guessesLeft DO
    set @cell = Replace(@cellTemplate, "{letter}", ' ')
    set @cell = Replace(@cell, "{class}", '')
    set @remainingHtml = Concat(@remainingHtml, @cell, @cell, @cell, @cell, @cell, "<br>")
NEXT @i

CHARS

The only thing left now is building the virtual keyboard using the @alphabet and @evaluation strings.

/* Bottom keyboard output */ 
set @letters = ''
set @letterTemplate = '<div class="letter {class}" name="letter">{letter}</div>'

FOR @i = 1 TO Length(@alphabet) DO
    set @instance = @letterTemplate
    set @instance = Replace(@instance, '{class}', Substring(@evaluation, @i, 1))
    set @instance = Replace(@instance, '{letter}', Substring(@alphabet, @i, 1))
    set @instance = Replace(@instance, ' -', '')
    set @letters = Concat(@letters, @instance)

    IF 
        @i == 10
        or
        @i == 19
        THEN
             set @letters = Concat(@letters, "<br>")
    ENDIF
NEXT @i

Ągain the templating approach is used:

• We iterate through each letter of the @alphabet string
• The @letterTemplate has it's placeholders replaced with the current letter being processed and the corresponding style stored in the @evaluation string
• Letters that didn't occur in the past guesses would have - assigned as the new CSS class, so we just remove those classes
• To have the letters of the keyboard visually broken into 3 lines as in the QWERTY layout, we have the script add line breaks after the letters P (@i == 10) and M (@i == 19)