├── .gitignore
├── HighScoreService.js
├── README.md
├── bower.json
├── cloud
    └── main.js
└── test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components


--------------------------------------------------------------------------------
/HighScoreService.js:
--------------------------------------------------------------------------------
  1 | 
  2 | ; (function (window) {
  3 |     'use strict';
  4 |     /**
  5 |      * The HighScoreService implements a cloud based leaderboard 
  6 |      * system to track your gamers high scores and achivements.
  7 |      * The implementation is based on parse.com, so you will have to create a free account at https://parse.com/ to use this class.
  8 |      * The parse.com js api must be avaulable at runtime:
  9 |      * <script src="//www.parsecdn.com/js/parse-1.6.7.min.js"></script>	
 10 |      * 
 11 |      * Create an instance of HighScoreService:
 12 |      * 
 13 |      * var highScoreService = new HighScoreService({
 14 |      *      appId: "PARSE_APP_ID", 
 15 |      *      key: "PARSE_JS_KEY",
 16 |      *      debug:true,
 17 |      *      updateUserDetails:function(details, user){
 18 |      *          highScoreService.logDebug("updateUserDetails called width", details, user);
 19 |      *      },
 20 |      *      updateScoreDetails:function(details, highScore){
 21 |      *          highScoreService.logDebug("updateScoreDetails called width", details, highScore);
 22 |      *      }
 23 |      * });
 24 |      * 
 25 |      * @param {object} config
 26 |      * @returns {HighScoreService}
 27 |      */
 28 |     function HighScoreService(config) {
 29 |         this.assertRequired(config, "config");
 30 |         this.assertRequired(config.appId, "config.appId");
 31 |         this.assertRequired(config.key, "config.key");
 32 | 
 33 |         this.config = config;
 34 | 
 35 |         this.resetPlayTime();
 36 |         
 37 |         // Authenticate to parse platform
 38 |         Parse.initialize(this.config.appId, this.config.key);
 39 |     }
 40 |     
 41 |     HighScoreService.prototype.resetPlayTime = function () {
 42 |         this.playTimeReference = new Date().getTime();
 43 |     };
 44 |     
 45 |     HighScoreService.prototype.getPlayTime = function () {
 46 |         return new Date().getTime() - this.playTimeReference;
 47 |     };
 48 | 
 49 |     HighScoreService.prototype.assertRequired = function (condition, name) {
 50 |         if (!condition) {
 51 |             throw new Error(name + " parameter is required");
 52 |         }
 53 |     };
 54 | 
 55 |     HighScoreService.prototype.errorHandler = function (object, error) {
 56 |         console.log("Parse Operation failed", object, error);
 57 |     };
 58 | 
 59 |     HighScoreService.prototype.logDebug = function () {
 60 |         if (console && this.config.debug) {
 61 |             console.log.apply(console, arguments);
 62 |         }
 63 |     };
 64 | 
 65 |     HighScoreService.prototype.logError = function () {
 66 |         if (console) {
 67 |             console.error.apply(console, arguments);
 68 |         }
 69 |     };
 70 | 
 71 |     HighScoreService.prototype.login = function (credentials, loginSuccess, loginError) {
 72 |         this.assertRequired(loginSuccess, "loginSuccess");
 73 |         this.assertRequired(credentials.username, "credentials.username");
 74 | 
 75 |         if (!loginError) {
 76 |             loginError = this.errorHandler;
 77 |         }
 78 | 
 79 |         this.loginSuccess = loginSuccess;
 80 |         this.loginError = loginError;
 81 |         var self = this;
 82 |         this.userExists(credentials.username, function (exists) {
 83 |             if (exists) {
 84 |                 self.loginUser(credentials);
 85 |             } else {
 86 |                 self.createUser(credentials);
 87 |             }
 88 |         });
 89 |     };
 90 | 
 91 |     HighScoreService.prototype.userExists = function (username, callback) {
 92 |         var self = this;
 93 |         var query = new Parse.Query(Parse.User);
 94 |         query.equalTo("username", username);
 95 |         query.find({
 96 |             success: function (user) {
 97 |                 if (user && user.length > 0) {
 98 |                     self.logDebug("User exists", username);
 99 |                     callback(true);
100 |                 } else {
101 |                     self.logDebug("User does not exist", username);
102 |                     callback(false);
103 |                 }
104 |             },
105 |             error: function (user, error) {
106 |                 self.logError("User does not exist", username);
107 |                 callback(false);
108 |             }
109 |         });
110 |     };
111 | 
112 |     HighScoreService.prototype.loginUser = function (credentials) {
113 |         var self = this;
114 |         this.processCredentials(credentials);
115 |         Parse.User.logIn(credentials.username, credentials.password, {
116 |             success: function (user) {
117 |                 self.logDebug("Sucessfully logged in user", user);
118 |                 self.loginSuccess(user)
119 |             },
120 |             error: this.loginError
121 |         });
122 |     };
123 |     
124 |     HighScoreService.prototype.logoutUser = function () {        
125 |         Parse.User.logOut();
126 |     };
127 |     
128 |     HighScoreService.prototype.processCredentials = function (credentials) {
129 |         if (!credentials.password || credentials.password==="") {
130 |             credentials.password = credentials.username;
131 |         }
132 |         if (!credentials.email || credentials.email==="") {
133 |             credentials.email = credentials.username + "@" + credentials.username + ".com";
134 |         }
135 |     };    
136 | 
137 |     HighScoreService.prototype.createUser = function (credentials) {
138 |         var self = this;
139 |         var user = new Parse.User();
140 |         this.processCredentials(credentials);
141 |         user.set("username", credentials.username);
142 |         user.set("password", credentials.password);
143 |         user.set("email", credentials.email);
144 |         user.set("timePlayed", 0);
145 |         user.set("userDetails", {});
146 |         if (this.config.updateUserDetails){
147 |             this.config.updateUserDetails(user.get("userDetails"), user);
148 |         }
149 |         user.set("rank", 0);
150 |         
151 |         user.signUp(null, {
152 |             success: function (user) {
153 |                 self.logDebug("Created user", user);
154 |                 self.createHighScore(function (highScore) {
155 |                     self.loginUser(credentials);
156 |                 });
157 |             },
158 |             error: this.errorHandler
159 |         });
160 |     };
161 |     
162 |     HighScoreService.prototype.getUser = function () {
163 |         return Parse.User.current();
164 |     };
165 |     
166 |     HighScoreService.prototype.updateUser = function () {
167 |         var self = this;
168 |         var user = Parse.User.current();         
169 |         user.set("timePlayed",  user.get("timePlayed")+this.getPlayTime());
170 |         if (this.config.updateUserDetails){
171 |             this.config.updateUserDetails(user.get("userDetails"), user);
172 |         }
173 |         user.save(null, {
174 |             success: function(user) {
175 |                 self.logDebug("Play time set to", user.get("timePlayed"));
176 |                 self.resetPlayTime();
177 |             },
178 |             error: this.errorHandler
179 |         });
180 |     };
181 | 
182 |     HighScoreService.prototype.getAchievements = function (successCallback) {
183 |         this.assertRequired(successCallback, "successCallback");
184 |         var self = this;    
185 |         var query = new Parse.Query("Achievement");
186 |         query.equalTo("user", Parse.User.current());
187 |         query.find({
188 |             success: function (achievements) {
189 |                 self.logDebug("Loaded achievements", achievements);
190 |                 successCallback(achievements);
191 |             },
192 |             error: this.errorHandler
193 |         });
194 |     };
195 |     
196 |     HighScoreService.prototype.addAchievement = function (name, description, score, details, callback) {
197 |         var self = this;
198 | 
199 |         var Achievement = Parse.Object.extend("Achievement");
200 |         var achievement = new Achievement();
201 |         achievement.set("name", name);
202 |         achievement.set("description", description);
203 |         achievement.set("score", score);
204 |         achievement.set("user", Parse.User.current());
205 |         achievement.set("details", details);
206 |         
207 |         var acl = new Parse.ACL(Parse.User.current());
208 |         acl.setPublicReadAccess(false);
209 |         achievement.setACL(acl);
210 |         
211 |         achievement.save(null, {
212 |             success: function (achievement) {
213 |                 self.logDebug("Saved achievement with id", achievement);
214 |                 self.setScore(score, true, function(highScore){
215 |                     if (callback) {
216 |                         callback(achievement);
217 |                     }
218 |                 });                
219 |             },
220 |             error: this.errorHandler
221 |         });
222 |     };
223 | 
224 |     HighScoreService.prototype.getHighScore = function (successCallback) {
225 |         this.assertRequired(successCallback, "successCallback");
226 |         var self = this;    
227 |         // Create a query object
228 |         var query = new Parse.Query("HighScore");
229 |         query.equalTo("user", Parse.User.current());
230 |         query.find({
231 |             success: function (highScore) {
232 |                 self.logDebug("Loaded high score", highScore);
233 |                 successCallback(highScore[0]);
234 |             },
235 |             error: this.errorHandler
236 |         });
237 |     };
238 |     
239 |     HighScoreService.prototype.createHighScore = function (callback) {
240 |         var HighScore = Parse.Object.extend("HighScore");
241 |         var highScore = new HighScore();
242 |         highScore.set("score", 0);
243 |         highScore.set("lastScore", 0);
244 |         highScore.set("scoreDetails", {});
245 |         highScore.set("username", Parse.User.current().get("username"));
246 |         highScore.set("user", Parse.User.current());
247 |         this.saveHighScore(highScore, callback);
248 |     };
249 | 
250 |     HighScoreService.prototype.saveHighScore = function (highScore, callback) {
251 |         var self = this;
252 |         var acl = new Parse.ACL(Parse.User.current());
253 |         acl.setPublicReadAccess(true);
254 |         highScore.setACL(acl);
255 |         highScore.save(null, {
256 |             success: function (highScore) {       
257 |                 self.updateUser();
258 |                 self.logDebug("Saved highscore with id", highScore);
259 |                 if (callback) {
260 |                     callback(highScore);
261 |                 }
262 |             },
263 |             error: this.errorHandler
264 |         });
265 |     };
266 | 
267 |     HighScoreService.prototype.getLeaderBoard = function (limit, centerPlayer, successCallback) {
268 |         var self = this;
269 |         var query = new Parse.Query("HighScore");
270 |         query.ascending("rank");
271 |         query.limit(limit);
272 |         
273 |         if (centerPlayer === null || centerPlayer === undefined){
274 |             centerPlayer = false;
275 |         }
276 |         
277 |         if (centerPlayer){
278 |             this.getHighScore(function(highScore){
279 |                 var start = highScore.get("rank")-(Math.floor(limit/2));
280 |                 if (start > 1){
281 |                     query.greaterThanOrEqualTo("rank", start);
282 |                 }
283 |                 query.find({
284 |                     success: function (leaderBoard) {
285 |                         self.logDebug("Loaded centered leaderboard", leaderBoard);
286 |                         successCallback(leaderBoard);
287 |                     },
288 |                     error: self.errorHandler
289 |                 });
290 |             });           
291 |         } else {
292 |             query.find({
293 |                 success: function (leaderBoard) {
294 |                     self.logDebug("Loaded leaderboard", leaderBoard);
295 |                     successCallback(leaderBoard);
296 |                 },
297 |                 error: this.errorHandler
298 |             });
299 |         }
300 |         
301 |     };
302 | 
303 |     HighScoreService.prototype.setScore = function (score, add, callback) {
304 |         var self = this;
305 |         this.getHighScore(function (highScore) {
306 |             if (add) {
307 |                 score = score + highScore.get("score");
308 |             }
309 |             highScore.set("lastScore", highScore.get("score"));            
310 |             highScore.set("score", score);
311 |             if (self.config.updateScoreDetails){
312 |                 self.config.updateScoreDetails(highScore.get("scoreDetails"), highScore);
313 |             }
314 |             self.saveHighScore(highScore, callback);
315 |         });
316 |     };
317 | 
318 |    /**
319 |    * Add HighScoreService to global namespace
320 |    */
321 |     window.HighScoreService = HighScoreService;
322 | 
323 | })(window);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # parse-highscore-service
  2 | JS implementation of a highscore and leaderboard service based on [parse.com](http://parse.com)
  3 | 
  4 | 
  5 | ## Objective
  6 | The HighScoreService Class can be used for HTML5 games, where a simple cloud based highscore and leaderboard system is needed. For smaller games it may not be an option to depend on Google's or Apple's game services. 
  7 | The implementation has no other dependencies than the parse.com api client.
  8 | 
  9 | 
 10 | ## Description
 11 | The functionality for the highscore service divides in two parts. The first one is the cloud code (```main.js```) which runs as a parse.com application.  
 12 | The second one is the HighScoreService class (```HighScoreService.js```) as a client. It connects to the parse backend and handles data via Parse JavaScript SDK.  
 13 | The [parse backend](https://dashboard.parse.com/apps/) gives you some very nice functionality. Just take a look to the analytics section of your app to have an idea about the usage of your game or browse the complete data via core section.
 14 | 
 15 | 
 16 | ## Features
 17 | * Manage players (Users)
 18 | * Player specific highscores
 19 | * Track players game time
 20 | * Manage achievements for players
 21 | * Leaderboard
 22 | * Store game specific values to the detail objects of achievement and highscore entities
 23 | 
 24 | 
 25 | ## Getting started
 26 | 
 27 | ### 1. Create a free account at parse.com
 28 | Go to parse.com [signup page](https://www.parse.com/signup) to create a free account and choose an app name for your games highscore backend.
 29 | 
 30 | ### 2. Install parse.com command line tool
 31 | Because we need some Server Code that does our ranking, we have to deploy the cloud application part of the highscore service via parse.com cloud code option.
 32 | Therefore we need to install the parse.com command line tool as described [here](https://parse.com/docs/cloudcode/guide#command-line-installation).
 33 | 
 34 | ### 3. Create your parse app
 35 | Go to your terminal and type `parse new`. Choose the existing app from step 1 and follow the instructions on the screen.
 36 | After that you will have a parse.com project on your workstation that makes it easy to modify and deploy the cloud code.  
 37 | Now copy the main.js file from form the cloud folder of this repository to the ```cloud``` folder of the created parse application. It contains the code to 
 38 | Then you can deploy the cloud code via `parse deploy` command.
 39 | 
 40 | ### 4. Test your backend
 41 | The git repository contains a `test.html` that you can use to test your highscore backend.  
 42 | Your Application ID (`PARSE_APP_ID`) and the JavaScript key (`PARSE_APP_ID`) have to be configured in the application panel so that the test app can connect to your backend.  
 43 | You can get the two keys from `parse.com > Applications > Your App > App Settings > Security & Keys`.
 44 | 
 45 | After that you can choose a user/player name and optionally a password and an email address and hit _Create or Login_.  
 46 | If the user does not exist a new user is created, otherwise the existing user is logged in. If you did not specify a password the username is taken as password, which is easy, but less secure.  
 47 | After you logged in a player, a panel with game actions comes up. You can add score and achievements from there. The leaderboard data is refreshed on every action and you can see the most important properties of the player in the player stats panel. If you can add scores and you see the leaderboard your Backend should be ready to go, now let's focus on your game.
 48 | 
 49 | [Go to Test App](http://peermedia.de/parse-highscore-service/test.html)
 50 | 
 51 | ### 5. Integrate highscore service in your game
 52 | 
 53 | #### 5.1 Install using Bower
 54 | You can install highscore service via bower. 
 55 | 
 56 | `bower install parse-highscore-service`
 57 | 
 58 | #### 5.2 Load dependencies
 59 | 
 60 | ```
 61 |  <script src="//www.parsecdn.com/js/parse-1.6.7.min.js"></script>
 62 |  <script src="HighScoreService.js"></script>	
 63 | ```
 64 | 
 65 | #### 5.3 Create an instance of highscore service for use in your game
 66 | Define the highscore service instance at your games bootstrap.
 67 | 
 68 | ```
 69 | var highScoreService = new HighScoreService({
 70 |       appId: "PARSE_APP_ID", 
 71 |       key: "PARSE_JS_KEY",
 72 |       debug:true,
 73 |       updateUserDetails:function(details, user){
 74 |           highScoreService.logDebug("updateUserDetails called width", details, user);
 75 |       },
 76 |       updateScoreDetails:function(details, highScore){
 77 |           highScoreService.logDebug("updateScoreDetails called width", details, highScore);
 78 |       }
 79 |  });
 80 | ```
 81 | 
 82 | You have to configure the Application ID (`PARSE_APP_ID`) and the JavaScript key (`PARSE_APP_ID`) so that the your client side game can connect to your backend.  
 83 | You can get the two keys from `parse.com > Applications > Your App > App Settings > Security & Keys`.  
 84 | If you set the debug property to `true` the service will log it's actions to the console.  
 85 | You can optionally configure callbacks to do your stuff when user is persisted (`updateUserDetails`) or when a highScore object is persisted (`updateScoreDetails`).
 86 | 
 87 | 
 88 | ### 6. Use highscore service in your game
 89 | 
 90 | #### 6.1 Login or create user
 91 | The first call you have to do is the login call, because everything works on data of the user.
 92 | 
 93 | ```
 94 | highScoreService.login({username: 'username', password: 'password', email: 'test@test.com'}, function(user){
 95 | 	console.log("Got login callback for", user);
 96 | });	
 97 | ```
 98 | 
 99 | #### 6.2 Modifying players score
100 | 
101 | ```
102 | highScoreService.setScore(500, true, function(highScore){
103 | 	console.log("Score set to", highScore.get("score"));
104 | });	
105 | ```
106 | 
107 | #### 6.3 Adding an achievement
108 | 
109 | ```
110 | highScoreService.addAchievement('name', 'description', 200, {myDetailProperty:'...'}), function(achievement){
111 | 	...
112 | });	
113 | ```
114 | 
115 | #### 6.4 Get the current highscore
116 | 
117 | ```
118 | highScoreService.getHighScore(function(highScore){
119 | 	...
120 | });			
121 | ```
122 | 
123 | #### 6.5 Get leaderboard
124 | ##### 6.5.1 Top 10 Example
125 | Returns the top 10 ranks regardless of the current players rank.
126 | 
127 | ```
128 | highScoreService.getLeaderBoard(10, false, function(leaderBoard){
129 | 	for (var i = 0;i < leaderBoard.length; i++){
130 | 		// leaderBoard[i].get("rank") leaderBoard[i].get("username") leaderBoard[i].get("score") ...
131 | 	}			
132 | });			
133 | ```
134 | 
135 | ##### 6.5.2 Centered to player
136 | Returns 5 ranks centered around the current players rank.
137 | 
138 | ```
139 | highScoreService.getLeaderBoard(5, true, function(leaderBoard){
140 | 	for (var i = 0;i < leaderBoard.length; i++){
141 | 		...
142 | 	}			
143 | });			
144 | ```
145 | #### 6.6 Get the current players achievements
146 | 
147 | ```
148 | highScoreService.getAchievements(function(achievements){
149 | 	for (var i = 0;i < achievements.length; i++){
150 | 		//achievements[i].get("name") achievements[i].get("description") achievements[i].get("score") ...
151 | 	}
152 | });				
153 | ```
154 | 
155 | ### 7. Security
156 | The parse api helps to secure user data and provides ACL mechanisms for every entity.  
157 | But since highscore service is a client side application, some more advanced users could try to cheat and submit hacked scores by using the JS methods. The only way to work against that is to validate the highscore submissions by using cloud code.  
158 | 
159 | You can place a second event listener in your `main.js` file:
160 | 
161 | ```
162 | /**
163 |  * Validate submitted scores 
164 |  */
165 | Parse.Cloud.beforeSave("HighScore", function(request, response) {
166 |   	  Parse.Cloud.useMasterKey();
167 |       var highScore = request.object;
168 |       var user = request.user;
169 |       var valid = ...; //implement your validation logic here
170 |       if (!valid) {
171 |           response.error("Can not validate submtted score!");
172 |       }
173 | });
174 | ```
175 | 
176 | Your validation options could be to investigate the details object (`highScore.get("scoreDetails")`) and enforce a correlation between values of the details object and the submitted score value. Details can be passed in from the client using the `updateScoreDetails` callback.
177 | 
178 | Another option is to look for the former score state `highScore.get("lastScore")` subject to the current score `highScore.get("score")`.
179 | 
180 | A third option could be to correlate the submitted score `highScore.get("score")-highScore.get("lastScore")` to the users time played `user.get("timePlayed")`.
181 | 
182 | After modifications of the `main.js` file you have to upload it to the cloud using `parse deploy` command.
183 | 
184 | 
185 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parse-highscore-service",
 3 |   "homepage": "https://github.com/peer2p/parse-highscore-service",
 4 |   "version": "1.0",
 5 |   "authors": [
 6 |     "daniel.peer@gmx.net"
 7 |   ],
 8 |   "description": "Highscore and leaderboard service based on parse.com",
 9 |   "main": "HighScoreService.js",
10 |   "moduleType": [
11 |     "globals"
12 |   ],
13 |   "ignore": [
14 |     "test.html",
15 |     "cloud",
16 |     "bower_components"
17 |   ],
18 |   "keywords": [
19 |     "game",
20 |     "highscore",
21 |     "leaderboard",
22 |     "achievements"
23 |   ],
24 |   "dependencies": {
25 |     "parse-sdk": "~1.4.2"
26 |   },
27 |   "license": "MIT"
28 | }
29 | 


--------------------------------------------------------------------------------
/cloud/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Create the ranking for high scores after some score has been saved
 3 |  */
 4 | Parse.Cloud.afterSave("HighScore", function(request) {
 5 |   Parse.Cloud.useMasterKey();
 6 |   var query = new Parse.Query("HighScore");
 7 |   query.descending("score");
 8 |   query.find({useMasterKey : true}).then(function(results) {  		
 9 |       	for (var i = 0; i < results.length; ++i) {
10 |        	 	if (results[i].get("rank") != (i+1)){
11 |             	results[i].set("rank", i+1);
12 |             	results[i].save();  
13 |         	}        
14 |       	}
15 |       	console.log("high score ranking successfully created from "+results.length+" highscores");
16 |   });  
17 | });


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 	<title>parse.com highscore service</title>
  8 | 	<!-- Bootstrap - Latest compiled and minified CSS -->
  9 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 10 | 	<!-- Bootstrap - Optional theme -->
 11 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 12 | 	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 13 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 14 | 	<!-- Bootstrap - Latest compiled and minified JavaScript -->
 15 | 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 16 | 	<!-- parse platform api -->
 17 | 	<script src="//www.parsecdn.com/js/parse-1.6.7.min.js"></script>
 18 | 	<!-- HighScoreService client -->
 19 | 	<script src="HighScoreService.js"></script>	
 20 | 	<style>
 21 | 		.glyphicon-spin { -webkit-animation: spin 1000ms infinite linear; animation: spin 1000ms infinite linear; }
 22 | 		@-webkit-keyframes spin { 
 23 | 			0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
 24 | 			100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
 25 | 		}
 26 | 		@keyframes spin {
 27 | 			0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
 28 | 			100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
 29 | 		}
 30 | 	</style>
 31 | </head>
 32 | 
 33 | <body style="padding-top: 70px;">
 34 | 	<!-- navbar -->
 35 | 	<nav class="navbar navbar-inverse navbar-fixed-top">
 36 |   		<div class="container-fluid">
 37 |     		<div class="navbar-header">
 38 | 				<a class="navbar-brand" href="#">
 39 | 					parse.com highscore service
 40 | 				</a>				
 41 |     		</div>
 42 |   		</div>
 43 | 	</nav>
 44 | 	
 45 | 	<div class="container-fluid">
 46 | 		
 47 | 		<span id="pleaseWait" class="pull-right glyphicon glyphicon-refresh glyphicon-spin" style="display:none; position:absolute; top:50%; left:50%; font-size:60px;"></span>
 48 | 		
 49 | 		<!-- app panel -->
 50 | 		<div class="panel panel-default">
 51 | 			<div class="panel-heading">
 52 | 				<h3 class="panel-title">Application</h3>
 53 | 			</div>
 54 | 			<div class="panel-body">	
 55 | 				<form  class="form-inline" id="loginForm">    
 56 | 					<div class="form-group">
 57 | 						<input id="appId" type="text" placeholder="Application ID" class="form-control" onblur="createInstance()">
 58 | 					</div>
 59 | 					<div class="form-group">
 60 | 						<input id="jsKey" type="text" placeholder="JavaScript key" class="form-control" onblur="createInstance()">
 61 | 					</div>
 62 | 				</form>
 63 | 			</div>
 64 | 		</div>
 65 | 		
 66 | 		<!-- player panel -->
 67 | 		<div class="panel panel-primary">
 68 | 			<div class="panel-heading">
 69 | 				<h3 class="panel-title">Player</h3>
 70 | 			</div>
 71 | 			<div class="panel-body">	
 72 | 				<form  class="form-inline" id="loginForm">    
 73 | 					<div class="form-group">
 74 | 						<input id="username" type="text" name="username" placeholder="Username" class="form-control" readonly onfocus="this.removeAttribute('readonly');" onblur="createInstance()">
 75 | 					</div>
 76 | 					<div class="form-group">
 77 | 						<input id="password" type="password" name="password" placeholder="Password" class="form-control">
 78 | 					</div>
 79 | 					<div class="form-group">
 80 | 						<input id="email" type="email" name="email" placeholder="Email" class="form-control">
 81 | 					</div>		
 82 | 					<div class="pull-right">        
 83 | 						<button id="loginUser" type="button" class="btn btn-primary pull-right" style="width:150px;">Create or Login</button>
 84 | 					</div>
 85 | 				</form>
 86 | 			</div>
 87 | 		</div>
 88 | 			
 89 | 		<!-- action panel -->
 90 | 		<div class="panel panel-warning" style="display:none;" id="actions">
 91 | 			<div class="panel-heading">
 92 | 				<h3 class="panel-title">Game Actions</h3>
 93 | 			</div>
 94 | 			<div class="panel-body">			
 95 | 				<!-- score form -->
 96 | 				<form class="form-inline">
 97 | 					<div class="form-group">
 98 | 						<label class="sr-only" for="score">Score</label>
 99 | 						<input type="number" class="form-control" id="score" placeholder="Score">
100 | 					</div>
101 | 					<button id="addScore" type="button" class="btn btn-primary btn-sm pull-right" style="width:150px;">Add Score</button>
102 | 				</form>
103 | 				<hr/>
104 | 				<!-- achievement form -->
105 | 				<form class="form-inline">
106 | 					<div class="form-group">
107 | 						<label class="sr-only" for="achievementName">Name</label>
108 | 						<input type="text" class="form-control" id="achievementName" placeholder="Name">
109 | 					</div>
110 | 					<div class="form-group">
111 | 						<label class="sr-only" for="achievementDescription">Description</label>
112 | 						<input type="text" class="form-control" id="achievementDescription" placeholder="Description">
113 | 					</div>
114 | 					<div class="form-group">
115 | 						<label class="sr-only" for="achievementScore">Score</label>
116 | 						<input type="number" class="form-control" id="achievementScore" placeholder="Score">
117 | 					</div>
118 | 					<div class="form-group">
119 | 						<label class="sr-only" for="achievementDetails">Details</label>
120 | 						<textarea id="achievementDetails" class="form-control" rows="1">{}</textarea>
121 | 					</div>
122 | 					<button id="addAchievement" type="button" class="btn btn-primary btn-sm pull-right" style="width:150px;">Add Achievemet</button>
123 | 				</form>
124 | 				<hr/>
125 | 				<form class="form-inline">
126 | 					<div class="form-group">
127 | 						<label for="limit">Leaderboard limit</label>
128 | 						<input type="number" class="form-control" id="limit" placeholder="Score" value="10">
129 | 					</div>
130 | 					<div class="checkbox">
131 | 						<label><input id="centerPlayer" type="checkbox"> Center leaderboard around player</label>
132 | 					</div>
133 | 					<button id="refresh" type="button" class="btn btn-primary btn-sm pull-right" style="width:150px;">Refresh Results</button>
134 | 				</form>
135 | 			</div>
136 | 		</div>
137 | 				
138 | 		<!-- stats panel -->
139 | 		<div class="panel panel-success">
140 | 			<div class="panel-heading">
141 | 				<h3 class="panel-title">Player Stats</h3>
142 | 			</div>
143 | 			<div class="panel-body">
144 | 				<form class="form-inline">
145 | 					<div class="form-group">
146 | 						<label for="statsPlayer">Player</label>
147 | 						<input type="text" class="form-control" id="statsPlayer" readonly>
148 | 					</div>
149 | 					<div class="form-group">
150 | 						<label for="statsRank">Rank</label>
151 | 						<input type="text" class="form-control" id="statsRank" readonly>
152 | 					</div>
153 | 					<div class="form-group">
154 | 						<label for="statsScore">Score</label>
155 | 						<input type="text" class="form-control" id="statsScore" readonly>
156 | 					</div>
157 | 					<div class="form-group">
158 | 						<label for="statsPlayTime">Time played</label>
159 | 						<input type="text" class="form-control" id="statsPlayTime" readonly>
160 | 					</div>
161 | 				</form>
162 | 			</div>
163 | 		</div>
164 | 		
165 | 		<!-- results panel -->
166 | 		<div class="panel panel-success">
167 | 			<div class="panel-heading">
168 | 				<h3 class="panel-title">Results</h3>
169 | 			</div>
170 | 			<div class="panel-body">	
171 | 								
172 | 				<!-- LeaderBoard table -->			
173 | 				<div class="row">
174 | 					<div class="col-xs-12">
175 | 						<div class="table-responsive">
176 | 							<table class="table table-bordered table-hover" id="tableLeaderBoard">
177 | 								<caption>LeaderBoard</caption>
178 | 								<thead>
179 | 									<tr>
180 | 										<th>#</th>
181 | 										<th>Name</th>
182 | 										<th>Score</th>
183 | 									</tr>
184 | 								</thead>
185 | 								<tbody>
186 | 								</tbody>
187 | 							</table>
188 | 						</div>
189 | 					</div>
190 | 				</div>
191 | 				
192 | 				<!-- Achievements table -->	
193 | 				<div class="row">
194 | 					<div class="col-xs-12">
195 | 						<div class="table-responsive">
196 | 							<table class="table table-bordered table-hover" id="tableAchievements">
197 | 								<caption>Achievements</caption>
198 | 								<thead>
199 | 									<tr>
200 | 										<th>Name</th>
201 | 										<th>Description</th>
202 | 										<th>Score</th>
203 | 										<th>Details</th>
204 | 									</tr>
205 | 								</thead>
206 | 								<tbody>
207 | 								</tbody>
208 | 							</table>
209 | 						</div>
210 | 					</div>
211 | 				</div>				
212 | 				
213 | 				<!-- json display -->			
214 | 				<form>
215 | 					<div class="form-group">
216 | 						<label for="user">User</label>
217 | 						<textarea id="user" class="form-control" rows="3" readonly></textarea>
218 | 					</div>
219 | 					<div class="form-group">
220 | 						<label for="highScore">High Score</label>
221 | 						<textarea id="highScore" class="form-control" rows="5" readonly></textarea>
222 | 					</div>
223 | 				</form>
224 | 				
225 | 			</div>
226 | 		</div>		
227 | 	</div>	
228 | 
229 | 	<script>
230 | 		$('#appId').val(localStorage.getItem('appId'));
231 | 		$('#jsKey').val(localStorage.getItem('jsKey'));
232 | 		
233 | 		var highScoreService = null;
234 | 		
235 | 		function createInstance(){
236 | 			if ($('#appId').val() && $('#jsKey').val() && $('#username').val()){
237 | 				localStorage.setItem('appId', $('#appId').val());
238 | 				localStorage.setItem('jsKey', $('#jsKey').val());
239 | 				
240 | 				highScoreService = new HighScoreService({
241 | 					appId: $('#appId').val(), 
242 | 					key: $('#jsKey').val(),
243 | 					debug:true,
244 | 					updateUserDetails:function(details, user){
245 | 						highScoreService.logDebug("updateUserDetails called width", details, user);
246 | 						$('#user').text(JSON.stringify(user.toJSON()));
247 | 						$('#statsPlayTime').val(user.get('timePlayed').toHHMMSS());				
248 | 					},
249 | 					updateScoreDetails:function(details, highScore){
250 | 						highScoreService.logDebug("updateScoreDetails called width", details, highScore);
251 | 					}
252 | 				});
253 | 			}
254 | 		}
255 | 					
256 | 		function loginUser(){
257 | 			$('#actions').show();
258 | 			$('#pleaseWait').show();
259 | 			highScoreService.login({username: $('#username').val(), password: $('#password').val(), email: $('#email').val()}, function(user){
260 | 				console.log("Got login callback", user);				
261 | 				$('#user').text(JSON.stringify(user.toJSON()));
262 | 				fetchResults();
263 | 			});	
264 | 		}
265 | 		
266 | 		function addScore(){
267 | 			$('#pleaseWait').show();
268 | 			highScoreService.setScore(parseInt($('#score').val()), true, function(highScore){
269 | 				fetchResults();
270 | 			});	
271 | 		}
272 | 		
273 | 		function addAchievement(){
274 | 			$('#pleaseWait').show();
275 | 			highScoreService.addAchievement($('#achievementName').val(), $('#achievementDescription').val(), parseInt($('#achievementScore').val()), JSON.parse($('#achievementDetails').val()), function(achievement){
276 | 				fetchResults();	
277 | 			});	
278 | 		}
279 | 		
280 | 		function refresh(){	
281 | 			$('#pleaseWait').show();	
282 | 			fetchResults();	
283 | 		}
284 | 		
285 | 		function fetchResults(){			
286 | 			$("#tableLeaderBoard > tbody").html("");
287 | 			$("#tableAchievements > tbody").html("");	
288 | 			highScoreService.getHighScore(function(highScore){		
289 | 				$('#highScore').text(JSON.stringify(highScore.toJSON()));	
290 | 				$('#statsScore').val(highScore.get('score'));
291 | 				$('#statsRank').val(highScore.get('rank'));
292 | 				
293 | 				$('#statsPlayTime').val(highScoreService.getUser().get('timePlayed').toHHMMSS());
294 | 				$('#statsPlayer').val(highScoreService.getUser().get('username'));
295 | 				
296 | 				highScoreService.getLeaderBoard(parseInt($('#limit').val()), $('#centerPlayer').prop("checked"), function(leaderBoard){
297 | 					console.log("Got leaderBoard", leaderBoard);
298 | 					for (var i = 0;i < leaderBoard.length; i++){
299 | 						$('#tableLeaderBoard').append('<tr><td>'+leaderBoard[i].get("rank")+'</td><td>'+leaderBoard[i].get("username")+'</td><td>'+leaderBoard[i].get("score")+'</td></tr>');
300 | 					}
301 | 					highScoreService.getAchievements(function(achievements){
302 | 						console.log("Got achievements", achievements);
303 | 						for (var i = 0;i < achievements.length; i++){	
304 | 							$('#tableAchievements').append('<tr><td>'+achievements[i].get("name")+'</td><td>'+achievements[i].get("description")+'</td><td>'+achievements[i].get("score")+'</td><td>'+JSON.stringify(achievements[i].get("details"))+'</td></tr>');
305 | 						}
306 | 						$('#pleaseWait').hide();
307 | 					});						
308 | 				});	
309 | 			});			
310 | 		}
311 | 		
312 | 		//bind button events
313 | 		$('#loginUser').click(loginUser);
314 | 		$('#addScore').click(addScore);
315 | 		$('#refresh').click(refresh);
316 | 		$('#addAchievement').click(addAchievement);		
317 | 		
318 | 		//prevent browser autofill
319 | 		setTimeout(function(){
320 | 			$('#username').remove('readonly');
321 | 			$('#username').focus();			
322 | 		}, 1000);
323 | 		
324 | 		//time display		
325 | 		Number.prototype.toHHMMSS = function () {
326 | 			var ms = Math.floor(this);			
327 | 			var seconds = ms/1000;
328 | 			hours = Math.floor(seconds / 3600);
329 | 			seconds -= hours*3600;
330 | 			var minutes = Math.floor(seconds / 60);
331 | 			seconds -= minutes*60;		
332 | 			if (hours   < 10) {hours   = "0"+hours;}
333 | 			if (minutes < 10) {minutes = "0"+minutes;}
334 | 			if (seconds < 10) {seconds = "0"+seconds;}
335 | 			return hours+':'+minutes+':'+seconds;
336 | 		}		
337 | 	</script>		
338 | </body>
339 | </html>


--------------------------------------------------------------------------------