maksimekin / data-structures-game Goto Github PK

The Data Structures Game is a competitive online game. The goal of this game is to help reinforce data structures concepts to students.

Home Page: https://data-structures-game.herokuapp.com

License: Apache License 2.0

HTML 0.07% JavaScript 4.36% Python 10.83% CSS 84.75%

game data-structures

data-structures-game's Introduction

The Data Structures Game

The Data Structures Game is a competitive online game. The goal of this game is to help reinforce data structures concepts to students. Players will be able to take turns and test their data structures prowess as they try to free the golden node. Correctly maneuvering your way through the AVL tree will reward you with points. Test yourself against your friends, both in the lobby and on the leaderboards!

🎮 Play Now 👾 API ℹ️ Wiki

Developer Installation

Install Anaconda
Create a minimal-empty Python environment:

conda create --name dsg python=3.8.5
source activate dsg (or conda activate dsg). Note that dsg is just a name. You may choose differently. The rest of the documentation assumes you named the environment dsg.

Install NodeJS for React (make sure you are in dsg):

conda install nodejs

Add the local environment variables to your path. The environment variables include the secret keys needed to run the software. Contact the development team

Mac
- nano ~/.bash_profile and add the variables at the bottom. Close, and save.
- source ~/.bash_profile to use the changed bash profile.
- source activate dsg to change it back to the virtual environment (or conda activate dsg).
- env to check the variables. It should print them on the console.
Windows

Clone the repository:

git clone https://github.com/MaksimEkin/data-structures-game.git

Install the libraries needed by the project using the requirements.txt located at the root directory of the project file you cloned (make sure you are on dsg):

pip install -r requirements.txt

Install the NodeJS libraries used by React:

npm install

Front-end makes API requests to Heroku. When the project is run locally, this results in cross origin calls from localhost to Heroku domain. Cross-origins calls are blocked due to a header that is in place to protect against XSS attacks. To run the code locally, you will need to change the API call url.

Open src/Components/GameBoard.js to edit/
Change const url = remote; with const url = local;. Code.

Build the front-end:

npm run build

Run from the root directory of the project:

python manage.py runserver and visit http://127.0.0.1:8000

If you recieve security warnings resulting from Mimetype or cross-origin, run with below instead:

python manage.py runserver --insecure and visit http://127.0.0.1:8000

Developer Test Suites

Game Board API
- Located at game_board/api/tests_api.py
- Run from the root directory of the project with python manage.py test game_board.api.tests_api
Profile Page API
- Located at profile_page/api/tests_api.py
- Run from the root directory of the project with python manage.py test profile_page.api.tests_api
Homepage
- Located at home_page/api/tests_api.py
- Run from the root directory of the project with python manage.py test home_page.api.tests_api
Game Board Database
- Located at game_board/database/test_db.py
- Run from the root directory of the project with python manage.py test game_board.database.test_db
User Profile Database
- Located at profile_page/database/test_db.py
- Run from the root directory of the project with python manage.py test profile_page.database.test_db
Home Page Database
- Located at home_page/database/test_db.py
- Run from the root directory of the project with python manage.py test home_page.database.test_db
AVL Data Structure
- Located at game_board/avl/test_avl.py
- Run from the root directory of the project with python manage.py test game_board.avl.test_avl
Front-End Cypress Testing
- Located at cypress/integration
- Run using Cypress, which can be started with npx cypress open
- Once Cypress is running, select any tests that the Cypress-generated GUI displays to run them
Front-end Text Diplay Tests:
- Note: Developed to be run on Safari. In Safari under the Develop menu Allow Remote Automation. Then change the remote url variable to local in GameBoard.js. Build the project with npm run build, and run Django python manage.py runserver. Tests can be run from src/Tests.
- Test 1: python -m unittest test_player_display_text.py
- Test 2: python -m unittest test_node_text.py

See Wiki for details.

data-structures-game's People

Contributors

Stargazers

Watchers

Forkers

plongesam jgold3 kulriz emg110

data-structures-game's Issues

[8] Display a graph as a tree and allow drag and drop.

Integrate graph from react digraph library.

Created component for graph page to display the graph -Kulsoom
Routing for graph display component onto /game_page -Kulsoom
Configuring graph functions to reflect tree structure with API returns - Maksim

As a user, I should be able to see a list of both my ongoing games and the games available for me to start, so that I can choose which one I want to play.

The homepage will display a list of recent, unfinished, saved games that the user can continue and available options for new games to start playing. If users click on any saved game, their board will be retrieved and play can continue. If users choose a new game option, a gameboard will be displayed and play can begin.

[5] Display each user's cards

? What happens when the player is being added to the game but not in the Lobby?

The current data structure should be able to change to another one while preserving the state of the nodes.

New data structures (DS) are introduced to the game as feature updates. When new DS added to the game, the gameplay will allow users to be able to choose a specific DS to play with, or enter a game where the DS changes every n minutes or turns. However, when the DS changes, we do not want to just create a new set of random nodes. Instead, the nodes should be retrieved from the current DS following the rules of the current DS, and inserted into the next DS follow the rules of the next DS.

Add react application

#42

[5] AVL Library to generate the data structure

The game should be able to form a random data structure at the start.

A random graph should be generated when the game starts. The pseudo-random state of this graph could be determined by the current time or using an external API to generate a true random state.

API should return a set of randomly generated edges and nodes that form a valid AVL tree.
This AVL tree should have points on each node, and a single golden node (+infinity points)
Front end should be able to parse this graph and visualize it as a tree.
There should be a max depth for this tree depending on the level of difficulty of the game selected.
The position of the golden node must be carefully selected to not allow a game that can end in only one or a few turns.

[3] API Calls to parse the data structure

This is a developer story for the user story #18. It refers to the implementation of the API functionality needed to allow the delivery of the generated data structure to the front-en from the AVL implementation and the database storage.

Finish tests in #48 that are dependant on the user profile. Should be in the same sprint as user profile collection is established in the database

As a user, I should be able to choose the difficulty of the game. On a lower level difficulty, the data structures problems will have less nodes and maybe easier requires manipulations. By contrast, a higher level difficulty will have bigger data structures with more variability.

Users should be able to choose the difficulty level of the game. The difficulty level of the game will determine the depth of the data structure (DS). The deeper the DS is, the harder and longer it will become to complete that game. Also, the golden node should be placed carefully to ensure that it cannot be retrieved easily for a harder game.

As users, we should be able to take turns performing DS specific actions on the current data structure.

The Data Structures Game will be a turn based game. Once the user has made a move, they must then wait until every other player has made a move to go again. The game state will be updated as another player submits their move so the user can plan ahead for their turn.

As the player of the game, I should be able to join a game.

As a user, I want to be able to see a paused game in my profile to be able to continue later.

When the user selects to save a game, the game will be saved to the user's profile. Only the 3 most recent games will be saved. There will be an option under the game to download it to the user's computer. See issue #11

As a professor, I should be able to view user activity log

[3] As a developer, I should be able to test the AVL data structure

As a user, I should be able to click on/mouse over an action to be reminded what that action does, so that I can learn and remember data structure manipulation actions

The user should be able to mouse over the action cards on hand- delete, insert. A pop up box with a clickable link appears that will give info on the action and its effect on the data structure (height, rebalancing, etc)

As a user, I should be able to view an interactive level map, so that I can recognize my progress.

This will act as a story mode selection from the main menu that the user can select that will bring them to a large "world" map of the data structures path. The area beyond the user's current level will be locked and the areas completed will have a gold path showing completion. The current node on the map will be highlighted. Completed levels are replayable for improvement.

As a user, I should be able to use a "training" mode to practice data structures outside of a competitive environment. In training, I am only playing against myself and the game will provide hints/tips to help me learn.

Perhaps training mode should encompass solo training as well as playing with bots (see #29)
The user will select training mode to train and the training mode game board will appear with an interactive, easy training session on AVL tree and operations.

As a user, I should be able to see a scoreboard of ranked top users and my ranking, so that I can compare my progress to others' and feel a sense of accomplishment as I move up the list.

There will be a link on the homepage that leads to a public leaderboard. The top twenty users will be displayed, along with their levels, and users can click to expand the board to show more users. Additionally, users will be able to click on a button that zooms in on where they are in the board.

When playing the game, the user should lose points for invalid action or gain points when performed correctly move, or acquired a node.

The user's points (loss or gain) are determined by the action card the user chooses to play. A wrong move will result in loss of points and correct points will result in a gain of points.

As a user, I want to be able to sign-up for the game, log-in to my profile, and log-out when I am done playing the game.

The game will bring the user to the home screen oft the game, where they will be able to play a game without logging in, which will not save any ranking data, or they will be able to log in through a button on the top of the screen to be able to have their scores tracked. Once logged in, the user profile button, also on the top of the screen, will allow the user to go to their profile. The log out button will similarly be on the top of the screen. When clicked, the button will redirect users from whatever screen they are on to the home screen.

As a user, I should see an option to log-in, sign-up, or view my profile from the homepage, so that I can easily track my progress.

Users will see the options to log in to their accounts or create an account if they don't have one. This enables users to track their progress and pause/continue games as needed. Additionally, users will see a button that links to their profile page. This page will display the user's basic account information, as well as their level of achievement.

As a user, I should have a set of cards that I can play to take a specific action on the current data structure.

The cards that the user can see and play are generated and displayed on the screen. Users play these cards as a move, the tree's shape is changed and potentially unbalanced and the position of the golden move is affected. Points are increased or decreased depending on the validity of the move.

As a user, I want to play with an AVL tree so that I can better learn how these trees work.

[5] Create a database representation for the data structure, with function calls

The game should be able to request DS specific actions to be performed on the current DS.

For the first data structure that will be developed for the game, the game should provide the following action cards:

Insert node
Delete node

When the drag and drop option is being played the game should provide the following actions:

Insert node
Delete node
Balance

The game board should display the current data structure in the center, so that I can see a visual representation of what I need to accomplish.

The main element of the gameboard is the data structure that the user is playing with. It will be prominently displayed in the center of the screen, and users will see how various actions affect the state of the data structure.

The game should be able to verify valid and invalid actions that are being performed.

When the user performs drag and drop for a specific data structure action, the game should be able to compare the user's solution to the correct solution. When a wrong action is being performed by the user, the game should point out the specific nodes that are incorrectly placed in the tree and place them in the correct location while deducting points from the player.

[8] Display tree based on data structure representation

Parse nodes:
call api, display api as a tree
api tell you which one is a golden node and can use digraph color changer to be able to change node to gold.

[2] Modal-fix game customization

passes the difficulty level from one choice before lol

Users should be able to play with others.

Users will be able to create lobby's and join the lobby's of other users. They may choose to host the lobby and provide a key to their friends on which the game can be accessed. Alternatively, the user may want to find a game. They may then join a lobby generated by another user. The purpose of the data structures game is first and foremost to help reinforce data structures concepts in students. The students may be in class, working groups, or perhaps studying together for an exam. For both of these scenarios shared games are important aspect of group learning.

Overall Project Plan

[3] As a developer, I should be able to test the API functionality.

This is a developer story to write tests for the features implemented in the developer stories #46 and #49 which are for user stories #18 and #14.

Users should have a profile

The stories are the descriptions of the epics.

[5] Create UX for homepage

Kulsoom-added routing to the different front end urls to route to homepage '/'
Kulsoom - added components for the home page UI
Kulsoom - modal for login
Maksim- added background react particles

[5] Homepage database representation

As a user, I should be able to view my game profile where I would see my level, past games, and profile information.

When entering the user's profile, the user's current points, associated level for the points, data structure badges earned for completed, and current world ranking. The save games, and user account options will also be in the user profile. See issues #10 , #11 , #34 , and #9

As a user, I should see announcements on the homepage about any upcoming tournaments or new features, so that I can take advantage of all the site has to offer.

Relevant announcements will appear on the website's homepage to advertise new features or upcoming events of interest. These will appear in a list format, with the most recent updates displayed at the top. Announcements will be short summaries of new developments and will link to pages with more specific details.

As a user, I should be able to capture the golden node to end the game.

The golden node is the golden snitch of the board game, correctly deleting and adding nodes to the tree will move the node closer to being captured by the user. Once captured, the game ends.

[5]AVL Data Structure Balancing Inconsistency

In certain cases, the AVL tree becomes unbalanced but is treated as balance by the game state

In sprint II I will hunt down this bug and create new AVL unit tests to verify the expected AVL behavior

As a user, I should be able to reset my password.

In the user's profile page, there will be a button to reset the password under the saved games. Resetting the password will ask the user for their current password, and if correct will allow the user to enter and save a new one.

[5] API calls for specific card actions and drag and drop update actions.

This is a developer story for the user story #14. Similar to the developer story #46, this developer story refers to the communication needed between the front end and the AVL implementation which is stored as a game board instance in the database. Differently, this developer story refers to the implementation of the actions that the front-end can request to take on the data structure, and how that action affects the state of the game board.

As a user, I should be able to drag and drop the nodes in the linked list (any DS including tree or stack).

This is an integral part of the game play, the ability to drag and drop nodes correctly per the selected action card will affect the game points, the golden nodes new position, the tree's new structure and the next players move. The user should be able to remove nodes or add moves to and from a location on the tree.

As a user, I should be able to search and add as friend other players in the game.

There will be a search bar in the bottom right of the screen for all screens. The search bar will allow players to search for usernames of people in-game, as well as people they meet IRL using the app. After a successful search, the user can select to follow the user (which will send a follow request to the other person). Allows for 1-way connections if one wants, while also prompting for a mutual connection.

Users should have a landing homepage page.

As a user, I want to be able to share the state of the game with a friend, or export to be shared view other means.

There will be a save game button in gameplay that takes the current state of the data structure and saves it to the user's profile.
When downloaded from the profile, it creates a text file that the user chooses where to save on their computer. The file can then be sent to other players through whatever means of communication the player chooses. The file will be able to be loaded from the main menu of the game. See issue #10

As a user, I should be able to create a lobby to play with other players.

The user should be able to invite other players to this lobby with a newly generated, shareable key. Alternatively, the lobby can be set to "public" in which case no key is generated and other users who wish to play can both see and join the lobby from the matchmaking screen.

As a user, I should be able to choose to play with computers (AI), so that I can challenge myself without requiring other users' participation

Each game will have atleast 2 players. If a user chooses to start an empty lobby, an AI will take the role of the second player. Since this is a "bot-game" the results will not affect the user's rankings on the leaderboard.