fp-noblekalish-cbennet-kadonie

.gitignore

@@ -0,0 +1,94 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.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
+*.lcov
+
+# 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/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# 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/
+
+.idea/*
+package-lock.json
+my_db/*

Gulpfile.js

@@ -0,0 +1,25 @@
+const gulp = require('gulp');
+const source = require('vinyl-source-stream');
+const browserify = require('browserify');
+const babelify = require('babelify');
+
+
+const build = function () {
+    'use strict';
+    return new Promise(function (resolve, reject) {
+        browserify({entries: ['./public/index.js', './public/pixiBasic.js']})
+            .transform("babelify", {presets: ["@babel/preset-env"]})
+            // create Node.js stream using browserify output
+            .bundle()
+            // add Vinyl meta-data to Node.js stream, in this case
+            // the name of the file we're streaming
+            .pipe(source('bundle.js'))
+            // output file to dist folder
+            .pipe(gulp.dest('./public'));
+        resolve();
+    });
+};
+
+// 'default' task runs whenever we call 'gulp' on the
+// command line with no arguments
+gulp.task('default', gulp.series(build));

README.md

@@ -1,51 +1,29 @@
-# cs4241-FinalProject
-
-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.
-
-## General description
-
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- 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.
-
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
-
-## Project ideation
-
-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.
-
-## Logistics
-
-### 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.
-
-### 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). 
-
-#### Turning in Your Outline / Project
-
-**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.
-
-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.)
-
-## Final Presentation
-
-Presentations will occur during the final day of class.
-
-## 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.
+### CS4241 Final Project
+
+**Description**  
+We created a jumping character game where the user can select one of two characters to control and the goal is to avoid obstacles. Our game features login authentication and a leadership board.
+Our project can be accessed at https://fp-noblekalish-cbennet-kadonie.glitch.me
+
+**Additional Instructions**  
+To play the game, the user will need to create an account. Simply choose any username and password and use them to login. Then follow the instructions on the screen to play.
+
+**Technological Achievements**  
+- node js server: made a server using express
+- express middleware packages: used many packages, including helmet and compression
+- gulp: made a gulpfile as a pipeline for managing front-end tasks
+- css: embedded style into html views
+- pixi js: used pixi to render sprites and animate the scene with a refresh rate of 60 fps
+- passport local strategy: used local strategy middleware package to let users create accounts
+
+**Challenges**  
+What challenges you faced in completing the project.
+- getting passport authentication to work with multiple html views and adding user accounts to database was tricky
+- if you selected a character twice it would have two timers
+- making game scene borders was tricky with the sprite images
+- embedding background image
+- we were going to use heroku but because none of us had figured out how to use it by the final project we decided to go with glitch and used pouchdb database instead of heroku's sql integration
+
+**Work Distribution**
+- Noble: Set up project with node js server and gulp pipeline; created leadership board; added CSS design to the scenes; set up pouchdb database
+- Cooper: Created movable sprites that interact with each other; set up background images and game borders; set up game timer
+- Kristen: Created login and sign up pages with passport authentication; set up sessions with user accounts added to pouchdb database

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "fp",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "compression": "^1.7.4",
+    "connect-flash": "^0.1.1",
+    "express": "^4.17.1",
+    "express-session": "^1.16.2",
+    "helmet": "^3.21.1",
+    "i": "^0.3.6",
+    "pixi.js": "^5.1.5",
+    "passport": "^0.4.0",
+    "passport-local": "^1.0.0",
+    "pouchdb": "^7.1.1",
+    "pouchdb-upsert": "^2.2.0"
+  },
+  "engines": {
+    "node": "10.x"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.0",
+    "gulp": "^4.0.2",
+    "vinyl-source-stream": "^2.0.0"
+  }
+}