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.