\
*Why you should use modern AI programming tools*

\
I've been using Wordle as an analogy for serious software development.

\
In this article, I will combine the TDD solution that created a good model with an automated code generated using Artificial Intelligence.

\
> TL;DR: Use the best available tools wisely

# Divide and Conquer

## The Division

I have written several articles on software development.

I will talk about Worlde to represent serious software.

\
I created a backend Wordle using TDD and PHP in the first one.

[How to Develop a Wordle Game using TDD in 25 Minutes](https://hackernoon.com/building-a-wordle-game-using-test-driven-development-in-25-minutes)

\
Next, I watched a video on how to develop a Wordle using Automatic Code Generation fully.

[Step by Step Wordle Creation With Codex AI](https://hackernoon.com/step-by-step-wordle-creation-with-codex-ai)

\
Since Wordle is another Kata, I keep practicing it with TDD using Javascript

[How to Create a Wordle with TDD in Javascript](https://hackernoon.com/creating-a-wordle-with-tdd-in-javascript)

\
Now we have an amazing Wordle with a great domain model AND an incredible machine-learning user interface for it.

\
Let's combine them.

## The Conquest

We have two repositories:

1 - The one with the Javascript Wordle made with TDD

<https://replit.com/@mcsee/Wordle-TDD>

[https://github.com/mcsee/wordle/tree/main/How to Create a Wordle with TDD in Javascript](https://github.com/mcsee/wordle/tree/main/How%20to%20Create%20a%20Wordle%20with%20TDD%20in%20Javascript)

\
2 - The one with the machine-generated code

[https://github.com/mcsee/wordle/tree/main/Open AI Codex from DotCSV](https://github.com/mcsee/wordle/tree/main/Open%20AI%20Codex%20from%20DotCSV)

Playable Version (Live) With Defects

[https://mcsee.github.io/wordle/DotCSV/index.html?embedable=true](https://mcsee.github.io/wordle/DotCSV/index.html?embedable=true)

# Making it work together

We need to inject the changes into our main file.

Remember the scripted UI version was not modular.

\
We set up our valid game before building our UI

```javascript
 const response = await fetch("dictionary.txt");
 const dictionary = await response.text();
 const words = dictionary.split(/\r?\n/).map((string) => new Word(string));

 var randomIndex = Math.floor(Math.random() * words.length);
 var winnerWord = words[randomIndex];

 var game = new Game(words, winnerWord);   

// Before we setup our UI.
// We want to create our valid working Game
```

\
We create a text field to show status/errors to end users

```javascript
// Step 14 bis
/* add an input text field under the table */

var status = document.createElement('input');
status.setAttribute('type','text');
status.setAttribute('placeholder','');
status.id = 'status';
status.readOnly = true;
document.body.appendChild(status);
status.style.margin = '10px';
status.style.width = '300px';
```

\
This is not strictly necessary but it helps keep the UI as simple as possible.

```javascript
// Step 17
/* create variable named 'rowindex' starting at 0 */

var rowIndex = game.wordsAttempted().length;
```

*rowIndex* variable is no longer global. We compute it tied to the attempts tried on the game.

\
We are reifing the state into our Game object

And this is when all magic happens.

\
We replace the algorithmic and error prune letter counts computations with our more robust ones

```javascript
// Step 24
	  
/* when clicking validate button we add an attempt */

document.getElementById('validate').addEventListener('click', function(event) {
  var cells = document.querySelectorAll('td');
  var currentLetters = '';
  for (var i = 0; i < cells.length; i++) {
    if (i >= rowIndex * 5 && i < (rowIndex + 1) * 5) {
        currentLetters += cells[i].innerHTML ;
    }
  }  
  var status = document.getElementById('status');
  status.value = '';
  try { 
    var attempt = new Word(currentLetters);
    game.addAttempt(attempt);  
  }
  catch (error) { 
    status.value = error.message; 
    return;
  }  

  var correctMatches = attempt.matchesPositionWith(winnerWord); 
  var incorrectMatches = attempt.matchesIncorrectPositionWith(winnerWord); 
  
  for (var i = rowIndex * 5; i < (rowIndex + 1) * 5; i++) { 
    if (correctMatches.includes(i-(rowIndex * 5)+1)) { 
        cells[i].style.backgroundColor = '#aedb95'; 
    }
    if (incorrectMatches.includes(i-(rowIndex * 5)+1)) { 
        cells[i].style.backgroundColor = '#edc953'; 
    }
  }
  if (game.hasWon()){
     status.value = 'Congratulations. You won!';
  }
  if (game.hasLost()){
     status.value = 'Sorry. You have lost! Correct word was ' + winnerWord.word();
  }
  document.getElementById('input').value = '';
  rowIndex = game.wordsAttempted().length;
});
```

We put it as a very long function in the same event for clarification.

The model now raises exceptions following the [fail-fast principle](https://hackernoon.com/fail-fast-philosophy-explained-si963vk9) and we can show them to the final user.

\
This method requires heavy refactorization in a future article.

\
Finally, we reset the game.

This was one of the many mistakes corrected from the first version.

```javascript
// Step 27

/* when pressing remove, chose randomly the secret word from the words collection */ 

document.getElementById('remove').addEventListener('click', function(event) {
  var randomIndex = Math.floor(Math.random() * words.length);
  winnerWord = words[randomIndex];
  game = new Game(words, winnerWord);   
});
```

\
There are [repeated code](https://hackernoon.com/how-to-find-the-stinky-parts-of-your-code-part-x-i7r34uj) at the start of the script.

You can play with the final version [here](https://mcsee.github.io/wordle/Centaur/)

The source code is [here](https://mcsee.github.io/wordle/Centaur/)

And a working [repl.it](http://repl.it) [here](https://replit.com/@mcsee/Centaur-TDD)

## The Disclaimer

The final code is full of refactoring opportunities and several [code smells](https://hackernoon.com/how-to-find-the-stinky-parts-of-your-code-part-i-xqz3evd).

\
It is a proof of concept, not an elegant and final solution.

# Credits

*Image credit: A funny Twitter thread asking AIs to draw a Centaur*

\
*Also Published [here](https://maximilianocontieri.com/how-to-create-a-wordle-as-a-centaur)*

Fetch

Twitter

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REFACTORING.

2020 - Hacker Noon Contributor of the Year in REFACTORING

2022 - HackerNoon Contributor of the Year - Clean Code

2022 - HackerNoon Contributor of the Year - Debugging

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Machine Learning

2022 - HackerNoon Contributor of the Year - Quality Assurance

2022 - HackerNoon Contributor of the Year - Refactoring

2022 - HackerNoon Contributor of the Year - Software Architecture

2022 - the Greatest Storyteller

Share your ideas with me!

Read My Stories

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Refactoring

Nominated for 2022 - HackerNoon Contributor of the Year - Quality Assurance

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Machine Learning

Nominated for 2022 - HackerNoon Contributor of the Year - Clean Code

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Nominated for 2022 - the Greatest Storyteller

Nominated for 2022 - HackerNoon Contributor of the Year - Debugging

Software Engineer

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Wordles, Centaur and Code: Building a Game

Wordles, Centaur and Code: Building a Game

Too Long; Didn't Read

Companies Mentioned

@mcsee

RELATED STORIES