init, merge, add mobile

front/dist/index.tmpl.html

@@ -64,6 +64,12 @@
                     </div>
 
                 </div>
+                <div id="controls">
+                  <div id="controls-dpad"></div>
+                  <div id="controls-btnA"></div>
+                  <div id="controls-btnB"></div>
+                  <script src="/static/js/touchcontrols.js"></script>
+                </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
                 <button class="close-btn" id="cowebsite-close">

front/dist/resources/style/style.css

@@ -1180,3 +1180,44 @@ div.action p.action-body{
     50% {bottom: 30px;}
     100% {bottom: 40px;}
 }
+
+#controls {
+    display: none;
+    z-index: 5000;
+}
+
+#controls-dpad {
+    display: block;
+    position: fixed;
+    left: 10px;
+    bottom: 90px;
+    width: 150px;
+    height: 150px;
+    background-image: url('/static/images/input/dpad.png');
+    background-size: contain;
+    z-index: 5000;
+}
+
+ #controls-btnA {
+    display: block;
+    position: fixed;
+    left: 185px;
+    bottom: 155px;
+    width: 40px;
+    height: 40px;
+    background-image: url('/static/images/input/a.png');
+    background-size: contain;
+    z-index: 5000;
+}
+
+#controls-btnB {
+    display: block;
+    position: fixed;
+    left: 225px;
+    bottom: 115px;
+    width: 40px;
+    height: 40px;
+    background-image: url('/static/images/input/b.png');
+    background-size: contain;
+    z-index: 5000;
+}

front/dist/static/js/touchcontrols.js

@@ -0,0 +1,111 @@
+let TouchControls=(function() {
+
+  if(!("ontouchstart" in document.documentElement)) {
+    return;
+  }
+
+  let nativeKeyDownEvent=function(keyCode,code) {
+    window.dispatchEvent(new KeyboardEvent('keydown',{'keyCode': keyCode,'code': code}));
+  }
+
+  let nativeKeyUpEvent=function(keyCode,code) {
+    window.dispatchEvent(new KeyboardEvent('keyup',{'keyCode': keyCode,'code': code}));
+  }
+
+  let controls,
+    dpad,
+    btnA,
+    btnB,
+    centerX,
+    centerY,
+    threshholdX,
+    threshholdY;
+
+  controls=document.getElementById('controls');
+  controls.style.display='block';
+  dpad=document.getElementById('controls-dpad');
+  btnA=document.getElementById('controls-btnA');
+  btnB=document.getElementById('controls-btnB');
+  centerX=dpad.clientWidth/2;
+  centerY=dpad.clientHeight/2;
+  threshholdX=centerX*0.15;
+  threshholdY=centerY*0.15;
+
+  dpad.addEventListener("touchmove",function(event) {
+    event.preventDefault();
+    if(event.targetTouches[0].target===dpad) {
+      let movedX=event.targetTouches[0].pageX;
+      let movedY=event.targetTouches[0].pageY;
+      movedX-=dpad.offsetLeft+centerX;
+      movedY-=dpad.offsetTop+centerY;
+
+      if(movedX<(threshholdX*-1)&&(movedX>((centerX+threshholdX)*-1))) {
+        nativeKeyDownEvent(37,"ArrowLeft");
+      } else {
+        nativeKeyUpEvent(37,"ArrowLeft");
+      }
+
+      if(movedX>threshholdX&&(movedX<(centerX+threshholdX))) {
+        nativeKeyDownEvent(39,"ArrowRight");
+      } else {
+        nativeKeyUpEvent(39,"ArrowRight");
+      }
+
+      if(movedY<(threshholdY*-1)&&(movedY>((centerY+threshholdY)*-1))) {
+        nativeKeyDownEvent(38,"ArrowUp");
+      } else {
+        nativeKeyUpEvent(38,"ArrowUp");
+      }
+
+      if(movedY>(threshholdY)&&(movedY<(centerY+threshholdY))) {
+        nativeKeyDownEvent(40,"ArrowDown");
+      } else {
+        nativeKeyUpEvent(40,"ArrowDown");
+      }
+    } else {
+      nativeKeyUpEvent(37,"ArrowLeft");
+      nativeKeyUpEvent(39,"ArrowRight");
+      nativeKeyUpEvent(38,"ArrowUp");
+      nativeKeyUpEvent(40,"ArrowDown");
+    }
+  });
+
+  dpad.addEventListener("touchend",function(event) {
+    nativeKeyUpEvent(37,"ArrowLeft");
+    nativeKeyUpEvent(39,"ArrowRight");
+    nativeKeyUpEvent(38,"ArrowUp");
+    nativeKeyUpEvent(40,"ArrowDown");
+  });
+
+  dpad.addEventListener("touchcancel",function(event) {
+    nativeKeyUpEvent(37,"ArrowLeft");
+    nativeKeyUpEvent(39,"ArrowRight");
+    nativeKeyUpEvent(38,"ArrowUp");
+    nativeKeyUpEvent(40,"ArrowDown");
+  });
+
+  btnA.addEventListener("touchstart",function(event) {
+    nativeKeyDownEvent(32,"Space");
+    nativeKeyDownEvent(13,"Enter");
+    console.log("btnA start");
+  });
+
+  btnA.addEventListener("touchend",function(event) {
+    nativeKeyUpEvent(32,"Space");
+    nativeKeyUpEvent(13,"Enter");
+    console.log("btnA end");
+  });
+
+  btnB.addEventListener("touchstart",function(event) {
+    nativeKeyDownEvent(16,"Shift");
+    console.log("btnB start");
+  });
+
+  btnB.addEventListener("touchend",function(event) {
+    nativeKeyUpEvent(16,"Shift");
+    console.log("btnB end");
+  });
+
+});
+
+TouchControls(); 

front/src/Phaser/Game/GameManager.ts

@@ -6,6 +6,8 @@ import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {API_URL} from "../../Enum/EnvironmentVariable";
+import Axios from "axios";
 
 export interface HasMovedEvent {
     direction: string;
@@ -32,6 +34,11 @@ export class GameManager {
         this.startRoom = await connectionManager.initGameConnexion();
         await this.loadMap(this.startRoom, scenePlugin);
         
+        if(!this.playerName) {
+            const res = await Axios.get("/");
+            this.playerName = res.headers['bstlyusername'];
+        }
+
         if(!this.playerName) { 
             return LoginSceneName;
         } else if(!this.characterLayers) {