add multiple menu screens (online game)

package-lock.json

@@ -11475,9 +11475,9 @@
           }
         },
         "p-limit": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
-          "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
+          "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"

package.json

@@ -57,8 +57,8 @@
     "readline-sync": "1.4.10",
     "socket.io": "^2.3.0",
     "socket.io-client": "^2.3.0",
-    "webpack": "4.41.0",
-    "webpack-cli": "3.3.9",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
     "webpack-dev-middleware": "3.7.2",
     "webpack-md5-hash": "0.0.6"
   },

src/assets/html/css/style.css

@@ -1,10 +1,16 @@
-.login {
+#login, #online-room {
   background: #C7CC2D;
   border: 1px solid #972620;
   border-radius: 6px;
   height: 300px;
-  margin: 20px auto 0;
-  width: 298px;
+  margin-top: 20px;
+  margin-left: auto;
+  width: 300px;
+}
+#online-room {
+  position: relative;
+  width: 500px;
+  margin-left: -150px;
 }
 
 input[type="password"], input[type="text"] {
@@ -76,6 +82,9 @@ input[type="button"] {
   box-shadow: inset 0px 1px 0px #567199, 0px 5px 0px 0px #324F70, 0px 10px 5px #C7CC2D;
 }
 
+input[type="button"]:hover:enabled, input[type="text"]:hover:enabled {
+  transform:scale(1.1);
+  }
 input[type="button"]:disabled {
   width:240px;
   height:35px;
@@ -89,7 +98,7 @@ input[type="button"]:disabled {
   text-align:center;
   text-shadow:1px 1px 0px #909998;
   padding-top:6px;
-  margin: 29px 0 0 29px;
+  margin: 23px 0 0 29px;
   position:relative;
   cursor:pointer;
   border: none;
@@ -111,7 +120,7 @@ input[type="button"]:disabled {
   width: 270px;
 }
 
-input[type="button"]:active {
+input[type="button"]:enabled:active {
   top:3px;
   box-shadow: inset 0px 1px 0px #567199, 0px 2px 0px 0px #324F70, 0px 5px 3px #C7CC2D;
 }
@@ -121,3 +130,51 @@ input[type="button"]:active {
   color: #972620;
   text-align:center;
 }
+
+#online-room-buttons {
+  position: absolute;
+  top:50px;
+  left:205px;
+}
+
+#online-games {
+  background: #567199;
+  border: 1px solid #567199;
+  border-radius: 3px;
+  margin: 20px 20px;
+  height: 250px;
+  width: 185px;
+  overflow: hidden;
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:16px;
+  font-weight:bold;
+  color:#F8E15E;
+  text-decoration:none;
+  text-transform:uppercase;
+  text-align:center;
+  text-shadow:1px 1px 0px #567199;
+  vertical-align: middle;
+  padding-top: 8px;
+}
+#list-games {
+  padding: 0;
+  list-style:none;
+}
+
+#list-games li {
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:14px;
+  margin: 7px 10px 0px 10px;
+}
+
+#list-games span {
+  width:155px;
+  height:35px;
+  background-color:#333;
+  padding-left:10px;
+  text-decoration:none;
+  color:#bfe1f1;
+  display: table-cell;
+  vertical-align: middle;
+}
+

src/assets/html/main-menu.html

@@ -1,20 +1,337 @@
+<style type="text/css">
+.main-div {
+  background: #C7CC2D;
+  border: 1px solid #972620;
+  border-radius: 6px;
+  height: 300px;
+  margin-top: 250px;
+  margin-left: auto;
+  width: 300px;
+}
+#online-room {
+  position: relative;
+  width: 500px;
+  margin-left: -150px;
+}
+
+input[type="password"], input[type="text"] {
+  background: linear-gradient(top, #C7CC2D, #e6e6e6);
+  border: 1px solid #C7CC2D;
+  border-radius: 4px;
+  box-shadow: 0 1px #C7CC2D;
+  box-sizing: border-box;
+  color: #567199;
+  height: 39px;
+  margin: 24px 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;
+  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 }
+
+input[type="button"] {
+  width:240px;
+  height:35px;
+  display:block;
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:16px;
+  font-weight:bold;
+  color:#F8E15E;
+  text-decoration:none;
+  text-transform:uppercase;
+  text-align:center;
+  text-shadow:1px 1px 0px #567199;
+  padding-top:6px;
+  margin: 23px 0 0 29px;
+  position:relative;
+  cursor:pointer;
+  border: none;
+  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 #567199, 0px 5px 0px 0px #324F70, 0px 10px 5px #C7CC2D;
+}
+
+input[type="button"]:hover:enabled, input[type="text"]:hover:enabled {
+  transform:scale(1.1);
+  }
+input[type="button"]:disabled {
+  width:240px;
+  height:35px;
+  display:block;
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:16px;
+  font-weight:bold;
+  color:#F8E15E;
+  text-decoration:none;
+  text-transform:uppercase;
+  text-align:center;
+  text-shadow:1px 1px 0px #909998;
+  padding-top:6px;
+  margin: 23px 0 0 29px;
+  position:relative;
+  cursor:pointer;
+  border: none;
+  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 #7e7e7e, 0px 5px 0px 0px #808586, 0px 7px 5px #C7CC2D;
+}
+.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"]:enabled:active {
+  top:3px;
+  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: #972620;
+  text-align:center;
+}
+
+#online-room-buttons {
+  position: absolute;
+  top:50px;
+  left:205px;
+}
+
+#online-games {
+  background: #567199;
+  border: 1px solid #567199;
+  border-radius: 3px;
+  margin: 20px 20px;
+  height: 250px;
+  width: 185px;
+  overflow: hidden;
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:16px;
+  font-weight:bold;
+  color:#F8E15E;
+  text-decoration:none;
+  text-transform:uppercase;
+  text-align:center;
+  text-shadow:1px 1px 0px #567199;
+  vertical-align: middle;
+  padding-top: 8px;
+}
+#list-games {
+  padding: 0;
+  list-style:none;
+}
+
+#list-games li {
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:14px;
+  margin: 7px 10px 0px 10px;
+}
+
+#list-games span {
+  width:155px;
+  height:35px;
+  background-color:#333;
+  padding-left:10px;
+  text-decoration:none;
+  color:#bfe1f1;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#game-creation {
+
+  color: #567199;
+  font-family:Arial, "Helvetica", sans-serif;
+  font-size:16px;
+  font-weight:bold;
+  text-align: center;
+  padding-top: 15px;
+  height: 280px;
+}
+
+#deck-mode-select {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.checkbox-div {
+  text-align: left;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+/* The container */
+.container {
+  display: block;
+  position: relative;
+  padding-left: 55px;
+  padding-top: 1px;
+  margin-bottom: 10px;
+  margin-left: 40px;
+  cursor: pointer;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 15px;
+  right: 15px;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+  background-color: #567199;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+</style>
 <!DOCTYPE html>
 <html>
 
-  <head>
-    <link rel="stylesheet" type="text/css" href="assets/html/css/style.css">
-    <link rel="stylesheet" type="text/css" href="css/style.css">
-  </head>
+<head>
+  <!-- <link rel="stylesheet" type="text/css" href="assets/html/css/style.css"> -->
+  <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
+</head>
 
-<body>
-  <div class="login">
+<body class="body">
+  <div id="login" class="main-div" style="display:block">
     <input type="text" placeholder="Username" id="username" name="username" autocomplete="off">
     <input type="button" value="Connect" name="loginButton">
     <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>
-  <div class="shadow"></div>
+
+  <div id="online-room" class="main-div" style="display:none">
+    <div id="online-games">
+      Created Games
+      <hr>
+      <ul id="list-games">
+        <!-- <li>
+          <span></span>
+        </li> -->
+      </ul>
+    </div>
+
+    <div id="online-room-buttons">
+      <input type="button" value="Create new game" name="createOnlineGame">
+      <input type="button" value="Join open game" name="joinOnlineGame" disabled>
+      <input type="button" value="Back to Menu" name="backToMain">
+
+    </div>
+  </div>
+
+  <div id="game-creation" class="main-div" style="display:none">
+    Select how you will build your deck
+    <div id="deck-mode-select">
+      <select>
+        <option value="0">Select Deck mode</option>
+        <option value="1">Faction</option>
+        <option value="2">Draft</option>
+        <option value="3">Tournament</option>
+      </select>
+    </div>
+    <hr>
+    Select advandced rules
+    <div class="checkbox-div">
+
+      <label class="container">Popularity
+        <input type="checkbox" id="popularity">
+        <span class="checkmark"></span>
+      </label>
+      <label class="container">Discard for an action
+        <input type="checkbox" id="discardForAction">
+        <span class="checkmark"></span>
+      </label>
+    </div>
+    <hr>
+    <input type="button" value="CREATE" name="validGameCreation" disabled>
+    <input type="button" value="Back" name="backToPrev">
+
+  </div>
 
 </body>
 

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

@@ -9,6 +9,8 @@ export default class MainMenuScene extends Phaser.Scene {
     super({ key: PhaserScene.MAIN_MENU, active: false });
     this.menuEventListener = menuEventListener;
 
+    this.username = '';
+    this.previousMenu = null;
   }
 
   preload() {
@@ -22,12 +24,30 @@ export default class MainMenuScene extends Phaser.Scene {
     let background = this.add.image(0, 0, 'game-cover');
     background.setOrigin(0, 0);
 
+    // Add main-menu HTML
     let element = this.add.dom(400, 100).createFromCache('main-menu');
+
+    // Menu blocks
+    let loginHtmlDiv = element.getChildByID('login');
+    let onlineRoomHtmlDiv = element.getChildByID('online-room');
+    let gameCreationHtmlDiv = element.getChildByID('game-creation');
+
+    // Login block buttons
     let connectButton = element.getChildByName('loginButton');
     let username = element.getChildByName('username');
     let connectionStatus = element.getChildByID('connectionStatus');
     let onlineGame = element.getChildByName('onlineGame');
 
+    // Online room buttons
+    let createOnlineGameButton = element.getChildByName('createOnlineGame');
+    let joinOnlineGameButton = element.getChildByName('joinOnlineGame');
+    let backToMainButton = element.getChildByName('backToMain');
+    let createdOnlineGamesList = element.getChildByID('list-games');
+
+    // Game creation buttons
+
+
+
     element.setPerspective(800);
 
     element.addListener('click');
@@ -45,44 +65,64 @@ export default class MainMenuScene extends Phaser.Scene {
     element.on('click', function (event) {
       console.log(event);
       let eventName = event.target.name;
-
       switch (eventName) {
         case "loginButton":
           if (connectButton.value === 'Connect') {
             if (username.value !== '') {
-              connectButton.disabled=true;
+              connectButton.disabled = true;
               connectionStatus.innerText = 'Connecting...';
+              username.disabled = true;
               console.log(username.value);
               console.log(' log  :' + onlineGame.disabled);
               setTimeout(() => {
                 connectionStatus.innerText = 'Connected as ' + username.value;
+                this.username = username.value;
                 onlineGame.disabled = false;
                 connectButton.value = "Disconnect";
 
-              connectButton.disabled=false;
-              }, 1500);
+                connectButton.disabled = false;
+              }, 1000);
             } 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);
+            connectButton.disabled = true;
+            connectionStatus.innerText = `Disconnecting ${this.username}...`;
+            onlineGame.disabled = true;
+            setTimeout(() => {
+              connectionStatus.innerText = 'Not Connected';
+              connectButton.value = "Connect";
+              connectButton.disabled = false;
+              username.value = '';
+              this.username = username.value;
+
+              username.disabled = false;
+            }, 500);
           }
           break;
-        // case "onlineGame":
+        case "onlineGame":
+          loginHtmlDiv.style.display = 'none';
+          onlineRoomHtmlDiv.style.display = 'block';
 
-        //   break;
-        // case "localGame":
+          break;
+        case "backToMain":
+          onlineRoomHtmlDiv.style.display = 'none';
+          loginHtmlDiv.style.display = 'block';
 
-        //   break;
+          break;
+        case "createOnlineGame":
+          this.previousMenu = onlineRoomHtmlDiv;
+          onlineRoomHtmlDiv.style.display = 'none';
+          gameCreationHtmlDiv.style.display = 'block';
+          break;
+        case "backToPrev":
+          this.previousMenu = null;
+          gameCreationHtmlDiv.style.display = 'none';
+          onlineRoomHtmlDiv.style.display = 'block';
+          break;
+        case "localGame":
+          alert('Feature not implemented yet');
+          break;
 
         default:
           break;

webpack.config.js

@@ -70,7 +70,8 @@ module.exports = {
       port: process.env.PORT || 3000,
       server: {
         baseDir: [outpath, './build']
-      }
+      },
+      browser: ["firefox"]
     }),
     new webpack.DefinePlugin({
       CANVAS_RENDERER: JSON.stringify(true),