rbmccr / NSS-Front-End-Capstone-Hotshot

A positional heatmapper for Rocket League players written in JavaScript with Bulma styling. Completed as mid-term project after three months of instruction at NSS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hotshot - Rocket League Positional Heatmapper

Please Read

This project was a fun way to integrate my love for Rocket League with my JavaScript obsession. I didn't write beautiful code, mainly because I was in the earliest stage of my development career at the time. I wrote the app by leveraging a specific function to build HTML elements. Most functions are far too long, some of the code is difficult to read, and there aren't any tests (because I hadn't learned about unit testing at the time). In short, view this project as a thought experiment with a very cool outcome. My code quality has drastically improved over time.

Technologies Used

Development Languages and Libraries

             

Development Tools

node.js    browserify    grunt    eslint Babel.js RESTful API

Instructions for Installing

Command line tools and node package manager (npm) must be installed in order to successfully run this program. Google Chrome is also the preferred browser.

If you do not have Node.js installed on your machine, visit the Node.js Download Page and follow the installation instructions.

After cloning this repository from github, the dependencies must be installed. In addition, you'll need to install JSON-server (local RESTful API) and the grunt cli. To complete this process, type the following commands in your terminal from the main directory.

cd src/lib/
npm i
sudo npm install -g json-server
sudo npm install -g grunt-cli

Once complete, the program can be intialized from the lib folder by typing the following command.

grunt

It is likely that eslint will report warnings. These can be ignored.

The server is running once the terminal reports "Waiting...".

Open an internet browser and access the application at:

http://localhost:8080/

The database can be accessed at:

http://localhost:8088/

Accessing the database is not required.

To see an active user profile, enter the following username and password in the login form:

username: player
password: pass

This user has already entered gameplay data, and heatmaps can be easily viewed and manipulated when logged in.

About

A positional heatmapper for Rocket League players written in JavaScript with Bulma styling. Completed as mid-term project after three months of instruction at NSS.


Languages

Language:JavaScript 99.5%Language:CSS 0.4%Language:HTML 0.1%