Try HTML element for main menu

src/assets/html/main-menu.html

@@ -0,0 +1,145 @@
+<style>
+  .login {
+    background: #eceeee;
+    border: 1px solid #42464b;
+    border-radius: 6px;
+    height: 327px;
+    margin: 20px auto 0;
+    width: 298px;
+  }
+
+  input[type="password"], input[type="text"] {
+    background: linear-gradient(top, #d6d7d7, #dee0e0);
+    border: 1px solid #a1a3a3;
+    border-radius: 4px;
+    box-shadow: 0 1px #fff;
+    box-sizing: border-box;
+    color: #696969;
+    height: 39px;
+    margin: 31px 0 0 29px;
+    padding-left: 37px;
+    transition: box-shadow 0.3s;
+    width: 240px;
+  }
+  input[type="password"]:focus, input[type="text"]:focus {
+    box-shadow: 0 0 4px 1px rgba(55, 166, 155, 0.3);
+    outline: 0;
+  }
+  .show-password {
+    display: block;
+    height: 16px;
+    margin: 26px 0 0 28px;
+    width: 87px;
+  }
+  input[type="checkbox"] {
+    cursor: pointer;
+    height: 16px;
+    opacity: 0;
+    position: relative;
+    width: 64px;
+  }
+  input[type="checkbox"]:checked {
+    left: 29px;
+    width: 58px;
+  }
+  .toggle {
+    display: block;
+    height: 16px;
+    margin-top: -20px;
+    width: 87px;
+    z-index: -1;
+  }
+  input[type="checkbox"]:checked + .toggle { background-position: 0 -16px }
+  .forgot {
+    color: #7f7f7f;
+    display: inline-block;
+    float: right;
+    font: 12px/1 sans-serif;
+    left: -19px;
+    position: relative;
+    text-decoration: none;
+    top: 5px;
+    transition: color .4s;
+  }
+  .forgot:hover { color: #3b3b3b }
+  input[type="button"] {
+    width:240px;
+    height:35px;
+    display:block;
+    font-family:Arial, "Helvetica", sans-serif;
+    font-size:16px;
+    font-weight:bold;
+    color:#fff;
+    text-decoration:none;
+    text-transform:uppercase;
+    text-align:center;
+    text-shadow:1px 1px 0px #37a69b;
+    padding-top:6px;
+    margin: 29px 0 0 29px;
+    position:relative;
+    cursor:pointer;
+    border: none;
+    background-color: #37a69b;
+    background-image: linear-gradient(top,#3db0a6,#3111);
+    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;
+  }
+
+  input[type="button"]:disabled {
+    width:240px;
+    height:35px;
+    display:block;
+    font-family:Arial, "Helvetica", sans-serif;
+    font-size:16px;
+    font-weight:bold;
+    color:#dddddd;
+    text-decoration:none;
+    text-transform:uppercase;
+    text-align:center;
+    text-shadow:1px 1px 0px #909998;
+    padding-top:6px;
+    margin: 29px 0 0 29px;
+    position:relative;
+    cursor:pointer;
+    border: none;
+    background-color: #909998;
+    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;
+  }
+  .shadow {
+    background: #000;
+    border-radius: 12px 12px 4px 4px;
+    box-shadow: 0 0 20px 10px #000;
+    height: 12px;
+    margin: 30px auto;
+    opacity: 0.2;
+    width: 270px;
+  }
+
+  input[type="button"]:active {
+    top:3px;
+    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
+  }
+  p {
+    font-family:Arial, "Helvetica", sans-serif;
+    font-size:14px;
+    color: #37a69b;
+    text-align:center;
+  }
+  </style>
+
+  <div class="login">
+      <input type="text" placeholder="Username" id="username" name="username">
+      <input type="button" value="Connect" name="loginButton">
+      <p class="connection">Not Connected</a>
+      <input type="button" value="Online Game" name="onlineGame" disabled>
+      <input type="button" value="Local game" name="localGame">
+  </div>
+  <div class="shadow"></div>

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

@@ -15,14 +15,39 @@ export default class MainMenuScene extends Phaser.Scene {
   preload() {
     console.log('Preload');
     this.load.image('game-cover', '../../assets/twelveHeroes_cover.png');
+    this.load.html('main-menu', '../../assets/html/main-menu.html');
   }
 
   create() {
     console.log('create');
-    let logo = this.add.image(0,0,'game-cover');
-    logo.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');
 
+    element.setPerspective(800);
+
+    element.addListener('click');
+
+    element.on('click', function (event) {
+      let eventName = event.targer.name;
+
+      switch (eventName) {
+        case value:
+
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    this.tweens.add({
+      targets: element,
+      y: 300,
+      duration: 3000,
+      ease: 'Power3'
+  });
     //this.add.dom
 
 
@@ -33,7 +58,7 @@ export default class MainMenuScene extends Phaser.Scene {
     // On local player room, user can enter player names, selected color, game deck mode & rules
 
     // FOR TESTING
-    this.fakeNewPnpGameSelected();
+    //this.fakeNewPnpGameSelected();
   }
 
   update() {