hips2/browser.html at master · sondrev/hips2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
  <head>
    <title> Smartphone Browser </title>
  	<script src="/socket.io/socket.io.js"></script>
    <script src="//davidshimjs.github.com/qrcodejs/qrcode.min.js"></script>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  </head>

  <body>
    <canvas id='canvas' width='800' height='800'></canvas>
    <button onclick='moveRight(0);' class='load-image'> Right </button>
    <script>
      var io = io.connect();
      var players = {}
      var numPlayers = 0;

      //SPILL ENGINE
      var circle = [];
      var circles= 5;
      var logger;
      var loggerLines=10;
      var stage;
      var log = [];

      function moveRight(playerId) { c = circle[playerId]; c.x += 20; logText('Player ' + playerId + ' moved right'); }
      function moveLeft(playerId) { c = circle[playerId]; c.x -= 20; logText('Player ' + playerId + ' moved left'); }
      function logText(text) {
        log.push(text);
        if (log.length>loggerLines) log.shift();
        logger.text='';
        for (var i=0;i<log.length;i++) {
          logger.text+=getFormattedDate()+': '+log[i]+'\n';
        }
      }

      function getFormattedDate() {
        var date = new Date();
        var str = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        return str;
      }

      function init() {
        stage = new createjs.Stage("canvas");

        for (var i=0;i<circles;i++) {
          c= new createjs.Shape();
          c.graphics.beginFill("#"+((1<<24)*Math.random()|0).toString(16)).drawCircle(0, 0, 25);
          c.x = 50;
          c.y = 50+i*100
          stage.addChild(c);
          circle[i]=c;
        }

        logger = new createjs.Text("", "20px Arial", "#ff7700");
        logger.x = 50;
        logger.y = 600;
        logger.textBaseline = "alphabetic";
        stage.addChild(logger);
        logText('Game inited')

        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);

      }


      var qr = document.createElement('div');

      qr.id = "qr";
      document.body.appendChild(qr);

      io.on('connect', function() {
        logText('trying to connect..');
        io.emit('game_connect')
      });

      var rightListener = function (socketId) { moveRight(players[socketId].playerId); }
      var leftListener = function (socketId) { moveLeft(players[socketId].playerId); }

      io.on('move_right', rightListener);
      io.on('move_left', leftListener);

      var game_connected = function() {
        logText("Connected to server")
        var url = "http://hips2.herokuapp.com?id=" + io.id;

        //USED FOR LOCALHOST TESTING (Kristian's IP)
        //var url = "http://129.177.118.167:3000/?id=" + io.id;

        //Add QR-code
        console.log(url);
        var qr_code = new QRCode("qr");
        qr_code.makeCode(url);

        io.removeListener('game_connected', game_connected);
      };

      io.on('game_connected',game_connected);

      io.on('controller_connected', function(socket){
          if (!players[socket]) {
            logText("controller connected: "+socket);

            players[socket] = {
              socketId: socket,
              playerId: numPlayers,
              circle: circle[numPlayers]
            };

            numPlayers++;
          } else {
            logText("Player with socket id " + socket + " reconnected")
          }
        });


      io.on('controller_disconnected', function(socket){
          console.log(socket);
          logText("controller disconnected: "+socket);

        });

      init();
    </script>
  </body>
</html>