Matthew Lane @GreyMatteOr
Chris Castanuela @Chriscastanuela
Ian Holladay @holladayian
This app is a knock off of a very popular childrens game. One person chooses to generate a word, while the other one takes turn guessing possible letters it contains. If a guesser guesses all of the possible letters of the generated word OR, the word itself, before they run out of allotted failed attempts, they win the game.
The BangWords application connects two or more players to a server using sockets. Here, a game is run, holding the state of the word, deciding if guesses are correct, and returning verdict back to the clients. The clients then parse this data through React components to display and interact with on the DOM.
We were given a project and a list of technologies to research. We chose Building a Backend. Our goal was simple, create a server with Express, and create an application for users to interact with it. We origionally wanted to make an interactive puzzle solving page, but upon review from our project managers we decided to make our application a bit more humble.
- Gather two people
*two tabs works as well if you want to check it out by yourself
- Sign in with a name if you'd like!
*If not, you'll end up playing as guest
- Have one player create a room using the room ID form
- Have the second player join said room
- Declare who the word generator is
*All other players will be guessers
- Have the player who is the generator decide on a word or phrase for the other player(s) to guess
- In the gamepage, the guesser can try guessing letters or the entire word/phrase
#### Notes ####
- Each guesser has 6 failed attempts
- You gain points based on how many failed attempts you have left
- You get a bonus if you guess the entire word/phrase
- Use the chat to talk smack (politely)
- The generator changes after a game is complete
This was our original wireframe. It shows the flow from Homepage to WordSelector to Gamepage.
This was a rendition of what we thoughts hints would look like. We later went with the ability for players to chat instead.
This is a flwochart for how our client and serveer would interact.
This is a representation of the sockets' paths.
Below is an image of our lobby. Here you can chose a name (or be left as guest), and create or join a room.
Our loading page...
This image represents our game's functionality. It implements a chat feature, counts down the remaining guesses, and updates the DOM when the guesser is correct.
This is the winner!
- Clone down the BangWords repo
- CD into it.
$npm installthe necessary dependencies.- Take a look.
- Feel free to
$npm testsome things out.
React
sockets
Express
Jest
Khalid Williams
Leta Keane
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent