SAM | Klient (09.06.2017)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Multiplayer Game</title>
</head>
<body>
  <!-- Include latest version of PIXI.js from the web -->
  <!-- <script src="https://pixijs.download/release/pixi.min.js"></script> -->
  <!-- Include PIXI localy (v4.5.1) -->
  <script src="pixi.js/pixi.min.js"></script>
    <script>
    //var wsUri = "ws://10.104.111.83:8080/EchoChamber/echo/1";
    var wsUri = "ws://localhost:8080/EchoChamber/echo/1";
      var rAFID;
      var playerArray = new Array()
        var startGRY = 0;
      var webSocket;
        var inter;
        var inter1;
      var degreesPerSecond = 30;
      var previousTime = 0;
        var pozycjeGRACZY;
        var konwersja;
      var whichPlayerAmI = 0;

      var playerMoveLeft, playerMoveRight, playerMoveUp, playerMoveDown;
      var c;
      var app

      var playerArray = new Array()
      var projectilesArray = new Array();
      var scoreArray = new Array();
      var scoreDisplayMessages = new Array();

      var left, right;

      function init()
      {

        testWebSocket();

        app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
        document.body.appendChild(app.view);

        setUpScores();
        setUpKeyboard();
        setUpSprites();


        rAFID = requestAnimationFrame(draw)

        // // Listen for animate update
        // app.ticker.add(function(delta) {
        // // just for fun, let's rotate mr rabbit a little
        // // delta is 1 if running at 100% performance
        // // creates frame-independent tranformation
        // bunny.rotation += 0.1 * delta;
        // });
      }

        ///////////////////////////NOWE///////////////////
        function testWebSocket()
        {
            websocket = new WebSocket(wsUri);

            //Two ways of registering events, addEventListener is prefered - can attach multiple handlers to single event
            // websocket.onopen = function(evt) { onOpen(evt) };
            // websocket.onmessage = function(evt) { onMessage(evt) };
            // websocket.onclose = function(evt) { onClose(evt) };
            // websocket.onerror = function(evt) { onError(evt) };

            websocket.addEventListener("open", onOpen, false);
            websocket.addEventListener("close", onClose, false);
            websocket.addEventListener("message", onMessage, false);
            websocket.addEventListener("error", onError, false);

        }

        function onError(evt)
        {
            writeToConsole(evt.data);
        }

        function onMessage(evt)
        {
            c = JSON.parse(evt.data);


                if (c.Info == "start" ) {
                    whichPlayerAmI = c.Gracz;
                    writeToConsole(c.Gracz);
                    writeToConsole("przypisano gracza");
                    startGRY=1;;
                }


            /*if ((evt.data == 0) || (evt.data == 1) || (evt.data == 2) || (evt.data == 3))
            whichPlayerAmI = evt.data;
            if (evt.data == "start") {
                startGRY = 1;


            } */
            if (startGRY == 1) {
                if (c.Info == "ruch" ) {
                    if (c.Gracz == "0") {
                        playerArray[0].x = c.x;
                        playerArray[0].y = c.y;
                    }
                    if (c.Gracz == "1") {
                        playerArray[1].x = c.x;
                        playerArray[1].y = c.y;
                    }
                    if (c.Gracz == "2") {
                        playerArray[2].x = c.x;
                        playerArray[2].y = c.y;
                    }
                    if (c.Gracz == "3") {
                        playerArray[3].x = c.x;
                        playerArray[3].y = c.y;
                    }
                }
            }


            //writeToConsole(evt.data);
        }

        function doSend(message) {

            //writeToConsole("SENT: " + message);
            websocket.send(message);
        }

        function getPosition() {
            pozycjeGRACZY = { "Info" : "ruch", "Gracz" : whichPlayerAmI, "x" : playerArray[whichPlayerAmI].x, "y" : playerArray[whichPlayerAmI].y}
            konwersja = JSON.stringify(pozycjeGRACZY);
        }

        function writeToConsole(message)
        {
            console.log(message);
        }

        function onOpen(evt)
        {
            var start = { "Info" : "gotowy"}
            var startJSON = JSON.stringify(start);
            writeToConsole("CONNECTED");
            //doSend("halo");
            doSend(startJSON);
        }

        function onClose(evt)
        {
            writeToConsole("DISCONNECTED");
        }
        ///////////////////////////NOWE///////////////////
        function draw(timestamp) {

        var nowTime = window.performance.now();
        var delta = nowTime - previousTime;

        updateCollisions();

        var radiansPerSecond = degreesPerSecond * 3.1415/180;
        for(i=0; i<4; i++)
        {
          //playerArray[i].rotation += (radiansPerSecond * (delta/1000) );

          playerArray[i].x += playerArray[i].vx;
          playerArray[i].y += playerArray[i].vy;

                    scoreArray[i] = Math.round(playerArray[i].rotation);

        }

        updateScores();


        requestAnimationFrame(draw);
        previousTime = window.performance.now();

         if (startGRY == 1) {

         getPosition();
         doSend(konwersja);
                //inter1 = setInterval (function () { getPosition(); }, 20);
                //inter = setInterval (function () { doSend(konwersja); }, 30);
        }
      }

        function setUpScores()
        {
          for( i=0; i< 4; i++)
            {
                scoreArray[i] = 0;
                scoreDisplayMessages[i] = new PIXI.Text("P" + i + ": " + scoreArray[i],
                          {fontFamily: "Arial", fontSize: 32, fill: "white"});
                scoreDisplayMessages[i].position.set((i* (0.25) * app.renderer.width),0 );
                app.stage.addChild(scoreDisplayMessages[i]);

            }


        }

        function setUpSprites()
        {
          // create a new Sprite from an image path
             playerArray.push (PIXI.Sprite.fromImage('explorer.png' ));
             playerArray.push (PIXI.Sprite.fromImage('Wizard_Base.png'));
             playerArray.push (PIXI.Sprite.fromImage('Rogue_Base.png'));
             playerArray.push (PIXI.Sprite.fromImage('Templar_Base.png'));

             projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
             projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
             projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
             projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));


            // 4 players and 4 bullets - simplification
             for ( i=0; i<4; i++)
             {
               app.stage.addChild(playerArray[i]);
               playerArray[i].anchor.set(0.5);
               playerArray[i].scale.set(2,2);
               playerArray[i].vx = 0;
               playerArray[i].vy = 0;

               projectilesArray[i].anchor.set(0.5);
               projectilesArray[i].scale.set(2,2);
               projectilesArray[i].vx = 0;
               projectilesArray[i].vy = 0;
               projectilesArray[i].x = -100;
               projectilesArray[i].y = -100;


             }


             playerArray[0].x = app.renderer.width / 4;
             playerArray[0].y = app.renderer.height / 4;

             playerArray[1].x = app.renderer.width * 3/4;
             playerArray[1].y = app.renderer.height / 4;

             playerArray[2].x = app.renderer.width / 4;
             playerArray[2].y = app.renderer.height * 3/4;

             playerArray[3].x = app.renderer.width * 3/4;
             playerArray[3].y = app.renderer.height * 3/4;
        }

        function setUpKeyboard() {
       playerMoveLeft = keyboard(65);
         playerMoveRight = keyboard(68);
         playerMoveUp = keyboard(87);
         playerMoveDown = keyboard(83);


        //Right
        playerMoveRight.press = function() {
          playerArray[whichPlayerAmI].vx = 5;
           playerArray[whichPlayerAmI].vy = 0;
        };
        playerMoveRight.release = function() {
          if (!playerMoveLeft.isDown &&  playerArray[whichPlayerAmI].vy === 0) {
             playerArray[whichPlayerAmI].vx = 0;
          }
        };

      //Left arrow key `press` method
        playerMoveLeft.press = function() {
           playerArray[whichPlayerAmI].vx = -5;
           playerArray[whichPlayerAmI].vy = 0;
        };

        //Left arrow key `release` method
        playerMoveLeft.release = function() {
          if (!playerMoveRight.isDown &&  playerArray[whichPlayerAmI].vy === 0) {
             playerArray[whichPlayerAmI].vx = 0;
          }
        };

        //Up
        playerMoveUp.press = function() {
          playerArray[whichPlayerAmI].vy = -5;
          playerArray[whichPlayerAmI].vx = 0;
        };
        playerMoveUp.release = function() {
          if (!playerMoveDown.isDown && playerArray[whichPlayerAmI].vx === 0) {
            playerArray[whichPlayerAmI].vy = 0;
          }
        };

        //Down
        playerMoveDown.press = function() {
          playerArray[whichPlayerAmI].vy = 5;
          playerArray[whichPlayerAmI].vx = 0;
        };
        playerMoveDown.release = function() {
          if (!playerMoveUp.isDown && playerArray[whichPlayerAmI].vx === 0) {
            playerArray[whichPlayerAmI].vy = 0;
          }
        };
    }


    //run the function only after the whole page has been loaded
    window.addEventListener("load", init, false);


    function keyboard(keyCode)
    {
      var key = {};
      key.code = keyCode;
      key.isDown = false;
      key.isUp = true;
      key.press = undefined;
      key.release = undefined;
      //The `downHandler`
      key.downHandler = function(event) {
        if (event.keyCode === key.code) {
          if (key.isUp && key.press) key.press();
          key.isDown = true;
          key.isUp = false;
        }
        event.preventDefault();
      };

      //The `upHandler`
      key.upHandler = function(event) {
        if (event.keyCode === key.code) {
          if (key.isDown && key.release) key.release();
          key.isDown = false;
          key.isUp = true;
        }
        event.preventDefault();

      };

      //Attach event listeners
      window.addEventListener(
        "keydown", key.downHandler.bind(key), false
      );
      window.addEventListener(
        "keyup", key.upHandler.bind(key), false
      );
      return key;
    }

    function updateScores()
{
  //TODO: CHANGE IMPLEMENTATION
  for( i=0; i< 4; i++)
        {
            scoreDisplayMessages[i].text = "P" + i + ": " + scoreArray[i];
        }
}

function updateCollisions()
{
  //UPDATING COLLISIONS - TODO
}

    window.addEventListener("load", init, false);

                //if (startGRY == 1) {
                        //var inter = setInterval (function () { doSend("kupa"); }, 1000);

                //var c = JSON.parse(evt.data);
            //}


  </script>
</body>
</html>