text: app.controller('indexController',['$scope', 'indexFactory', 'configFactory', ($scope, indexFactory, configFactory) =>{
      $scope.messages = [];
      $scope.players = { };
      $scope.init = () => {
          const username = prompt('Please enter username');
          if (username)
              return initSocket(username);
          else
              return false;
      };
  
      function scrollTop() {
          const element = document.getElementById('chat-area');
          setTimeout(() => {
              element.scrollTop = element.scrollHeight;
          })
      }
      function showBubble(id, message) {
          $('#'+ id).find('.message').show().html(message);
          setTimeout(() => {
              $('#'+ id).find('.message').hide();
          },2000);
      }
  
     async function initSocket(username) {
          const connectionOptions = {
              reconnectionAttempts: 3,
              reconnectionDelay: 600
          };
          try{
              const socketUrl = await configFactory.getConfig();
              const socket = await indexFactory.connectSocket(socketUrl.data.socketUrl,connectionOptions);
              socket.emit('newUser', { username });
              socket.on('newUser',(data) => {
                  const messageData = {
                      type: {
                          code: 0, // server or user message
                          message: 1 //login or disconnect message
                      },
                      username: data.username
                  };
                  $scope.messages.push(messageData);
                  $scope.players[data.id] = data;
                  scrollTop();
                  $scope.$apply();
  
              });
              socket.on('initPlayers', (players) => {
                  $scope.players = players;
                  $scope.$apply();
              });
              socket.on('disUser', (data) => {
                  const messageData = {
                      type: {
                          code: 0,
                          message: 0
                      }, // info
                      username: data.username
                  };
                  $scope.messages.push(messageData);
                  scrollTop();
                  delete $scope.players[data.id]
                  $scope.$apply();
              });
              socket.on('animate', (data) => {
                  $('#' + data.socketId).animate({"left":data.x,"top": data.y});
              })
              $scope.onClickPlayer = ($event) => {
                  let animate = false;
                  if (!animate){
                      let x = $event.offsetX;
                      let y = $event.offsetY;
                      socket.emit('animate', {x, y});
                      animate = true;
                      $('#' + socket.id).animate({"left":x,"top": y}, () => {
                          animate = false;
                      });
                  }
  
              };
  
              socket.on('newMessage',(message) => {
                  $scope.messages.push(message);
                  $scope.$apply();
                  showBubble(message.socketId,message.text);
                  scrollTop();
              });
              $scope.newMessage = () => {
                  let message = $scope.message;
                  const messageData = {
                      type: {
                          code: 1, // server or user message
                      },
                      username: username,
                      text: message
                  };
                  $scope.messages.push(messageData);
                  $scope.message = '';
                  socket.emit('newMessage', messageData);
                  showBubble(socket.id,message);
                  scrollTop();
              }
          }
          catch (e) {
              console.log(e);
          }
  
      }
  }]);