fp-mjadiletta-alexander-rus-Matthew-Adiletta-Alexander-Rus

README.md

@@ -1,51 +1,38 @@
-# cs4241-FinalProject
+# cs4241-FinalProject: Tiny Tanks
 
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning.
+https://a6-tiny-tanks.glitch.me
 
 ## General description
 
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+This project is an interactive multiplayer game that allows multiple users to access the same server and play against eachother in a a game of Tiny Tanks. This project is a continuation of a previous project iteration, now with more features. Users can now login and change their tank color and username for their specific account. Additionally, users can change the scaling factor of the screen and the turning speed of their tank. We also added 4 new maps that are independently playable within the server. 
 
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript.
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation.
+Different users can play eachother on different maps, and there should be no limit to how many players can be on a map at a time. 
 
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
 
-## Project ideation
+## Login Information
 
-Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about.
+To login you can use the Username: "matt", and the password "matt". If you then reload the server and log back in, you will see that the tank color and screen name have remained the same. 
 
-## Logistics
+## Technologies
 
-### Team size
-Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above.
+For this project, we used multiple different technologies. 
+We use socet.io to pass data between the server and the client. This allows us to have as many users join the game as we want.
+The game itself is rendered using canvas.
+The bullets that the tank shoot are an SVG image.
+For the login, we use mongodb as a backend database service. This database keeps track of the users and their game preferences.
+Bootstrap is used for CSS design. 
 
-### Deliverables
 
-__Proposal:__ 
-Provide an outline of your project direction and the names of the team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline.
-This file must be named proposal.md so we can find it.
-Submit a PR to turn it in by Monday, September 30th, before class
 
-There are no other scheduled checkpoints for your project. 
-You must be done in time to present before the final project demo day (October 10th). 
+## Challenges
 
-#### Turning in Your Outline / Project
+It was challenging to figure out how to implement multiple different maps. When there was only one map, we could easily render all users together and calculate their collisions. However, with multiple maps, we had to find a way to keep track of which user was on which map, and they could not interact with the other users on different maps. We ended up passing the map as a parameter when rendering and calculating collisions, that way we would only render users on the same map and only count collisions for the same map. 
 
-**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
-Submit a second PR on the final project repo to turn in your app and code.
+It was also challenging creating the login service. We wanted to have each user account remember certain preferences when they log in. Sending the information to mongodb in a coherent way was tricky, but we eventually found a way to send the tank color and screen name to the database.  
 
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
-Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.
-(Staff will use the proposal to build the grading sheet.)
+## Authors
 
-## Final Presentation
+Matthew Adiletta - Implemented the Login service using mongodb, added the options to change screen scaling and turning speed.
 
-Presentations will occur during the final day of class.
+Alexander Rus - Designed and implemented the four new maps with the correct collisions and rendering mechanics. 
 
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js.

app/.bash_history

@@ -0,0 +1,2 @@
+npm install mongodb
+npm install body-parser

app/.config/configstore/update-notifier-npm.json

@@ -0,0 +1,10 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1570646482365,
+	"update": {
+		"latest": "6.12.0",
+		"current": "6.4.1",
+		"type": "minor",
+		"name": "npm"
+	}
+}

app/.config/configstore/update-notifier-pnpm.json

@@ -0,0 +1,10 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1570587271546,
+	"update": {
+		"latest": "4.0.0",
+		"current": "2.25.5",
+		"type": "major",
+		"name": "pnpm"
+	}
+}

app/.config/glitch-package-manager

@@ -0,0 +1 @@
+pnpm

app/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb-base",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "plugins": [
+    "import"
+  ],
+  "rules": {
+    "arrow-parens": ["error", "as-needed"],
+    "no-console": "off",
+    "no-else-return": "off",
+    "no-plusplus": "off",
+    "no-use-before-define": ["error", { "functions": false }],
+    "object-curly-newline": "off",
+    "operator-linebreak": ["error", "after"]
+  }
+}

app/.gitignore

@@ -0,0 +1,89 @@
+# Based on https://github.com/github/gitignore/blob/master/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Added by me
+.DS_Store
+dist/

app/.glitch-assets

@@ -0,0 +1,15 @@
+{"name":"blue_tank.png","date":"2019-09-26T01:42:48.577Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fblue_tank.png","type":"image/png","size":1769,"imageWidth":80,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fblue_tank.png","thumbnailWidth":80,"thumbnailHeight":102,"uuid":"tMeHIpT3hlRdUizR"}
+{"name":"green_tank.png","date":"2019-09-26T01:43:01.882Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fgreen_tank.png","type":"image/png","size":1694,"imageWidth":79,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fgreen_tank.png","thumbnailWidth":79,"thumbnailHeight":102,"uuid":"yKmOrcyWoqxXHQ1s"}
+{"uuid":"tMeHIpT3hlRdUizR","deleted":true}
+{"uuid":"yKmOrcyWoqxXHQ1s","deleted":true}
+{"name":"blue_tank.png","date":"2019-09-26T01:44:16.667Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fblue_tank.png","type":"image/png","size":1769,"imageWidth":80,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fblue_tank.png","thumbnailWidth":80,"thumbnailHeight":102,"uuid":"nyYh1jrfDaNyMijZ"}
+{"name":"basic_obsticle.png","date":"2019-09-26T01:44:26.977Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fbasic_obsticle.png","type":"image/png","size":5510,"imageWidth":838,"imageHeight":95,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fthumbnails%2Fbasic_obsticle.png","thumbnailWidth":330,"thumbnailHeight":38,"uuid":"oymBTmQzaFwothxA"}
+{"name":"green_tank.png","date":"2019-09-26T01:44:31.348Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fgreen_tank.png","type":"image/png","size":1694,"imageWidth":79,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fgreen_tank.png","thumbnailWidth":79,"thumbnailHeight":102,"uuid":"rpIy9NOr5uFl0U8g"}
+{"name":"red_tank.png","date":"2019-09-26T01:44:37.554Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fred_tank.png","type":"image/png","size":1667,"imageWidth":79,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fred_tank.png","thumbnailWidth":79,"thumbnailHeight":102,"uuid":"0ZnYhlwpz85f8qkA"}
+{"name":"purple_tank.png","date":"2019-09-26T01:44:40.833Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fpurple_tank.png","type":"image/png","size":1722,"imageWidth":80,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fpurple_tank.png","thumbnailWidth":80,"thumbnailHeight":102,"uuid":"XFKsZsYHL35DoE7S"}
+{"name":"bullet.svg","date":"2019-09-26T01:44:50.432Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fbullet.svg","type":"image/svg+xml","size":1248,"imageWidth":8,"imageHeight":8,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fbullet.svg","thumbnailWidth":8,"thumbnailHeight":8,"uuid":"iHcmsrzjrcZBXdBv"}
+{"name":"icon1200.png","date":"2019-09-26T01:44:57.785Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Ficon1200.png","type":"image/png","size":110724,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fthumbnails%2Ficon1200.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"Mji0nQ38ZV8HHl2E"}
+{"name":"bullet.svg","date":"2019-09-26T01:45:00.994Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fbullet.svg","type":"image/svg+xml","size":1248,"imageWidth":8,"imageHeight":8,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fbullet.svg","thumbnailWidth":8,"thumbnailHeight":8,"uuid":"3FFahM5avGQ1nZ9z"}
+{"name":"icon.svg","date":"2019-09-26T01:45:06.992Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Ficon.svg","type":"image/svg+xml","size":1015,"imageWidth":64,"imageHeight":64,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Ficon.svg","thumbnailWidth":64,"thumbnailHeight":64,"uuid":"eidhMkfHf0hMqeHI"}
+{"name":"public/assets/blue_tank.png","date":"2019-09-26T04:44:40.514Z","url":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fpublic%2Fassets%2Fblue_tank.png","type":"image/png","size":1769,"imageWidth":80,"imageHeight":102,"thumbnail":"https://cdn.glitch.com/9910e14c-d66c-4645-be4a-d3a8727cd586%2Fpublic%2Fassets%2Fblue_tank.png","thumbnailWidth":80,"thumbnailHeight":102,"uuid":"jIuU3TdUJtzeoX8P"}
+{"uuid":"jIuU3TdUJtzeoX8P","deleted":true}

app/.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - '10'
+script:
+  - npm install
+  - npm run lint
+cache:
+  directories:
+    - node_modules
+notifications:
+  email:
+    on_success: never
+    on_failure: always

app/.viminfo

@@ -0,0 +1,33 @@
+# This viminfo file was generated by Vim 7.4.
+# You may edit it if you're careful!
+
+# Value of 'encoding' when this file was written
+*encoding=utf-8
+
+
+# hlsearch on (H) or off (h):
+~h
+# Command Line History (newest to oldest):
+:q
+
+# Search String History (newest to oldest):
+
+# Expression History (newest to oldest):
+
+# Input Line History (newest to oldest):
+
+# Input Line History (newest to oldest):
+
+# Registers:
+
+# File marks:
+'0  83  0  ~/src/client/html/index.html
+
+# Jumplist (newest first):
+-'  83  0  ~/src/client/html/index.html
+-'  1  0  ~/src/client/html/index.html
+
+# History of marks within files (newest to oldest):
+
+> ~/src/client/html/index.html
+	"	83	0

app/README.md

@@ -0,0 +1,48 @@
+---
+
+## Tiny Tanks Game
+
+http://a4-mjadiletta.glitch.me 
+
+#### Goal
+The goal of this code is to allow multiple users to play against each other in an IO environment. This uses canvas, arrow keys, q key, mouse, and spacebar.  The specific IO game for this application is tiny tanks. 
+The tiny tank application has tanks that can shoot bullets, steer left and right, and drive forward and backwards. Users score points by shooting other players. 
+
+#### Challenges
+Note: I did not create the code to allow multiple users to log into the server and be rendered at the same time. I used a base code that allowed for simple IO applications where two or more people can connect to
+a page and have an image displayed on the game canvas. 
+1. Removing functionality from base code so I could implement my own game design. 
+2. Rendering a user and make it move using the input keys. 
+3. Adding bullets that shoot from the center of the user. 
+4. Preventing the user and bullets not travel off the screen.
+5. Adding obstacles 
+6. Preventing users and bullets from traveling through obsticles - wrote own collision scripts that use 2D axis intercepts and comparisions to do angled obstacles
+7. Rendering all these things simultaneously.
+8. Major challenges with the screen, leaderboard, instructions, and healthbar... etc.
+9. For some reason most keyboards don't let a user use the left, up and spacebar at the same time. This is a limitation for this code. In the future I will use a different set of keys for controls.
+
+#### JS Linter Used
+I used eslint which is for the commandline. I installed it and run eslint --fix ./* which automaticlly fixes all problems according to the linter. The default for this linter is pretty simple. 
+Basic examples: 
+1. if (this || this) { } else { } 
+2. function name(this) { }
+3. this.x = x;
+The only errors left are cammelcase errors and tab errors becasuse notepad++ is super weird about tabs vs spaces. 
+
+## Technical Achievements
+- **IO Video Game**This is the primary technical achievement for this project. Multiple users can log in and battle each other. I used an IO package to do this, however designing the paths to pass data for all people concurrently
+was very difficult. Creating the correct objects in the correct locations at the correct times with no lag was incredibly difficult. I also wanted to take user input consistantly without missing any commands and signaling to the 
+server in an appropriate amount of time to update the screen. 
+- **Object Collision Detection**: The collision detection for this game uses no libraries. I wrote the code that renders all the images and how they interact. I wrote functions using linear algebra to detect if a bullet or person 
+is going off the screen or hitting another object. This was very difficult. Check out the code in player.js, obstacle.js, and collisions.js. These three files all contain collision detection scripts. 
+- **Preventing User from Starting on Obstacle**: One big problem with initially loading the game is the fear of rendering the new user on top of an obstacle, thus making the user unable to move. I prevented this through technical means. 
+- **Heirarchy of JS files that pass data from server to client and back**: I created a method based on the example IO game for passing data back and forth between the server and the client. Each user has a serialize function that
+seralizes the users information and passes it from the server to the client. Then the server and the client share message notes to identify the type of message: update, new user, game over.
+
+### Design Achievements
+- **IO Video Game**: This is a major design achievement. I created a "renderer" that interacts with the server via updates to render svg's and pngs on the screen in correct locations based on x, y, and orientation. Very difficult
+from a design perspective.
+- **SVG**: The bullet is an SVG image that moves around the screen. Since the project for me was canvas, using the svg is a design achievement
+- **User Select Tank**: I created a bunch of PNG files for different tanks that a user can select from.
+- **User Login**: There is a user login for a user to select a username before joining the game.
+- **Uses Bootstrap for CSS**: Just like in the last project, I used Bootstrap for css styling in most cases. This is great for quick style.