This repository was generated from the react-ts-starter template of a React/TypeScript/GitHub Pages app repository. Visit that repository to learn more how to get started in self-hosted React with just a click of a button.

Wordle React Clone

This repository contains a clone of the popular Wordle game in React, as spec'ed out and narrated by @machadop1407 (see the repo and corresponding video tutorial). The original project in is JavaScript, and this repository is in TypeScript, so some care was taken to ensure general correctness of the types — and // @ts-ignore is used as a temporary placeholders in some places.

Design Notes

Here are some of the things I changed with respect to the original tutorial.

• The originally provided word bank only contains about 2315 five-letter words, and omits a lot of plurals. This project now uses the New York Times word bank (this is the original Wordle word bank, with some spring cleaning), and splits the lists into a set of "common" words from which to draw solutions, and a set of "acceptable" words from which to accept guesses.

• The original project does not colorize multiple occurrence of a letter in a guess accurately, the computeStatusGuess algorithm is correct.

• The original project only allowed for keyboard keys to be either unknown or disabled, this project extends the possible states to "almost" (correct letter but not position) and "correct" (correct letter and position).

Coding Notes

The original video tutorial uses JavaScript, therefore using TypeScript required some adjustments — but fortunately, not as many as I had expected!

• Use a React snippet expander, to handle the large quantities of boilerplate code needed with React (for instance ES7+ React/Redux/React-Native snippets in VS Code).

• Use code reformatting on save, to standardize codebase. I used Prettier because it requires no/light configuration, and is broadly available. The configuration of options can be made in the package.json file, at the "prettier" subsection.

• Initially, create a components folder, and start drafting all components in this folder.

• When learning, initially TypeScript will give perplexing errors, and the explanations are poorly documented. So use \\ @ts-ignore for every line that gives type errors. Later, once comfortable enough, return to solve these errors.

  • TypeScript inferences are fairly powerful. Beyond adding a few Props type definitions (for instance in Key.tsx or Letter.tsx), the main issue I had was with the Context API.
  • Initially, as the code was taking shape, TypeScript was emitting a lot of no-empty-pattern and no-unused-vars warnings, that, upon deploy would be turned into block errors. To circumvent this (even temporarily), this can be added to the package.json under the eslintConfig subsection (see example):

    "rules": {
      "no-unused-vars": 0,
      "no-empty-pattern": 0,
      "@typescript-eslint/no-unused-vars": 0
    }

  • See App.tsx for help in using correct typing annotations for Context API. The issue has to do with creating an initial empty/partial context and expanding it later in the code. If the type annotations allow for the context to be partial, then this will generate typing errors in other files. It is better to: (a) define a full-fledged typing interface and (b) cast an empty context to a full one (see App.tsx lines 16-37, for an example of this).
  • When importing the word bank (see helpers.tsx), TypeScript will complain because the text file has no typings. This can be solved by creating a global.d.ts file containing:

    // allows import of .txt files in TypeScript
    declare module "*.txt" {
      const content: any
      export default content
    }

    See StackOverflow and Webpack's documentation for more information.

• Since initially this project contains no tests, I had to tweak the Continuous Integration script (in gh-deploy.yaml) to change npm test to npm test -- --passWithNoTests (otherwise, this testing part of the process sees the absence of tests as a failing error).