More + Wordle = Mordle (extending Josh his Web Components)

Wordle

TL;DR: Play all past Wordles: https://mordle.github.io/

Josh Wardle his Wordle game: https://www.powerlanguage.co.uk/wordle/, has taken the Internet by storm.

Soon people started building clones. My favorite is the Welsh version weighing in at a whopping 2.2 MEGA Byte.

A fun one, is the multi-player version.

Best interview with Josh "Wordle" Wardle: https://slate.com/culture/2022/01/wordle-game-creator-wardle-twitter-scores-strategy-stats.html

Even Google joined the hype, with a Wordle Easter-Egg

BUT...

The most important part might not be its game concept,

but the fact that Josh built Wordle with Web Components.

Web Components

are Web Components

are Web Components

The whole fun of native Web Components is reusability and extensibility.

That means you can use the ORIGINAL source code (like a library) and EXTEND on it.

1 picture says more than words:

Wordle has no license

And before you send me hate mail; here is the only copyright from the Wordle source code:

Looks like a Microsoft library was used. No Copyright by Josh.

Building Mordle

I had heard of Wordle before, but I opened the site only after I heard it was created with Web Components technology.

So after guessing the word of the day, I hit F12 and dove into the source code.

Nothing unfamiliar to me, I have this "hackers" attitude since I first pressed the ESC key on a TRS-80 Model-I keyboard to change my high-scores. You can't blame me, I was 10.

Josh has done a decent job. He uses a hash to name his one and only JavaScript file, so you can't easily link to it, and hijack his code.

I then ran my (personal) Qomponent Inspector on the code. This does a dive into the DOM, and lists (the first used) copy of all used Web Components.

As you can see below, there isn't much Web Components going on. They are mainly used only to render content. The meat and bones of Wordle is in the <game-app> Web Component.

And it did not take long to spot a very interesting property! solution:gorge was todays correct word!

Diving deeper, into the rabbit hole

I then dove deeper into the JavaScript source code, and quickly spotted all words are readable in the source code. Being a single JavaScript file, it is very easy to copy and change the original source code, and create your own (localized) version.

Too easy... I did that type of changes on BASIC sources way back in 1979 on that TRS-80 Model-I

I could have rewritten the app with (slightly) better use of Web Components. But I wanted to keep the code as simple as possible, and I wanted to keep it as close to the original as possible.

Your own Wordle solution word

REMEMBER! I am absolultely NOT making ANY changes to Josh his original JavaScript code!

Using Chromium Browser sources/snippets you need only a few lines of standard JavaScript code code to create you own <my-game> Web Component, which extends from Josh his original <game-app> Web Component.

Wordle with a custom word in a JSFiddle

For a JSFiddle you copy all of Josh his JavaScript code (from one file) into the JavaSscript section.
Also copy the <STYLE> tag content from Josh his index.html file to the JSFiddle CSS section.

Then all HTML required is:

<my-game></my-game>
<script>
  window.onload = function() {
    customElements.define(
      "my-game",
      class extends customElements.get("game-app") {
        connectedCallback() {
          super.connectedCallback();
          this.solution = "hacks"; 
          // click on title to removed saved state, play word again
          this.shadowRoot.querySelector(".title").onclick = localStorage.removeItem("gameState");
        }
      }
    ); 
  }
</script>

Alas Josh his code does not run inside a Dev.to IFRAME (localStorage restrictions).

Link to fully functional Wordle in JSFiddle:

https://jsfiddle.net/WebComponents/x8eyv1f4

Lessons learned:

• Web Components can be extended from existing Web Components. Most of us call this using a BaseClass

• Web Components can be created after definition in the DOM, all instances will automagically upgrade

But why stop there? I am not a 10 year old scriptkiddie hacking away in BASIC anymore.

Let's up the ante. Extend Wordle to play all past words

Overloading Josh his methods

The <game-app>.evaluateRow() method is called every time a new word is entered.

• I can add my own code by saving a reference to the original method.
• declaring my own this.newEvaulateRow() method,

  // save original method
  this.savedEvaluateRowJoshCode = this.evaluateRow;
  // and overload with the new method
  this.evaluateRow = this.newEvaluateRow;

• and calling the original method.

  newEvaluateRow() {
    let guessWord = this.boardState[this.rowIndex];
    this.savedEvaluateRowJoshCode();

Make World auto play

For ease of use I copied Josh Wardle his original source code to Github

https://mordle.github.io/wordle_main_code.js

With some extra lines of script I can now autoplay the game:

https://mordle.github.io/?sentence=danny,hacks,super,wordle,wordle,lingo,words

Or display your birtday Wordle?

With the source code available on Github, it is easy to extract Josh his dictionaries

  async readDictionary() {
    let source = await ( await fetch(__WORDLE_MAIN_SOURCE_CODE__) ).text();

    function extractByFirstWord(word) {
      let words = source
      .split(word)[1]
      .split("]")[0]
      .replaceAll('"', "")
      .replaceAll("\r", "")
      .replaceAll("\n", "")
      .split(",")
      .map((word) => word.trim());
      words[0] = word;
      return words;
    }
    this._wordlewords = extractByFirstWord("cigar");
    this._dictionary = extractByFirstWord("aahed");
  }

The Mordle can page back/forward to your birthday, and play the Wordle:

https://mordle.github.io/?year=2022&month=1&day=21

Note: you may have to clear the gameState in your browser's local storage to play again.

Playing all past Wordle words

**https://mordle.github.io/ was created from Josh Wardle his BaseClass.

!!!Nothing in the original source code was changed!!!**

Have fun extending it.

PS. I also added a dictionary lookup for each entered word

PS. If you want to protect your Web Components a bit better; here is an interesting Dev.To post.