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

Again 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)