Refactor emitters + Websockets -> WebRTC.

Couchfriends · Mar 9, 2017 · 9a11fd6 · 9a11fd6
1 parent 15bb6d8
commit 9a11fd6
Show file tree

Hide file tree

Showing 16 changed files with 4,190 additions and 296 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/build/assets/controller-mode.png b/build/assets/controller-mode.png
diff --git a/build/assets/couchfriends.ui.css b/build/assets/couchfriends.ui.css
@@ -0,0 +1,239 @@
+#COUCHFRIENDS-overlay {
+  pointer-events: none;
+  font-family: OpenSans, "Open Sans", arial, sans-serif;
+  color: #222222;
+  font-size: 16px;
+  position: fixed;
+  z-index: 1001;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+#COUCHFRIENDS-overlay .COUCHFRIENDS-underline {
+  text-decoration: underline;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications {
+  position: absolute;
+  width: 200px;
+  height: auto;
+  right: 10px;
+  bottom: 10px;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification {
+  position: relative;
+  overflow-y: hidden;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
+  animation-name: COUCHFRIENDS-slideUp;
+  -webkit-animation-name: COUCHFRIENDS-slideUp;
+  margin-top: 10px;
+  animation-duration: 0.5s;
+  -webkit-animation-duration: 0.5s;
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification p {
+  display: block;
+  padding: 10px;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification p:after {
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification img {
+  float: left;
+  margin-right: 10px;
+  max-width: 64px;
+  max-height: 64px;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification-error {
+  background-color: rgba(255, 0, 0, 0.5);
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification-achievement {
+  background-color: rgba(88, 255, 0, 0.5);
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-notifications .COUCHFRIENDS-notification.COUCHFRIENDS-notification-close {
+  animation-name: COUCHFRIENDS-slideDown;
+  -webkit-animation-name: COUCHFRIENDS-slideDown;
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-popup {
+  text-align: center;
+  position: absolute;
+  width: 25%;
+  bottom: 0;
+  left: 0;
+  /* bring your own prefixes */
+  margin-left: -12.5%;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
+}
+#COUCHFRIENDS-overlay #COUCHFRIENDS-popup #COUCHFRIENDS-code {
+  font-size: 150%;
+  display: block;
+}
+#COUCHFRIENDS-overlay .COUCHFRIENDS-fadeIn {
+  animation-name: COUCHFRIENDS-fadeIn;
+  -webkit-animation-name: COUCHFRIENDS-fadeIn;
+  animation-duration: 0.5s;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+#COUCHFRIENDS-overlay .COUCHFRIENDS-fadeOut {
+  animation-name: COUCHFRIENDS-fadeOut;
+  -webkit-animation-name: COUCHFRIENDS-fadeOut;
+  animation-duration: 0.5s;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+#COUCHFRIENDS-overlay .COUCHFRIENDS-moveBottomLeft {
+  animation-name: COUCHFRIENDS-moveBottomLeft;
+  -webkit-animation-name: COUCHFRIENDS-moveBottomLeft;
+  animation-duration: 0.5s;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+#COUCHFRIENDS-overlay .COUCHFRIENDS-moveCenter {
+  animation-name: COUCHFRIENDS-moveCenter;
+  -webkit-animation-name: COUCHFRIENDS-moveCenter;
+  animation-duration: 0.5s;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+@keyframes COUCHFRIENDS-moveBottomLeft {
+  0% {
+    font-size: 22px;
+    line-height: 37px;
+    padding: 15px;
+    bottom: 50%;
+    left: 50%;
+  }
+  100% {
+    font-size: 14px;
+    line-height: 19px;
+    padding: 5px;
+    left: 13%;
+    bottom: .5%;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-moveBottomLeft {
+  0% {
+    font-size: 22px;
+    line-height: 37px;
+    padding: 15px;
+    bottom: 50%;
+    left: 50%;
+  }
+  100% {
+    font-size: 14px;
+    line-height: 19px;
+    padding: 5px;
+    left: 13%;
+    bottom: .5%;
+  }
+}
+@keyframes COUCHFRIENDS-moveCenter {
+  0% {
+    font-size: 14px;
+    line-height: 19px;
+    padding: 5px;
+    left: 13%;
+    bottom: .5%;
+  }
+  100% {
+    font-size: 22px;
+    line-height: 37px;
+    padding: 15px;
+    bottom: 50%;
+    left: 50%;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-moveCenter {
+  0% {
+    font-size: 14px;
+    line-height: 19px;
+    padding: 5px;
+    left: 13%;
+    bottom: .5%;
+  }
+  100% {
+    font-size: 22px;
+    line-height: 37px;
+    padding: 15px;
+    bottom: 50%;
+    left: 50%;
+  }
+}
+@keyframes COUCHFRIENDS-slideDown {
+  0% {
+    max-height: 150px;
+  }
+  100% {
+    max-height: 0;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-slideDown {
+  0% {
+    max-height: 150px;
+  }
+  100% {
+    max-height: 0;
+  }
+}
+@keyframes COUCHFRIENDS-slideUp {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 150px;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-slideUp {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 150px;
+  }
+}
+@keyframes COUCHFRIENDS-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes COUCHFRIENDS-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes COUCHFRIENDS-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/couchfriends.ui.less → build/assets/couchfriends.ui.less b/src/couchfriends.ui.less → build/assets/couchfriends.ui.less
@@ -2,11 +2,14 @@
 @animationDuration: .5s;
 @boxShadow: 0 0 25px rgba(0,0,0,.2);
 @backgroundPopup: rgba(255,255,255,.9);
+@warning: rgba(255,0,0,.5);
+@bonus: rgba(88, 255, 0, 0.5);
 @fontSmall: 14px;
 @paddingSmall: 5px;
 @fontLarge: 22px;
 @paddingLarge: 15px;
 #@{prefix}-overlay {
+    pointer-events: none;
     font-family: OpenSans, "Open Sans", arial, sans-serif;
     color: #222222;
     font-size: 16px;
@@ -60,6 +63,12 @@
                 max-height: 64px;
             }
         }
+        .@{prefix}-notification-error {
+            background-color: @warning;
+        }
+        .@{prefix}-notification-achievement {
+            background-color: @bonus;
+        }
         .@{prefix}-notification.@{prefix}-notification-close {
             animation-name: COUCHFRIENDS-slideDown;
             -webkit-animation-name: COUCHFRIENDS-slideDown;

diff --git a/build/assets/notification.wav b/build/assets/notification.wav
diff --git a/build/couchfriends.api-latest.js b/build/couchfriends.api-latest.js
diff --git a/build/couchfriends.ui.css b/build/couchfriends.ui.css
diff --git a/gruntfile.js b/gruntfile.js
@@ -8,20 +8,23 @@ module.exports = function(grunt) {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             build: {
-                src: 'src/<%= pkg.name %>.js',
-                dest: 'build/<%= pkg.name %>-latest.js'
+                src: [
+                    'src/Emitter.js',
+                    'src/peer.js',
+                    'src/couchfriends.api.js'
+                ],
+                dest: 'build/couchfriends.api-latest.js'
             }
         },
         less: {
             production: {
                 options: {
                     plugins: [
-                        //new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
                         new (require('less-plugin-clean-css'))({})
                     ]
                 },
                 files: {
-                    "build/couchfriends.ui.css": "src/couchfriends.ui.less"
+                    "build/assets/couchfriends.ui.css": "src/assets/couchfriends.ui.less"
                 }
             }
         },

diff --git a/readme.md b/readme.md
@@ -26,13 +26,7 @@ Add the following code in the `<head>` of your game.
 
 ## Connect 
 
-Couchfriends api uses the global `window.COUCHFRIENDS` or `COUCHFRIENDS` object variable. The following code will
-connect you to the Couchfriends websocket server.
-
-```javascript
-COUCHFRIENDS.connect();
-```
-
+Couchfriends api uses the global `window.COUCHFRIENDS` or `COUCHFRIENDS` object variable. The API will automaticly connect to the websocket server.
 
 # API
 
@@ -42,21 +36,6 @@ You can use the `.send()` function to send data to the server or (one or all) of
 Sending data must always be an json object. This example will host a new game. See
 [Sending data to Players/Server](#sending-data-to-playersserver) for more examples.
 
-```javascript
-/**
- * Request a new game host.
- *
- * @param {string} topic The type of data to send. e.g. 'game'
- * @param {sting} [action] The sub type/action to send. e.g. 'host'
- * @param {object} [data] Additional data to send.
- */
-var jsonData = {
-    topic: 'game',
-    action: 'host'
-};
-COUCHFRIENDS.send(jsonData);
-```
-
 ## Callbacks
 
 Each data that is received from the server is passed through the `.on('type', function(){});` callback.
@@ -66,14 +45,13 @@ Each data that is received from the server is passed through the `.on('type', fu
 Called after a successful connection to the Websocket server.
 
 ```javascript
-COUCHFRIENDS.on('connect', function() {
-    console.log('Ready for action!');
-    // Best place to host a game:
-    var jsonData = {
-        topic: 'game',
-        action: 'host'
-    };
-    COUCHFRIENDS.send(jsonData);
+/**
+* Callback after connected to the websocket server and ready for incoming
+* players.
+* @param string code a unique identifier for players to join this game.
+*/
+COUCHFRIENDS.on('connect', function(code) {
+    console.log('Ready for action! My gamecode is: ' + code);
 });
 ```
 
@@ -88,7 +66,7 @@ A new player joined the game.
  * @param {int} data.id The unique identifier of the player
  * @param {string} [data.name] The name of the player
  */
-COUCHFRIENDS.on('playerJoined', function(data) {
+COUCHFRIENDS.on('player.join', function(data) {
     console.log('Player joined. Player id: ' + data.id);
 });
 ```
@@ -103,7 +81,7 @@ One of the players disconnected or left the game.
  * @param {object} data list with the player information
  * @param {int} data.id the unique identifier of the player that left
  */
-COUCHFRIENDS.on('playerLeft', function(data) {
+COUCHFRIENDS.on('player.left', function(data) {
     console.log('Player left. Player id: ' + data.id);
 });
 ```
@@ -118,7 +96,7 @@ Player pressed or tapped a button.
  * @param {object} data list with the player information
  * @param {int} data.id the unique identifier of the button. e.g. 'a'
  */
-COUCHFRIENDS.on('buttonUp', function(data) {
+COUCHFRIENDS.on('player.buttonUp', function(data) {
     console.log('Player pressed button. Player id: ' + data.playerId + ' Button: ' + data.id);
 });
 ```
@@ -137,7 +115,7 @@ A player's device orientation has changed.
  * @param {float} [data.x] The x-as orientation (-1 to 1). E.g. -0.871
  * @param {float} [data.y] The y-as orientation (-1 to 1). E.g. 0.12
  */
-COUCHFRIENDS.on('playerOrientation', function(data) {
+COUCHFRIENDS.on('player.orientation', function(data) {
     console.log('Player orientation changed. Player id: ' + data.id + ' Orientation: ' + data.x + ', ' + data.y);
 });
 ```