Owok is a two player, turn-based game based on Maplestory's popular, nostalgic mini-game: Omok. The rules of Owok are simple: successfully place 5 pieces in a row to win! π
DISCLAIMER: THIS IS NOT FOR PROFIT AND JUST FOR FUN AND WAS MADE SO WE DIDN'T HAVE TO LOG ONTO MAPLESTORY TO PLAY OMOK WE WILL TAKE IT DOWN IF U SEE THIS N3X0N
This website is brought to you by Johnathan Yih and Sharon Fang. Thank you for playing Owok! πβ€
| MVP Feature List | Database Schema | API Documentation |
Redux State Shape | User Stories | Wireframes
How do I run this project?
-
Clone this repo.
git clone git@github.com:milkyomo/owok.git
-
Install dependencies from the root directory and update the contents of your requirements.txt file to match your Pipfile.lock
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
pipenv install psycopg2-binary
pipenv install flask-socketio
pipenv install eventlet==0.30.2
pipenv lock -r > requirements.txt
-
Install dependencies from the
react-app
directorynpm install
npm install socket.io-client
-
In the
react-app
directory, create a.env
file using the.env.example
that will be used to define your desiredPORT
(preferably 5000). -
In the root directory, create a
.env
file that will be used to define your environment variables.Use the
.env.example
found in the root directory as a template. Use a secured combination of characters for yourSECRET_KEY
. TheDATABASE_URL
should be in the format ofpostgresql://<database_user>:<password>@localhost/<database_name>
-
Create a user using the same credentials in the
.env
file of the root directory with the ability to create databasespsql -c "CREATE USER <database_username> PASSWORD '<password>' CREATEDB"
-
Create a database using the same credentials in the
.env
file of the root directorypsql -c "CREATE DATABASE <database_name> WITH OWNER <database_username>"
-
Enter
pipenv
to migrate and seed your databasepipenv shell
flask db upgrade
flask seed all
-
Inside of the
pipenv
shell, start the services in the root directoryflask run
-
In a separate terminal, start the services in the
react-app
directorynpm start
Command | Purpose |
---|---|
pipenv shell |
Open your terminal in the virtual environment and be able to run flask commands without a prefix |
pipenv run |
Run a command from the context of the virtual environment without actually entering into it. You can use this as a prefix for flask commands |
flask db upgrade |
Check in with the database and run any needed migrations |
flask db downgrade |
Check in with the database and revert any needed migrations |
flask seed all |
Just a helpful syntax to run queries against the db to seed data. See the app/seeds folder for reference and more details |
Users must select a sprite for their profile upon sign up!
If you do not want to make an account, feel free to use the Demo login!
- Host a game of Owok, or join other games of Owok as either a participant or a spectator
- Chat with other users inside games
- View replays of past games, move by move
- Change the privacy of games that they played
- Comment on replays
- Edit and delete their comments
- View their own profile or profiles of other users
Pressing this lock on your replays will toggle the privacy feature! This feature allows you to hide replays from your profile! However, if the other participant in your replay does not have the game set as private, the replay will still show up on their profile.. π₯ Your name will not be displayed to non-participants on the replay if you set yourself to private, though!
- Participants of game will be able to see the private person's name
- People who did not participate will NOT be able to see the private person's name
- The privated game will show up on the other participant's profile, but NOT on the privated person's profile
- You will be able to see all games, private or not private, on your own profile
This was the first time that we ever tried to implement game logic! There were definitely a lot of struggles throughout this whole process, especially when it came to implementing sockets to make the game actually playable between two people. We began the project with very simple logic with a hardcoded second player, but that all had to change when it came down to integrating sockets with the website. Just being able to place a piece was a great accomplishment, and the next came with calculating wins, and the final "aha!" moment came when a second player could finally successfully join the room! Of course, there is a LOT of room for improvement.. but that comes with anything in life! π
In the future, we want to implement more features to improve user experience, such as having a time limit for turns so players can't take forever to think, and having a forfeit button, as well as a draw button where both players can agree to draw the game. We also want to add moderator priveledges to better monitor comments and chats.
- Refactor game logic
- Link to private rooms
- Mod priveledges
- Add forfeit button
- Add draw button
- More piece sets (pink teddy and panda!!)
[04-13-2022]
Issue: Could not implement multiple foreign keys in Game referencing User (player_one and player_two)
Solution: Implemented.
[04-15-2022]
Issue: Replays were not properly playing the first move, which made the moves play out of order
Solution: Found that the new game moves were storing with curly braces wrapping the coordinates inside the string. Had to slice first and last character from string to remove curly braces const movesArr = game?.moves?.slice(1, -1).split(",");
[04-19-2022]
Issue: Datetime not saving to database correctly
Solution: Removed invocation of datetime in models
[04-20-2022]
Issue: Sockets: not persisting data across clients, and then later emitting information universally
Solution: Added a custom hook useDidMountEffect to ensure that the useEffect does not trigger on page load. Added useState to ensure that the moves persist before setting the board and checking for win. joinRoom(socketRoom) useEffect.
[04-21-2022]
Issue: Game would not save/create after completion. "Object not subscriptable"
Solution: Needed to use dot notation (Python issue)
[04-22-2022]
Issue: Player sprite remains after disconnecting
Solution: Keep log of who joins and remove those who disconnect
[04-22-2022]
Issue: Cannot place pieces on board edge
Solution: Standardized all coordinate placements into quad digit string
[04-22-2022]
Issue: Couldn't send messages only to specific rooms. Either broadcast to all or to none.
Solution: Moved the socket.on to the parent component and passed down the React useState for messages to the Chat (child) component.