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 Next, I watched a video on how to develop a Wordle using Automatic Code Generation fully. 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 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 2 - The one with the machine-generated code https://github.com/mcsee/wordle/tree/main/Open AI Codex from DotCSV Playable Version (Live) With Defects 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 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 // 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. // Step 17
/* create variable named 'rowindex' starting at 0 */

var rowIndex = game.wordsAttempted().length; variable is no longer global. We compute it tied to the attempts tried on the game. rowIndex 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 // 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 and we can show them to the final user. fail-fast principle 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. // 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 at the start of the script. repeated code You can play with the final version here The source code is here And a working repl.it here The Disclaimer The final code is full of refactoring opportunities and several . code smells 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

Fetch

Twitter

How to Find the Stinky Parts of Your Code [Part XXIV]

A Hacker Tried to Steal $566M  by Exploiting a Code Smell, Here's How

Buy My Book

Share your ideas with me!

Read My Stories

Buy Me a Coffee

Book Author

Too Long; Didn't Read

Wordles, Centaur and Code: Building a Game

Wordles, Centaur and Code: Building a Game

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Predictions About the Future of Finance

The Noonification: Use This 7-Step McKinsey Framework to Solve Any Problem (1/10/2023)

The Noonification: A Taxonomy of Inclusiveness (1/11/2024)

The Noonification: What is the InfiniteNature-Zero AI Model? (11/19/2022)

10 Ways AI Has Changed Our Lives

10 Predictions About the Future of Finance

The Noonification: Use This 7-Step McKinsey Framework to Solve Any Problem (1/10/2023)

The Noonification: A Taxonomy of Inclusiveness (1/11/2024)

The Noonification: What is the InfiniteNature-Zero AI Model? (11/19/2022)

10 Ways AI Has Changed Our Lives

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps