Yet another Wordle clone

Show and Tell
1

I was taking Josh W. Comeau’s “The Joy of React” course (for my own Elmish reasons) and came across his Wordle Capstone project which got me sidetracked into building a Wordle clone of my own.

Personally, I’m more interested in figuring out how to craft reliable, maintainable, and testable web applications so it was with great pleasure that I explored doing that on this project.

A quick tour of dwayne/elm-wordle

The application is cleanly separated into game logic and user interface. The user interface depends on the game logic and the game logic is independent of the UI.

Game Logic

The game logic lives in the src/Data directory. Does it scream Wordle? It can actually be extracted into a library for use in other Wordle projects. It is fully unit tested and I’m quite proud of the tests to be honest.

Testing guesses:

image
image478×881 41.5 KB

Testing a full game:

image
image408×741 20.1 KB

See how the tests are implemented here.

User Interface

I built this user interface the same way I build all my user interfaces. I built static versions in HTML/CSS (well Sass and loosely following the BEM methodology) of all the elements of the UI. For the animations I did JavaScript enabled mock-ups to understand how everything would unfold.

A video demonstration of the prototype:

I then translated the prototype into Elm views which all live in the src/View directory.

Takeaways

  • A key point that I think doesn’t get stressed enough is that if you get your HTML structure and CSS styles right then the view code becomes much easier to translate into reusable parts no matter the view framework you use. Be it elm/html, React, Vue.js, or something else.
  • The real differentiator between Elm and the other frameworks is Elm’s ability to precisely model the domain of a problem (Domain Modeling Made Functional). Let me put it this way. Give me the HTML/CSS from the prototype I showed above and tell me to build it in React or Vue.js or something else. I actually wouldn’t mind doing that. However, tell me to write the game logic in JavaScript or TypeScript and I wouldn’t be pleased at all. I’d miss my modules with opaque types, pure functions, immutability, but most of all my precious sum types.
8 Likes
2

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.