new player info

wombatka · Oct 13, 2017 · 8d2ff5f · 8d2ff5f
1 parent ea3fb5d
commit 8d2ff5f
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Naprawdę bardzo fajna gra! 
diff --git a/index.html b/index.html
@@ -2,20 +2,38 @@
 <html>
 <head>
   <title>Multiplayer</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font: 13px Helvetica, Arial; }
+    form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
+    form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
+    form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
+    #messages { list-style-type: none; margin: 0; padding: 0; }
+    #messages li { padding: 5px 10px; }
+    #messages li:nth-child(odd) { background: #eee; }
+    div#createButton { padding: 10px; background: pink}
+  </style>
 </head>
 <body ng-app="app">
   <div class='content'>
     <div ui-view></div>
   </div>
-  <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
+  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
   <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
   <script type="text/javascript" src="bower_components/phaser/build/phaser.min.js"></script>
-  <script type="text/javascript" src="scripts/ng-game.js"></script>
+  <script type="text/javascript" src="bower_components/angular-socket-io/socket.min.js"></script>
+  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+
 <script type="text/javascript" src="scripts/menu/index.js"></script>
 <script type="text/javascript" src="scripts/menu/menu_controller.js"></script>
 <script type="text/javascript" src="scripts/game/index.js"></script>
 <script type="text/javascript" src="scripts/game/game_controller.js"></script>
 <script type="text/javascript" src="scripts/game/game.js"></script>
+<script type="text/javascript" src="scripts/game/loader.js"></script>
+<script type="text/javascript" src="scripts/game/network.js"></script>
+<script type="text/javascript" src="scripts/ng-game.js"></script>
+
+<script src="/socket.io/socket.io.js"></script>
 
 </body>
 </html>
diff --git a/scripts/game/game.js b/scripts/game/game.js
@@ -436,7 +436,11 @@ playState.prototype = {
 // The first two arguments are the width and the height of the canvas element. In this case 640 x 480 pixels. You can resize this in the gameProperties object above.
 // The third argument is the renderer that will be used. Phaser.AUTO is used to automatically detect whether to use the WebGL or Canvas renderer.
 // The fourth argument is 'gameDiv', which is the id of the DOM element we used above in the index.html file where the canvas element is inserted.
+<<<<<<< ea3fb5d9eafe80441a500bb00cd16728b3a66b3a
 window.createGame = function(scope, players, mapIdm, injector){
+=======
+window.createGame = function(scope, players, mapId, injector){
+>>>>>>> new player info
 
   game = new Phaser.Game(gameProperties.screenWidth, gameProperties.screenHeight, Phaser.AUTO, 'gameDiv');
 

diff --git a/scripts/game/game_controller.js b/scripts/game/game_controller.js
@@ -1,10 +1,21 @@
 angular.module('app.game')
-.controller('GameController', function() {
-
+.controller('GameController', function($scope, mySocket) {
+  mySocket.then(function(socket) {
+    console.log("?????????Socket??????????");
+    console.log(socket);
+    socket.on('gameUpdated:add', function(data){
+      console.log(">><><><><><><><><><");
+    })
+  });
 })
 .directive('gameCanvas', function($injector) {
   var linkFn = function(scope, ele, attrs) {
-    // link Function
+    console.log("create game");
+    createGame(scope, scope.players, scope.mapId, $injector);
+    console.log("=============scope==============");
+    console.log(scope);
+    console.log("=============scope==============");
+
   };
 
   return {

diff --git a/scripts/game/index.js b/scripts/game/index.js
@@ -8,7 +8,7 @@ angular.module('app.game', [])
     })
    .state('game.play', {
       url: '/id',
-      template: '<div><div id="gameCanvas"></div></div>',
+      template: '<div game-canvas></div>',
       controller: 'GameController'
     })
 });
diff --git a/scripts/game/loader.js b/scripts/game/loader.js
@@ -0,0 +1,30 @@
+angular.module('app.loader', [])
+.provider('ioLoader', function() {
+  this.scriptUrl = window.location.origin+'/socket.io/socket.io.js';
+
+  this.$get = function($window, $document, $q) {
+    var defer = $q.defer(), scriptUrl = this.scriptUrl;
+
+    return {
+      done: function(){
+        var onScriptLoad=function(){return defer.resolve($window.io);};
+        console.log("loader --- done");
+        if($window.io) { onScriptLoad(); } else {
+          var scriptTag = $document[0].createElement('script');
+          scriptTag.type = 'text/javascript';
+          scriptTag.async = true;
+          scriptTag.src = scriptUrl;
+          scriptTag.onreadystatechange = function () {
+            if (this.readyState === 'complete') {
+              onScriptLoad();
+            }
+          };
+          scriptTag.onload = onScriptLoad;
+          $document[0].getElementsByTagName('head')[0]
+            .appendChild(scriptTag);
+        }
+        return defer.promise;
+      }
+    };
+  };
+});
diff --git a/scripts/game/network.js b/scripts/game/network.js
@@ -0,0 +1,12 @@
+angular.module('app.network', [])
+.factory('mySocket', function(ioLoader, $q, socketFactory) {
+  var mySocket = $q.defer();
+  ioLoader.done().then(function(io) {
+    var myIoSocket = io.connect(window.location.hostname);
+    var aSock = socketFactory({
+      ioSocket: myIoSocket
+    });
+    mySocket.resolve(aSock);
+  });
+  return mySocket.promise;
+});
diff --git a/scripts/menu/main.html b/scripts/menu/main.html
@@ -1,11 +1,15 @@
 <div>
-  <div class="panel play" 
+  <div class="panel play"
     ng-repeat="room in ctrl.rooms track by room.id"
     ui-sref='game.play({id: room.id})'>
     <span ng-bind="room.players.length"></span> Players
   </div>
-  <div class="panel create" 
+  <div id="createButton" class="panel create"
     ui-sref='game.play({id: ctrl.createId()})'>
     <a>Create a game</a>
   </div>
+  <ul id="messages"></ul>
+  <form action="">
+    <input id="m" autocomplete="off" /><button>Send</button>
+  </form>
 </div>
diff --git a/scripts/menu/menu_controller.js b/scripts/menu/menu_controller.js
@@ -1,5 +1,16 @@
 angular.module('app.menu')
 .controller('MenuController', function() {
   var ctrl = this;
-
+  var socket = io();
+  $('form').submit(function(){
+    socket.emit('chat message', $('#m').val());
+    $('#m').val('');
+    return false;
+  });
+  socket.on('chat message', function(msg){
+    $('#messages').append($('<li>').text(msg));
+  });
+  socket.on('gameUpdated:add', function(data){
+    $('#messages').append($('<li>').text("A NEW PLAYER JOINED THE GAME: " + data.player.id));
+  });
 });
diff --git a/scripts/ng-game.js b/scripts/ng-game.js
@@ -1,5 +1,8 @@
 angular.module('app', [
   'ui.router',
+  'btford.socket-io',
   'app.menu',
-  'app.game'
+  'app.game',
+  'app.network',
+  'app.loader'
 ]);
diff --git a/server/routes/io.js b/server/routes/io.js
@@ -15,7 +15,7 @@ module.exports = (function(app, io) {
     var player = new Player({ id: socket.id });
     g.players.push(player);
     console.log("Player: " + player.id);
-    this.emit('gameUpdated:add', {player: player.id});
+    this.emit('gameUpdated:add', {player: player});
     socket.on('newPlayer', onNewPlayer);
   });