Wordly - The Wordle you love, but better

Figma design of home page
Figma design of create or join room
Figma design of wordly game grid
Figma design of wordly single player game being played
Figma design of wordly multipalyer game being played
Figma design of how to play

Inspiration

It all started with Wordle, the game that became a massive hit this year. The premise of the game is simple, there is a mystery word you are trying to find and you have 6 guesses of 5 letter words to do so. You will type each one out and at each guess you will get instant feedback of the letters and their positions. If a letter is green then it is in the correct position of the word you are trying to guess, if it is yellow then it means the letter is in the word you are trying to guess but in the incorrect position. Lastly, if the letter is grey that means it is not in the word you are trying to guess. Check out the game at: https://www.powerlanguage.co.uk/wordle/ (word changes daily).

What it does

What we wanted to do was take this idea to the next level. On top of the Wordle game, we wanted to implement the ability to be able challenge your friends in real time multiplayer. The premise of this game is simple, each person would play the game of Wordle, and whoever finds the word first wins. The catch, is that you can see the opponents progress in order to add that extra competitive pressure. What makes this multiplayer experience rewarding, is that even though a winner is declared and there is still time on the clock, the loser still has the chance to play the game and finish their word instead of abruptly being taken away from the match.

How we built it

We built this using React JS as the frontend framework. We have an algorithm for the Wordle game as well as a word bank so that players can have a plethora of words to keep playing the game with. The main logic of our application however lies in the backend, which we built using socket-io. It allows users to create and join rooms, wherein information about the rooms is sent back to the client so that users can keep track of which room they are in as well as the room code. The connection also allows the users to get a glimpse of the opponent's attempts, passed in real time using the socket via the room. This lets each opponent see where the other stands after each move they make, without seeing their attempt.

Challenges we ran into

Arguably the toughest part of the project was implementing the socket logic. None of us had worked with sockets in javascript, and therefore building a socket connection and figuring out the socket-io library we were using took up the biggest chunk of our time. It was especially challenging understanding how React would have a constant listener active especially with how its render cycle works.

We also had troubles in creating a database and while in the end it almost seemed viable, we were unable to integrate it to the final product.

Accomplishments that we're proud of

We are incredibly proud that we were able to build the entire project from scratch, all the way to deployment. While we could test our socket connection locally, we wanted to be able to have it hosted so that we could test the backend properly using multiple computers instead of having to use two browser tabs on one device. Consequently, we have both the frontend and the backend deployed online.

We are also very proud of how well the team worked together despite being two in person and two online team members, we even had a teammate that was working all the way from Asia. Yet, despite all that, we were able to come together and give our all to build something we are all truly proud of.

What we learned

We have further reinforced our React knowledge by being exposed to its web socket features. We have learned a lot about web sockets and how they work in tandem with the React render cycle. Along with all this we have gotten more CSS practice. We also learned that a team doesn't have to be physically next to each other in order to do good work, some could be in a place as far as Asia.

What's next for Wordly - The Wordle you love, but better

What is next for Wordly is optimizing what we currently have. This involves the game algorithm as well as some scaling issues that could not be dealt with in the timeframe of the hackathon. We would also like to implement a mobile version of the multiplayer experience, as well as add new game modes. These game modes may include but are not limited to having people challenge each other with their own choice of words, as well as multiplayer showdowns where each player has to fight for the same mystery word.

We also would implement statistics of the user and further enhance the CSS on the game instructions.