Git Product home page Git Product logo

wordle's Introduction

Wordle+

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

wordle's People

Contributors

mikhad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

wordle's Issues

Letter in word hint not working correctly

image

It looks like it highlights every instance of a correct letter. The actual word was shalt, but it highlighted ever S in Sassy. This is not how the original wordle works. I'm assuming that it's supposed to be like wordle, but I don't know for sure.

Anyway, great job on this!

Board keeps condensing

Describe the bug
The Wordle board keeps condensing to be very short and super wide.

Desktop (please complete the following information):

  • OS: [iPad OS]
  • Browser [Safari]
  • Browser Version [???]
  • Game Version [1.3.2]

Smartphone (please complete the following information):

  • Device: [iPad 7th Gen]
  • OS: [15.6.1]
  • Browser [Safari]
  • Browser Version [???]

Multilanguage support

Hello!
I was starting to do a webapp of the original wordle, then I saw this repository....
I was also planning to add more languages.
If you put application strings and wordlists in separate files it would be easy for the comminity to translate it in all possible languages.
If anyone is interested here is the android APK of the last version appeared on the original author website:
Wordle.zip

Timer off by X hours

Timer isn’t in sync with game.

Current:
Local time: 02:06:18 AM
Time until next wordle: 14:53:42

Expected:
Should read : 21:53:42

Help

How do I run this on Replit? (Repl.it)

In game way to play historical game

Description
A modal that lets you either paste in the link to a historical game or input the mode and game number of a historical game you want to play.

Reasoning
While it is already possible to play historical games by following a link, this is inconvenient for people who have the PWA installed, as the link will take them to the browser.
There is also no in game way to find a historical game other than modifying the url.

Implementation
Make the PWA the link handler for mikhad.github.io/wordle.
Add a button somewhere that pops up a new modal as described in the description.
The icon can look something like this:
Historical game

Remove Google

Remove your Analytics API from this project, don’t add a “message to forkers”. This it GitHub not some random repo host.

SEO and open source are oil and water.

You didn’t do anything here in an original context, and “your” project is on the chopping block for NYT.

Build something original, then talk about copyright & licensing.

Change object creating functions into classes

Description
Change functions like createLetterStates and createDefaultStats into classes

Reasoning
I should have done this to start with. Its cleaner and allows me to give them utility methods to tidy up my code a bit.

Implementation (optional)
A toString type method on each to produce the string to write to localStorage, and a constructor that takes a string.

Missing sourcemap warnings when dev site is first loaded.

Since I updated to the latest version of Svelte and started using Vite instead of Rollup I have been getting the following warnings every time I load the dev site for the first time.
Screenshot 2023-01-14 151251

If anyone could assist with suggestions on how to either disabling the warnings or actually generating the sourcemaps it would be much appreciated.

Double letter handling does not match OG wordle

Screenshot_20220124-182900_Samsung Internet

See screenshot. In OG Wordle, the first E would be yellow, and the last E would be grey. Both Es highlighted yellow in the guess suggests that there are two Es in the word.

If the word was KEEPS, and I guess EAGLE, the both Es highlighted yellow would be correct.

Letter in word hint not working correctly

The actual Wordle doesn't mark a letter as yellow unless there is at least one more of the guessed letter in the actual word in an unknown location. I just played and got the word "MANIA" as the answer. But when I guessed "INDIA," I got 🟨🟨⬛️🟩🟩 instead of ⬛️🟨⬛️🟩🟩. You can verify how the actual Wordle works by guessing primp for today's word. You'll see that the first P is black, not yellow, even though a second P exists in the word.

~ Courtesy of flyguy33443322 on reddit.

Board Layout Issues on new iOS devices & very old devices

Describe the bug
This bug report consolidates issues #8 , #48 , #49 , and #55 .

Lack of aspect-ratio support on Old Devices

To Reproduce
Steps to reproduce the behavior:

  1. Open application on an older device
  2. Observe that the board is condensed in the center

Expected behavior
Behave as normal with full size board

Screenshots
image

Version info
https://caniuse.com/mdn-css_properties_aspect-ratio

Layout issues on newer iOS devices

To Reproduce
Steps to reproduce the behavior:

  1. HELP NEEDED: What are the steps to reproduce this behavior
    NEEDS VERIFICATION
  • Only happens in daily section
  • only after adding any letter. On backspace grid doesn't change

Expected behavior
Behave as normal with full size board

Screenshots
image

Smartphone

  • Device: Apple device running iOS
  • OS: iOS 15.6.1
  • Browser: Safari, HELP NEEDED: Does this affect other browsers on iOS devices with this version?
  • Browser Version: N/A

Additional Info
@JasonLovesDoggo claims the issue can be replicated here: https://screenfly.org/#u=https%3A//mikhad.github.io/wordle/%23daily&w=1366&h=1024&a=22

Tip text glitch

When moving from tip 7/9 to 8/9, some artifacts of text from 7/9 are still visible in the tip window.
B805A185-BEC7-4DB8-9AB5-B3AD0E4FAE32

Offload analytics into a web worker

Description
Try using partytown to offload the Google analytics code into a web worker to see if there is any increase in performance.

Reasoning
The animations lag on mobile, leading me to believe there is performance to be gained.

Control the words that appear every day

Description
I have seen that the program launches in the daily mode a random word regardless of the order but, would there be any option to have internally controlled the order with which the words would come out?

Reasoning
I would like to create a Wordle but that in certain days I have the control that a concrete word associated to an event celebrated that day will come out.

Thanks for everything!

DOESNT GO ON AND ON

IT SAYS WORDLE PLUS BUT IT STOPS AFTER 4 WORDS. WHAT A RIP OFF!!!! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! GAME! TAKE DOWN THIS GAME! TAKE DOWN THIS GAME! FOR THE COMMUNITY!!!!!!!!!

Keys losing their color

When changing between modes keys return to the correct color for that game correctly. Observed when game was mid way, switched and switched back and previously green keys looked unpressed.

Doesn't work on ipad 15.5

Any browser screen corrupts on entry. Game can be played but everything is on one line.
Checked in chrome, safari, duckduckgo

Worked on previous version. Works on 12.5

Refresh button not working correctly

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Browser Version [e.g. 22]
  • Game Version [e.g. 1.2.0]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Browser Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add issue template

Template with fields like:
Browser
Device
Browser version (where to find it)
Wordle version (where to find it)

Grid is too dense

Screenshots

Grid flatted into unreadable mess

To Reproduce

Steps to reproduce the behavior:

  1. Go to Daily section.
  2. Type any word.
  3. See error.

Expected behavior
Good looking grid.

Desktop (please complete the following information):

  • OS: macOS 12.4
  • Browser: Safari
  • Browser Version: 15.5
  • Game Version:

HTML element with game version that can not be selected

Why I can't select version text?

Still dont see the refresh button

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Browser Version [e.g. 22]
  • Game Version [e.g. 1.2.0]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Browser Version [e.g. 22]

Additional context
Add any other context about the problem here.

How to install this?

Sorry for such a rudimentary question!

I run a small personal server using YunoHost, and I'd love to install Wordle+ for myself and my family, but I can't quite seem to figure out how to do it. I tried just cloning the git repo into the the website directory, but when I did, navigating to the index.html file didn't load the game.

I'm certainly overlooking something, but any help would be appreciated. Perhaps that could also be spun up into some documentation?

Thanks in advance.

Option to disable background symbols

Description
I'd like to request a menu toggle to hide the large 'Hourly' and 'Infinite' symbols that appear in background behind squares when playing said modes.

Reasoning
It's really distracting and harder to focus on the field and tiles when it's overlaid as such. Could have a small icon at the top, or not at all (it doesn't seem necessary). Just not on the squares.

Nice work, thanks for making this.

Wordle+_An_infinite_word_guessing_game-_Google__2022-07-21_08-21-58

6 guesses causes issues when page is reloaded

If a user takes 6 guesses on a word, then (no matter whether they won the game or not) when the page is reloaded, then an extra (empty) string is added to the array of words on the board. If the page is reloaded again, it throws an error and does not load.

Swipe between modes

Description
Swiping between modes
Reasoning
I was playing my game a few days ago and instinctively swiped to switch mode, before remembering that that's not the correct mechanism. I think swiping is far more intuitive than tapping the title.

Statistics Color Bug

Describe the bug
Played for the first time and did not guess the word, but in the sixth row ([6] 0), the zero got a green color. this is rather confusing, since I did not find the word.

To Reproduce
Steps to reproduce the behavior:

  1. Play the game for the first time
  2. Do not guess the word
  3. Look at the sixth row in the statistics screen
  4. See error

Expected behavior
A black (or red) color instead of a green one.

Screenshots
image

Keyboard letter color bug

If a guess uses a correct letter twice, and the second usage isn’t in the answer, the keyboard turns the letter black when reevaluating the character. Needs an or statement to check if it exists in the answer.

Example: I input “shows” and the first two letters (s & h) turn green, but only the H will show green on the keyboard with the S being evaluated as wrong and changed back to black.

Full screen modal doesn't cover page

Describe the bug
When a non full screen modal opens behind a full screen modal the sides of the full screen modal go dark, as the modal doesn't actually cover the whole page.

To Reproduce

  1. Complete a daily or hourly wordle
  2. refresh the page
  3. click on settings before the stats modal pops up. (may not notice on mobile as there are no edges on the full screen modals.

Expected behavior
No change.

  • Game Version 1.3.2

Additional info
This is a good opportunity to simplify the modal component.

Make modes routes

The different game modes should be routs so you can share a specific game mode.
When loading mode in App first check route, then localStorage, then use default.

Rewrite Definition component to use `context="module"

Description
Change the definition cache from whatever it is now to a hash-map in a module script tag.

Reasoning
I used this project to help me learn svelte, with the result that I don't not implement everything in the most ideal way.

Implementation (optional)
See description.

i tried everything and it only worked once

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Browser Version [e.g. 22]
  • Game Version [e.g. 1.2.0]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Browser Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add give up button

Despite being able to give up by just entering 6 incorrect words numerous people have requested a dedicated give up button.

License?

Hi,

Would you like to add a licence to your code? If nothing else, you could use the following.

Copyright <YEAR> <COPYRIGHT HOLDER>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The reason I ask is that I like your code and have been adapting it, and want to ensure your contributions are appropriately recorded.
Thanks!

Robert

Feature request: Option to Disable Keyboard color assist

Description
I'd like to request the feature to make the keyboard on bottom always stay default white, instead of filling in as you go.

Reasoning
Can consider this both an added difficulty (you have to keep track of letters yourself) and visual accessibility issue (less distracting when typing). Shouldn't be lumped in with 'Hard Mode'; make it a separate option.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.