diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md new file mode 100644 index 0000000..0964f02 --- /dev/null +++ b/DOCUMENTATION.md @@ -0,0 +1,250 @@ +## I’m Game Documentation + +- __Product Owner__: Brian Hassett +- __Scrum Master__: Michael Chiang +- __Development Team__: Daniel Ritchie, Gwynn Dandridge-Perry + +Hack Reactor Legacy Project - Modern Grasshoppers + +## Contents + +1. Introduction + +2. File Structure + +3. Database Schema + +4. Server-Side + +- 4.1 Routes +- 4 4.2 DatabaseHelperFunctions +- 4 4.3 GiantBombAPIHelperFunctions + +5. Client-Side + +- 5.1 Files +- 5.2 User Authentication + +6. Deployment + +7. Socket.io + + +## 1. Introduction + +Welcome to “I’m Game!” + +“I’m Game” is based on GameMon, an app for tracking what video games you have in your collection. For us the next step was to make it interactive among users, so we turned the app into a social hub where users can connect and chat to coordinate their gaming sessions. + +To do that, we added a way to view other user collections, and also a way for the user to find others to play a game with in real time: + +With thousands of games available through the GiantBomb API, you can keep track of your collection, add and remove games, and keep track of details and information about your favorite games. When you’re ready for a gaming session, click the I’m Game button on a particular game you want to play and immediately connect with other gamers that are just as excited as you are. Live chat helps you meet new friends and make plans for future party gaming sessions. + + +## 2. File Structure + +towering-cranes +- client + - assets + - favicon.ico + - imgame-collection.png + - imgame-details.png + - imgame-search.png + - social-hub-view.jpg + - Social-view.jpg + - user-card.jpg + - Octocat.png + - home + - home.html + - imgame + - imgame.html + - imgame.js + - main + - gameCollection.js + - main.html + - modal.js + - search.js + - selectedGame.js + - toggle.js + - profile + - profileview.html + - profile.js + - styles + - styles.css + - app.js + - index.html + - documentation + - documentation.pdf + - documentation.tex + - documentation.toc + - server + - database + - databaseHelpers.js + - db.js + - giantBomb + - giantBombHelpers.js + - server.js + - gitignore + - editorconfig + - gitattributes + - gitignore + - jshintrc + - travis.yml + - CONTRIBUTING.m + - PRESS-RELEASE.md + - STYLE-GUIDE.md + - package.json + - README.md + +## 3. Database Schema + +## 4. Server-Side + +Server-side files hold the routes and the helper functions needed for the routing. + +## 4.1 Routes + +Database Routes + +- ’/users’ POST - receives a username and password from the client and adds each to the database for a specific user +- ’/games’ POST - receives a user and a game from the client and adds the game to that user’s collection in the database +- DELETE - receives a game title and a user from the request body and removes the game from the users collection +- GET - receives a username from the client as a parameter in the url and sends all of that users games back to the client + +Giant Bomb API Routes +’/games/search/keyword/:keyword’ +- GET - receives a keyword from the client as a parameter and returns up to 10 games that match the keyword + +’/games/search/id/:id’ +- GET - receives a game id from the client as a parameter and returns up to 10 games that match the id + +## 4.2 Database Helper Functions + +createUser - receives a user object from the server and either finds a user with that existing name or creates a new user + +addGameToCollection - receives a username and a game object and adds the game to the specified users collection. + +getGamesFromCollection - receives a username from the server and finds/returns all of that users games. + +removeGameFromCollection - receives a username and a game from the server and deletes that game from the specified users collection + + +## 4.3 Giant Bomb API Helper Functions + +Note: ES6 syntax used here in the request calls + +• searchForGames - receives a search term and uses expresss request module to send that request to the Giant Bomb api. + +– Example: To search for all Pokemon games our url in the options object would be the following: ‘http://www.giantbomb.com/api/search/?api key=$YOUR- API-KEY&format=json&query=”$pokemon”&resources=game‘ + +• getGameById - receives an id from and uses that id to get the game with the corresponding id form Giant Bomb. + +– Example: To search for metroid prime and list its genres and name based on id do the following: ‘http://www.giantbomb.com/api/game/3030-4725/?api key=$YOUR- API-KEY&format=json&field list=genres,name‘ + + +## 5. Client-Side + +Front-end uses AngularJS with Materialize/Angular-materialize. Materialize/Angular-materialize can be substituted with Bootstrap or any other front-end framework. Angular-materialize is a set of AngularJS directives to use features in Materialize that requires jQuery. It is NOT the same as Angular Material. + +Resources: + +- AngularJS +- Angular-materialize +- Material Icons +- Materialize CSS + + +## 5.1 Files + +The roles of the different files are as follows: +• /client/styles/styles.css +- Custom stylesheet for overrides and other styles not included in Materialize • /client/assets +- Images and other files to be used across client pages • /client/index.html +- Loads JS libraries +- Sets up header, navigation, and footer + +• /client/app.js +- Handles client side routing to load templates in /client/main or /client/home + +• /client/home/home.html +- Template for product landing page + +- Default page if root directory is loaded or if an invalid url is provided • /client/main/main.html + +- Uses ternary operator on gameCollection to see if search sidebar should be displayed. If it should be displayed, the column width is set to 8, if not, it is set to 11. + +- Uses custom filter in gameCollection.js to allow filtering by title, franchise, platform, and genre + +- Allows collection view to change between list and grid and sort by title or release date + +- Holds modal markup that appears when a game is clicked on + +• /client/main/modal.js +- Controller to load data into the scope for modal information + +• /client/main/gameCollection.js +- Holds a factory with following functions: + - getUserCollection that loads a game collection for the signed-in user + - addGameToCollection adds a selected game to the current user’s collection + - removeGameFromCollection removes the selected game from the current user’s collection +- Holds a custom filter that takes in setFilter(filterOpt) as an input where filterOpt is an array + - checks for a match in the respective locations of all the objects and returns all matches + - first element of filterOpt is the search term to find + - second element is what type of filter term it is: text, platform, or genre + - returns all objects that will be displayed after filtering + - items holds all possible objects + +- /client/main/search.js + - Holds a factory with searchByTerm and searchById functions +- /client/imgame/imgame.js + - Controller for I’m Game view (imgame.html) + - Grabs the game name for a specific game from the “gametitle” route parameter + - Updates the user’s “I’m game” status to a specific game via a post request + - Upon a successful post request, sends a get request to get all users who are currently “I’m game” for the same game + - Continuously updates the users list through a setInterval call +- client/imgame/imgame.html + - In addition to being the view for imgame.js, holds a script for socket.io chat (see Section 7 below) +- client/profile/profile.js + - Controller for viewing another user’s profile + - Similar to gameCollection.js, except grabs user nickname from route params and sends a post request based on that information. Also, there is no ability to remove or add games or change “I’m game” status + + + +## 5.2 User Authentication + +We implemented a client-side authentication using Auth0. The toggle.js files holds the logic for the authentication. First, we instantiate a module gameMon.toggle. We include the dependency ’auth0’ in order to use the Angular wrapper for Auth0. We pass the domain and client id in as an argument to authProvider. + +authProvider.init({ +domain: , clientID: + +After this we create a controller, LoginController, which runs when a user clicks signup and when a user logs out. The important takeaway from this controller is its use of local storage. When the user logs in, their profile information and Auth0 access token is added to the browser's local storage. We set and remove the profile and token by calling localStorage.setItem and localStorage.removeItem. We are able to keep the user logged in or logged out by looking for a profile on their local browser and toggling the signup/sign out buttons accordingly with ng-if. + +We implemented Google auth and Facebook SSO as additional social providers for Auth0. For client-side authentication, Auth0 uses client credentials to get an access token and then follows the same procedure of being added to the browser's local storage. + +Resources: + +- Auth0 Authentication Service +- Auth0 with Angular Module + +## 6. Deployment + +Modern Grasshoppers used Heroku to deploy the app. + +We recommend using a JAWSDB addon if deploying to Heroku. App uses a JAWSDB environment variable and didn’t work well when using a different MySQL addon service. + +For advice, we suggest that a single member on your team rebase and push to your Heroku master. + +## 7. Socket.io + +Socket.io runs a server on top of a server. It keeps a live-ear open for activity for socket.io code on the client page in order to facilitate real-time interactions between remote clients. + +Socket can be run as a separate server that listens on a different port from the app or it can be implemented to listen to the same port as the app. We’ve set it up on the same port. + +It is important to set up the express server and have it listen to a port first before setting io to pay attention to the server (line 8-12 before line 19 of server.js). + +On connection the socket is set to an instance of ‘socket’ which gets pushed to an array of live connections for tracking purposes. This will let you know that the socket is working and how many connections are being made at any point in time. + +Then data is transferred back and forth between the client and the server via event-listeners that catch each other’s data based on an event name (like ‘send message’). The client then displays the message to the user, while the server would take the data and emit or broadcast it to live sockets. These can be targeted by name if a name variable is passed from the client, or just broadcast generally to all sockets or namespaces. + +In our implementation ‘room’ designates the game that a user has indicated they want to play and a unique chat is created just for the time that people remain in the ‘room’. ‘Send message’ is the event that transfers the text from the input box between the client view of the room and the server and back. + diff --git a/POSTMORTEM.md b/POSTMORTEM.md index 4935e14..7382766 100644 --- a/POSTMORTEM.md +++ b/POSTMORTEM.md @@ -1,25 +1,34 @@ -# Postmortem +## Postmortem: -## What worked well? -1. Waffle.io worked well, but trello may be a more robust solution with better organization features. -2. Github rebase workflow was fine. +## Team +- Product Owner: **Brian Hassett** +- Scrum Master: **Michael Chiang** +- Development Team: **Daniel Ritchie**, **Gwynn Dandridge-Perry** -## What could have been better? -1. Mobile first development +## GitHub repo URL +https://github.com/Modern-Grasshoppers/im-game -## Why you should choose to take on our project -1. Gaining more experience with Angular and MySQL/Sequelize -2. Learning Materialize -3. A strong foundation of a product to iterate on +## Deployed link URL (or where to find your app) +http://imgame.herokuapp.com -## Outstanding issues -1. Filters for Pokemon franchise specifically doesn't work -2. Mobile navbar is implemented in Jquery... should be done with a new angular controller for nav. -3. Refactor backend db to remove unused passwords field in Users table -4. Mobile support can be improved +## What does your app do? (10 words or fewer) +Social hub for gamers to coordinate gaming sessions via games in collection -## Ideas for improvement -1. Add Angular animations (perhaps for search bar?) -2. Allow users to view other users' collections -3. Embed videos in another tab inside modal window -4. More pages! +## Short list of notable technologies you used +- Angular v1.6.1 +- Express v4.14.0 +- Node v4.0.0 +- MySQL v2.13.0 +- Sequelize v3.30.0 +- Socket.io v1.7.2 +# What went well? (do some self reflection of your entire project period and give advice to the future thesis groups in terms of behaviors/technologies they should embrace) +- Brian: +- Michael: The team dynamic and communication went well. Being open and honest about your strengths and weaknesses both in your - behaviors and technologies is key to working successfully in a team. +- Gwynn: +- Dan: + +# What could've gone better? (do some self reflection of your entire project period and give advice to the future thesis groups in terms of behaviors/technologies they should steer away from) +- Brian: +- Michael: The shift in the tech stack from React and MongoDB to Angular and MySQL was a hinder in the workflow from Greenfield to Legacy. Configuring 0Auth 2.0 was also a learning curve. Being patient and spending more time doing research on any new technologies you know you will be facing is important in order to maximize productivity for when the actual coding process begins. +- Gwynn: +- Dan: diff --git a/PRESS-RELEASE.md b/PRESS-RELEASE.md index ead8cb8..199f4c9 100644 --- a/PRESS-RELEASE.md +++ b/PRESS-RELEASE.md @@ -1,24 +1,22 @@ -# GameMon # +# I'm Game # -## GameMon: The Game Collection Tracker ## - -### Anyone who plays games will love this app because it gets your games organized! ### +### You'll Never Have to Play Alone Again ### ## Summary ## - GameMon keeps track of all of your games. It allows you, the user, to dynamically update your list of games. GameMon also consolidates relevant information associated with each of your games and allows you to search for new games with various filters. Start tracking your games today! + I'm Game is a social hub for finding new friends and like-minded gamers. Add games to your collection and click "I'm Game" to meet others from around the world who want to play. You can chat with them in real time and view their personal game collections. ## Problem ## - It is difficult to keep track of many games especially across consoles. + Ever feel like you have no one to play your favorite game with? ## Solution ## - It keeps track of your games across consoles. + I'm Game quickly connects you with gamers from around the world. ## Quote ## - Spend more time enjoying your games instead of searching through them. + "We wanted to create a cross-platform social networking site for people who don't want to play alone." ## How to Get Started ## @@ -26,8 +24,8 @@ ## Customer Quote ## - "I used to spend hours looking through my vast game collection. With GameMon I can choose a game right away!" -anon + "It can be hard to make friends inside of a game or a traditional matchmaking service. With I'm Game, it's easy to meet gamers with similar interests and personalities. I'll never have to play alone again." ## Closing and Call to Action ## - We hope you enjoy GameMon. It is the result of our experiences tracking our game collections. Check it out at ! + Enjoy meeting new friends and experiencing your favorite games in a whole new way! diff --git a/README.md b/README.md index 84444bc..d78d81d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,46 @@ -# towering-cranes # -Welcome to GameMon! We hope this documentation helps you navigate around the project quickly and efficiently. GameMon is an app for tracking what video games you have in your collection. Users signup and build out a collection based on the thousands of games available in the GiantBomb API. +# I'm Game! # -[Press release for this project](PRESS-RELEASE.md) + > I'm Game is an app for tracking video games in your collection and is a social center for gamers. With thousands of games available in the GiantBomb API, build out a collection of your favorite games. When you feel like gaming, click the "I'm Game" button. Connect with gamers worldwide who love the same games as you do and start chatting to coordinate your next gaming session! ## Team -- **Andy Walz**, product owner -- **Kevin Jang**, scrum master -- **Eric Forsell**, team member -- **Josephine Chen**, team member -## Postmortem -[Postmortem](POSTMORTEM.md) + - Product Owner: **Brian Hassett** + - Scrum Master: **Michael Chiang** + - Development Team: **Daniel Ritchie**, **Gwynn Dandridge-Perry** + +## Usage + + > Add games to your collection and join game rooms to chat with other gamers. + +## Requirements +- Node v6.9.4 +- MySQL v2.12.0 +- Angular v1.6.1 +- Express v4.14.0 +- Sequelize v3.27.0 + +### Installing Dependencies + +From within the root directory: + +```sh +$ npm install +``` ##Documentation## -[Documentation](documentation/documentation.pdf) + +[Press release for this project](PRESS-RELEASE.md) + +[Documentation](DOCUMENTATION.md) [Contribution guidelines for this project](CONTRIBUTING.md) [Style guidelines for this project](STYLE-GUIDE.md) + +## Special Thanks To: + +### Original Team + +- Product Owner: **Andy Walz** +- Scrum Master: **Kevin Jang** +- Development Team: **Eric Forsell**, **Josephine Chen** diff --git a/client/app.js b/client/app.js index 7251a6d..d3bf47d 100644 --- a/client/app.js +++ b/client/app.js @@ -3,9 +3,11 @@ angular.module('gamemon', [ 'gameMon.search', 'gameMon.modal', 'gameMon.toggle', + 'gameMon.otherCollection', + 'gameMon.imGame', 'ngRoute' ]) -.config(function($routeProvider) { +.config(function appJS($routeProvider) { $routeProvider .when('/', { templateUrl: 'home/home.html' @@ -14,8 +16,13 @@ angular.module('gamemon', [ templateUrl: 'main/main.html', controller: 'LoginController' }) - .when('/signup', { - templateUrl: 'user/signup.html' + .when('/profiles/:username', { + templateUrl: 'profile/profileview.html', + controller: 'LoginController' + }) + .when('/imgame/:gametitle', { + templateUrl: 'imgame/imgame.html', + controller: 'ImGameController' }) .otherwise({redirectTo: '/'}); }); \ No newline at end of file diff --git a/client/assets/andy.jpg b/client/assets/andy.jpg deleted file mode 100644 index 6d06a88..0000000 Binary files a/client/assets/andy.jpg and /dev/null differ diff --git a/client/assets/eric.jpg b/client/assets/eric.jpg deleted file mode 100644 index 06374e1..0000000 Binary files a/client/assets/eric.jpg and /dev/null differ diff --git a/client/assets/favicon.ico b/client/assets/favicon.ico index 53d5ce6..e4c1951 100644 Binary files a/client/assets/favicon.ico and b/client/assets/favicon.ico differ diff --git a/client/assets/gamemon-collection.png b/client/assets/gamemon-collection.png deleted file mode 100755 index dee1f9d..0000000 Binary files a/client/assets/gamemon-collection.png and /dev/null differ diff --git a/client/assets/gamemon-collection.png.old b/client/assets/gamemon-collection.png.old deleted file mode 100644 index 2851336..0000000 Binary files a/client/assets/gamemon-collection.png.old and /dev/null differ diff --git a/client/assets/gamemon-details.png b/client/assets/gamemon-details.png deleted file mode 100755 index e3002d9..0000000 Binary files a/client/assets/gamemon-details.png and /dev/null differ diff --git a/client/assets/gamemon-details.png.old b/client/assets/gamemon-details.png.old deleted file mode 100644 index ae1647e..0000000 Binary files a/client/assets/gamemon-details.png.old and /dev/null differ diff --git a/client/assets/gamemon-search.png b/client/assets/gamemon-search.png deleted file mode 100644 index 3a952e9..0000000 Binary files a/client/assets/gamemon-search.png and /dev/null differ diff --git a/client/assets/gamemon-search.png.old b/client/assets/gamemon-search.png.old deleted file mode 100644 index 525d185..0000000 Binary files a/client/assets/gamemon-search.png.old and /dev/null differ diff --git a/client/assets/imgame-collection.png b/client/assets/imgame-collection.png new file mode 100644 index 0000000..b64e920 Binary files /dev/null and b/client/assets/imgame-collection.png differ diff --git a/client/assets/imgame-details.png b/client/assets/imgame-details.png new file mode 100644 index 0000000..b6ee5a9 Binary files /dev/null and b/client/assets/imgame-details.png differ diff --git a/client/assets/imgame-search.png b/client/assets/imgame-search.png new file mode 100644 index 0000000..2207171 Binary files /dev/null and b/client/assets/imgame-search.png differ diff --git a/client/assets/josephine.jpg b/client/assets/josephine.jpg deleted file mode 100644 index f0aebbd..0000000 Binary files a/client/assets/josephine.jpg and /dev/null differ diff --git a/client/assets/kevin.jpg b/client/assets/kevin.jpg deleted file mode 100644 index ffe2b8f..0000000 Binary files a/client/assets/kevin.jpg and /dev/null differ diff --git a/client/assets/social-hub-view.png b/client/assets/social-hub-view.png new file mode 100644 index 0000000..815c9e0 Binary files /dev/null and b/client/assets/social-hub-view.png differ diff --git a/client/assets/social-view.png b/client/assets/social-view.png new file mode 100644 index 0000000..600ab42 Binary files /dev/null and b/client/assets/social-view.png differ diff --git a/client/assets/user-card.png b/client/assets/user-card.png new file mode 100644 index 0000000..6089631 Binary files /dev/null and b/client/assets/user-card.png differ diff --git a/client/home/home.html b/client/home/home.html index fc12876..4ff136b 100644 --- a/client/home/home.html +++ b/client/home/home.html @@ -1,20 +1,34 @@
- - -

+
+
+
+

Welcome to I'm Game!

+

Do you wish you had someone to play your favorite game with?

+
+
+
+
+
+

-

Build out your game collection

+

Create Your Game Collection


-

Add games you own and want to play.
Sort your games by platform, genre, or name so you can always find a game to play.

+
+
+ Add games you own and want to play. +

+ Sort your games by platform, genre, or name so you can always find a game to play. +
+


@@ -22,13 +36,21 @@

Build out your game collection



-

Search from thousands of games

+

Search from Thousands of Games


-

Titles from every genre and platform. See all the games in a series or franchise in one spot and see which you have and what you're missing.

+
+
+ Titles from every genre and platform. +

+ See all the games in a series or franchise in one spot and see which you have and what you're missing. +

+ Click "More Details" to see a description and add the game to your collection. +
+
@@ -36,63 +58,82 @@

Search from thousands of games



-
-

See all the details

+
+

See All the Details


-

Found a game you want to know more about or refresh your memory on?
See ratings, videos, and related games for any game.

+
+
+ Found a game you want to know more about or refresh your memory on? +

+ See ratings, videos, and related games for any game. +
+
-

+

+
+
+
+

Find New Friends

+
+ Click the I'm Game button to link up with other users looking for someone to play with. +
+
+
+
+
+
+

+
+ +
+
+

View Other Collections

+
+
+ Click the user's card link to see their collection. +

+ A user's collection says a lot about who they are. +
+
+
+
+
+
+

It's easy to get started

-
Signup and start adding games you own or want to play

- Start Collecting +
Signup and start adding games you own or want to play!

+ Start Collecting

-

-
-
-
- -

Josephine

-

I’ve got an awesome Halo helmet that beats every other cosplayer ever and crazy skills to boot.

-
-
- -

Kevin

-

I play the piano like nobody’s business and can meow a Frank Sinatra song better than ol’ blue eyes himself.

-
-
- -

Eric

-

I’m a go getter out of New Jersey. For lunch I often make myself a delicious shake that makes Jamba Juice jealous.

-
-
- -

Andy

-

I ate a cheeseburger once. It was alright. I have more houseplants than you can shake a stick at.

-
-
-

-
-
"I used to spend hours looking through my vast game collection. With GameMon I can choose a game right away!" -anon
+
+ "It can be hard to make friends inside of a game or a traditional matchmaking service. +

+ With I'm Game, it's easy to meet gamers with similar interests and personalities. I'll never have to play alone again." +
+

- arnie_rulez1992

+
diff --git a/client/imgame/imgame.html b/client/imgame/imgame.html new file mode 100644 index 0000000..f649e2d --- /dev/null +++ b/client/imgame/imgame.html @@ -0,0 +1,77 @@ + +
+
+
+

Users waiting to play {{ gameTitle }}

+
+
+
+

{{user.nickname}}

+

View Collection

 +

Email User

 +
+
+
+
+ +
+ + + +
+
+
+

Live Chat:

+
+
+
+
+ + + +
+
+
+
+
+ + + + diff --git a/client/imgame/imgame.js b/client/imgame/imgame.js new file mode 100644 index 0000000..967952f --- /dev/null +++ b/client/imgame/imgame.js @@ -0,0 +1,68 @@ +var app = angular.module('gameMon.imGame', ['ui.materialize', 'gameMon.selectedGame']); + +app.controller('ImGameController', function OtherCollectionController($scope, ForeignView, SelectedGame, $rootScope, $routeParams, $window, ImGameFactory) { + $scope.data = {}; + $scope.username = localStorage.profile; + $rootScope.username = localStorage.profile; + $scope.gameTitle = $routeParams.gametitle; + + //get all users function + var getUsers = function() { + ImGameFactory.getGamers($scope.gameTitle, function(res) { + $scope.data.users = res.data; + }); + } + + //update i'm game status, calls get users on success + var updateImGameStatus = function() { + ImGameFactory.postImGame($scope.username, $scope.gameTitle, function(res) { + getUsers(); + }) + } + //call update, which will call getUsers + updateImGameStatus(); + + //Invoke getUsers to update social hub view to update users + setInterval(function() { + getUsers(); + }, 1000); + + var setStatusToNull = function() { + ImGameFactory.postImGame($scope.username, null, function(res) { + console.log('destroyed'); + }) + } + + $scope.$on('$destroy', setStatusToNull); + + $window.onbeforeunload = setStatusToNull; + +}); + +app.factory('ImGameFactory', ['$http', function($http) { + var output = {}; + + output.postImGame = function(user, gametitle, callback) { + $http({ + method: 'POST', + url: '/api/users/' + user, + data: JSON.stringify({gameTitle: gametitle}) + }).then(function(response){ + callback(response); + }, failCallback); + } + + output.getGamers = function(title, callback) { + $http.get('api/users/' + title) // + .then(function(response) { + callback(response); + }, failCallback); + } + + + var failCallback = function(response) { + console.log('err: ', response); + }; + + return output; +}]); diff --git a/client/index.html b/client/index.html index 1a137a9..917ac33 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,7 @@ - GameMon + I'm Game @@ -20,19 +20,18 @@
+ + + + + + @@ -56,33 +66,36 @@ + + + -