Recreate Wordle using Lit-element: 2/5 - The Board

Recreating Wordle, the game that was recently bought for 7 figures by the New York Times is an excellent way to learn about new technologies. Today we are going to use Web Components with lit-element

• Web
• JavaScript
• Dark-Mode
• Web-Component

Table of Contents

Board state representation

In order to draw the board, we need a matrix that has 5 columns and 6 rows:

@property() matrix: string[][] = [
  ['h', 'e', 'l', 'l', 'o'],
  ['t', 'e', 's', 't', 's'],
  [],
  [],
  [],
  [],
];

Loop throught the matrix

Now that we have our state in place we need to display it on screen. For that map is perfect:

import { map } from 'lit/directives/map.js';

render() {
  return map(
    this.matrix,
    row =>
      html`<div>
        ${map(row, letter =>
          html`<span>
            ${letter}
          </span>`)}
      </div>`
  );
}

result

link commit