wordle Svelte Themes

Wordle

A recreation of the popular game Wordle with additional modes and features. Made with Svelte in Typescript.

Publish workflow GitHub package.json version

A recreation of the popular game Wordle by Josh Wardle (now purchased by the New York Times), with additional modes and features. Hosted on GitHub pages here.

Additional Features

  • Words are chosen from the list of words at random instead of in sequence, and the solution is not stored in localStorage, making it harder to cheat. The seed for the random number is created from the date, ensuring that everyone gets the same random number, so people can still compare answers.
  • When you complete a game the definition of the word is shown on the end of game modal.
  • In addition to the other statistics, your average guesses and your losses are also displayed on the win modal.
  • When the timer reaches 0 for a given game mode it changes into a refresh button instead of just staying at 00:00:00.
  • When the timer reaches 0 for a given game mode a refresh button appears in the top left corner.
  • A tips widget in the settings menu with useful information about the functionality of the game.
  • Right clicking a submitted word on the board will tell you its definition.
  • Right clicking a submitted word on the board will tell you how many possible words could have been played there, taking all previous information into account.
  • Right clicking the row below the last submitted word will tell you how many possibilities there are taking all previous information into account.
  • The game mode is reflected in the url, allowing you to share a game mode directly.
  • You can share a link to a specific game number, allowing you to play historical games, and share specific rounds of the faster changing modes with your friends.
  • You can access previous games from the settings menu by inputting a game number or link.
  • Service worker which allows the game to be easily downloaded as a progressive web app and run offline.
  • Give Up button.

Additional modes

The game mode can be changed by clicking WORDLE+ at the top of the screen or swiping the board in either direction.

Hourly mode: A new word every hour.

Infinite mode: A new word every time you refresh, for the true addicts.

Technical details

This is written with Svelte in Typescript. This is my first Svelte project, and is intended as an exercise to help me learn and become proficient in Svelte. It also uses some basic scss for styling.

The project was initialized using npm init vite@latest and selecting the Svelte template.

Forking this project

Anybody is welcome to fork this repository and do what they like with it, provided they follow the accompanying license (GPL-3.0). I would also appreciate if you could link back to this repository and credit me in your project.

Have fun :)

Analytics

This project contains basic google analytics which log the following information:

  • Number of visitors
  • Visitor's Country
  • Whether they arrived via a direct link or a search engine
  • Total number of people on site

This information cannot be linked back to individual users. It is for my own personal use and is not shared with anyone else. This is my first "major" public facing project and being able to see how many people are playing from all over the world is a big factor in my motivation to continue working on it.

How to create a new mode
  • Add the mode name to the end of the GameMode enum in enums.ts
  • Add a case for that mode in the newSeed function in utils.ts
  • Add a ModeData object to the modeData modes array in utils.ts

Top categories

Loading Svelte Themes