Tetris Rush

_{Let it be known I wanted to use Typescript}

Description deliverable

Elevator Pitch

Have you ever gotten into an argument with friends, family, or even strangers about who is the best at Tetris? Argue no more, as Tetris Rush is here to solve all of your problems. Tetris Rush is a multiplayer Tetris game that allows you to play against your friends and family to see who is the best at Tetris in an asynchronous way. As you are playing, you can see the score tally of all other players update in real time to see who is in the lead. Tetris Rush is a fun and competitive way to play Tetris with your friends and family. Once everyone has finished playing, you can see the final scores of all players and see who is the best at Tetris.

Design

Here is a sequence diagram that shows how players would interact with the backend

Key Features

• Secure login over HTTPS
• Real time score updates
• Leaderboard to see who is the best at Tetris
• Results persist between sessions
• Responsive design that works on mobile and desktop
• Scores locked to prevent cheating, verified by backend

Technologies

• HTML - Uses correct HTML structure for application. Three pages, one for login, one for gameplay, and one for leader board.
• CSS - Application styling that looks good on different screen sizes, uses @media queries to adjust styling for different screen sizes. Following proper CSS conventions and contrast ratios.
• JavaScript - Provides login, gameplay, and leader board functionality. Uses fetch to communicate with backend. Manages the canvas for gameplay.
• Service - Backend service with endpoints for:
  • login
  • retrieving scores
  • submitting new scores
  • retrieving game state
• DB/Login - Store users, scores in database. Register and login users. Credentials securely stored in database. Can't play game without logging in.
• WebSocket - As each user plays the game, their score is updated in real time for all other users. When all users have finished playing, the game ends and the final scores are displayed.
• React - Application ported to React. Uses React Router to navigate between pages. Uses React Hooks to manage state. Uses React Context to manage global state.

HTML Deliverables

For this deliverable I scaffolded the structure of my application in HTML

• HTML Pages - I have 4 pages, one for login, one for gameplay, one for the leaderboard, and one about page
• Links - The Login page automatically links to the gameplay page when you login, and all pages link to each other via the navbar
• Text - All pages have text that is relevant to the page, for example the about page explains what the application is, and how it is used. The game play page has text telling about the scores, etc.
• Images - The about page has a header image of a tetris game
• Use Name Display - The logged in user is displayed in the Navbar next to a logout button
• DB/Login - The login page has a input box for username and password for login. The scoreboard and live scores represent data being pulled from the database.
• Websocket - The live scores are updated in real time using websockets

CSS Deliverables

For this deliverable I styled my application with CSS

• Styled Header, footer and main content - The header, footer, and main content are all styled with CSS
• Navigation Elements - The navigation elements are styled with CSS, and change color when hovered over, as well as when the selected page is active
• Responsive Design - The application is responsive and works on mobile and desktop. The navbar collapses into a hamburger menu on mobile, and the content is responsive to different screen sizes
• Application Elements - All elements of the application are styled with CSS, including the login form, the tetris game, the leaderboard, and the about page
• Application Text - All text is styled with CSS, including the text on the login page, the text on the about page, the text on the leaderboard, and the text on the game page
• Application Images - The image on the about page is contrasted with CSS to make it more visible, and resize within a card according to the screen size

JavaScript Deliverables

For this deliverable I added JavaScript to my application, specifically logic for the game, and logging in.

• Login - The login page has a form that allows you to login with a username and password, when you login, you are redirected to the game page
• Canvas - The tetris game is rendered on a canvas element, and the canvas is managed by JavaScript
• Database - The top scores are rendered with data being retrieved from the database
• WebSocket - The live score under the game is updated in real time using websockets
• Application Logic - The game logic is implemented in JavaScript, including the tetris game, the score, and the leaderboard, routes are dynamically determined based off of the users authorization, data is fetched with JS

Service Deliverables

For this deliverable I built a backend in ExpressJS that receives new scores and returns the overall leaderboard

• HTTPS Service built using Express - Done
• Frontend Served from Express Static Middleware - Done
• Frontend makes ajax request to third party API - Done, found on the about page, data pulled in from a Dad Joke from a third party API
• Backend provides endpoints - Done, there are endpoints for login, retrieving scores, submitting scores, and authenticating users
• Frontend makes ajax request to backend service - Done, the frontend makes requests to the backend to retrieve scores, submit scores, and login

DB/Login Deliverables

For this deliverable I built a database in MongoDB that stores user credentials and scores, and associates the score with the authenticated user

• Supports new user registration - Done
• Supports existing user authentication - Done
• Stores application data in MongoDB - Done
• Passwords are hashed and salted - Done
• Stores and retrieves credentials in MongoDB - Done
• Restricts application functionality based upon authentication - Done

Websocket Deliverables

For this deliverable I built a websocket that sends the score of each player to all other players in real time

• Backend Listen for Websocket Connections - Done
• Frontend Connect to Websocket - Done
• Data sent over WebSocket - Done
• WebSocket data is displayed - Done

React Deliverables

For this deliverable I ported my application to React

• Bundled using Vite - Done
• Multiple functional React components - Done
• React Router - Done
• React Hooks - Done