magicworld

2020-05-28 10:46:51 +00:00
commit cfb1b01b3c
--- a/testing/magicworld/web/.well-known/acme-challenge/test.html
+++ b/testing/magicworld/web/.well-known/acme-challenge/test.html
--- a/testing/magicworld/web/css/fonts.css
+++ b/testing/magicworld/web/css/fonts.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'komtit';
+  src: url(/fonts/KOMTITT_.ttf);
+}
+
+@font-face {
+  font-family: 'oswald';
+  src: url(/fonts/Oswald-Regular.ttf);
+}
--- a/testing/magicworld/web/css/game.css
+++ b/testing/magicworld/web/css/game.css
@@ -0,0 +1,91 @@
+body{
+  background-color: black;  
+  overflow: hidden;
+  font-family: 'komtit';
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+#loading{
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(/img/logos/sword2.png);
+  background-position-x: 50%;
+  background-position-y: 50%;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+  animation-name: rotate;
+  animation-duration:2s;
+  animation-iteration-count:infinite;
+  animation-timing-function:linear;  
+}
+
+@keyframes rotate {
+  from {-webkit-transform:rotate(0deg);}
+  to {  -webkit-transform:rotate(360deg);}
+}
+
+.guiContanier{
+  position: fixed;
+  z-index: 1;
+  background: gray;
+  padding: 5px;
+  border: 2px solid black;
+  opacity: 0.6;  
+  filter: alpha(opacity=60); /* For IE8 and earlier */
+}
+
+.guiContanier:hover{
+  opacity: 1;
+  filter: alpha(opacity=100); /* For IE8 and earlier */
+}
+
+#chat{
+  width: 20vw;
+  min-width: 257px;
+  bottom: 20px;
+  left: 20px;
+}
+
+#chatOutput{
+  margin-bottom: 5px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  word-break: break-all;
+  height: 20vh;
+}
+
+
+.output{
+  width: 100%;      
+  font-family: "oswald";
+  font-size: 14px;
+}
+
+#score{
+  width: 15vw;
+  min-width: 144px;
+  top: 20px;
+  right: 20px;
+}
+#scoreOutput{
+  height: auto;
+  white-space: pre;
+}
+
+@media (max-width: 1000px) {
+  .guiContanier {
+    zoom: 0.5;
+  }
+
+  #score{
+    width: 50vw;
+  }
+}
--- a/testing/magicworld/web/css/main.css
+++ b/testing/magicworld/web/css/main.css
@@ -0,0 +1,37 @@
+body{
+  background-image: url("/img/home.jpg");
+  background-position: center center; 
+  background-size: cover;
+  background-attachment: fixed;
+  margin-bottom: 0px;
+  
+}
+
+.container{
+  background: rgba(255, 255, 255, 0.8);
+  min-height: calc(100vh - 20px);  
+  padding-top: 10vw;
+  padding-left: 10vw;
+  padding-right: 10vw;
+  padding-bottom: 10vw;
+  -webkit-box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.75);
+  /*border-radius: 50% 0 50% 0;*/
+}
+.container h1{
+  margin-bottom: 5vw;
+}
+.container form{
+  margin-bottom: 5vw;
+}
+
+#music{
+  margin-top: -7vw;
+  margin-right: -5vw;
+}
+
+p{
+  font-family: "oswald";
+  text-align:  justify;
+}
--- a/testing/magicworld/web/fonts/KOMTITA_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITA_.ttf
--- a/testing/magicworld/web/fonts/KOMTITBR.ttf
+++ b/testing/magicworld/web/fonts/KOMTITBR.ttf
--- a/testing/magicworld/web/fonts/KOMTITE_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITE_.ttf
--- a/testing/magicworld/web/fonts/KOMTITG_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITG_.ttf
--- a/testing/magicworld/web/fonts/KOMTITK_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITK_.ttf
--- a/testing/magicworld/web/fonts/KOMTITP_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITP_.ttf
--- a/testing/magicworld/web/fonts/KOMTITS_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITS_.ttf
--- a/testing/magicworld/web/fonts/KOMTITTL.ttf
+++ b/testing/magicworld/web/fonts/KOMTITTL.ttf
--- a/testing/magicworld/web/fonts/KOMTITT_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITT_.ttf
--- a/testing/magicworld/web/fonts/KOMTITWR.ttf
+++ b/testing/magicworld/web/fonts/KOMTITWR.ttf
--- a/testing/magicworld/web/fonts/KOMTITW_.ttf
+++ b/testing/magicworld/web/fonts/KOMTITW_.ttf
--- a/testing/magicworld/web/fonts/KOMTIT__.ttf
+++ b/testing/magicworld/web/fonts/KOMTIT__.ttf
--- a/testing/magicworld/web/fonts/Oswald-Bold.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Bold.ttf
--- a/testing/magicworld/web/fonts/Oswald-BoldItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-BoldItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-Demi-BoldItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Demi-BoldItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-DemiBold.ttf
+++ b/testing/magicworld/web/fonts/Oswald-DemiBold.ttf
--- a/testing/magicworld/web/fonts/Oswald-Extra-LightItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Extra-LightItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-ExtraLight.ttf
+++ b/testing/magicworld/web/fonts/Oswald-ExtraLight.ttf
--- a/testing/magicworld/web/fonts/Oswald-Heavy.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Heavy.ttf
--- a/testing/magicworld/web/fonts/Oswald-HeavyItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-HeavyItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-Light.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Light.ttf
--- a/testing/magicworld/web/fonts/Oswald-LightItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-LightItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-Medium.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Medium.ttf
--- a/testing/magicworld/web/fonts/Oswald-MediumItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-MediumItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-Regular.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Regular.ttf
--- a/testing/magicworld/web/fonts/Oswald-RegularItalic.ttf
+++ b/testing/magicworld/web/fonts/Oswald-RegularItalic.ttf
--- a/testing/magicworld/web/fonts/Oswald-Stencil.ttf
+++ b/testing/magicworld/web/fonts/Oswald-Stencil.ttf
--- a/testing/magicworld/web/game.html
+++ b/testing/magicworld/web/game.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>MagicWorld</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+  <meta name="mobile-web-app-capable" content="yes">
+  <link rel="stylesheet" href="css/fonts.css" />
+  <link rel="stylesheet" href="libs/bootstrap.min.css">
+  <link rel="stylesheet" href="css/game.css" />
+  <script src="libs/pixi.min.js"></script>
+  <script src="libs/jquery.min.js"></script>
+  <script src="libs/bootstrap.min.js"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ice/3.7.1/Ice.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ice/3.7.1/Glacier2.js"></script>
+
+  <script src="js/functions.js"></script>
+  <script src="js/mosters.js"></script>
+  <script src="js/game.js"></script>  
+  <script src="js/connect.js"></script>
+</head>
+
+<body>  
+  <div id="loading">
+  </div>
+  <div id="chat" class="guiContanier">
+    <div id="chatOutput" class="form-control output"></div>
+    <input id="chatInput" class="form-control">
+  </div>
+  <div id="score" class="guiContanier">
+    <div id="scoreOutput" class="form-control output"></div>    
+  </div>
+</body>
+</html>
--- a/testing/magicworld/web/img/cosas/a.jpg
+++ b/testing/magicworld/web/img/cosas/a.jpg
--- a/testing/magicworld/web/img/cosas/gui/heart.png
+++ b/testing/magicworld/web/img/cosas/gui/heart.png
--- a/testing/magicworld/web/img/cosas/llanura-puszta_0.jpg
+++ b/testing/magicworld/web/img/cosas/llanura-puszta_0.jpg
--- a/testing/magicworld/web/img/cosas/pj/gato.png
+++ b/testing/magicworld/web/img/cosas/pj/gato.png
--- a/testing/magicworld/web/img/cosas/pj/pnj1.png
+++ b/testing/magicworld/web/img/cosas/pj/pnj1.png
--- a/testing/magicworld/web/img/cosas/pj/pnj2.png
+++ b/testing/magicworld/web/img/cosas/pj/pnj2.png
--- a/testing/magicworld/web/img/cosas/pj/pnj3.png
+++ b/testing/magicworld/web/img/cosas/pj/pnj3.png
--- a/testing/magicworld/web/img/cosas/pj/pnj4.png
+++ b/testing/magicworld/web/img/cosas/pj/pnj4.png
--- a/testing/magicworld/web/img/cosas/pj/pnj5.png
+++ b/testing/magicworld/web/img/cosas/pj/pnj5.png
--- a/testing/magicworld/web/img/cosas/shop.jpg
+++ b/testing/magicworld/web/img/cosas/shop.jpg
--- a/testing/magicworld/web/img/gui/heart.png
+++ b/testing/magicworld/web/img/gui/heart.png
--- a/testing/magicworld/web/img/home.jpg
+++ b/testing/magicworld/web/img/home.jpg
--- a/testing/magicworld/web/img/logos/magicworld.jpg
+++ b/testing/magicworld/web/img/logos/magicworld.jpg
--- a/testing/magicworld/web/img/logos/magicworldnobeta.jpg
+++ b/testing/magicworld/web/img/logos/magicworldnobeta.jpg
--- a/testing/magicworld/web/img/logos/sword.png
+++ b/testing/magicworld/web/img/logos/sword.png
--- a/testing/magicworld/web/img/logos/sword2.png
+++ b/testing/magicworld/web/img/logos/sword2.png
--- a/testing/magicworld/web/img/map01/front.png
+++ b/testing/magicworld/web/img/map01/front.png
--- a/testing/magicworld/web/img/map01/landscape.jpg
+++ b/testing/magicworld/web/img/map01/landscape.jpg
--- a/testing/magicworld/web/img/map01/tree.png
+++ b/testing/magicworld/web/img/map01/tree.png
--- a/testing/magicworld/web/img/map01/tree2.png
+++ b/testing/magicworld/web/img/map01/tree2.png
--- a/testing/magicworld/web/img/map01/tree_old.png
+++ b/testing/magicworld/web/img/map01/tree_old.png
--- a/testing/magicworld/web/img/moster/boos3.png
+++ b/testing/magicworld/web/img/moster/boos3.png
--- a/testing/magicworld/web/img/moster/boss.png
+++ b/testing/magicworld/web/img/moster/boss.png
--- a/testing/magicworld/web/img/moster/boss2.png
+++ b/testing/magicworld/web/img/moster/boss2.png
--- a/testing/magicworld/web/img/moster/boss4.png
+++ b/testing/magicworld/web/img/moster/boss4.png
--- a/testing/magicworld/web/img/moster/boss5.png
+++ b/testing/magicworld/web/img/moster/boss5.png
--- a/testing/magicworld/web/img/moster/boss6.png
+++ b/testing/magicworld/web/img/moster/boss6.png
--- a/testing/magicworld/web/img/moster/boss7.png
+++ b/testing/magicworld/web/img/moster/boss7.png
--- a/testing/magicworld/web/img/moster/moster1.png
+++ b/testing/magicworld/web/img/moster/moster1.png
--- a/testing/magicworld/web/img/moster/moster2.png
+++ b/testing/magicworld/web/img/moster/moster2.png
--- a/testing/magicworld/web/img/moster/moster3.png
+++ b/testing/magicworld/web/img/moster/moster3.png
--- a/testing/magicworld/web/img/moster/moster4.png
+++ b/testing/magicworld/web/img/moster/moster4.png
--- a/testing/magicworld/web/img/moster/moster5.png
+++ b/testing/magicworld/web/img/moster/moster5.png
--- a/testing/magicworld/web/img/moster/orc_stop_for_door.gif
+++ b/testing/magicworld/web/img/moster/orc_stop_for_door.gif
--- a/testing/magicworld/web/img/moster/zeta1.jpg
+++ b/testing/magicworld/web/img/moster/zeta1.jpg
--- a/testing/magicworld/web/img/player.png
+++ b/testing/magicworld/web/img/player.png
--- a/testing/magicworld/web/index.html
+++ b/testing/magicworld/web/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>MagicWorld</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="libs/bootstrap.min.css">
+    <link rel="stylesheet" href="css/fonts.css" />
+    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+    <script src="libs/pixi.min.js"></script>
+    <script src="libs/jquery.min.js"></script>
+    <script src="libs/bootstrap.min.js"></script>
+    <script src="js/functions.js"></script>
+    <script src="js/index.js"></script>
+</head>
+
+<body>
+  <div class="container">
+    <div id="music" class="float-right">
+        <a id="musicPlay" class="btn btn-info d-none" onclick="play()"><i class="fas fa-music"></i>&nbsp;&nbsp;<i class="fas fa-play"></i></a>
+        <a id="musicStop" class="btn btn-info" onclick="stop()"><i class="fas fa-music"></i>&nbsp;&nbsp;<i class="fas fa-stop"></i></a>
+    </div>
+    <div class="logo col-12">
+      <img src="/img/logos/magicworldnobeta.jpg" class="img-fluid">
+    </div>
+    <h1 class="text-center">0.4.1</h1>
+    <form method="GET" action="game.html">      
+      <div class="row d-none">
+        <div class="col alert alert-danger text-center">Estamos en mantenimiento, perdonen las molestias....</div>
+      </div>
+      <div class="form-row">
+        <div class="col"></div>
+        <div class="col">
+          <input id="username" name="username" class="form-control" placeholder="Nick">
+        </div>
+        <div class="col">
+          <input type="submit" class="btn btn-primary" value="Play Game!!!">
+        </div>
+        <div class="col"></div>
+      </div>
+    </form>
+    <div>
+      <p>
+        En estos momentos "Magic World" es un proyecto desarollado en ratos libres, sin fines de lucro, solo por amor a las tecnologías y los videojuegos. 
+      </p>
+      <p>
+        Todo el trabajo esta realizado en nuestros ratos libres y vacaciones. Si juegas y te gusta tanto que quieres ayudar a su creación. De momento lo mejor que puedes hacer es invitarnos a una cerveza si te encuentras con alguno de nosotros.
+      </p>
+      <p>
+        En el caso de que el proyecto se completara y los jugadores lo apoyaran. Se buscaría métodos de financiar el servicio y las actualizaciones.
+      </p>
+      <p>
+        Un cordial saludo.
+      </p>
+      <!--
+      <p class="text-center">
+        <b>Staff</b> 
+        <ul>
+          <li>
+            <b>Gore</b>
+            <ul>
+              <li>Idea inicial</li>
+              <li>desarrollo de ideas</li>
+              <li>Desarollador de cliente</li>
+            </ul>
+          </li> 
+          <li><b>Cabesa Nuklear</b>
+            <ul>
+              <li>Apoyo moral</li>
+              <li>Encargado de seguridad</li>
+              <li>Desarollador de backend</li>
+            </ul>
+          </li> 
+          <li><b>Ninguno</b>
+            <ul>
+                <li>Apoyo moral</li>
+                <li>Desarollador de cliente</li>
+                <li>Desarollador de backend</li>
+            </ul>
+          </li>
+          <li><b>LangostiNo</b>
+            <ul>
+              <li>Apoyo moral</li>
+              <li>Diseño y arte grafico</li>
+              <li>Coordinador de testing</li>
+            </ul>
+          </li> 
+        </ul>
+      </p>-->
+    </div>
+  </div>
+</body>
+
+</html>
+
+<!---
+Komika Title
+la de abajo
+oswarld la de arriba(editado)
+-->
--- a/testing/magicworld/web/js/connect.js
+++ b/testing/magicworld/web/js/connect.js
@@ -0,0 +1,114 @@
+var socket;
+
+function init() {
+  var server = "mw.hatthieves.es";
+  var host = "wss://" + server + "/?channelName=" + channel + "&username=" + userName;
+  try {
+    socket = new WebSocket(host);
+    log('WebSocket - status ' + socket.readyState);
+    socket.onopen = function (msg) {
+      log("Welcome - status " + this.readyState);
+    };
+    socket.onmessage = function (msg) {
+      data = msg.data;
+      var username = data.split(" ")[0];
+      var type = data.split(" ")[1];
+      switch (type) {
+        case "create":
+          map = JSON.parse(data.split(" ")[2]);
+          map.players = {};
+          run(socket);
+          break;
+
+        case "left":
+          if (map.players[username]) {
+            map.players[username].deleted = true;
+            $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " left the game.<br>");
+            $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+          }
+          break;
+
+        case "chat":
+          $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + ": " + data.replace(username + " chat ", "") + "<br>");
+          $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+          break;
+
+        default:
+          if (username != userName) {
+            if (!map.players) {
+              map.players = {};
+            }
+
+            if (!map.players[username]) {
+              map.players[username] = {};
+            }            
+            let jsonData = JSON.parse(data.replace(username + " ", ""));
+            if (!map.players[username].item) {
+              map.players[username].deleted = false;
+              map.players[username].landscapeTexture = new PIXI.Texture.fromImage(map.player.url);
+              map.players[username].texture = new PIXI.Texture(map.players[username].landscapeTexture);
+              map.players[username].item = new PIXI.Sprite(map.players[username].texture);
+              map.players[username].nameStyle = new PIXI.TextStyle({
+                fontFamily: 'komtit',
+                fontSize: 24,
+                fill: ['#FFF1E1', '#FFF1E1'], // gradient
+                stroke: '#35130B',
+                strokeThickness: 5,
+                dropShadow: true,
+                dropShadowColor: '#724833',
+                dropShadowBlur: 4,
+                dropShadowAngle: Math.PI / 2,
+                dropShadowDistance: 1,
+                wordWrap: false,
+                wordWrapWidth: 440,
+                padding: 20
+              });
+              map.players[username].username = username;
+              map.players[username].name = new PIXI.Text([username], map.players[username].nameStyle);
+              $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " join the game.<br>");
+              $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+            }
+            map.players[username].position = jsonData.position;
+            map.players[username].direction = jsonData.direction;
+            map.players[username].state = jsonData.state;
+            map.players[username].scale = jsonData.scale;
+            map.players[username].lives = jsonData.lives;
+            map.players[username].score = jsonData.score;
+          } else {
+            let jsonData = JSON.parse(data.replace(username + " ", ""))
+            position = jsonData.position;
+            scale = jsonData.scale;
+            lives = jsonData.lives;
+            score = jsonData.score;
+          }
+          break;
+      }
+
+    };
+    socket.onclose = function (msg) {
+      reconnect();
+    };
+
+  } catch (ex) {
+    log(ex);
+  }
+}
+
+function quit() {
+  if (socket != null) {
+    log("Goodbye!");
+    socket.close();
+    socket = null;
+  }
+}
+
+function reconnect() {
+  quit();
+  init();
+}
+
+function log(msg) {
+  console.log(msg);
+}
+
+init();
--- a/testing/magicworld/web/js/connect_n.js
+++ b/testing/magicworld/web/js/connect_n.js
@@ -0,0 +1,172 @@
+(function () {
+  $(document).ready(function () {
+
+    class MWCallbackI extends MW.MWCallback {
+      message(data) {
+        var username = data.split(" ")[0];
+        if (data.split(" ")[1] == "left") {
+          if (map.players[username]) {
+            map.players[username].deleted = true;            
+            $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " left the game.<br>");
+            $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+          }
+        } else if (data.split(" ")[1] == "chat") {
+          $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + ": " + data.replace(username + " chat ", "") + "<br>");
+          $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+        } else {
+          if (username != userName) {
+            if (!map.players[username]) {
+              map.players[username] = {};
+            }
+            let jsonData = JSON.parse(data.replace(username + " ", ""))
+            if (!map.players[username].item) {
+              map.players[username].deleted = false;
+              map.players[username].landscapeTexture = new PIXI.Texture.fromImage(map.player.url);
+              map.players[username].texture = new PIXI.Texture(map.players[username].landscapeTexture);
+              map.players[username].item = new PIXI.Sprite(map.players[username].texture);
+              map.players[username].nameStyle = new PIXI.TextStyle({
+                fontFamily: 'komtit',
+                fontSize: 24,
+                fill: ['#FFF1E1', '#FFF1E1'], // gradient
+                stroke: '#35130B',
+                strokeThickness: 5,
+                dropShadow: true,
+                dropShadowColor: '#724833',
+                dropShadowBlur: 4,
+                dropShadowAngle: Math.PI / 2,
+                dropShadowDistance: 1,
+                wordWrap: false,
+                wordWrapWidth: 440,
+                padding: 20
+              });
+              map.players[username].username = username;
+              map.players[username].name = new PIXI.Text([username], map.players[username].nameStyle);
+              $("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " join the game.<br>");
+              $("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
+            }
+            map.players[username].px = jsonData.px;
+            map.players[username].py = jsonData.py;
+            map.players[username].direction = jsonData.direction;
+            map.players[username].state = jsonData.state;
+            map.players[username].scale = jsonData.scale;
+            map.players[username].score = jsonData.score;            
+          }
+        }
+      }
+    }
+
+    const State = {
+      Disconnected: 0,
+      Connecting: 1,
+      Connected: 2
+    };
+
+    let state = State.Disconnected;
+
+    async function runWithSession(router, session) {
+      try {
+
+        const [timeout, category, adapter] = await Promise.all(
+          [
+            router.getACMTimeout(),
+            router.getCategoryForClient(),
+            router.ice_getCommunicator().createObjectAdapterWithRouter("", router)
+          ]);
+
+        const connection = router.ice_getCachedConnection();
+        if (timeout > 0) {
+          connection.setACM(timeout, undefined, Ice.ACMHeartbeat.HeartbeatAlways);
+        }
+
+        connection.setCloseCallback(() => error("Connection lost"));
+
+        const callback = MW.MWCallbackPrx.uncheckedCast(
+          adapter.add(new MWCallbackI(), new Ice.Identity("callback", category)));
+
+        await session.setCallback(callback);
+
+        state = State.Connected;
+
+        await new Promise(
+          (resolve, reject) => {
+            setTimeout(function () {
+              run(session);
+            }, 2000);
+            $("#chatInput").keypress(
+              e => {
+                if (e.which === 13) {
+                  (async function () {
+                    const message = $(e.currentTarget).val();
+                    $(e.currentTarget).val("");
+                    try {
+                      await session.sendPosition("chat " + message);
+                    } catch (ex) {
+                      reject(ex);
+                    }
+
+                  }());
+                  return false;
+                }
+              });
+
+            $("#signout").click(() => {
+              connection.setCloseCallback(null);
+              resolve();
+            });
+          });
+        await router.destroySession();
+      } finally {
+        state = State.Disconnected;
+      }
+    }
+
+    async function signin() {
+      let communicator;
+      try {
+        state = State.Connecting;
+
+        const port = "4064";
+        if (window.location.hostname == "172.100.0.100") {
+          var hostname = "172.100.0.102";
+        } else if (window.location.hostname == "192.168.1.51") {
+          var hostname = "192.168.1.51";
+        } else {
+          var hostname = "83.57.124.192";
+        }
+
+        const proxy = "MWServer/router:ws -p " + port + " -h " + hostname;
+
+        const initData = new Ice.InitializationData();
+        initData.properties = Ice.createProperties();
+        initData.properties.setProperty("Ice.Default.Router", proxy);
+        communicator = Ice.initialize(initData);
+
+        const router = await Glacier2.RouterPrx.checkedCast(communicator.getDefaultRouter());
+        const session = await router.createSession(userName, "pass");
+        await runWithSession(router, MW.MWSessionPrx.uncheckedCast(session));
+      } catch (ex) {
+
+        if (ex instanceof Glacier2.PermissionDeniedException) {
+          await error("permission denied:\n" + ex.reason);
+        } else if (ex instanceof Glacier2.CannotCreateSessionException) {
+          await error("cannot create session:\n" + ex.reason);
+        } else if (ex instanceof Ice.ConnectFailedException) {
+          await error("connection to server failed");
+        } else {
+          await error(ex.toString());
+        }
+      } finally {
+        if (communicator) {
+          await communicator.destroy();
+        }
+      }
+    }
+
+    async function error(message) {
+      console.log(message);
+      state = State.Disconnected;
+    }
+
+    signin();
+  });
+}());
--- a/testing/magicworld/web/js/functions.js
+++ b/testing/magicworld/web/js/functions.js
@@ -0,0 +1,123 @@
+function percent(m, p){
+  return (m * 100) / p;
+}
+
+function getDirection(mouse, wx, wy){
+  if(mouse.y < window.innerHeight/2){          
+    if(mouse.x < window.innerWidth/2){
+      if(percent(mouse.x, wx) >= percent(mouse.y, wy)){
+        direction = "up";
+      }else{
+        direction = "left";
+      }            
+    }else{
+      if(percent((mouse.x - wx)*-1, wx) >= percent(mouse.y, wy)){
+        direction = "up";
+      }else{
+        direction = "right";
+      }
+    }
+  }else{
+    if(mouse.x < wx/2){
+      if(percent(mouse.x, wx) >= percent((mouse.y - wy) * -1, wy)){
+        direction = "down";
+      }else{
+        direction = "left";
+      }            
+    }else{
+      if(percent((mouse.x - wx)*-1, wx) >= percent((mouse.y - wy) * -1, wy)){
+        direction = "down";
+      }else{
+        direction = "right";
+      }
+    }
+  }   
+  return direction;
+}
+
+function getLive(life){
+  var r = ""
+  for (var i = 0; i < map.player.lives; i++){
+    r += "💗 ";
+  }    
+  return r;
+}
+
+function getParam(name) {
+  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  var results = regex.exec(location.search);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+};
+
+function guid() {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return s4() + s4(); + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+
+function comparePlayer(a, b) {
+  if (a.py > b.py) {
+    return -1;
+  }
+  if (a.py < b.py) {
+    return 1;
+  }  
+  return 0;
+}
+
+function comparePlayerScore(a, b) {
+  if (parseInt(a.score) > parseInt(b.score)) {
+    return -1;
+  }
+  if (parseInt(a.score) < parseInt(b.score)) {
+    return 1;
+  }  
+  return 0;
+}
+
+function is_touch_device() {  
+  try {  
+    document.createEvent("TouchEvent");  
+    return true;  
+  } catch (e) {  
+    return false;  
+  }  
+}
+
+function refreshScore(){
+  
+  setInterval(function(){
+    $("#scoreOutput").html("");
+    var i = 1;
+    var showPlayer = false;
+    if(map.players){
+      Object.values(map.players).sort(comparePlayerScore).map(function(element){
+        if (score > element.score && !showPlayer){
+          $("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + userName + " - " + score + "<br>");
+          i++;
+          showPlayer = true;
+        }
+        if(!element.deleted){
+          $("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + element.username + " - " + element.score + "<br>");
+          i++;
+        }      
+      });
+    }
+    if(!showPlayer){
+      $("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + userName + " - " + score + "<br>");
+    }
+  }, 1000)
+}
+
+function getUserRamdom(){
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return "Guest-" + s4();
+}
--- a/testing/magicworld/web/js/game.js
+++ b/testing/magicworld/web/js/game.js
@@ -0,0 +1,448 @@
+var userName = getParam("username") ? getParam("username") : getUserRamdom(),
+  channel = getParam("map") ? getParam("map") : "forest",
+  score = 0,
+  wx = window.innerWidth,
+  wy = window.innerHeight,
+  wx2 = window.innerWidth / 2,
+  wy2 = window.innerHeight / 2,
+  stateScale = wx < 1000 ? 0.5 : 1,
+  zoom = wx < 1000 ? 2 : 1,
+  scaleDivisor = wx < 1000 ? 1 : 2,
+  map,
+  scale = 0,
+  lives = 0,
+  direction = "down",
+  state = "stop",
+  position = {
+    x: 0,
+    y: 0
+  },
+  vx = 0,
+  vy = 0,
+  key = 0;
+
+window.scrollTo(0, 1);
+
+function run(session) {
+  $(document).ready(function () {
+
+    $("#chatInput").keypress(
+      e => {
+        if (e.which === 13) {
+          (async function () {
+            const message = $(e.currentTarget).val();
+            $(e.currentTarget).val("");
+            session.send(userName + " chat " + message);
+          }());
+          return false;
+        }
+      });
+
+    $(document).keydown(
+      e => {
+        if (e.which === 87) {
+          vy = 100;
+          key + 1;
+        }
+        if (e.which === 83) {
+          vy = -100;
+          key + 1;
+        }
+        if (e.which === 68) {
+          vx = -150;
+          key + 1;
+        }
+        if (e.which === 65) {
+          vx = 150;
+          key + 1;
+        };
+      });
+
+    $(document).keyup(
+      e => {
+        if (e.which === 87) {
+          vy = 0;
+          key -= 1;
+        }
+        if (e.which === 83) {
+          vy = 0;
+          key -= 1;
+        }
+        if (e.which === 68) {
+          vx = 0;
+          key -= 1;
+        }
+        if (e.which === 65) {
+          vx = 0;
+          key -= 1;
+        }
+        key = key > 0 ? key : 0; 
+      });
+
+    // Cargamos variables
+    var Container = PIXI.Container,
+      autoDetectRenderer = PIXI.autoDetectRenderer,
+      loader = PIXI.loader,
+      resources = PIXI.loader.resources,
+      Sprite = PIXI.Sprite,
+      responsiveScale = 1,
+      maxFrame = 7,
+      af = 0,
+      df = 5, // Imagenes por segundo            
+      stop = true,
+      msg = {},
+      touch;
+
+    scale = map.player.scale;
+
+    // Creamos el render (Esto lo cambiare)
+    var renderer = autoDetectRenderer(wx, wy);
+
+    // Lo añadimos
+    document.body.appendChild(renderer.view);
+
+    // Creamos la stage y le añadimos los eventos del raton
+    var stage = new Container();
+
+    stage.scale.set(wx < 1000 ? 0.5 : 1);
+
+    stage.interactive = true;
+    stage.on('mousedown', clickdown)
+      .on('mouseup', clickup)
+      .on('mouseupoutside', clickup)
+      .on('touchstart', clickdown)
+      .on('touchend', clickup)
+      .on('touchendoutside', clickup);
+
+    // Eventos del raton    
+    function clickdown(e) {
+      af = 0;
+      state = "attack";
+      if (is_touch_device()) {
+        touch = e.data.global;
+      }
+    }
+
+    function clickup(e) {
+      af = 0;
+      state = "run";
+    }
+
+    // Caragmos, cetramos y añadimos el fondo.
+    var landscapeTexture = PIXI.Texture.fromImage(map.background.url),
+      texture = new PIXI.Texture(landscapeTexture),
+      background = new PIXI.Sprite(texture);
+
+    bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
+    by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
+    background.position.x = bx;
+    background.position.y = by;
+    stage.addChild(background);
+
+    // Caragmos, cetramos y añadimos el frente.
+    if (map.front) {
+      var landscapeTexture2 = PIXI.Texture.fromImage(map.front.url),
+        texture2 = new PIXI.Texture(landscapeTexture2),
+        front = new PIXI.Sprite(texture2);
+
+      front.position.x = bx;
+      front.position.y = by;
+    }
+
+
+    //Ptexture = new PIXI.Texture(PlandscapeTexture);
+
+    // Caragmos y cetramos los objetos.
+    map.objects.map(function (element) {
+      element.landscapeTexture = PIXI.Texture.fromImage(element.url);
+      element.texture = new PIXI.Texture(element.landscapeTexture);
+      element.item = new PIXI.Sprite(element.texture);
+      element.item.position.x = bx;
+      element.item.position.y = by;
+    });
+
+    // Renderizamos la stage
+    renderer.render(stage);
+    renderer.view.style.position = "absolute";
+    renderer.view.style.display = "block";
+    renderer.autoResize = true;
+    renderer.resize(window.innerWidth, window.innerHeight);
+    loader.add("player", map.player.url).load(setup);
+
+    // Creamos marcador. Primero el estilo del texto depues el objeto, lo pocicionamos y lo agregamos.
+    var scoreStyle = new PIXI.TextStyle({
+      fontFamily: 'komtit',
+      fontSize: 36,
+      fill: ['#FFF1E1', '#FFF1E1'], // gradient
+      stroke: '#35130B',
+      strokeThickness: 10,
+      dropShadow: true,
+      dropShadowColor: '#724833',
+      dropShadowBlur: 4,
+      dropShadowAngle: Math.PI / 2,
+      dropShadowDistance: 3,
+      wordWrap: false,
+      wordWrapWidth: 440,
+      padding: 20
+    });
+
+    var scoreText = new PIXI.Text('Score: ', scoreStyle);
+    scoreText.x = 30;
+    scoreText.y = 20;
+
+    stage.addChild(scoreText);
+
+    var heartTexture = PIXI.Texture.fromImage('/img/gui/heart.png');
+
+    var heartTilingSprite = new PIXI.extras.TilingSprite(
+      heartTexture,
+      44 * lives,
+      37
+    );
+    heartTilingSprite.x = 35;
+    heartTilingSprite.y = 80;
+    heartTilingSprite.scale.set(0.75);
+    stage.addChild(heartTilingSprite);
+
+    // Cargamos el juegador
+    var player,
+      playerTexture,
+      playersName,
+      playersNameStyle;
+
+    function setup() {
+      playersNameStyle = new PIXI.TextStyle({
+        fontFamily: 'komtit',
+        fontSize: 24,
+        fill: ['#FFF1E1', '#FFF1E1'], // gradient
+        stroke: '#35130B',
+        strokeThickness: 5,
+        dropShadow: true,
+        dropShadowColor: '#724833',
+        dropShadowBlur: 4,
+        dropShadowAngle: Math.PI / 2,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 440,
+        padding: 20
+      });
+      playersName = new PIXI.Text(userName, playersNameStyle);
+
+      playerTexture = loader.resources["player"].texture;
+      playerTexture.frame = map.player.sprite[state][direction][0];
+      player = new Sprite(playerTexture);
+      player.scale.set(scale);
+      player.x = window.innerWidth / scaleDivisor;
+      player.y = window.innerHeight / scaleDivisor;
+
+      playersName.scale.set(scale / map.player.scale);
+      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
+      playersName.y = player.y - (player.height / 6);
+
+
+      stage.addChild(player);
+      stage.addChild(playersName);
+      renderer.render(stage);
+      // Comienza el loop
+      gameLoop();
+      refreshScore();
+    }
+
+    function gameLoop() {
+      // Empieza el loop y carga las varibles
+      var mouse;
+      if (is_touch_device()) {
+        mouse = touch ? touch : {
+          x: 0,
+          y: 0
+        };
+      } else {
+        mouse = renderer.plugins.interaction.mouse.global;
+      }
+
+      // Cargamos la direcion del sprite y aplicamos los ajustes
+      direction = getDirection(mouse, wx, wy);
+
+      if (direction == "up" || direction == "down") {
+        maxFrame = 8;
+        df = 5;
+      }
+      if (direction == "left" || direction == "right") {
+        maxFrame = 6;
+        df = 8;
+      }
+
+      // Vemos que el personaje no tenga el raton encima (Parado)
+      if (player) {
+        if (mouse.y > wy2 - (player.height / 2) && mouse.y < wy2 + (player.height / 2) &&
+          mouse.x > wx2 - (player.width / 2) && mouse.x < wx2 + (player.width / 2)) {
+          if (state != "attack") {
+            state = "stop";
+          }
+          stop = true;
+        } else {
+          if (state != "attack") {
+            state = "run";
+          }
+          stop = false;
+        }
+      }
+
+      if (key == 0) {
+        if (stop == false) {
+          var px = percent(mouse.x, wx) - 50,
+            py = percent(mouse.y, wy) - 50;
+
+          vx = (px < 0 ? (px < -25 ? -115 : px * 3) : (px > 25 ? 115 : px * 3)) * -1,
+          vy = (py < 0 ? (py < -25 ? -115 : py * 3) : (py > 25 ? 115 : py * 3)) * -1;
+        } else {          
+          vx = 0,
+          vy = 0;
+        }
+      }
+
+      background.position.x = (bx) - position.x;
+      background.position.y = (by) - position.y;
+
+      
+      if (map.front) {
+        front.position.x = bx - position.x;
+        front.position.y = by - position.y;
+      }
+
+      map.objects.map(function (element) {
+        element.item.position.x = bx - position.x + element.x;
+        element.item.position.y = by - position.y + element.y;
+      });
+      
+
+      //Mandamos pocisicon al server;
+      msg = userName + ` {"vx":${ vx ? vx : 0 },"vy":${ vy ? vy : 0} ,"state": "${state}", "direction":"${direction}", "width":"${player.width}", "height":"${player.height}" } `;
+      session.send(msg);
+
+      // Ajusta el fotograma
+      if (af >= maxFrame) {
+        af = 0;
+      } else {
+        af += 1 / df;
+      }
+
+      // Aplica el foto grama
+      if (playerTexture) {
+        playerTexture.frame = map.player.sprite[state][direction][Math.floor(af)] ? map.player.sprite[state][direction][Math.floor(af)] : map.player.sprite[state][direction][0];
+      }
+
+      // Borramos todos los obejetos de la pantalla
+      stage.removeChild(player);
+      stage.removeChild(playersName);
+      
+      map.objects.map(function (element) {
+        stage.removeChild(element.item);
+      });
+      
+      jQuery.each(map.players, function (i, element) {
+        if (element.item) {
+          stage.removeChild(element.item);
+          stage.removeChild(element.name);
+        }
+      });
+      
+      if (map.front) {
+        stage.removeChild(front);
+      }
+
+      stage.removeChild(heartTilingSprite);
+      stage.removeChild(scoreText);
+
+      // Calculamos la posicion del jugador      
+      player.scale.set(scale);
+      player.x = (wx / scaleDivisor) - ((player.width / scaleDivisor) / zoom);
+      player.y = (wy / scaleDivisor) - ((player.height / scaleDivisor) / zoom);
+
+      playersName.scale.set(scale / map.player.scale);
+      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
+      playersName.y = player.y - (player.height / 6);
+
+      // Dibujamos los objetos
+      map.objects.map(function (element, key) {
+        if (position.y > element.yv && position.x > element.xv) {
+          stage.addChild(element.item);
+        }
+      });
+      
+      var paintedPlayer = false;
+      if (map.players) {
+        Object.values(map.players).sort(comparePlayer).map(function (element) {
+          if (element.position.y > position.y && !paintedPlayer) {
+            stage.addChild(player);
+            stage.addChild(playersName);
+            paintedPlayer = true;
+          }
+          if (!element.deleted) {
+            try {
+              element.item.scale.set(element.scale);
+              element.texture.frame = map.player.sprite[element.state][element.direction][Math.floor(af)] ? map.player.sprite[element.state][element.direction][Math.floor(af)] : map.player.sprite[element.state][element.direction][0];
+              element.item.position.x = (wx / scaleDivisor) - position.x + (element.position.x - (element.item.width / 2));
+              element.item.position.y = (wy / scaleDivisor) - position.y + (element.position.y - (element.item.height / 2));
+              element.name.scale.set(element.scale / map.player.scale);
+              element.name.x = element.item.position.x + (element.item.width / 2) - (element.name.width / 2);
+              element.name.y = element.item.position.y - (element.item.height / 6);
+              stage.addChild(element.item);
+              stage.addChild(element.name);
+            }
+            catch(error) {
+              console.error(error);              
+            }
+            
+          } else {
+            delete element.item;
+            delete element.name;
+          }
+        });
+      }
+
+      if (!paintedPlayer) {
+        stage.addChild(player);
+        stage.addChild(playersName);
+      }
+
+      if (map.front) {
+        stage.addChild(front);
+      }
+
+      //Actualizamos el marcador.
+      scoreText.text = 'Score: ' + score + '\n';
+      heartTilingSprite.width = 44 * lives;
+      stage.addChild(heartTilingSprite);
+      stage.addChild(scoreText);
+
+      // Lo renderizamos y mandamos la proxima llamada del bucle.
+      stage.scale.set(stateScale);
+      renderer.render(stage);
+      requestAnimationFrame(gameLoop);
+    }
+
+    window.onresize = function (event) {
+      setTimeout(function () {
+        wx = window.innerWidth;
+        wy = window.innerHeight;
+        wx2 = window.innerWidth / 2;
+        wy2 = window.innerHeight / 2;
+        bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
+        by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
+
+        stateScale = wx < 1000 ? 0.5 : 1;
+        zoom = wx < 1000 ? 2 : 1;
+        scaleDivisor = wx < 1000 ? 1 : 2;
+
+        renderer.resize(wx, wy);
+        window.onresize();
+      });
+    }
+
+    $("#chatInput").css({
+      "font-family": 'oswald'
+    });
+
+  });
+}
--- a/testing/magicworld/web/js/index.js
+++ b/testing/magicworld/web/js/index.js
@@ -0,0 +1,31 @@
+
+  var audio = new Audio('/sounds/wonderworld.mp3');
+  audio.loop = true
+  audio.play();
+  audio.volume = 0.5
+
+  function play(){
+    audio.play();
+    $("#musicStop").removeClass("d-none");
+    $("#musicPlay").addClass("d-none");
+  }
+
+  function stop(){
+    audio.pause();
+    $("#musicPlay").removeClass("d-none");
+    $("#musicStop").addClass("d-none");  
+  }
+$(document).ready(function () {
+//  stop();
+  $("#username").val(getUserRamdom());
+
+  $("#username").on({
+    keydown: function(e) {      
+      if (e.which === 32)
+        return false;
+    },
+    change: function() {
+      this.value = this.value.replace(/\s/g, "");
+    }
+  });
+});
--- a/testing/magicworld/web/js/mosters.js
+++ b/testing/magicworld/web/js/mosters.js
@@ -0,0 +1,46 @@
+var mosters_raw = [{
+  width: 600,
+  height: 400,
+  img: "moaster2.png",
+  code: "globe",
+  nx: 12,
+  ny: 8,
+  px: 3,
+  py: 4
+}, {
+  width: 576,
+  height: 384,
+  img: "moster1.png",
+  code: "globe",
+  nx: 12,
+  ny: 8,
+  px: 3,
+  py: 4
+}];
+
+var mosters = mosters_raw.map(function (x) {
+  
+  let aux = {
+    up: getX(x, 3, 0, 0),
+    down: getX(x, 0, 0, 0),
+    left: getX(x, 1, 0, 0),
+    right: getX(x, 2, 0, 0)
+  }
+  let res = {
+    stop: aux,
+    run: aux,
+    attack: aux
+  };
+  return res;
+});
+
+function getX(moster, state, mosterx, mostery) {
+  var width = moster.width / moster.nx;
+  var height = moster.height / moster.ny;
+  var result = [];
+  for (let i = 0; i <= moster.px - 1; i++) {
+    result.push(new PIXI.Rectangle((i + (moster.px * mosterx)) * width, (state + (moster.py * mostery)) * height, width, height));
+  }
+  result.push(new PIXI.Rectangle((1 + (moster.px * mosterx)) * width, (state + (moster.py * mostery)) * height, width, height));  
+  return result;
+}
--- a/testing/magicworld/web/js/playerSprite_old.js
+++ b/testing/magicworld/web/js/playerSprite_old.js
@@ -0,0 +1,85 @@
+var sprite = {
+  stop: {
+    up:[
+      new PIXI.Rectangle(210, 120, 22, 28)
+    ],
+    down: [
+      new PIXI.Rectangle(30, 0, 22, 28)
+    ],
+    left: [
+      new PIXI.Rectangle(331, 30, 20, 28)
+    ],
+    right:[
+      new PIXI.Rectangle(331, 120, 20, 28)
+    ]
+  },
+  run: {
+    up: [
+      new PIXI.Rectangle(0, 120, 22, 28),
+      new PIXI.Rectangle(30, 120, 22, 28),
+      new PIXI.Rectangle(60, 120, 22, 28),
+      new PIXI.Rectangle(90, 120, 22, 28),
+      new PIXI.Rectangle(120, 120, 22, 28),
+      new PIXI.Rectangle(150, 120, 22, 28),
+      new PIXI.Rectangle(180, 120, 22, 28),
+      new PIXI.Rectangle(210, 120, 22, 28)
+    ],
+    down: [
+      new PIXI.Rectangle(0, 30, 22, 28),
+      new PIXI.Rectangle(30, 30, 22, 28),
+      new PIXI.Rectangle(60, 30, 22, 28),
+      new PIXI.Rectangle(90, 30, 22, 28),
+      new PIXI.Rectangle(120, 30, 22, 28),
+      new PIXI.Rectangle(150, 30, 22, 28),
+      new PIXI.Rectangle(180, 30, 22, 28),
+      new PIXI.Rectangle(210, 30, 22, 28)
+    ],
+    left: [
+      new PIXI.Rectangle(240, 30, 20, 28),
+      new PIXI.Rectangle(271, 30, 20, 28),
+      new PIXI.Rectangle(300, 30, 20, 28),
+      new PIXI.Rectangle(331, 30, 20, 28),
+      new PIXI.Rectangle(360, 30, 20, 28),
+      new PIXI.Rectangle(391, 30, 20, 28)      
+    ],
+    right: [
+      new PIXI.Rectangle(240, 120, 20, 28),
+      new PIXI.Rectangle(271, 120, 20, 28),
+      new PIXI.Rectangle(300, 120, 20, 28),
+      new PIXI.Rectangle(331, 120, 20, 28),
+      new PIXI.Rectangle(360, 120, 20, 28),
+      new PIXI.Rectangle(391, 120, 20, 28)    
+    ]    
+  },
+  attack: {
+    up:[
+      new PIXI.Rectangle(0, 182, 24, 25),
+      new PIXI.Rectangle(27, 178, 25, 32),
+      new PIXI.Rectangle(60, 176, 22, 37),
+      new PIXI.Rectangle(88, 178, 26, 32),
+      new PIXI.Rectangle(114, 180, 33, 26)
+    ],
+    down: [
+      new PIXI.Rectangle(0, 90, 22, 28),
+      new PIXI.Rectangle(28, 90, 26, 28),
+      new PIXI.Rectangle(59, 87, 24, 33),
+      new PIXI.Rectangle(89, 87, 24, 33),
+      new PIXI.Rectangle(113, 87, 30, 33),
+      new PIXI.Rectangle(144, 87, 34, 33)
+    ],
+    left: [
+      new PIXI.Rectangle(241, 90, 22, 28),
+      new PIXI.Rectangle(266, 90, 29, 26),
+      new PIXI.Rectangle(295, 90, 32, 25),
+      new PIXI.Rectangle(327, 90, 29, 25),
+      new PIXI.Rectangle(358, 88, 25, 32)
+    ],
+    right:[
+      new PIXI.Rectangle(241, 180, 22, 28),
+      new PIXI.Rectangle(266, 180, 29, 26),
+      new PIXI.Rectangle(295, 180, 30, 25),
+      new PIXI.Rectangle(327, 180, 29, 25),
+      new PIXI.Rectangle(358, 178, 25, 32)
+    ]
+  }
+};
--- a/testing/magicworld/web/libs/.gitignore
+++ b/testing/magicworld/web/libs/.gitignore
--- a/testing/magicworld/web/libs/bootstrap.min.css
+++ b/testing/magicworld/web/libs/bootstrap.min.css
--- a/testing/magicworld/web/libs/bootstrap.min.js
+++ b/testing/magicworld/web/libs/bootstrap.min.js
--- a/testing/magicworld/web/libs/jquery.min.js
+++ b/testing/magicworld/web/libs/jquery.min.js
--- a/testing/magicworld/web/libs/pixi.min.js
+++ b/testing/magicworld/web/libs/pixi.min.js
--- a/testing/magicworld/web/libs/popper.min.js
+++ b/testing/magicworld/web/libs/popper.min.js
--- a/testing/magicworld/web/maps/forest/img/forest_back.png
+++ b/testing/magicworld/web/maps/forest/img/forest_back.png
--- a/testing/magicworld/web/maps/forest/img/forest_front.png
+++ b/testing/magicworld/web/maps/forest/img/forest_front.png
--- a/testing/magicworld/web/maps/forest/index.js
+++ b/testing/magicworld/web/maps/forest/index.js
@@ -0,0 +1,170 @@
+PIXI = require('pixi');
+
+module.exports = {
+  map: {
+    background: {
+      url: 'maps/forest/img/forest_back.png'
+    },
+    front: {
+      url: 'maps/forest/img/forest_front.png'
+    },
+    size: {
+      x: 4016,
+      y: 4000,
+    },
+    limits: {
+      x: {
+        max: -740,
+        min: 800
+      },
+      y: {
+        max: -700,
+        min: 920
+      }
+    },
+    objects: [],
+    colliders: [{
+      position: {
+        x: -40,
+        y: -20
+      },
+      width: 70,
+      height: 30
+    },{
+      position: {
+        x: -460,
+        y: -30
+      },
+      width: 160,
+      height: 20
+    },{
+      position: {
+        x: -460,
+        y: 400
+      },
+      width: 160,
+      height: 20
+    },{
+      position: {
+        x: -85,
+        y: -350
+      },
+      width: 160,
+      height: 20
+    },{
+      position: {
+        x: 295,
+        y: -30
+      },
+      width: 160,
+      height: 20
+    },{
+      position: {
+        x: 350,
+        y: 400
+      },
+      width: 160,
+      height: 20
+    },{
+      position: {
+        x: -20,
+        y: 640
+      },
+      width: 160,
+      height: 20
+    }],
+    player: {
+      url: "/img/player.png",
+      dvx: 400,
+      dvy: 400,
+      scale: 6,
+      lives: 8,
+      velocity: 50,
+      sprite: {
+        stop: {
+          up: [
+            new PIXI.Rectangle(210, 120, 22, 28)
+          ],
+          down: [
+            new PIXI.Rectangle(30, 0, 22, 28)
+          ],
+          left: [
+            new PIXI.Rectangle(331, 30, 20, 28)
+          ],
+          right: [
+            new PIXI.Rectangle(331, 120, 20, 28)
+          ]
+        },
+        run: {
+          up: [
+            new PIXI.Rectangle(0, 120, 22, 28),
+            new PIXI.Rectangle(30, 120, 22, 28),
+            new PIXI.Rectangle(60, 120, 22, 28),
+            new PIXI.Rectangle(90, 120, 22, 28),
+            new PIXI.Rectangle(120, 120, 22, 28),
+            new PIXI.Rectangle(150, 120, 22, 28),
+            new PIXI.Rectangle(180, 120, 22, 28),
+            new PIXI.Rectangle(210, 120, 22, 28)
+          ],
+          down: [
+            new PIXI.Rectangle(0, 30, 22, 28),
+            new PIXI.Rectangle(30, 30, 22, 28),
+            new PIXI.Rectangle(60, 30, 22, 28),
+            new PIXI.Rectangle(90, 30, 22, 28),
+            new PIXI.Rectangle(120, 30, 22, 28),
+            new PIXI.Rectangle(150, 30, 22, 28),
+            new PIXI.Rectangle(180, 30, 22, 28),
+            new PIXI.Rectangle(210, 30, 22, 28)
+          ],
+          left: [
+            new PIXI.Rectangle(240, 30, 20, 28),
+            new PIXI.Rectangle(271, 30, 20, 28),
+            new PIXI.Rectangle(300, 30, 20, 28),
+            new PIXI.Rectangle(331, 30, 20, 28),
+            new PIXI.Rectangle(360, 30, 20, 28),
+            new PIXI.Rectangle(391, 30, 20, 28)
+          ],
+          right: [
+            new PIXI.Rectangle(240, 120, 20, 28),
+            new PIXI.Rectangle(271, 120, 20, 28),
+            new PIXI.Rectangle(300, 120, 20, 28),
+            new PIXI.Rectangle(331, 120, 20, 28),
+            new PIXI.Rectangle(360, 120, 20, 28),
+            new PIXI.Rectangle(391, 120, 20, 28)
+          ]
+        },
+        attack: {
+          up: [
+            new PIXI.Rectangle(0, 182, 24, 25),
+            new PIXI.Rectangle(27, 178, 25, 32),
+            new PIXI.Rectangle(60, 176, 22, 37),
+            new PIXI.Rectangle(88, 178, 26, 32),
+            new PIXI.Rectangle(114, 180, 33, 26)
+          ],
+          down: [
+            new PIXI.Rectangle(0, 90, 22, 28),
+            new PIXI.Rectangle(28, 90, 26, 28),
+            new PIXI.Rectangle(59, 87, 24, 33),
+            new PIXI.Rectangle(89, 87, 24, 33),
+            new PIXI.Rectangle(113, 87, 30, 33),
+            new PIXI.Rectangle(144, 87, 34, 33)
+          ],
+          left: [
+            new PIXI.Rectangle(241, 90, 22, 28),
+            new PIXI.Rectangle(266, 90, 29, 26),
+            new PIXI.Rectangle(295, 90, 32, 25),
+            new PIXI.Rectangle(327, 90, 29, 25),
+            new PIXI.Rectangle(358, 88, 25, 32)
+          ],
+          right: [
+            new PIXI.Rectangle(241, 180, 22, 28),
+            new PIXI.Rectangle(266, 180, 29, 26),
+            new PIXI.Rectangle(295, 180, 30, 25),
+            new PIXI.Rectangle(327, 180, 29, 25),
+            new PIXI.Rectangle(358, 178, 25, 32)
+          ]
+        }
+      }
+    }
+  }
+}
--- a/testing/magicworld/web/maps/map01/map01.js
+++ b/testing/magicworld/web/maps/map01/map01.js
@@ -0,0 +1,55 @@
+var map = {
+  background: {
+    url: '/img/landscape.jpg'
+  },
+  front: {
+    url: '/img/front.png'
+  },
+  size:{
+    x: 960,
+    y: 633, 
+  },
+  limits: {
+    x: {
+      min: -433,
+      max: 232
+    },
+    y:{
+      min: -220,
+      max: 50
+    }
+  },  
+  objects:[
+    {
+      name: "tree",
+      url: '/img/tree.png',
+      xv: null,
+      yv: 25,          
+      x: 344,
+      y: 211
+      
+    },
+    {
+      name: "tree",
+      url: '/img/tree2.png',
+      xv: null,
+      yv: 15,            
+      x: 211,
+      y: 165
+      
+    }
+  ],
+  player:{
+    url: "/img/player.png",
+    lives: 3,
+    dvx:250,
+    dvy:750,
+    scale: 3,
+    scale_ratio_divisor: 50,
+    velocity_divisor: 50,
+    sprite: sprite
+  },
+  players:[
+    //otros jugadores...
+  ]
+}
--- a/testing/magicworld/web/maps/map02.js
+++ b/testing/magicworld/web/maps/map02.js
@@ -0,0 +1,55 @@
+var map = {
+  background: {
+    url: '/img/landscape.jpg'
+  },
+  front: {
+    url: '/img/front.png'
+  },
+  size:{
+    x: 960,
+    y: 633, 
+  },
+  limits: {
+    x: {
+      min: -433,
+      max: 232
+    },
+    y:{
+      min: -220,
+      max: 50
+    }
+  },  
+  objects:[
+    {
+      name: "tree",
+      url: '/img/tree.png',
+      xv: null,
+      yv: 25,          
+      x: 344,
+      y: 211
+      
+    },
+    {
+      name: "tree",
+      url: '/img/tree2.png',
+      xv: null,
+      yv: 15,            
+      x: 211,
+      y: 165
+      
+    }
+  ],
+  player:{
+    url: "/img/player.png",
+    lives: 3,
+    dvx:250,
+    dvy:750,
+    scale: 3,
+    scale_ratio_divisor: 50,
+    velocity_divisor: 50,
+    sprite: sprite
+  },
+  players:[
+    //otros jugadores...
+  ]
+}
--- a/testing/magicworld/web/maps/map03/index.js
+++ b/testing/magicworld/web/maps/map03/index.js
@@ -0,0 +1,118 @@
+PIXI = require('pixi');
+
+module.exports = {
+  map: {
+    background: {
+      url: '/img/a.jpg'
+    },
+    size: {
+      x: 3872,
+      y: 2592,
+    },
+    limits: {
+      x: {
+        min: 950,
+        max: -952
+      },
+      y: {
+        min: 250,
+        max: -270
+      }
+    },
+    objects: [],
+    player: {
+      url: "/img/player.png",
+      dvx: 400,
+      dvy: 400,
+      scale: 6,
+      lives: 8,
+      scale_ratio_divisor: 100,
+      velocity_divisor: 50,
+      sprite: {
+        stop: {
+          up: [
+            new PIXI.Rectangle(210, 120, 22, 28)
+          ],
+          down: [
+            new PIXI.Rectangle(30, 0, 22, 28)
+          ],
+          left: [
+            new PIXI.Rectangle(331, 30, 20, 28)
+          ],
+          right: [
+            new PIXI.Rectangle(331, 120, 20, 28)
+          ]
+        },
+        run: {
+          up: [
+            new PIXI.Rectangle(0, 120, 22, 28),
+            new PIXI.Rectangle(30, 120, 22, 28),
+            new PIXI.Rectangle(60, 120, 22, 28),
+            new PIXI.Rectangle(90, 120, 22, 28),
+            new PIXI.Rectangle(120, 120, 22, 28),
+            new PIXI.Rectangle(150, 120, 22, 28),
+            new PIXI.Rectangle(180, 120, 22, 28),
+            new PIXI.Rectangle(210, 120, 22, 28)
+          ],
+          down: [
+            new PIXI.Rectangle(0, 30, 22, 28),
+            new PIXI.Rectangle(30, 30, 22, 28),
+            new PIXI.Rectangle(60, 30, 22, 28),
+            new PIXI.Rectangle(90, 30, 22, 28),
+            new PIXI.Rectangle(120, 30, 22, 28),
+            new PIXI.Rectangle(150, 30, 22, 28),
+            new PIXI.Rectangle(180, 30, 22, 28),
+            new PIXI.Rectangle(210, 30, 22, 28)
+          ],
+          left: [
+            new PIXI.Rectangle(240, 30, 20, 28),
+            new PIXI.Rectangle(271, 30, 20, 28),
+            new PIXI.Rectangle(300, 30, 20, 28),
+            new PIXI.Rectangle(331, 30, 20, 28),
+            new PIXI.Rectangle(360, 30, 20, 28),
+            new PIXI.Rectangle(391, 30, 20, 28)
+          ],
+          right: [
+            new PIXI.Rectangle(240, 120, 20, 28),
+            new PIXI.Rectangle(271, 120, 20, 28),
+            new PIXI.Rectangle(300, 120, 20, 28),
+            new PIXI.Rectangle(331, 120, 20, 28),
+            new PIXI.Rectangle(360, 120, 20, 28),
+            new PIXI.Rectangle(391, 120, 20, 28)
+          ]
+        },
+        attack: {
+          up: [
+            new PIXI.Rectangle(0, 182, 24, 25),
+            new PIXI.Rectangle(27, 178, 25, 32),
+            new PIXI.Rectangle(60, 176, 22, 37),
+            new PIXI.Rectangle(88, 178, 26, 32),
+            new PIXI.Rectangle(114, 180, 33, 26)
+          ],
+          down: [
+            new PIXI.Rectangle(0, 90, 22, 28),
+            new PIXI.Rectangle(28, 90, 26, 28),
+            new PIXI.Rectangle(59, 87, 24, 33),
+            new PIXI.Rectangle(89, 87, 24, 33),
+            new PIXI.Rectangle(113, 87, 30, 33),
+            new PIXI.Rectangle(144, 87, 34, 33)
+          ],
+          left: [
+            new PIXI.Rectangle(241, 90, 22, 28),
+            new PIXI.Rectangle(266, 90, 29, 26),
+            new PIXI.Rectangle(295, 90, 32, 25),
+            new PIXI.Rectangle(327, 90, 29, 25),
+            new PIXI.Rectangle(358, 88, 25, 32)
+          ],
+          right: [
+            new PIXI.Rectangle(241, 180, 22, 28),
+            new PIXI.Rectangle(266, 180, 29, 26),
+            new PIXI.Rectangle(295, 180, 30, 25),
+            new PIXI.Rectangle(327, 180, 29, 25),
+            new PIXI.Rectangle(358, 178, 25, 32)
+          ]
+        }
+      }
+    }
+  }
+}
--- a/testing/magicworld/web/sounds/home.mp3
+++ b/testing/magicworld/web/sounds/home.mp3
--- a/testing/magicworld/web/sounds/map1.wav
+++ b/testing/magicworld/web/sounds/map1.wav
--- a/testing/magicworld/web/sounds/wonderworld.mp3
+++ b/testing/magicworld/web/sounds/wonderworld.mp3
--- a/testing/magicworld/web/sounds/youtube-dl
+++ b/testing/magicworld/web/sounds/youtube-dl
--- a/testing/magicworld/web/test.html
+++ b/testing/magicworld/web/test.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>MagicWorld</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="libs/bootstrap.min.css">
+  <link rel="stylesheet" href="css/game.css" />
+  <script src="libs/pixi.min.js"></script>
+  <script src="libs/jquery.min.js"></script>
+  <script src="libs/bootstrap.min.js"></script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ice/3.7.1/Ice.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ice/3.7.1/Glacier2.js"></script>
+
+  <script src="js/mosters.js"></script>
+  <!--<script src="/js/resize.js"></script>-->
+  <script src="js/playerSprite.js"></script>
+  <script src="js/maps/map03.js"></script>
+  <script src="js/functions.js"></script>
+  <script src="js/game.js"></script>
+  <script src="js/MW.js"></script>
+  <script src="js/connect_test.js"></script>
+  <style>
+    #loading,
+    #login,
+    #comunicator {
+      margin-top: 40px;
+    }
+
+    #login {
+      margin-bottom: 40px;
+    }
+
+    #outputInput {
+      margin-top: 20px;
+    }
+
+    textarea {
+      height: 500px !important;
+      resize: none;
+
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="row">
+      <div id="loading" class="col-12 text-center">
+        *******
+        <span class="meter">Login pliss</span>
+        *******
+      </div>
+
+      <div id="login" class="col-12 form-row">
+        <div class="col">
+          <input id="username" class="form-control" placeholder="Username">
+        </div>
+        <div class="col">
+          <input id="password" class="form-control" placeholder="Password">
+        </div>        
+        <button id="signin" class="btn btn-info">
+          Signin
+        </button> 
+        &nbsp;
+        <button id="signout" class="btn btn-danger">
+          Signout
+        </button>
+      </div>
+      <div id="signin-alert" class="col-6">
+        Signin-alert:        
+        <span class=" alert alert-success"> </span>
+      </div>
+      <div id="signin-form" class="col-6">
+        Signin-form:
+        <span class="alert alert-warning"> </span>
+      </div>
+      <div id="comunicator" class="col-12">
+        <div class="form-row col-12">
+          <div class="col">
+            <label id="outputLabel" for="output">Output:</label>
+            <textarea id="output" class="form-control" disabled></textarea>
+          </div>
+        </div>
+        <div class="form-row col-12">          
+          <label id="outputInput" for="input" class="col-12">Input:</label>     
+          <div class="col">
+            <input id="input" class="form-control">
+          </div>
+          <div>
+            <button id="send" class="btn btn-success float-right">
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>