In 1978 Milton-Bradley, now Hasbro, released an electronic game named Simon. It was cutting edge at the time since there were so few electronic games, and all the cool kids had one.
We are going to build a peer to peer multiplayer web application modeled after Simon. We will build it together by adding new functionality every time we learn a new technology. The example version of code and production deployment for each iteration are available to you. Your job will be to review the example and then deploy it to your production environment. The goal is to make you think about every line of code. Ask, "why is it done this way?" and "Is there a better way?". You can then take what you have learned, or even portions of the Simon code, and apply it to your Startup application.
Simon is a simple game where you repeat a sequence of color flashes. The longer sequence you repeat the higher your score is.
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.
A mind is a beautiful thing, but it needs stimulation. Lights, color, sound, and action. Simon give you hours of fun as you complete to remember the longest sequence of colors. See if you can top the charts with you efforts. Receive automatic notification of how your friends are doing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sequenceDiagram
actor User
User->>Login: Enter login information
Login->>About: See about information
About-->>Login: Login
About->>About: Read inspirational quote
Login->>Play: Start game
Play->>Play: repeat sequences
Play->>Play: View other player's game notifications
Play-->>Login: Logout
Login-->>Scores: view high scores
- Login, logout, and register
- See high scores
- Receive notifications for other player's achievements
- Play by repeating color sequences
- See a description of the app
- Read inspirational quotes
I am going to use the required technologies in the following ways.
- HTML - Four different views, login/register controls, play, scoreboard, and about.
- CSS - Complementary color scheme, responsive design, button highlighting during play.
- React - Single page application with routing between views, reactive user controls, and state hooks.
- Service - Endpoints for authentication, storing/retrieving scores. Third party call to get inspirational quotes.
- DB/Login - Stores authentication and scores.
- WebSocket - Broadcast user's game notifications.
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 - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - Four different pages. One for each view.
- Proper HTML element usage - I spent a lot of time learning about elements. I used header, footer, main, nav, img, a, fieldset, input, button, form, and many more.
- Links - Links between views.
- Text - About page has text.
- 3rd party API placeholder - About page has a place to display an inspirational quote.
- Images - Image is displayed on the about page.
- Login placeholder - Placeholder for auth on the login page.
- DB data placeholder - High scores displayed on scores page.
- WebSocket placeholder - The play page has a text area that will show what other user notifications.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Header, footer, and main content body - I used a common CSS file to style these (main.css).
- Navigation elements - Bootstrap NavBar. What a time saver.
- Responsive to window resizing - Bootstrap and `display:flex' did most the work here. I'm really happy with the game rendering.
- Application elements - I used a lot of
display:flexto get things to align correctly. - Application text content - Set all my text to Helvetica and it looks nice and clean.
- Application images - I left the about image as is.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - Easy to install and use Vite.
- Components - Easy to bring the code over from HTML and CSS, but had to rework them quite a bit.
- Router - Easy to creating the component routing.
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 - Mostly using local storage to store user and scores. WebSocket notifications mocked with a timer.
- Hooks - Extensive use of
useEffect. I also had to useuseRefso that the play top level component could execute the color sequence for the user on the child button components.
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 - Installed Express with NPM. Default port on 4000.js`.
- Static middleware for frontend - Simple endpoints in
service/index. - Calls to third party endpoints - About page calls
quote.cs260.click, renders the resulting JSON with React. - Backend service endpoints - Simple endpoints in
service/indexfor auth and scores. - Frontend calls service endpoints - All mocked functionality removed from the frontend and replaced with calls to the service.
- Supports registration, login, logout, and restricted endpoint - Fully support authentication and restrict access to scores.