Dark Age Duels

My Notes

A full-stack web application in which two players duel in turn-based combat as their selected classes.

Note

This is a template for your startup application. You must modify this README.md file for each phase of your development. You only need to fill in the section for each deliverable when that deliverable is submitted in Canvas. Without completing the section for a deliverable, the TA will not know what to look for when grading your submission. Feel free to add additional information to each deliverable description, but make sure you at least have the list of rubric items and a description of what you did for each item.

🚀 Specification Deliverable

Note

Fill in this sections as the submission artifact for this deliverable. You can refer to this example for inspiration.

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Proper use of Markdown
• A concise and compelling elevator pitch
• Description of key features
• Description of how you will use each technology
• One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.

🛗 Elevator pitch

Tic tac toe can get a little boring, but playing more complex games like league of legends or games that require intense study like chess can seem pretty overwhelming. If you want a way to prove your dominance over your friends without the time commitment of improving mechanical skills or the study and memorization of patterns, then Dark Age Duels is the game for you! Simple medieval-themed classes and attacks provide a simple yet entertaining head-to-head duel where outsmarting your opponent is the key to victory!

📝 Design

Here is a sequence diagram that represents how the two players and the observer send and receive information from the backend during a turn.

sequenceDiagram
    actor Player1
    actor Player2
    actor Observer
    Player1->>Server: Action
    Server->>Player2: PLayer1 has chosen their action!
    Server->>Observer: PLayer1 has chosen their action!
    Player2->>Server: Action
    Server->>Player1: PLayer2 has chosen their action!
    Server->>Observer: PLayer2 has chosen their action!
    Server->>Player1: [broadcast outcome of the turn]
    Server->>Player2: [broadcast outcome of the turn]
    Server->>Observer: [broadcast outcome of the turn]

Loading

🔑 Key features

• Secure registration and login using HTTPS
• Ability to create and join a match as a certain class of warrior
• Ability to interact with the other player in your match in turn-based combat
• Display of your character and the opponents character, as well as your available moves that turn
• Health/mana totals displayed
• Win/Loss ratio persistently stored
• Ability to watch a match as an observer
• Receive an update when your opponent has selected their action for that turn
• Receive an update when the turn is evaluated which displays the change in life/mana totals for you and your opponent and the actions used by both.
• Ability to forfeit a match

💻 Technologies

I am going to use the required technologies in the following ways.

• HTML - Uses correct HTML structure. Three HTML pages - one for login/registering, one for match selection, and one for gameplay.
• CSS - Application styling that places all information in an easily accessible, readable location on any device. medieval-styled color theme.
• React - Used to direct routing from login to match selection and from match selection to gameplay. Displays actions during gameplay. Enables match selection.
• Service - Backend service with endpoints for:
  • login/register
  • retrieving the list of matches
  • creating a new match
  • joining a match
  • logout
• DB/Login - database stores users and their win/loss counter, and matches. login data matched with data in database, which securely stores passwords.
• WebSocket - Broadcasts when a player locks in the action for that turn, and broadcasts the results of the turn when both players have chosen their actions.

🚀 AWS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Server deployed and accessible with custom domain name - Dark Age Duels.

🚀 HTML deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• HTML pages - I created three separate HTML pages. One for login, one for the game select menu, and one for gameplay.
• Proper HTML element usage - I made use of various HTML elements throughout my project and ensured that the syntax fit proper HTML convention and format.
• Links - Each html page has a link to each other page, as well as buttons that will link to the other html pages.
• Text - Explanatory and decorative text is used throughout the HTML pages.
• 3rd party API placeholder - The index.html page holds a placeholder where videogame deals will be displayed to users, retreived from CheapShark API.
• Images - I used images in the play.html page where the character pictures will eventually go.
• Login placeholder - I created text input boxes to indicate where the username and password should be input. There is a login/register button that takes the user to the main menu page. The password text box obfuscates text entered into it so as to not reveal the password.
• DB data placeholder - the main menu shows a leaderboard and a list of games built from data stored in the database.
• WebSocket placeholder - Gameplay has a readonly textarea html element which contains sample websocket communication messages.

🚀 CSS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Visually appealing colors and layout. No overflowing elements. - I made it look pretty :)
• Use of a CSS framework - I used bootstrap for my header menu
• All visual elements styled using CSS - Was there any other option to style visual elements?
• Responsive to window resizing using flexbox and/or grid display - I used flex for most of it (turns out grid was easier for the buttons so in play.css I used both)
• Use of a imported font - I imported Modern Antiqua for a pretty medieval-style font
• Use of different types of selectors including element, class, ID, and pseudo selectors - I used all sorts of selectors, turns out they make life easy!

🚀 React part 1: Routing deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Bundled using Vite - All bundled! installed vite and everything!
• Components - I went ahead and compartmentalized my project to have better structure
• Router - Each link now routes the html to a different set of elements rather than going to a new file!

🚀 React part 2: Reactivity deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• All functionality implemented or mocked out - Gameplay, websocket, database storage, and external API calls were mocked out in some functionality, and in others are completely functional. Try out searching the leaderboard, creating and searching through games, and choosing various characters. it took a long time I hope you like it :)
• Hooks - React.useEffect and React.useState were essential to the functionality of my program, especially with using the 'lifting state up' model.

🚀 Service deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Node.js/Express HTTP service - Service accessible in frontend
• Static middleware for frontend - middleware serves to authenticate users for endpoints requiring authentication
• Calls to third party endpoints - login page has an external API call. It won't work right if you reload the page too much because only so many requests can be made.
• Backend service endpoints - Several service endpoints support login, registration, game creation, joining games, and getting 3rd party API calls.
• Frontend calls service endpoints - frontend makes use of service to verify authentication, get a leaderboard, register, get the list of games, add games, etc.
• Supports registration, login, logout, and restricted endpoint - Supports all identified endpoints.

🚀 DB deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Stores data in MongoDB - Match, User, and Auth data stored in DB
• Stores credentials in MongoDB - credentials stored in MongoDB and login and register work as expected

🚀 WebSocket deliverable

Note: My original web application design's use of websocket was too complicated for the scope of this class, so I decided to demonstrate my mastery of websocket in a way that I hadn't originally intended. Instead of connecting with another user over a match, you'll just get messages in the menu when there are other users doing things like completing games or entering the menu.

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Backend listens for WebSocket connection - Backend echoes messages to other users
• Frontend makes WebSocket connection - Frontend listens for messages from other users and displays them in the menu
• Data sent over WebSocket connection - When in the menu, you'll get a notification if another user enters the menu and also when they complete a match. The message varies if they win or lose
• WebSocket data displayed - The textarea in the middle of the menu displays the websocket messages.
• Application is fully functional - The application doesn't have the original design I had planned for it but it works