Merged in feature/MENU-1_TH-6-game-creation-implement-create-button (pull request #2)

Feature/MENU-1 TH 6 game creation implement create button

server/server.js

@@ -119,6 +119,23 @@ function Server() {
       callback(response);
     });
 
+    socket.on('create-game', async (game, callback) => {
+      let response = {};
+      try {
+        let games = await addGameDb(game);
+        response = {
+          res: "ok",
+          message: games
+        };
+      } catch (error) {
+        response = {
+          res: "ko",
+          message: 'Error from server'
+        };
+      }
+      callback(response);
+    });
+
   });
 
   let updatePlayersFromDb = async function () {

src/assets/html/main-menu.html

@@ -375,9 +375,9 @@ border: 2px solid #f10505;
     <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>
+        <option value="Faction">Faction</option>
+        <option value="Draft">Draft</option>
+        <option value="Tournament">Tournament</option>
       </select>
     </div>
     <hr>
@@ -385,11 +385,11 @@ border: 2px solid #f10505;
     <div class="checkbox-div">
 
       <label class="container">Popularity
-        <input type="checkbox" id="popularity">
+        <input type="checkbox" name="popularity" id="popularity">
         <span class="checkmark"></span>
       </label>
       <label class="container">Discard for an action
-        <input type="checkbox" id="discardForAction">
+        <input type="checkbox" name="discard" id="discardForAction">
         <span class="checkmark"></span>
       </label>
     </div>

src/common/socket-service.js

@@ -91,4 +91,19 @@ export default class SocketService {
     },
     (error) => Promise.reject(error));
   }
+
+  createGame(game){
+    return this.checkConnection(game.player1).then( () => {
+      return new Promise( (resolve, reject) => {
+        this.ioClient.emit('create-game', game, function (response) {
+          if (response.res === "ok") {
+            resolve(response.message);
+          } else {
+            reject(response.message);
+          }
+        });
+      });
+    },
+    (error) => Promise.reject(error));
+  }
 }

src/menu/control/menu-controller.js

@@ -37,6 +37,7 @@ export default class MenuController {
       onOnlineGamesListRequested: this.onOnlineGamesListRequested.bind(this),
       onTryConnect: this.tryConnect.bind(this),
       onRequestDisconnection: this.onRequestDisconnection.bind(this),
+      onGameCreationRequest: this.onGameCreationRequest.bind(this)
     };
   }
 
@@ -50,4 +51,16 @@ export default class MenuController {
   onOnlineGamesListRequested(playername) {
     return this.socketService.getGamesList(playername);
   }
+
+  onGameCreationRequest(playername, deckModeSelected, advancedOptions) {
+    let game = {
+      player1: playername,
+      player2: "",
+      deck: deckModeSelected,
+      advRules: advancedOptions,
+      status: 'CREATED',
+      data: "",
+    };
+    return this.socketService.createGame(game);
+  }
 }

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

@@ -85,7 +85,8 @@ export default class MainMenuScene extends Phaser.Scene {
   // Listener for game creation page events
   gameCreationPageListener() {
     return {
-      onGoPreviousPage: this.onGoPreviousPage.bind(this)
+      onGoPreviousPage: this.onGoPreviousPage.bind(this),
+      onValidGameCreation: this.onValidGameCreation.bind(this),
     };
   }
 
@@ -95,6 +96,10 @@ export default class MainMenuScene extends Phaser.Scene {
     this.previousPages.pop().show();
   }
 
+  onValidGameCreation(deckModeSelected, advancedOptions) {
+    return this.menuEventListener.onGameCreationRequest(this.username, deckModeSelected, advancedOptions);
+  }
+
   // Login page specific
   onGoOnlineRoom() {
 

src/menu/views/menu-pages/game-creation-div-page.js

@@ -6,24 +6,59 @@ export default function GameCreationDivPage(element, listener) {
   const className=GameCreationDivPage.name;
 
   let div = element.getChildByID(id);
+  let divSelectDeckMode = element.getChildByID("deck-mode-select");
   let connectButton = element.getChildByName('loginButton');
   let username = element.getChildByName('username');
   let connectionStatus = element.getChildByID('connectionStatus');
   let onlineGame = element.getChildByName('onlineGame');
+  let createGameButton = element.getChildByName('validGameCreation');
 
-  let eventListener = function(event) {
+  let deckModeSelected = null;
+  let advancedOptions = [];
+
+  let clickEventListener = function(event) {
     let eventName = event.target.name;
     switch (eventName) {
         case "backToPrev":
           listener.onGoPreviousPage(gameCreationDivPage);
           break;
 
+        case "validGameCreation":
+          console.log(deckModeSelected);
+          console.log(advancedOptions);
+          listener.onValidGameCreation(deckModeSelected, advancedOptions);
+          break;
+        case "discard":
+        case "popularity":
+          if(event.target.checked){
+            advancedOptions.push(eventName);
+          } else {
+            let index = advancedOptions.indexOf(eventName);
+            if (index !== -1){
+              advancedOptions.splice(index, 1);
+            }
+          }
+        break;
+
       default:
         break;
     }
   };
 
-  div.addEventListener('click',eventListener);
+  let changeDeckEventListener = function(event) {
+    let eventValue = event.target.value;
+    if (eventValue !== 0) {
+      createGameButton.disabled = false;
+      deckModeSelected = event.target.value;
+    } else {
+      createGameButton.disabled = true;
+      deckModeSelected = event.target.value;
+    }
+  };
+
+  div.addEventListener('click',clickEventListener);
+
+  divSelectDeckMode.addEventListener('change',changeDeckEventListener);
 
   let onShow = function() {