Continue Main Menu using HTML

src/assets/html/main-menu.html

@@ -1,22 +1,22 @@
 <style>
   .login {
-    background: #eceeee;
-    border: 1px solid #42464b;
+    background: #C7CC2D;
+    border: 1px solid #972620;
     border-radius: 6px;
-    height: 327px;
+    height: 300px;
     margin: 20px auto 0;
     width: 298px;
   }
 
   input[type="password"], input[type="text"] {
-    background: linear-gradient(top, #d6d7d7, #dee0e0);
-    border: 1px solid #a1a3a3;
+    background: linear-gradient(top, #C7CC2D, #e6e6e6);
+    border: 1px solid #C7CC2D;
     border-radius: 4px;
-    box-shadow: 0 1px #fff;
+    box-shadow: 0 1px #C7CC2D;
     box-sizing: border-box;
-    color: #696969;
+    color: #567199;
     height: 39px;
-    margin: 31px 0 0 29px;
+    margin: 24px 0 0 29px;
     padding-left: 37px;
     transition: box-shadow 0.3s;
     width: 240px;
@@ -58,23 +58,23 @@
     font-family:Arial, "Helvetica", sans-serif;
     font-size:16px;
     font-weight:bold;
-    color:#fff;
+    color:#F8E15E;
     text-decoration:none;
     text-transform:uppercase;
     text-align:center;
-    text-shadow:1px 1px 0px #37a69b;
+    text-shadow:1px 1px 0px #567199;
     padding-top:6px;
-    margin: 29px 0 0 29px;
+    margin: 23px 0 0 29px;
     position:relative;
     cursor:pointer;
     border: none;
-    background-color: #37a69b;
-    background-image: linear-gradient(top,#3db0a6,#3111);
+    background-color: #567199;
+    background-image: linear-gradient(top,#567199,rgba(252, 4, 4, 0.067));
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius:5px;
-    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #497a78, 0px 10px 5px #999;
+    box-shadow: inset 0px 1px 0px #567199, 0px 5px 0px 0px #324F70, 0px 10px 5px #C7CC2D;
   }
 
   input[type="button"]:disabled {
@@ -84,7 +84,7 @@
     font-family:Arial, "Helvetica", sans-serif;
     font-size:16px;
     font-weight:bold;
-    color:#dddddd;
+    color:#F8E15E;
     text-decoration:none;
     text-transform:uppercase;
     text-align:center;
@@ -94,13 +94,13 @@
     position:relative;
     cursor:pointer;
     border: none;
-    background-color: #909998;
+    background-color: #7e7e7e;
     background-image: linear-gradient(top,#909998,#82a09c);
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius:5px;
-    box-shadow: inset 0px 1px 0px #babcbd, 0px 5px 0px 0px #808586, 0px 7px 5px #121313;
+    box-shadow: inset 0px 1px 0px #7e7e7e, 0px 5px 0px 0px #808586, 0px 7px 5px #C7CC2D;
   }
   .shadow {
     background: #000;
@@ -114,20 +114,20 @@
 
   input[type="button"]:active {
     top:3px;
-    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
+    box-shadow: inset 0px 1px 0px #567199, 0px 2px 0px 0px #324F70, 0px 5px 3px #C7CC2D;
   }
   .connection {
     font-family:Arial, "Helvetica", sans-serif;
     font-size:14px;
-    color: #37a69b;
+    color: #972620;
     text-align:center;
   }
   </style>
 
   <div class="login">
-      <input type="text" placeholder="Username" id="username" name="username">
+      <input type="text" placeholder="Username" id="username" name="username" autocomplete="off">
       <input type="button" value="Connect" name="loginButton">
-      <p class="connection" name="connectionStatus">Not Connected</a>
+      <p class="connection" id="connectionStatus">Not Connected</p>
       <input type="button" value="Online Game" name="onlineGame" disabled>
       <input type="button" value="Local game" name="localGame">
   </div>

src/main.js

@@ -9,15 +9,19 @@ function startGame() {
   console.log('start Game');
 
   let phaserConfig = {
-    type: Phaser.CANVAS,
-    width: 1200,
+    type: Phaser.AUTO,
+    width: 800,
     height: 500,
     scene: [],
+    parent: 'phaser-parent',
+    dom: {
+        createContainer: true
+    },
     backgroundColor: 'rgba(34,139,34 ,1 )'
   };
   let phaserEngine = new Phaser.Game(phaserConfig);
   let menuController = new MenuController(phaserEngine);
-
+  console.log(phaserEngine.config);
   menuController.displayMainMenu();
 
 }

src/menu/views/main-menu-scene.js

@@ -1,5 +1,5 @@
 'use strict';
-import {GameDeckMode} from '../../common/utils/const/game-deck-mode-enum';
+import { GameDeckMode } from '../../common/utils/const/game-deck-mode-enum';
 import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
 import Phaser from 'phaser';
 import * as Utils from '../../common/utils/prompt-renderer';
@@ -15,40 +15,75 @@ export default class MainMenuScene extends Phaser.Scene {
   preload() {
     console.log('Preload');
     this.load.image('game-cover', '../../assets/twelveHeroes_cover.png');
-    console.log("load main-menu.html");
     this.load.html('main-menu', '../../assets/html/main-menu.html');
   }
 
   create() {
     console.log('create');
-    let background = this.add.image(400,300,'game-cover');
-    //background.setOrigin(0,0);
+    let background = this.add.image(0, 0, 'game-cover');
+    background.setOrigin(0, 0);
 
-    let element = this.add.dom(400, 600).createFromCache('main-menu');
+    let element = this.add.dom(400, 100).createFromCache('main-menu');
+    let connectButton = element.getChildByName('loginButton');
+    let username = element.getChildByName('username');
+    let connectionStatus = element.getChildByID('connectionStatus');
+    let onlineGame = element.getChildByName('onlineGame');
 
-    console.log(element);
-    //element.setPerspective(800);
+    element.setPerspective(800);
 
     element.addListener('click');
 
+    username.addEventListener("keyup", event => {
+      if (connectButton.value === 'Connect') {
+        if (event.key !== "Enter") return;
+        connectButton.click();
+        event.preventDefault();
+      }
+    });
+
+    console.log(connectButton);
+    connectButton.focus();
     element.on('click', function (event) {
+      console.log(event);
       let eventName = event.target.name;
 
       switch (eventName) {
         case "loginButton":
-          username=this.getChildByName('username');
-          connectionStatus=this.getChildByName('connectionStatus');
-          onlineGame=this.getChildByName('onlineGame');
-
-          console.log(connectionStatus.value);
-          console.log(onlineGame);
+          if (connectButton.value === 'Connect') {
+            if (username.value !== '') {
+              connectButton.disabled=true;
+              connectionStatus.innerText = 'Connecting...';
+              console.log(username.value);
+              console.log(' log  :' + onlineGame.disabled);
+              setTimeout(() => {
+                connectionStatus.innerText = 'Connected as ' + username.value;
+                onlineGame.disabled = false;
+                connectButton.value = "Disconnect";
+
+              connectButton.disabled=false;
+              }, 1500);
+            } else {
+              connectionStatus.innerText = 'Not Connected : Enter Username';
+            }
+          } else {
+            connectButton.disabled=true;
+              connectionStatus.innerText = `Disconnecting ${username.value}...`;
+
+              setTimeout(() => {
+                connectionStatus.innerText = 'Not Connected';
+                onlineGame.disabled = true;
+                connectButton.value = "Connect";
+                connectButton.disabled=false;
+                username.value='';
+              }, 500);
+          }
           break;
-        case "onlineGame":
+        // case "onlineGame":
 
-          break;
-        case "localGame":
+        //   break;
+        // case "localGame":
 
-          break;
+        //   break;
 
         default:
           break;
@@ -57,10 +92,10 @@ export default class MainMenuScene extends Phaser.Scene {
 
     this.tweens.add({
       targets: element,
-      y: 300,
-      duration: 3000,
+      y: 365,
+      duration: 2300,
       ease: 'Power3'
-  });
+    });
     //this.add.dom