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.
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.
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).
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 inKey.tsx
orLetter.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
andno-unused-vars
warnings, that, upon deploy would be turned into block errors. To circumvent this (even temporarily), this can be added to thepackage.json
under theeslintConfig
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 (seeApp.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 aglobal.d.ts
file containing:See StackOverflow and Webpack's documentation for more information.// allows import of .txt files in TypeScript declare module "*.txt" { const content: any export default content }
- TypeScript inferences are fairly powerful. Beyond adding a few
-
Since initially this project contains no tests, I had to tweak the Continuous Integration script (in
gh-deploy.yaml
) to changenpm test
tonpm test -- --passWithNoTests
(otherwise, this testing part of the process sees the absence of tests as a failing error).