- Multiplayer v2

claydotio · Mar 18, 2012 · 5edd20d · 5edd20d
1 parent 61ee7d4
commit 5edd20d
Show file tree

Hide file tree

Showing 20 changed files with 488 additions and 172 deletions.
diff --git a/build/server/encryption.js b/build/server/encryption.js
@@ -0,0 +1,66 @@
+/*
+ * clay-encryption
+ *
+ * Quick and simple library for encrypting
+ * and decrypting objects to be passed to clay.io
+ */
+
+// dependencies (note that jwt-simple requires crypto)
+var jwt = require( '/usr/local/lib/node_modules/jwt-simple' );
+
+Clay = ( function()
+{
+	// The associated user
+	Clay.identifier = '';
+
+	// The developer's secret key
+	Clay.secretKey = '';
+
+	/**
+	 * @param {String} identifier - unique identifier for player
+	 * @param {String} secretKey - secret key for this game
+	 */
+	function Clay( identifier, secretKey )
+	{
+		if( typeof identifier != 'undefined' )
+			Clay.identifier = identifier
+
+		if( typeof secretKey != 'undefined' )
+			Clay.secretKey = secretKey
+	}
+
+	/** 
+	 * Stores the user's unique identifier
+	 * @param {String} identifier
+	 */
+	Clay.prototype.storeIdentifier = function( identifier )
+	{
+		Clay.identifier = identifier;
+	}
+
+	/**
+	 * Encodes jwt
+	 * @param {Object} options
+	 */
+	Clay.prototype.encode = function( options )
+	{
+		// Add the necessary options
+		options.identifier = Clay.identifier;
+		options.timestamp = Math.round( new Date().getTime() / 1000 )
+
+		return jwt.encode( options, Clay.secretKey );
+	}
+
+	/**
+	 * Decodes jwt
+	 * @param {String} JWT encoded string
+	 */
+	Clay.prototype.decode = function( options )
+	{
+		return jwt.decode( options, Clay.secretKey );
+	}
+
+	return Clay;
+} )();
+
+module.exports = Clay
diff --git a/clay_big.png b/clay_big.png
diff --git a/icon_128.png b/icon_128.png
diff --git a/index.html b/index.html
@@ -1,30 +1,118 @@
 <html>
   <head>
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0; ">
-    <link rel="apple-touch-icon" href="/assets/images/icon.png" />
-    <link rel='shortcut icon' href='/assets/images/favicon.ico' />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
+	<link rel="apple-touch-icon" href="/assets/images/icon.png" />
+	<link rel='shortcut icon' href='/assets/images/favicon.ico' />
 
-    <script type="text/javascript" src="build/client/game.js"></script>
-    <script type='text/javascript'>
-      Clay = {};
-      Clay.gameKey = 'slime'
-      Clay.ready = function( fn ) {
-          Clay.readyFunction = fn;
-      };
-      ( function() {
-          var clay = document.createElement("script");
-          clay.src = "http://clay.io/api/api.js"; 
-          var tag = document.getElementsByTagName("script")[0]; 
-          tag.parentNode.insertBefore(clay, tag);
-      } )();
-    </script>
-    <style>
-      body, html, * {margin:0;padding:0;font-size:8px;}
-
-    </style>
+	<script type="text/javascript" src="build/client/game.js"></script>
+	<script type='text/javascript'>
+	  Clay = {};
+	  Clay.gameKey = 'slime'
+	  Clay.ready = function( fn ) {
+		  Clay.readyFunction = fn;
+	  };
+	  ( function() {
+		  var clay = document.createElement("script");
+		  clay.src = "http://clay.io/api/api.js"; 
+		  var tag = document.getElementsByTagName("script")[0]; 
+		  tag.parentNode.insertBefore(clay, tag);
+	  } )();
+	</script>
+	<style>
+		body, html {
+			margin:0;
+			padding:0;
+		}
+		body {
+			background: #9FFF23; 
+			font: 12px "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
+		}
+		#center {
+			margin: 0 auto;
+			text-align: center;
+			width: 480px;
+		}
+		#please-rotate {
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			z-index: 5;
+			background: #fff;
+			display: none;
+			text-align: center;
+			font-size: 16px;
+		}
+		.info {
+			display: none;
+		}
+		@media only screen and (min-width: 800px) {
+			#center {
+				padding-top: 15px;
+			}
+			.info {
+				display: block;
+				text-align: left;
+				margin-top: 5px;
+				border: 1px solid rgba( 0, 0, 0, 0.3 );
+			}
+			.info .social {
+				background: rgba( 0, 0, 0, 0.3 );
+				color: #fff;
+			}
+			.info .social a {
+				display: block;
+				float: left;
+				padding: 5px;
+				background: rgba( 255, 255, 255, 0.1 );
+				color: #fff;
+				text-decoration: none;
+				text-align: center;
+				margin-right: 8px;
+				width: 103px;
+			}
+			.info .social a:hover {
+				background: rgba( 255, 255, 255, 0.3 );
+			}
+			.info .social a.last {
+				margin-right: 0;
+			}
+			.info .instructions {
+				padding: 5px;
+			}
+			.clear {
+				clear: both;
+			}
+		}
+	</style>
   </head>
   <body style="margin:0px;">
-    <canvas id="canvas" width="480px" height="268px"></canvas>
+  	<div id='please-rotate'>
+  		Please rotate your device to landscape mode.
+  	</div>
+  	<div id='center'>
+		<canvas id="canvas" width="480px" height="268px"></canvas>
+		<div class='info'>
+			<div class='social'>
+				<a href='javascript: void( 0 );' onclick='Social.facebook();'>
+					Post to Facebook
+				</a>
+				<a href='javascript: void( 0 );' onclick='Social.tweet();'>
+					Post to Twitter
+				</a>
+				<a href='javascript: void( 0 );' onclick='new Clay.Screenshot();'>
+					Take a screenshot
+				</a>
+				<a href='javascript: void( 0 );' onclick='Clay.Ratings();' class='last'>
+					Rate this game
+				</a>
+				<div class='clear'></div>
+			</div>
+			<div class='instructions'>Instructions: <br />
+				Use the arrow keys to move (or WASD), hit the ball over the net.
+			</div>
+		</div>
+	</div>
   </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,17 @@
+{
+  "name": "Slime Volley",
+  "description": "Volleyball...between two slimes.",
+  "version": "0.1.8",
+  "app": {
+    "launch": {
+      "local_path": "index.html"
+    }
+  },
+  "icons": {
+    "128": "icon_128.png"
+  },
+  "permissions": [
+    "unlimitedStorage",
+    "notifications"
+  ]
+}
diff --git a/slimey.zip b/slimey.zip
diff --git a/src/client/main.coffee b/src/client/main.coffee
@@ -1,3 +1,21 @@
+# Scroll past URL bar
+scrollTop = ->
+	doScrollTop = setInterval(->
+		if document.body
+			clearInterval doScrollTop
+			scrollTo 0, 1
+			pageYOffset = 0
+			scrollTo 0, (if (pageYOffset is document.body.scrollTop) then 1 else 0)
+
+			# Check width
+			if window.innerWidth < 350
+				document.getElementById( 'please-rotate' ).style.display = 'block'
+			else
+				document.getElementById( 'please-rotate' ).style.display = 'none'
+	, 200)
+window.addEventListener 'orientationchange', ->
+	scrollTop()
+
 # FIXME run the game when the dom loads
 window.addEventListener 'load', ->
 	pixelRatio = window.devicePixelRatio || 1
@@ -8,14 +26,8 @@ window.addEventListener 'load', ->
 		pageFill = document.createElement("div")
 		pageFill.style.height = (window.innerHeight - document.body.clientHeight + 100) + "px"
 		document.getElementsByTagName("body")[0].appendChild pageFill
-	# Scroll past URL bar
-	doScrollTop = setInterval(->
-		if document.body and not ((pageYOffset or document.body.scrollTop) > 20)
-			clearInterval doScrollTop
-			scrollTo 0, 1
-			pageYOffset = 0
-			scrollTo 0, (if (pageYOffset is document.body.scrollTop) then 1 else 0)
-	, 200)
+
+	scrollTop()
 
 	Globals.Manager.canvas = canvas
 	Globals.Manager.ctx = Globals.Manager.canvas.getContext('2d')

diff --git a/src/client/manifest.js b/src/client/manifest.js
@@ -15,6 +15,7 @@
 //= require '../shared/ball'
 //= require '../shared/slime'
 //= require 'scoreboard'
+//= require 'social'
 //= require '../shared/world'
 
 //= require 'scenes/loading_scene'

diff --git a/src/client/scenes/menu_scene.coffee b/src/client/scenes/menu_scene.coffee
@@ -10,6 +10,12 @@ class MenuScene extends Scene
 		@bg = new StretchySprite(0, 0, @width, @height, 1, 1, loader.getAsset('menu_bg'))
 		@logo = new Sprite(@center.x-128, @center.y-155, 256, 256, loader.getAsset('logo'))
 		@logo.velocity = 0
+		Clay.ready =>
+			@clayRooms = new Clay.Rooms (roomInfo) =>
+				networkGame = new NetworkSlimeVolleyball()
+				networkGame.roomID = roomInfo.id
+				networkGame.rooms = roomInfo.instance
+				Globals.Manager.pushScene networkGame
 		dy = @center.y + 30
 		btnWidth = 234
 		btnHeight = 44
@@ -44,15 +50,12 @@ class MenuScene extends Scene
 	# delegate callback when a button is pressed
 	buttonPressed: (btn) ->
 		if btn == @buttons['leaderboards']
-			new Clay.Leaderboard(1).show();
+			new Clay.Leaderboard( { id: 6 } ).show();
+			# TODO: multiplayer LB
 		else if btn == @buttons['onePlayer']
 			# new volleyball game
 			Globals.Manager.pushScene new SlimeVolleyball()
 		else if btn == @buttons['options']
 			Globals.Manager.pushScene new OptionsScene()
 		else if btn == @buttons['wifi']
-			r = new Clay.Rooms (roomInfo) ->
-				networkGame = new NetworkSlimeVolleyball()
-				networkGame.roomID = roomInfo.id
-				Globals.Manager.pushScene networkGame
-			r.show()
+			@clayRooms.show()