Initial commit for VueJS

.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": ["@babel/preset-env"],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
-}

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -1,14 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-curly_bracket_next_line = false
-
-[*.md]
-trim_trailing_whitespace = false

.env → .env.development

@@ -1,9 +1,13 @@
+BROWSER=firefox
+
 //    1. Game server
 
+VUE_APP_SERVER_PORT=2610
+
   // a. If you want to test app with local server (npm run server-dev) :
-SERVER_HOST="localhost"
+VUE_APP_SERVER_HOST="localhost"
   // b. If you want to test app directly with running server online :
-//SERVER_HOST="149.91.81.94"
+//VUE_APP_SERVER_HOST="149.91.81.94"
 
 
 //    2. Game DB (if "localhost" selected above)

.env.production

@@ -0,0 +1,8 @@
+//    1. Game server
+
+VUE_APP_SERVER_HOST="149.91.81.94"
+VUE_APP_SERVER_PORT=2610
+
+//    2. Game DB (if "localhost" selected above)
+DB="localhost"
+DB_NAME="twelve_heroes"

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // allow async-await
+    'generator-star-spacing': 'off',
+    'no-new': 0,
+    'vue/html-self-closing': 'off',
+    'no-unused-vars': 'warn',
+    'prettier/prettier': [
+      'error',
+      { singleQuote: true, arrowParens: 'avoid', jsxBracketSameLine: true }
+    ]
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
+};

.eslintrc.json

@@ -1,27 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings"
-  ],
-  "parserOptions": {
-    "ecmaVersion": 2017,
-    "sourceType": "module"
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true,
-    "es6": true
-  },
-  "rules": {
-    "no-console": 0,
-    "semi": [2, "always"],
-    "eqeqeq": [2,"always"],
-    "no-unused-vars": 1
-  },
-  "settings": {
-    "import/core-modules": ["phaser"]
-  }
-}

.gitignore

@@ -1,72 +1,20 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# next.js build output
-.next
-
-#mock db
-db.json
-
-#webpack dev build
-assets
-webpack
-www
-www_web
-
-
-#cordova build
-platforms/
-plugins/
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/settings.json

@@ -1,6 +1,36 @@
 {
-    "git.ignoreLimitWarning": true,
+    "javascript.implicitProjectConfig.checkJs": true,
+    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe",
+    "javascript.updateImportsOnFileMove.enabled": "always",
     "typescript.validate.enable": false,
-    "tslint.enable": false,
-    "javascript.validate.enable": false
-}
+    "eslint.alwaysShowStatus": true,
+    "javascript.validate.enable": false,
+    "window.zoomLevel": -1,
+    "[javascript]": {
+        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    },
+    "[vue]": {
+    
+        "editor.defaultFormatter": "octref.vetur"
+    },
+    "emmet.showAbbreviationSuggestions": true,
+    "emmet.showExpandedAbbreviation": "always",
+    "emmet.syntaxProfiles": {
+        "vue-html": "html",
+        "vue":"html"
+    },
+    "vetur.format.defaultFormatter.html": "js-beautify-html",
+    "vetur.format.defaultFormatter.js": "prettier-eslint",
+    "vue-format.format_need": [
+        "html",
+        "js",
+        "css"
+    ],
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "editor.suggestSelection": "first",
+    "emmet.excludeLanguages": [
+        "markdown"
+    ]
+}

README.md

@@ -3,6 +3,45 @@ TWELVE HEROES
 *The digital version of the boardgame*
 --------------------------------------
 
+## Project setup
+```
+npm install
+```
+## Recommended VS code plugins :
+* Vetur
+* Vue 2 Snippets
+* Vue VSCode Snippets
+* ESlint
+* Prettier ESLint
+* All Autocomplete
+* Bootstrap 4, Font awesome 4, Font Awesome 5 Free
+* SCSS IntelliSense
+
+### Compiles and hot-reloads for development in Frefox browser
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your unit tests (watches for changes)
+```
+npm run test:unit
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### Old README :
+
 - [TWELVE HEROES](#twelve-heroes)
   - [*The digital version of the boardgame*](#the-digital-version-of-the-boardgame)
   - [**How to modify & run**](#how-to-modify--run)

app-server/app-server.js

@@ -1,6 +1,8 @@
 const express = require('express');
 const app = express();
-const port = 2612;
+const port = 1996;
 
-app.use(express.static('www_web'));
-app.listen(port, () => console.log(`Serving 12 Heroes App at http://localhost:${port}`));
+app.use(express.static('dist'));
+app.listen(port, () =>
+  console.log(`Serving 12 Heroes App at http://localhost:${port}`)
+);

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+};

config.xml

@@ -1,33 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<widget id="com.jojo.twelveheroes" version="1.0.0" windows-packageVersion="0.1.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>twelve-heroes</name>
-    <description>
-        A sample Apache Cordova application that responds to the deviceready event.
-    </description>
-    <author email="dev@cordova.apache.org" href="http://cordova.io">
-        Apache Cordova Team
-    </author>
-    <content src="index.html" />
-    <plugin name="cordova-plugin-whitelist" spec="1" />
-    <access origin="*" />
-    <allow-intent href="http://*/*" />
-    <allow-intent href="https://*/*" />
-    <allow-intent href="tel:*" />
-    <allow-intent href="sms:*" />
-    <allow-intent href="mailto:*" />
-    <allow-intent href="geo:*" />
-    <platform name="android">
-        <allow-intent href="market:*" />
-        <preference name="android-minSdkVersion" value="26"/>
-        <preference name="android-targetSdkVersion" value="27"/>
-    </platform>
-
-    <platform name="windows">
-        <preference name="windows-target-version" value="10.0" />
-    </platform>
-
-    <platform name="ios">
-        <allow-intent href="itms:*" />
-        <allow-intent href="itms-apps:*" />
-    </platform>
-</widget>

package.json

@@ -1,92 +1,42 @@
 {
   "name": "twelve-heroes",
-  "version": "1.0.0",
-  "description": "twelve heroes game",
-  "keywords": [
-    "ecosystem:cordova"
-  ],
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "dev": "DEV=true webpack --watch",
-    "start": "npm-run-all --parallel dev lint:watch",
+    "dev": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
+    "build-dev": "vue-cli-service build --mode development",
+    "tu": "vue-cli-service test:unit --watch",
+    "lint": "vue-cli-service lint",
     "server-dev": "cd server && npm run server-dev",
-    "dev-all": "npm-run-all --parallel server-dev dev lint:watch",
-    "build-web-app": "WEB=true webpack --mode=production",
     "appserver": "node app-server/app-server.js",
-    "server": "cd server && npm start",
-    "dev-cordova": "DEV=true CORDOVA=true webpack",
-    "postdev-cordova": "cordova prepare",
-    "build-cordova": "CORDOVA=true webpack --mode=production",
-    "postbuild-cordova": "cordova prepare",
-    "cordova-browser": "cordova run browser",
-    "win-build": "cordova build windows --win",
-    "preandroid-build": "set ORG_GRADLE_PROJECT_cdvMinSdkVersion=20 ",
-    "android-build": "cordova build android",
-    "win": "cordova run windows --win",
-    "android": "cordova run android --emulator",
-    "lint": "esw webpack.config.* src --color",
-    "lint:watch": "npm run lint -- --watch",
-    "lint-server": "esw server* --color",
-    "lint-server:watch": "npm run lint-server -- --watch",
-    "localtunnel": "lt --port 3000",
-    "share": "npm-run-all --parallel open:src localtunnel",
-    "test": "mocha --reporter progress \"src/**/*.test.js\"",
-    "test:watch": "npm run test -- --watch",
-    "clean": "rm -rf platforms plugins webpack www/dist www/index.html www/assets",
-    "export": "export PATH=$(npm bin):$PATH"
+    "server": "cd server && npm start"
   },
-  "author": "JOJO",
-  "license": "MIT",
   "dependencies": {
-    "phaser": "^3.21.0",
+    "core-js": "^3.6.4",
     "socket.io-client": "^2.3.0",
-    "cordova-android": "^8.1.0",
-    "cordova-browser": "^6.0.0",
-    "cordova-windows": "^7.0.1"
+    "vue": "^2.6.11",
+    "vue-clickaway": "^2.2.2",
+    "vue-router": "^3.1.6",
+    "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@babel/cli": "7.6.2",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
-    "@babel/polyfill": "7.6.0",
-    "@babel/preset-env": "7.6.2",
-    "@babel/register": "^7.9.0",
-    "are-you-es5": "^1.3.3",
-    "babel-loader": "8.0.6",
-    "browser-sync": "2.26.7",
-    "browser-sync-webpack-plugin": "2.2.2",
-    "chai": "4.2.0",
-    "chalk": "2.4.2",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "cordova": "^9.0.0",
-    "cordova-plugin-whitelist": "^1.3.4",
-    "dotenv": "^8.2.0",
-    "eslint": "6.4.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-watch": "6.0.1",
-    "express": "^4.17.1",
-    "file-loader": "6.0.0",
-    "html-loader": "^1.0.0",
-    "html-webpack-plugin": "3.2.0",
-    "mocha": "^7.1.1",
-    "npm-run-all": "4.1.5",
-    "open": "6.4.0",
-    "path": "0.12.7",
-    "raw-loader": "3.1.0",
-    "readline-sync": "1.4.10",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-middleware": "3.7.2",
-    "webpack-md5-hash": "0.0.6"
-  },
-  "cordova": {
-    "plugins": {
-      "cordova-plugin-whitelist": {}
-    },
-    "platforms": [
-      "browser",
-      "windows",
-      "android"
-    ]
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-plugin-unit-mocha": "~4.3.0",
+    "@vue/cli-plugin-vuex": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "1.0.0-beta.31",
+    "babel-eslint": "^10.1.0",
+    "chai": "^4.1.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.12.0",
+    "prettier": "^1.19.1",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
   }
 }

public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

server/.babelrc

@@ -1,3 +1,7 @@
 {
-  "extends": "../.babelrc"
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
 }
+

server/db/mariadb-connector.js

@@ -1,10 +1,9 @@
 'use strict';
 import mariadb from 'mariadb';
 
-const JOJOAPPS_SERVER_DB='localhost';
-// const JOJOAPPS_SERVER_DB_PORT= 1986;
-const JOJOAPPS_SERVER_DB_SOCKET= '/run/mysqld/mysqld.sock';
-const DATABASE_NAME='twelve_heroes';
+const JOJOAPPS_SERVER_DB = 'localhost';
+const JOJOAPPS_SERVER_DB_SOCKET = '/run/mysqld/mysqld.sock';
+const DATABASE_NAME = 'twelve_heroes';
 
 export default class MariadbConnector {
   constructor() {
@@ -14,7 +13,7 @@ export default class MariadbConnector {
     console.log('DB server : ' + host);
     console.log('DB database : ' + database);
 
-    let mariaDbConfig={
+    let mariaDbConfig = {
       host,
       user: 'node',
       password: 'nodejs1234',
@@ -26,7 +25,7 @@ export default class MariadbConnector {
       mariaDbConfig.socketPath = JOJOAPPS_SERVER_DB_SOCKET;
       console.log('Will use DB UNIX socket : ' + mariaDbConfig.socketPath);
     } else {
-      mariaDbConfig.port=port;
+      mariaDbConfig.port = port;
       console.log('Will use DB port : ' + port);
     }
 
@@ -34,13 +33,12 @@ export default class MariadbConnector {
   }
 
   async getUsernames() {
-
     let conn;
     let players = [];
     try {
       conn = await this.pool.getConnection();
 
-      const rows_players = await conn.query("SELECT username FROM players");
+      const rows_players = await conn.query('SELECT username FROM players');
       for (const { username: u } of rows_players) {
         players.push(u);
       }
@@ -57,7 +55,10 @@ export default class MariadbConnector {
     let conn;
     try {
       conn = await this.pool.getConnection();
-      const val = await conn.query("INSERT INTO players value (?, NOW(),NULL)", [username]);
+      const val = await conn.query(
+        'INSERT INTO players value (?, NOW(),NULL)',
+        [username]
+      );
       console.log('OK removing player : ', val);
 
       return val;
@@ -75,7 +76,9 @@ export default class MariadbConnector {
     let conn;
     try {
       conn = await this.pool.getConnection();
-      const val = await conn.query("DELETE FROM players WHERE username=?", [username]);
+      const val = await conn.query('DELETE FROM players WHERE username=?', [
+        username
+      ]);
       console.log('OK removing player : ', val);
       return val;
     } catch (err) {
@@ -93,13 +96,17 @@ export default class MariadbConnector {
     let conn;
     try {
       conn = await this.pool.getConnection();
-      const val = await conn.query("INSERT INTO games values (NULL,?,?,?,?,?,?,NOW())",
-        [game.player1,
-        game.player2,
-        game.deck,
-        convertAdvRulesToString(game.advRules),
-        game.status,
-        game.data]);
+      const val = await conn.query(
+        'INSERT INTO games values (NULL,?,?,?,?,?,?,NOW())',
+        [
+          game.player1,
+          game.player2,
+          game.deck,
+          convertAdvRulesToString(game.advRules),
+          game.status,
+          game.data
+        ]
+      );
 
       console.log('OK adding game : ', val);
       return val.insertId;
@@ -114,25 +121,37 @@ export default class MariadbConnector {
   }
 
   removeGameById(gameId) {
-    return this.removeGame("DELETE FROM games WHERE id=?", [gameId]);
+    return this.removeGame('DELETE FROM games WHERE id=?', [gameId]);
   }
   removeGamesByPlayer1(player1Name) {
-    return this.removeGame("DELETE FROM games WHERE player1=?", [player1Name]);
+    return this.removeGame('DELETE FROM games WHERE player1=?', [player1Name]);
   }
   removeGamesByPlayerAny(playerName) {
-    return this.removeGame("DELETE FROM games WHERE player1=? OR player2=?", [playerName, playerName]);
+    return this.removeGame('DELETE FROM games WHERE player1=? OR player2=?', [
+      playerName,
+      playerName
+    ]);
   }
   removeGamesByStatus(status) {
-    return this.removeGame("DELETE FROM games WHERE status=?", [status]);
+    return this.removeGame('DELETE FROM games WHERE status=?', [status]);
   }
   removeGamesByDays(days) {
-    return this.removeGame("DELETE FROM games WHERE  datediff(NOW(),last_played) > ?", [days]);
+    return this.removeGame(
+      'DELETE FROM games WHERE  datediff(NOW(),last_played) > ?',
+      [days]
+    );
   }
   removeFinishedGamesByDays(days) {
-    return this.removeGame("DELETE FROM games WHERE status='FINISHED' AND datediff(NOW(),last_played) > ?", [days]);
+    return this.removeGame(
+      "DELETE FROM games WHERE status='FINISHED' AND datediff(NOW(),last_played) > ?",
+      [days]
+    );
   }
   removeCreatedGamesByPlayer1(player1Name) {
-    return this.removeGame("DELETE FROM games WHERE player1=? AND status='CREATED'", [player1Name]);
+    return this.removeGame(
+      "DELETE FROM games WHERE player1=? AND status='CREATED'",
+      [player1Name]
+    );
   }
 
   async removeGame(queryStr, queryArgs) {
@@ -154,16 +173,16 @@ export default class MariadbConnector {
   }
 
   async getJoinableGamesForPlayer(username) {
-
     let conn;
     let games = [];
     try {
       conn = await this.pool.getConnection();
       const res = await conn.query(
         "SELECT * FROM`games` WHERE (status = 'CREATED' OR status = 'PAUSED')  AND(player1 = ? OR player2 = '' OR player2 = ?)",
-        [username,username]);
-      for (const { id,player1,player2,deck,adv_rules } of res) {
-        games.push({id,player1,player2,deck,adv_rules});
+        [username, username]
+      );
+      for (const { id, player1, player2, deck, adv_rules } of res) {
+        games.push({ id, player1, player2, deck, adv_rules });
       }
       console.log(`returning for ${username} : `, games);
     } finally {
@@ -172,10 +191,9 @@ export default class MariadbConnector {
       }
     }
     return games;
-
   }
 }
-let convertAdvRulesToString = function (advRulesArray) {
+let convertAdvRulesToString = function(advRulesArray) {
   let advRulestStr = '';
   let last = advRulesArray.length - 1;
   advRulesArray.forEach((rule, index) => {

server/package.json

@@ -7,7 +7,7 @@
   ],
   "scripts": {
     "start": "babel-node server.js",
-    "server-dev": "babel-node -r ../node_modules/dotenv/config server.js dotenv_config_path=../.env",
+    "server-dev": "babel-node -r ../node_modules/dotenv/config server.js dotenv_config_path=../.env.development",
     "tools": "node tools/server-tools.js"
   },
   "author": "JOJO",
@@ -18,7 +18,8 @@
   },
   "devDependencies": {
     "@babel/node": "7.6.2",
-    "heroku": "^7.39.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
+    "@babel/preset-env": "7.6.2",
     "socket.io-client": "^2.3.0"
   }
 }

server/server.js

@@ -4,7 +4,6 @@ import DuelController from './game-server/duel-controller';
 import MariadbConnector from './db/mariadb-connector';
 import ServerToolListner from './tools/server-tool-listener';
 
-
 function Server() {
   console.log('Starting 12 heroes server');
 
@@ -13,16 +12,12 @@ function Server() {
 
   let mariadbConn = new MariadbConnector();
 
-
   let authorizedPlayers = new Map();
   let connectedPlayers = new Map();
   let authorizedPlayersNames = new Set();
 
-
-
   // let players = [];
 
-
   // let addNewPlayer = function (playerSocket, playerName) {
   //   console.log('players length : ' + players.length + ' : ' + players);
   //   if (players.length < 2) {
@@ -35,28 +30,34 @@ function Server() {
   //   }
   // };
 
-  server.on('connection', function (socket) {
-    console.log("A player connected with id : " + socket.id);
+  server.on('connection', function(socket) {
+    console.log('A player connected with id : ' + socket.id);
 
-    socket.on('disconnect', (reason) => {
-      removeAllGamesCreatedByPlayer(connectedPlayers.get(socket.id));
+    socket.on('disconnect', reason => {
+      try {
+        removeAllGamesCreatedByPlayer(connectedPlayers.get(socket.id));
+      } catch (err) {
+        console.log('Error removing games : ' + err.message);
+      }
       forceClientsReloadGames();
-      if (reason === 'client namespace disconnect') {
-        console.log("A player disconnected with id : " + socket.id);
+      if (
+        reason === 'client namespace disconnect' ||
+        reason === 'server namespace disconnect'
+      ) {
+        console.log('A player disconnected with id : ' + socket.id);
         let playerName = connectedPlayers.get(socket.id);
         if (playerName) {
           connectedPlayers.delete(socket.id);
           authorizedPlayers.get(playerName).setConnected(false);
           authorizedPlayers.get(playerName).setSocket(null);
-          console.log(playerName + " disconnected");
+          console.log(playerName + ' disconnected');
         }
       } else {
-        console.log("disconnected unexpectidly with reason : " + reason);
+        console.log('disconnected unexpectidly with reason : ' + reason);
       }
     });
     socket.on('connect', () => {
-      console.log("Connected to server");
-
+      console.log('Connected to server');
     });
     socket.on('auth', async (playerName, callback) => {
       console.log(' Received auth message, player name : ' + playerName);
@@ -66,31 +67,39 @@ function Server() {
       let kickout = false;
       if (!authorizedPlayersNames.has(playerName)) {
         response = {
-          res: "ko",
-          message: playerName + " Not found"
+          res: 'ko',
+          message: playerName + ' Not found'
         };
         kickout = true;
       }
       // If the player is already connected and active
-      else if (authorizedPlayers.get(playerName).isConnected()
-        && authorizedPlayers.get(playerName).getSocket().connected) {
+      else if (
+        authorizedPlayers.get(playerName).isConnected() &&
+        authorizedPlayers.get(playerName).getSocket().connected
+      ) {
         response = {
-          res: "ko",
-          message: playerName + " already connected"
+          res: 'ko',
+          message: playerName + ' already connected'
         };
         kickout = true;
-      }
-      else {
+      } else {
         // Player marked as connected but socket is down, clean it
         if (authorizedPlayers.get(playerName).isConnected()) {
-          authorizedPlayers.get(playerName).getSocket().disconnect(true);
+          authorizedPlayers
+            .get(playerName)
+            .getSocket()
+            .disconnect(true);
         } else {
           // In case server did not detect disconnection and did not clean the pending created games
-          removeAllGamesCreatedByPlayer(playerName);
+          try {
+            removeAllGamesCreatedByPlayer(playerName);
+          } catch (err) {
+            console.log('Error removing games : ' + err.message);
+          }
         }
         response = {
-          res: "ok",
-          message: playerName + " connected"
+          res: 'ok',
+          message: playerName + ' connected'
         };
         authorizedPlayers.get(playerName).setConnected(true);
         authorizedPlayers.get(playerName).setSocket(socket);
@@ -111,13 +120,12 @@ function Server() {
       try {
         let games = await getJoinableGames(playerName);
         response = {
-          res: "ok",
+          res: 'ok',
           message: games
         };
       } catch (error) {
-
         response = {
-          res: "ko",
+          res: 'ko',
           message: 'Error from server'
         };
       }
@@ -129,23 +137,32 @@ function Server() {
       try {
         let id = await addGameDb(game);
         response = {
-          res: "ok",
+          res: 'ok',
           message: id
         };
         console.log('Force all clients to reload their games');
         forceClientsReloadGames();
       } catch (error) {
         response = {
-          res: "ko",
+          res: 'ko',
           message: 'Error from server'
         };
       }
       callback(response);
     });
 
+    socket.on('remove-created-game', async (username, callback) => {
+      try {
+        removeAllGamesCreatedByPlayer(username);
+      } catch (err) {
+        console.log('Error removing games : ' + err.message);
+      }
+      callback(true);
+      forceClientsReloadGames();
+    });
   });
 
-  let updatePlayersFromDb = async function () {
+  let updatePlayersFromDb = async function() {
     try {
       let usernames = await mariadbConn.getUsernames();
       authorizedPlayersNames = new Set(usernames);
@@ -163,11 +180,10 @@ function Server() {
     }
   };
 
-  let getCurrentListAuthorizedPlayers = function () {
+  let getCurrentListAuthorizedPlayers = function() {
     return [...authorizedPlayersNames];
   };
-  let addPlayerDb = async function (username) {
-
+  let addPlayerDb = async function(username) {
     console.log('add player in db : ' + username);
     try {
       let response = await mariadbConn.addPlayer(username);
@@ -178,8 +194,7 @@ function Server() {
       return 'KO ' + err.message;
     }
   };
-  let removePlayerDb = async function (username) {
-
+  let removePlayerDb = async function(username) {
     console.log('remove player in db : ' + username);
     try {
       let response = await mariadbConn.removePlayer(username);
@@ -191,8 +206,7 @@ function Server() {
     }
   };
 
-  let addGameDb = async function (game) {
-
+  let addGameDb = async function(game) {
     try {
       let response = await mariadbConn.addNewGame(game);
       return response;
@@ -202,7 +216,7 @@ function Server() {
     }
   };
 
-  let removeGameDb = async function (method, ...args) {
+  let removeGameDb = async function(method, ...args) {
     try {
       let response;
       switch (method) {
@@ -234,8 +248,7 @@ function Server() {
     }
   };
 
-  let getJoinableGames = async function (username) {
-
+  let getJoinableGames = async function(username) {
     try {
       let games = await mariadbConn.getJoinableGamesForPlayer(username);
       return games;
@@ -246,17 +259,12 @@ function Server() {
   };
 
   let removeAllGamesCreatedByPlayer = async function(playerName) {
-    try {
-      let result = await mariadbConn.removeCreatedGamesByPlayer1(playerName);
-      return result;
-    } catch (err) {
-      console.log('KO : not able to remove created games : ' + err);
-      throw err;
-    }
+    let result = await mariadbConn.removeCreatedGamesByPlayer1(playerName);
+    return result;
   };
 
-  let forceClientsReloadGames = function () {
-  server.emit('reload-games-list');
+  let forceClientsReloadGames = function() {
+    server.emit('reload-games-list');
   };
 
   return {
@@ -268,7 +276,6 @@ function Server() {
     removeGameDb,
     getJoinableGames
   };
-
 }
 
 let server = new Server();

src/App.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="app">
+    <div style="position: absolute;">
+      <span>For tests :</span>
+      <br />
+      <button class="btn btn-primary" @click="display = 'app-menu'">
+        Menu
+      </button>
+      <br />
+      <br />
+      <button class="btn btn-primary" @click="display = 'app-game'">
+        Game
+      </button>
+    </div>
+    <div class="container fill" style="height: 100vh;">
+      <!-- <div class="bg"> -->
+      <keep-alive>
+        <component
+          :is="display"
+          @join-game-id="launchOnlineGame($event)"
+          :username="username"
+          :game-id="onlineGameId"
+        ></component>
+      </keep-alive>
+      <!-- </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import AppMenu from './menu/AppMenu';
+import AppGame from './game/AppGame';
+import { globalEventsBus } from './main';
+export default {
+  name: 'App',
+  data() {
+    return {
+      display: 'app-menu',
+      username: '',
+      onlineGameId: -1
+    };
+  },
+  components: {
+    AppMenu,
+    AppGame
+  },
+  methods: {
+    launchOnlineGame(game) {
+      console.log('received game to launch : ', game);
+      this.username = game.username;
+      this.onlineGameId = game.id;
+      this.display = 'app-game';
+    }
+  },
+  created() {
+    globalEventsBus.$on('game-stopped', () => {
+      this.username = '';
+      this.onlineGameId = -1;
+      this.display = 'app-menu';
+    });
+  }
+};
+</script>
+
+<style scoped>
+.bg {
+  height: 100%;
+  width: auto;
+  position: relative;
+}
+.bg::after {
+  content: '';
+  background: url('./assets/twelveHeroes_cover.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  opacity: 0.7;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+}
+</style>

src/assets/all-heroes.json

@@ -1,430 +0,0 @@
-{
-  "version": "1.0.0",
-  "heroes": [
-    {
-      "name" : "Paysan",
-      "cost" : 0,
-      "power" : 1,
-      "faction": "humans",
-      "draftMode" : true,
-      "ability": "PaysanAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Dragon",
-      "cost" : 7,
-      "power" : 6,
-      "faction": "humans",
-      "draftMode" : true,
-      "ability": "DragonAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Archange",
-      "cost" : 4,
-      "power" : 3,
-      "faction": "humans",
-      "draftMode" : true,
-      "ability": "ArchangeAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Chevalier",
-      "cost" : 3,
-      "power" : 4,
-      "faction": "humans",
-      "draftMode" : true,
-      "ability": "ChevalierAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Faucon Geant",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "FauconAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Intendant",
-      "cost" : 2,
-      "power" : 2,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "IntendantAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Canon",
-      "cost" : 1,
-      "power" : 4,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "CanonAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Char",
-      "cost" : 3,
-      "power" : 3,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "CharAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Chevre",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "ChevreAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Stratege",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "humans",
-      "draftMode" : false,
-      "ability": "StrategeAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Homme-Arbre",
-      "cost" : 4,
-      "power" : 4,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "HommeArbreAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Elf",
-      "cost" : 2,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "ElfAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Stratege",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "StrategeAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Intendant",
-      "cost" : 2,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "IntendantAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Faucon Geant",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "FauconAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Paysan",
-      "cost" : 0,
-      "power" : 1,
-      "faction": "elves",
-      "draftMode" : false,
-      "ability": "PaysanAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Archange",
-      "cost" : 4,
-      "power" : 3,
-      "faction": "elves",
-      "draftMode" : true,
-      "ability": "ArchangeAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Chevre",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : false,
-      "ability": "ChevreAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Voilier Celeste",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "elves",
-      "draftMode" : false,
-      "ability": "VoilierAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Orc",
-      "cost" : 3,
-      "power" : 3,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "orcsAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Behemoth",
-      "cost" : 5,
-      "power" : 5,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "BehemothAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Gobelin",
-      "cost" : 0,
-      "power" : 2,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "GobelinAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Char",
-      "cost" : 3,
-      "power" : 3,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "CharAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Chevre",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "ChevreAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Paysan",
-      "cost" : 0,
-      "power" : 1,
-      "faction": "orcs",
-      "draftMode" : false,
-      "ability": "PaysanAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Intendant",
-      "cost" : 2,
-      "power" : 2,
-      "faction": "orcs",
-      "draftMode" : true,
-      "ability": "IntendantAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Geant de Fer",
-      "cost" : 2,
-      "power" : 3,
-      "faction": "meca",
-      "draftMode" : true,
-      "ability": "GeantAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Golem",
-      "cost" : 4,
-      "power" : 4,
-      "faction": "meca",
-      "draftMode" : true,
-      "ability": "GolemAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Canon",
-      "cost" : 1,
-      "power" : 4,
-      "faction": "meca",
-      "draftMode" : true,
-      "ability": "CanonAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Char",
-      "cost" : 3,
-      "power" : 3,
-      "faction": "meca",
-      "draftMode" : false,
-      "ability": "CharAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Voilier Celeste",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "meca",
-      "draftMode" : true,
-      "ability": "VoilierAbility",
-      "nbInDeck": 2
-    },
-    {
-      "name" : "Intendant",
-      "cost" : 2,
-      "power" : 2,
-      "faction": "meca",
-      "draftMode" : false,
-      "ability": "IntendantAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Gobelin",
-      "cost" : 0,
-      "power" : 2,
-      "faction": "meca",
-      "draftMode" : false,
-      "ability": "GobelinAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Stratege",
-      "cost" : 1,
-      "power" : 2,
-      "faction": "meca",
-      "draftMode" : true,
-      "ability": "StrategeAbility",
-      "nbInDeck": 1
-    },
-    {
-      "name" : "Dragon",
-      "cost" : 7,
-      "power" : 6,
-      "faction": "None",
-      "draftMode" : true,
-      "ability": "DragonAbility",
-      "nbInDeck": 1
-    }
-  ],
-  "abilities": [
-    {
-      "abilityName" : "PaysanAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Paysan est recrute, prenez 2 Nourritures."
-    },
-    {
-      "abilityName" : "DragonAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Dragon est recrute, chaque joueur doit defausser 1 Nourriture dans chaque region ou il le peut."
-    },
-    {
-      "abilityName" : "ArchangeAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand l'Archange est recrute, gagnez 4 Nourritures dans une region ou vous avez au moins un heros."
-    },
-    {
-      "abilityName" : "ChevalierAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Chevalier est recrute, vous devez reprendre dans votre main un de vos Heros en jeu (le Chevalier si besoin)."
-    },
-    {
-      "abilityName" : "FauconAbility",
-      "abilityHook": "BeforeMilitary",
-      "optionnal": "true",
-      "abilityDesc-FR" : "Le Faucon Geant peut profiter gratuitement d'une action Deplacer au debut de votre phase Militaire."
-    },
-    {
-      "abilityName" : "IntendantAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand l'Intendant est recrute, gagnez 1 Nourriture dans chaque region ou vous avez au moins un heros."
-    },
-    {
-      "abilityName" : "CanonAbility",
-      "abilityHook": "BeforeMaintenance",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Au debut de votre Maintenance, vous devez defausser le canon."
-    },
-    {
-      "abilityName" : "CharAbility",
-      "abilityHook": "AfterDeploy",
-      "optionnal": "true",
-      "abilityDesc-FR" : "Quand le Char est deploye, vous pouvez renvoyer (sans Nourriture) un heros adverse de cout 3 ou moins de cette region vers son Campement."
-    },
-    {
-      "abilityName" : "ChevreAbility",
-      "abilityHook": "BeforeMaintenance",
-      "optionnal": "true",
-      "abilityDesc-FR" : "Au debut de votre Maintenance, si la chevre est dans une region, vous pouvez la defausser pour gagner une nourriture dans cette region."
-    },
-    {
-      "abilityName" : "StrategeAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "true",
-      "abilityDesc-FR" : "Quand le Stratege est recrute, vous pouvez renvoyer (sans Nourriture) n'importe quel nombre de vos Heros des regions vers votre Campement."
-    },
-    {
-      "abilityName" : "HommeArbreAbility",
-      "abilityHook": ["AfterDeploy","AfterMove"],
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand l'Homme-Arbre est deploye ou deplace, gagnez 1 Nourriture dans cette region."
-    },
-    {
-      "abilityName" : "ElfAbility",
-      "abilityHook": "AfterDeploy",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand l'Elfe est deploye ou deplace, gagnez 2 Nourritures dans cette region."
-    },
-    {
-      "abilityName" : "VoilierAbility",
-      "abilityHook": "AfterDeploy",
-      "optionnal": "true",
-      "abilityDesc-FR" : "Quand le Voilier Celeste est deploye, vous pouvez ajouter gratuitement avec lui un Heros de cout 0 ou 1 de votre main. Si ce Heros a un effet quand il est recrute, appliquez-le."
-    },
-    {
-      "abilityName" : "orcsAbility",
-      "abilityHook": "AfterDeploy",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand l'orcs est deploye, chaque joueur doit defausser 1 Nourriture dans cette region, s'il le peut."
-    },
-    {
-      "abilityName" : "BehemothAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Behemoth est recrute, l'adversaire doit defausser un Heros dans une region, s'il le peut."
-    },
-    {
-      "abilityName" : "GobelinAbility",
-      "abilityHook": "AfterRecruit",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Gobelin est recrute, deployez-le gratuitement dans une region, sans pouvoir emmener de Nourriture."
-    },
-    {
-      "abilityName" : "GeantAbility",
-      "abilityHook": "AfterDiscard",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Quand le Geant de Fer est defausse depuis une region ou votre campement, piochez une carte."
-    },
-    {
-      "abilityName" : "GolemAbility",
-      "abilityHook": "BeforeControl",
-      "optionnal": "false",
-      "abilityDesc-FR" : "Vous controlez la region ou se trouve le Golem meme en cas d'egalite avec votre adversaire."
-    }
-  ]
-}

src/assets/html/css/style.css

@@ -1,180 +0,0 @@
-#login, #online-room {
-  background: #C7CC2D;
-  border: 1px solid #972620;
-  border-radius: 6px;
-  height: 300px;
-  margin-top: 20px;
-  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;
-  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 }
-
-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;
-}
-

src/assets/html/main-menu.html

@@ -1,404 +0,0 @@
-<style type="text/css">
-.main-div {
-  background: #03c11b;
-  border: 1px solid #013007;
-  border-radius: 6px;
-  height: 300px;
-  margin-top: 0px;
-  margin-left: auto;
-  width: 300px;
-}
-#online-room {
-  position: relative;
-  width: 500px;
-  margin-left: -150px;
-}
-
-input[type="password"], input[type="text"] {
-  background: linear-gradient(top, #03c11b, #e6e6e6);
-  border: 1px solid #03c11b;
-  border-radius: 4px;
-  box-shadow: 0 1px #03c11b;
-  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 #03c11b;
-}
-
-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 #03c11b;
-}
-.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 #03c11b;
-}
-.connection {
-  font-family:Arial, "Helvetica", sans-serif;
-  font-size:14px;
-  color: #660c07;
-  text-align:center;
-}
-
-#online-room-buttons {
-  position: absolute;
-  top:20px;
-  left:205px;
-}
-#online-room-buttons p {
-margin-left: 20px;
-}
-#online-room-buttons div {
-  margin-top: 50px;
-}
-
-#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 {
-  display: none;
-  padding: 0;
-  list-style:none;
-  margin-top: 1px;
-}
-
-#list-games li {
-  margin: 7px 5px 0px 5px;
-
-  width:170px;
-  height:35px;
-  background-color:#191817;
-  padding-left:5px;
-  font-weight:normal;
-  text-transform: none;
-  text-shadow:none;
-  text-align: left;
-
-}
-
-.el-selected {
-border: 2px solid #f10505;
-  margin-left: 3px;
-}
-
-#list-games li div {
-  margin-bottom: -3px;
-}
-#list-games li span {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.game-entry-title {
-  font-family:Arial, "Helvetica", sans-serif;
-  font-size:14px;
-  color:#F8E15E;
-  padding-left: 10px;
-}
-.game-entry-desc {
-  text-decoration:none;
-  font-size:11px;
-  color:#F8E15E;
-}
-#loader-online-games {
-  display: block;
-  margin-top: 50px;
-  margin-left: 62px;
-  border: 8px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 8px solid #F8E15E;
-  width: 40px;
-  height: 40px;
-  -webkit-animation: spin 1.5s linear infinite; /* Safari */
-  animation: spin 1.5s linear infinite;
-}
-
-/* Safari */
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-#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>
-
-<body class="body">
-  <div id="login" class="main-div" style="display:none">
-    <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 id="online-room" class="main-div" style="display:none">
-    <div id="online-games">
-      Existing Games
-      <hr>
-      <div id="loader-online-games"></div>
-      <ul id="list-games">
-        <li>
-          <span class="game-entry-title">Resume jojo VS lily</span>
-          <div></div>
-          <span class="game-entry-desc">Factions + no adv. rules</span>
-        </li>
-        <li>
-          <span class="game-entry-title">mart waiting...</span>
-          <div></div>
-          <span class="game-entry-desc">Tournament + popularity + discard</span>
-        </li>
-      </ul>
-    </div>
-
-    <div id="online-room-buttons">
-      <p class="connection" id="connectionStatusOnline"></p>
-      <div>
-        <input type="button" value="Create new game" name="createOnlineGame">
-        <input type="button" value="Join / Resume game" name="joinOnlineGame" disabled>
-        <input type="button" value="Back to Menu" name="backToMain">
-      </div>
-    </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="Faction">Faction</option>
-        <option value="Draft">Draft</option>
-        <option value="Tournament">Tournament</option>
-      </select>
-    </div>
-    <hr>
-    Select advandced rules
-    <div class="checkbox-div">
-
-      <label class="container">Popularity
-        <input type="checkbox" name="popularity" id="popularity">
-        <span class="checkmark"></span>
-      </label>
-      <label class="container">Discard for an action
-        <input type="checkbox" name="discard" 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>
-
-</html>

src/common/game-params.js

@@ -1,20 +0,0 @@
-'use strict';
-
-export default class GameParams {
-  constructor(playerBlueName, playerRedName, gameDeckMode, advancedRules = []) {
-    this.playerBlueName = playerBlueName;
-    this.playerRedName = playerRedName;
-    this.gameDeckMode = gameDeckMode;
-    this.advancedRules = advancedRules;
-  }
-
-  setCurrentPlayer(playerController) {
-    this.currentPlayer = playerController;
-  }
-
-  getCurrentPlayer() {
-    return this.currentPlayer;
-  }
-
-
-}

src/common/socket-service.js

@@ -1,114 +1,119 @@
 'use strict';
 import io from 'socket.io-client';
-// import promiseTimeout from './utils/promise-timeout';
-/*
-  Messages :
-    - disconnect
-    - reconnecting
-    - reconnect
-    - reconnect_failed
-    -
-*/
-const SERVER_URL = 'http://' + process.env.SERVER_HOST;
-const SERVER_PORT = process.env.SERVER_PORT;
 
+const SERVER_URL = 'http://' + process.env.VUE_APP_SERVER_HOST;
+const SERVER_PORT = process.env.VUE_APP_SERVER_PORT;
 
-
-export default class SocketService {
-  constructor() {
-    this.newGameCreatedListenerCb=null;
-  }
-
-  setNewGameCreatedListener(callback) {
-    this.newGameCreatedListenerCb = callback;
-  }
-
-  unsetNewGameCreatedListener() {
-    this.newGameCreatedListenerCb=null;
-  }
-
-  connect(name) {
+export default function SocketService(socketEventBus) {
+  let eventBus = socketEventBus;
+  let ioClient = null;
+  let connect = function(name) {
     let promise = new Promise((resolve, reject) => {
-      console.log('Connecting socket service to : ' + SERVER_URL + ':' + SERVER_PORT);
-      this.ioClient = io(SERVER_URL+':'+SERVER_PORT,
-        { reconnectionAttempts: 2 });
+      console.log(
+        'Connecting socket service to : ' + SERVER_URL + ':' + SERVER_PORT
+      );
+      ioClient = io(SERVER_URL + ':' + SERVER_PORT, {
+        reconnectionAttempts: 2
+      });
 
-      this.ioClient.on('disconnect', (reason) => {
+      ioClient.on('disconnect', reason => {
         if (reason !== 'io client disconnect') {
-          console.log("Connection with server lost unexpectidly : " + reason);
-          //this.ioClient.close();
+          console.log('Connection with server lost unexpectidly : ' + reason);
+          // this.ioClient.close();
         }
       });
 
-      this.ioClient.on('connect', () => {
-        console.log("Connected to server");
-          this.ioClient.emit('auth', name, function (response) {
-            if (response.res === "ok") {
-              resolve(response.message);
-            } else {
-              reject(response.message);
-            }
-          });
+      ioClient.on('connect', () => {
+        console.log('Connected to server');
+        ioClient.emit('auth', name, function(response) {
+          if (response.res === 'ok') {
+            resolve(response.message);
+          } else {
+            reject(response.message);
+          }
+        });
       });
 
-      this.ioClient.on('connect_error', () => {
-        console.log("connect_error to server");
+      ioClient.on('connect_error', () => {
+        console.log('connect_error to server');
       });
 
-      this.ioClient.on('reconnect_failed', () => {
-        console.log("reconnect_failed to server");
-        reject('Cannot reach server');
+      ioClient.on('reconnect_failed', () => {
+        console.log('reconnect_failed to server');
+        reject(new Error('Cannot reach server'));
       });
 
-      this.ioClient.on('reload-games-list', () => {
-        console.log("force reload games list !");
-        if(this.newGameCreatedListenerCb !== null) {
-          this.newGameCreatedListenerCb();
-        }
+      ioClient.on('reload-games-list', () => {
+        console.log('force reload games list !');
+        eventBus.$emit('reload-games');
       });
     });
     return promise;
-  }
+  };
 
-  checkConnection(playername) {
-    if (this.ioClient.connected === false) {
-      return this.connect(playername);
+  let checkConnection = function(playername) {
+    if (ioClient && ioClient.connected === false) {
+      return connect(playername);
     } else {
       return Promise.resolve('Still connected');
     }
-  }
+  };
 
-  disconnect() {
+  let disconnect = function() {
     console.log('Manual client disconnect');
-    this.ioClient.close();
-  }
-  getGamesList(playername) {
-    return this.checkConnection(playername).then( () => {
-      return new Promise( (resolve, reject) => {
-        this.ioClient.emit('games-list', playername, function (response) {
-          if (response.res === "ok") {
-            resolve(response.message);
-          } else {
-            reject(response.message);
-          }
+    ioClient.close();
+  };
+  let getGamesList = function(playername) {
+    return checkConnection(playername).then(
+      () => {
+        return new Promise((resolve, reject) => {
+          ioClient.emit('games-list', playername, function(response) {
+            if (response.res === 'ok') {
+              resolve(response.message);
+            } else {
+              reject(response.message);
+            }
+          });
         });
-      });
-    },
-    (error) => Promise.reject(error));
-  }
+      },
+      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);
-          }
+  let createGame = function(game) {
+    return checkConnection(game.player1).then(
+      () => {
+        return new Promise((resolve, reject) => {
+          ioClient.emit('create-game', game, function(response) {
+            if (response.res === 'ok') {
+              resolve(response.message);
+            } else {
+              reject(response.message);
+            }
+          });
         });
-      });
-    },
-    (error) => Promise.reject(error));
-  }
+      },
+      error => Promise.reject(error)
+    );
+  };
+  let removeCreatedGames = function(username) {
+    return checkConnection(username).then(
+      () => {
+        return new Promise(resolve => {
+          console.log('emit : remove-created-game');
+          ioClient.emit('remove-created-game', username, function(response) {
+            resolve(response);
+          });
+        });
+      },
+      error => Promise.reject(error)
+    );
+  };
+  return {
+    connect,
+    disconnect,
+    getGamesList,
+    createGame,
+    removeCreatedGames
+  };
 }

src/common/style/style.scss

@@ -0,0 +1,324 @@
+.main-div {
+    // background: #03c11b;
+    border: 1px solid #013007;
+    border-radius: 6px;
+    height: 300px;
+    margin-top: 200px;
+    // margin-left: 50px;
+    width: 300px;
+  }
+  #online-room {
+    position: relative;
+    width: 500px;
+    margin-left: -150px;
+  }
+  
+  input[type="password"], input[type="text"] {
+    background: linear-gradient(to bottom, #03c11b, #e6e6e6);
+    border: 1px solid #03c11b;
+    border-radius: 4px;
+    box-shadow: 0 1px #03c11b;
+    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(to bottom,#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 #03c11b;
+  }
+  
+  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(to bottom,#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 #03c11b;
+  }
+  .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 #03c11b;
+  }
+  .connection {
+    font-family:Arial, "Helvetica", sans-serif;
+    font-size:14px;
+    color: #660c07;
+    text-align:center;
+  }
+  
+  #online-room-buttons {
+    position: absolute;
+    top:20px;
+    left:205px;
+  }
+  #online-room-buttons p {
+  margin-left: 20px;
+  }
+  #online-room-buttons div {
+    margin-top: 50px;
+  }
+  
+  #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 {
+    display: none;
+    padding: 0;
+    list-style:none;
+    margin-top: 1px;
+  }
+  
+  #list-games li {
+    margin: 7px 5px 0px 5px;
+  
+    width:170px;
+    height:35px;
+    background-color:#191817;
+    padding-left:5px;
+    font-weight:normal;
+    text-transform: none;
+    text-shadow:none;
+    text-align: left;
+  
+  }
+  
+  .el-selected {
+  border: 2px solid #f10505;
+    margin-left: 3px;
+  }
+  
+  #list-games li div {
+    margin-bottom: -3px;
+  }
+  #list-games li span {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .game-entry-title {
+    font-family:Arial, "Helvetica", sans-serif;
+    font-size:14px;
+    color:#F8E15E;
+    padding-left: 10px;
+  }
+  .game-entry-desc {
+    text-decoration:none;
+    font-size:11px;
+    color:#F8E15E;
+  }
+  #loader-online-games {
+    display: block;
+    margin-top: 50px;
+    margin-left: 62px;
+    border: 8px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 8px solid #F8E15E;
+    width: 40px;
+    height: 40px;
+    -webkit-animation: spin 1.5s linear infinite; /* Safari */
+    animation: spin 1.5s linear infinite;
+  }
+  
+  /* Safari */
+  @-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  #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);
+  }

src/common/utils/const/faction-enum.js

@@ -1,10 +0,0 @@
-'use strict';
-
-export const Faction = Object.freeze({
-    HUMANS : "humans",
-    ORCS: "orcs",
-    ELVES: "elves",
-    MECA: "meca",
-    NONE:"none"
-
-  });

src/common/utils/const/game-deck-mode-enum.js

@@ -1,7 +0,0 @@
-'use strict';
-
-export const GameDeckMode = Object.freeze({
-    FACTIONS : "factions",
-    DRAFT: "draft",
-    TOURNAMENT: "tournament"
-  });

src/common/utils/const/game-type-enum.js

@@ -1,6 +0,0 @@
-'use strict';
-
-export const GameType = Object.freeze({
-    PASSNPLAY : "PassNPlay",
-    MULTI: "Multi"
-  });

src/common/utils/const/phaser-scene-enum.js

@@ -1,7 +0,0 @@
-'use strict';
-
-export const PhaserScene = Object.freeze({
-    MAIN_MENU : "MainMenuScene",
-    GAME_WORLD: "GameWorldScene",
-    DECK_BUILDING: "DeckBuildingScene"
-  });

src/common/utils/prompt-renderer.js

@@ -1,9 +0,0 @@
-'use strict';
-
-export function promptSelectAmongOptions(message, options) {
-  let selection = "";
-  while (options.includes(selection) === false) {
-    selection = prompt(`${message} (${options}) :`);
-  }
-  return selection;
-}

src/game/AppGame.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+      <h2>Launch game id {{ gameId }} for {{ username }}</h2>
+      <button
+        class="btn btn-danger"
+        v-if="isGameRunning"
+        @click="isGameRunning = !isGameRunning"
+      >
+        Stop game
+      </button>
+      <button
+        class="btn btn-success"
+        v-else
+        @click="isGameRunning = !isGameRunning"
+      >
+        Start game
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { globalEventsBus } from '../main';
+import { socketService } from '../main';
+export default {
+  props: ['game-id', 'username'],
+  data() {
+    return {
+      isGameRunning: false
+    };
+  },
+  watch: {
+    isGameRunning() {
+      if (this.isGameRunning) {
+        globalEventsBus.$emit('game-running');
+      } else {
+        socketService.removeCreatedGames(this.username).catch(err => {
+          console.log('Error communicating to server to remove games : ' + err);
+        });
+        globalEventsBus.$emit('game-stopped');
+      }
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style></style>

src/game/control/game-controller-pnp.js

@@ -1,65 +0,0 @@
-'use strict';
-import HeroFactory from '../game-model/heroes/hero-factory';
-import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
-import GameWorldScene from '../views/game-world-scene';
-import { GameDeckMode } from '../../common/utils/const/game-deck-mode-enum';
-import FactionDeckBuildingScene from '../views/faction-deck-building-scene';
-import Player from '../game-model/player';
-
-export default class GameControllerPnp {
-  constructor(phaserEngine, gameParams) {
-    this.phaserEngine = phaserEngine;
-    console.log("In constructor" + this.phaserEngine);
-    this.gameParams = gameParams;
-
-    this.playerBlue = new Player(gameParams.playerBlueName, "Blue");
-    this.playerRed = new Player(gameParams.playerResName, "Red");
-
-    console.log();
-    switch (this.gameParams.gameDeckMode) {
-      case GameDeckMode.FACTIONS:
-        this.deckBuildingScene = new FactionDeckBuildingScene(this.gameEventListener());
-        break;
-
-      default:
-        // ONLY Factions mode
-        this.deckBuildingScene = new FactionDeckBuildingScene(this.gameEventListener());
-        break;
-    }
-
-    // Instantiates Heroes
-    this.heroFactory = new HeroFactory();
-  }
-
-  displayDeckBuilding() {
-    console.log("In displayDeckBuilding " + this.phaserEngine);
-    this.phaserEngine.scene.add(PhaserScene.DECK_BUILDING, this.deckBuildingScene);
-    this.phaserEngine.scene.start(PhaserScene.DECK_BUILDING);
-    this.phaserEngine.scene.remove(PhaserScene.MAIN_MENU);
-  }
-  displayGameWorld() {
-    this.phaserEngine.scene.add(PhaserScene.GAME_WORLD, this.gameWorldScene);
-    this.phaserEngine.scene.start (PhaserScene.GAME_WORLD);
-    this.phaserEngine.scene.remove(PhaserScene.DECK_BUILDING);
-  }
-
-  gameEventListener() {
-    return {
-      onFactionsSelected: this.onFactionsSelected.bind(this)
-    };
-  }
-
-  onFactionsSelected(playerBlueFaction, playerRedFaction ) {
-    this.playerBlue.setFaction(playerBlueFaction);
-    this.playerRed.setFaction(playerRedFaction);
-
-    this.playerBlue.setHeroesDeck(this.heroFactory.getFactionRandom(this.playerBlue.faction));
-    this.playerRed.setHeroesDeck(this.heroFactory.getFactionRandom(this.playerRed.faction));
-
-    console.log('player Blue deck : ', this.playerBlue.getHeroesDeck());
-    console.log('player Red deck : ', this.playerRed.getHeroesDeck());
-    this.gameWorldScene = new GameWorldScene(this.playerBlue, this.playerRed);
-    this.displayGameWorld();
-  }
-
-}

src/game/game-model/heroes/hero-ability.js

@@ -1,9 +0,0 @@
-'use strict';
-export default class HeroAbility {
-  constructor(abilityName, abilityHook, isActivationOptionnal, description) {
-    this.abilityName = abilityName;
-    this.abilityHook = abilityHook;
-    this.isActivationOptionnal = isActivationOptionnal;
-    this.description = description;
-  }
-}

src/game/game-model/heroes/hero-factory.js

@@ -1,52 +0,0 @@
-'use strict';
-import allHeroesJson from "../../../assets/all-heroes.json";
-import Hero from './hero';
-import HeroAbility from './hero-ability';
-
-export default class HeroFactory {
-  constructor() {
-    let abilitiesMap = new Map();
-    allHeroesJson.abilities.forEach(ability => {
-      let abilityObj = new HeroAbility(ability.abilityName,
-        ability.abilityHook,
-        ability.optionnal,
-        ability['abilityDesc-FR']);
-      abilitiesMap.set(ability.abilityName, abilityObj);
-    });
-
-    this.heroesSet = new Set();
-    allHeroesJson.heroes.forEach(hero => {
-      let i = 0;
-      while (i < hero.nbInDeck) {
-        let heroObj = new Hero(
-          hero.name,
-          hero.cost,
-          hero.power,
-          hero.faction,
-          abilitiesMap.get(hero.ability),
-          hero.draftMode
-        );
-        this.heroesSet.add(heroObj);
-        i++;
-      }
-    });
-  }
-
-  getAllHeroesSet() {
-    return this.heroesSet;
-  }
-
-  getFactionRandom(faction) {
-    let factionHeroes = shuffleArray(Array.from(this.heroesSet).filter(hero => hero.faction === faction));
-    return factionHeroes;
-  }
-
-}
-
-function shuffleArray(a) {
-  for (let i = a.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [a[i], a[j]] = [a[j], a[i]];
-  }
-  return a;
-}

src/game/game-model/heroes/hero.js

@@ -1,11 +0,0 @@
-'use strict';
-export default class Hero {
-  constructor(name, cost, power, faction, ability, isDraftMode) {
-    this.name = name;
-    this.cost = cost;
-    this.power = power;
-    this.faction = faction;
-    this.ability = ability;
-    this.isDraftMode = isDraftMode;
-  }
-}

src/game/game-model/player.js

@@ -1,18 +0,0 @@
-'use strict';
-
-export default class Player {
-  constructor(name, color, faction = 'None') {
-    this.name = name;
-    this.color = color;
-    this.faction = faction;
-  }
-  setFaction(faction) {
-    this.faction = faction;
-  }
-  setHeroesDeck(heroesDeck) {
-    this.heroesDeck = heroesDeck;
-  }
-  getHeroesDeck(){
-    return this.heroesDeck;
-  }
-}

src/game/views/deck-building-scene.js

@@ -1,10 +0,0 @@
-'use strict';
-import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
-import Phaser from 'phaser';
-
-export default class DeckBuildingScene extends Phaser.Scene {
-
-  constructor() {
-    super({ key: PhaserScene.DECK_BUILDING, active: false });
-  }
-}

src/game/views/faction-deck-building-scene.js

@@ -1,37 +0,0 @@
-'use strict';
-import DeckBuildingScene from './deck-building-scene';
-import { Faction } from '../../common/utils/const/faction-enum';
-import * as Utils from '../../common/utils/prompt-renderer';
-
-export default class FactionDeckBuildingScene extends DeckBuildingScene {
-
-  constructor(gameEventListener) {
-    super();
-    this.gameEventListener = gameEventListener;
-  }
-
-  preload() {
-    console.log('Preload');
-
-  }
-
-  create() {
-    console.log('create');
-
-
-    setTimeout(() => {
-      let factionOptions = Object.values(Faction).filter(faction => faction !== Faction.NONE);
-      //let pBlueFaction = Utils.promptSelectAmongOptions("Select Player Blue Faction", factionOptions);
-      let pBlueFaction = "meca";
-      factionOptions = factionOptions.filter(faction => faction !== pBlueFaction);
-      //let pRedFaction = Utils.promptSelectAmongOptions("Select Player Red Faction", factionOptions);
-      let pRedFaction = "orcs";
-      this.gameEventListener.onFactionsSelected(pBlueFaction, pRedFaction );
-    }, 100);
-  }
-
-  update() {
-
-  }
-}
-

src/game/views/game-world-scene.js

@@ -1,69 +0,0 @@
-'use strict';
-import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
-import Phaser from 'phaser';
-
-export default class GameWorldScene extends Phaser.Scene {
-
-  constructor(playerBlue, playerRed) {
-    super({ key: PhaserScene.GAME_WORLD, active: false });
-    this.playerBlue = playerBlue;
-    this.playerRed = playerRed;
-  }
-
-  preload() {
-    console.log('Preload');
-
-  }
-
-  create() {
-    console.log('create');
-    render(this, this.playerBlue.getHeroesDeck(),0 );
-    render(this, this.playerRed.getHeroesDeck(),300 );
-  }
-
-  update() {
-
-  }
-}
-
-function addCard(x, y, phaser, heroName, heroCost, heroPower, heroDesc) {
-  let textStyle = {
-    font: "normal 12px Arial",
-    fill: '#000000',
-    align: 'center',
-    boundsAlignH: "center", // bounds center align horizontally
-    boundsAlignV: "middle" // bounds center align vertically
-  };
-  let graphics = phaser.add.graphics(0, 0);
-  let color = 0x654321;
-  let thickness = 2;
-  let alpha = 1;
-
-  graphics.lineStyle(thickness, color, alpha);
-  graphics.strokeRect(0, 0, 80, 120);
-  let text = `${heroName}\ncost : ${heroCost}\npower : ${heroPower}`;
-  let label = phaser.add.text(3, 3, text, textStyle);
-  label.setOrigin(0, 0);
-  let container = phaser.add.container(x, y, [graphics, label]).setSize(5, 5);
-  // container.setOrigin(0, 0);
-}
-
-
-  function render(game, heroesSet, offset) {
-
-    let i = 0;
-    let j = 0;
-    heroesSet.forEach(hero => {
-      let x = 10 + (i * 80) + 5;
-      let y = 10 + offset + (j * 120) + 5;
-      addCard(x, y, game, hero.name, hero.cost, hero.power, hero.ability.description);
-      if (x >= 1040) {
-        i = 0;
-        j++;
-      } else {
-
-        i++;
-      }
-
-    });
-  }

src/index.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<!--
-    Licensed to the Apache Software Foundation (ASF) under one
-    or more contributor license agreements.  See the NOTICE file
-    distributed with this work for additional information
-    regarding copyright ownership.  The ASF licenses this file
-    to you under the Apache License, Version 2.0 (the
-    "License"); you may not use this file except in compliance
-    with the License.  You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing,
-    software distributed under the License is distributed on an
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-     KIND, either express or implied.  See the License for the
-    specific language governing permissions and limitations
-    under the License.
--->
-<html>
-
-<head>
-  <!--
-        Customize this policy to fit your own app's needs. For more guidance, see:
-            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
-        Some notes:
-            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
-            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
-            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
-                * Enable inline JS: add 'unsafe-inline' to default-src
-        -->
-  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;"> -->
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
-  <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
-  <title>Twelve Heroes</title>
-</head>
-
-<body>
-  <% if (process.env.CORDOVA) { %>
-
-  <div class="app">
-    <div id="deviceready" class="blink">
-      <p class="event listening"></p>
-      <p class="event received"></p>
-    </div>
-  </div>
-  <script type="text/javascript" src="cordova.js"></script>
-  <% } %>
-</body>
-
-</html>

src/main.js

@@ -1,57 +1,14 @@
-'use strict';
+import Vue from 'vue';
+import App from './App';
+import SocketService from './common/socket-service';
 
-/* eslint-disable no-unused-vars */
+export const socketEventBus = new Vue({});
+export const socketService = new SocketService(socketEventBus);
 
-import MenuController from './menu/control/menu-controller';
-import Phaser from 'phaser';
+export const globalEventsBus = new Vue();
 
-function startGame() {
-  console.log('start Game');
-
-  let phaserConfig = {
-    type: Phaser.AUTO,
-    pixelArt: true,
-    scale: {
-      mode: Phaser.Scale.RESIZE,
-      autoCenter: Phaser.Scale.CENTER_BOTH,
-      width: window.innerWidth,
-      height: window.innerHeight
-    },
-    physics: {
-      default: 'arcade',
-      arcade: {
-        debug: true,
-        gravity: { y: 250 },
-      }
-    },
-    parent: 'phaser-parent',
-    dom: {
-      createContainer: true
-    }
-  };
-  let phaserEngine = new Phaser.Game(phaserConfig);
-  let menuController = new MenuController(phaserEngine);
-  menuController.displayMainMenu();
-}
-
-let app = {
-  // Application Constructor
-  initialize: function () {
-    console.log('app initialize');
-    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
-  },
-
-  onDeviceReady: function () {
-    startGame();
-  },
-
-};
-
-console.log('cordova env ? :', process.env.CORDOVA);
-
-if (process.env.CORDOVA && process.env.CORDOVA === true) {
-
-  app.initialize();
-} else {
-  startGame();
-}
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});

src/main.test.js

@@ -1,15 +0,0 @@
-'use strict';
-
-// import * as chai from 'chai';
-
-// let assert = chai.assert;
-// let should = chai.should();
-// let expect = chai.expect;
-
-
-describe('Main', () => {
-  it('Should start cordova game', (done) => {
-    process.env.CORDOVA = null;
-    done();
-  });
-});

src/menu/AppMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+        <h2>Menu</h2>
+      </div>
+    </div>
+    <keep-alive include="menu-login">
+      <component
+        :is="menuPage"
+        @enter-online="enterOnline"
+        @enter-game-creation="enterGameCreation"
+        @enter-local="enterLocal"
+        @back="menuPage = previousPage.pop()"
+        @home="
+          menuPage = 'menu-login';
+          previousPage = [];
+        "
+        :username="username"
+        v-on="$listeners"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import MenuLogin from './login/MenuLogin';
+import MenuOnlineRoom from './online-room/MenuOnlineRoom';
+import MenuGameCreation from './game-creation/MenuGameCreation';
+export default {
+  data() {
+    return {
+      previousPage: [],
+      menuPage: 'menu-login',
+      username: ''
+    };
+  },
+  components: {
+    MenuLogin,
+    MenuOnlineRoom,
+    MenuGameCreation
+  },
+  methods: {
+    enterLocal() {
+      alert('Not implemented yet, give us time ! :)');
+    },
+    enterOnline(username) {
+      this.previousPage.push(this.menuPage);
+      console.log('enter online with username : ' + username);
+      this.username = username;
+      this.menuPage = 'menu-online-room';
+    },
+    enterGameCreation() {
+      this.previousPage.push(this.menuPage);
+      this.menuPage = 'menu-game-creation';
+    }
+  }
+};
+</script>
+
+<style scoped></style>

src/menu/control/menu-controller.js

@@ -1,74 +0,0 @@
-'use strict';
-
-import MainMenuScene from '../views/main-menu-scene';
-import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
-import GameParams from '../../common/game-params';
-import GameControllerPnp from '../../game/control/game-controller-pnp';
-import SocketService from '../../common/socket-service';
-
-export default class MenuController {
-
-  constructor(phaserEngine) {
-    this.phaserEngine = phaserEngine;
-
-    this.socketService = new SocketService();
-
-    this.mainMenuScene = new MainMenuScene(this.menuEventListener());
-  }
-
-  displayMainMenu() {
-
-    this.phaserEngine.scene.add(PhaserScene.MAIN_MENU,this.mainMenuScene);
-    this.phaserEngine.scene.start(PhaserScene.MAIN_MENU);
-  }
-
-
-  tryConnect(username) {
-    return this.socketService.connect(username);
-  }
-
-  onRequestDisconnection() {
-    this.socketService.disconnect();
-  }
-
-  menuEventListener() {
-    return {
-      onNewPnpGame: this.onNewPnpGame.bind(this),
-      onOnlineGamesListRequested: this.onOnlineGamesListRequested.bind(this),
-      onTryConnect: this.tryConnect.bind(this),
-      onRequestDisconnection: this.onRequestDisconnection.bind(this),
-      onGameCreationRequest: this.onGameCreationRequest.bind(this),
-      onSetNewGameListenerCb: this.onSetNewGameListenerCb.bind(this),
-      onUnsetNewGameListenerCb: this.onSetNewGameListenerCb.bind(this)
-    };
-  }
-
-  onNewPnpGame(pBlueName, pRedName, gameMode, advancedRules) {
-    console.log("onNewPnpGame this  : " + this);
-      let gameParams = new GameParams(pBlueName,pRedName,gameMode,advancedRules);
-      let gameControllerPnp = new GameControllerPnp(this.phaserEngine, gameParams);
-      gameControllerPnp.displayDeckBuilding();
-  }
-
-  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);
-  }
-  onSetNewGameListenerCb(callback) {
-    this.socketService.setNewGameCreatedListener(callback);
-  }
-  onUnsetNewGameListenerCb() {
-    this.socketService.unsetNewGameCreatedListener();
-  }
-}

src/menu/game-creation/MenuGameCreation.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+      <div class="form-group">
+        <label for="deck">Select how you will build your deck</label>
+        <select class="custom-select mr-sm-2" id="deck" v-model="selectedDeck">
+          <option
+            v-for="deck in deckChoices"
+            :key="deck"
+            :value="deck.toLowerCase()"
+            >{{ deck }}</option
+          >
+        </select>
+      </div>
+
+      <label for="adv-rules">Select advandced rules</label>
+      <div class="form-group" id="adv-rules">
+        <div class="form-check form-check-inline">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="popularity"
+            value="popularity"
+            v-model="advRules"
+          />
+          <label class="form-check-label" for="popularity">Populatity</label>
+        </div>
+        <div class="form-check form-check-inline">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="discard"
+            value="discard"
+            v-model="advRules"
+          />
+          <label class="form-check-label" for="discard">Discard</label>
+        </div>
+      </div>
+      <hr />
+      <button
+        class="btn btn-primary"
+        @click.prevent="createGame"
+        :disabled="creatingGame"
+      >
+        {{ createButtonText }}
+      </button>
+      <button
+        class="btn btn-primary"
+        @click.prevent="$emit('back')"
+        :disabled="creatingGame"
+      >
+        Back
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { socketService } from '../../main';
+
+const decks = ['Faction', 'Draft', 'Tournament'];
+export default {
+  props: ['username'],
+  data() {
+    return {
+      deckChoices: decks,
+      selectedDeck: decks[0].toLowerCase(),
+      advRules: [],
+      creatingGame: false,
+      createButtonText: 'Create'
+    };
+  },
+  methods: {
+    createGame() {
+      this.creatingGame = true;
+      this.createButtonText = 'Creating';
+      console.log('create game, advrules : ', this.advRules);
+      let game = {
+        player1: this.username,
+        player2: '',
+        deck: this.selectedDeck,
+        advRules: this.advRules,
+        status: 'CREATED',
+        data: ''
+      };
+      socketService
+        .createGame(game)
+        .then(id => {
+          this.$emit('home');
+          this.$emit('join-game-id', {
+            id,
+            username: this.username
+          });
+        })
+        .catch(err => {
+          this.creatingGame = false;
+          this.createButtonText = 'Create';
+          alert('Could not create game (' + err + ')');
+        });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+// @import '../style/style.scss';
+</style>

src/menu/login/MenuLogin.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+      <div class="form-group">
+        <input
+          type="text"
+          placeholder="Username"
+          autocomplete="off"
+          class="form-control"
+          v-model="username"
+          :disabled="lockUsername"
+          @keydown.enter="connect()"
+        />
+        <button
+          class="btn btn-primary form-control"
+          @click.prevent="connect"
+          :disabled="connectButton.disabled"
+        >
+          {{ connectButton.text }}
+        </button>
+        <p>
+          {{ connectionStatus }}
+        </p>
+        <button
+          class="btn btn-primary form-control"
+          :disabled="onlineButtonDisable || isOneGameRunning"
+          @click.prevent="$emit('enter-online', username)"
+        >
+          Online Game
+        </button>
+        <button
+          class="btn btn-primary form-control"
+          @click.prevent="$emit('enter-local')"
+          :disabled="isOneGameRunning"
+        >
+          Local Game
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { socketService } from '../../main';
+import { globalEventsBus } from '../../main';
+function initialState() {
+  return {
+    connectButton: {
+      text: 'Connect',
+      disabled: false
+    },
+    connectionStatus: 'Not Connected',
+    username: '',
+    isConnected: false,
+    lockUsername: false,
+    onlineButtonDisable: true,
+    isOneGameRunning: false
+  };
+}
+
+export default {
+  data() {
+    return initialState();
+  },
+  methods: {
+    connect() {
+      if (!this.isConnected) {
+        if (this.username === '') {
+          this.connectionStatus = 'Enter a username';
+        } else {
+          this.connectButton.disabled = true;
+          this.connectButton.text = 'Connecting...';
+          this.lockUsername = true;
+          socketService
+            .connect(this.username)
+            .then(() => {
+              this.isConnected = true;
+              this.connectButton.text = 'Disconnect';
+              this.connectButton.disabled = false;
+              this.onlineButtonDisable = false;
+              this.connectionStatus = 'Connected as ' + this.username;
+            })
+            .catch(err => {
+              let user = this.username;
+              Object.assign(this.$data, initialState());
+              this.connectionStatus =
+                'Could not connect as ' + user + ' (' + err + ')';
+            });
+        }
+      } else {
+        socketService.disconnect();
+        Object.assign(this.$data, initialState());
+      }
+    }
+  },
+  computed: {},
+  created() {
+    globalEventsBus.$on('game-running', () => {
+      this.connectionStatus =
+        'Connected as ' + this.username + ' (Game running)';
+      this.isOneGameRunning = true;
+    });
+    globalEventsBus.$on('game-stopped', () => {
+      this.connectionStatus = 'Connected as ' + this.username;
+      this.isOneGameRunning = false;
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+// @import '../style/style.scss';
+</style>

src/menu/online-room/MenuOnlineRoom.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+      <div id="online-games">
+        Existing Games
+        <hr />
+        <div style="border:1px solid black; height:300px">
+          <div v-if="loading">
+            <h3>{{ loadingMessage }}</h3>
+          </div>
+          <div v-on-clickaway="unselect" v-else>
+            <game-item
+              v-for="(game, index) in gamesList"
+              :key="game.id"
+              :game-element="game"
+              @click.native="selectedIndex = index"
+            ></game-item>
+          </div>
+        </div>
+      </div>
+
+      <div id="online-room-buttons">
+        <div>
+          <button class="btn btn-primary" @click="$emit('enter-game-creation')">
+            Create new game
+          </button>
+          <button
+            class="btn btn-primary"
+            :disabled="resumeDisabled"
+            @click="joinGame()"
+          >
+            Join / Resume game
+          </button>
+          <button class="btn btn-primary" @click="$emit('back')">Back</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import GameItem from './components/GameItem';
+import { mixin as clickaway } from 'vue-clickaway';
+import { socketService, socketEventBus } from '../../main';
+export default {
+  props: ['username'],
+  data() {
+    return {
+      selectedIndex: -1,
+      resumeDisabled: true,
+      loading: true,
+      loadingMessage: 'Loading...',
+      gamesList: []
+    };
+  },
+  components: {
+    GameItem
+  },
+  watch: {
+    selectedIndex() {
+      console.log('index selected: ' + this.selectedIndex);
+      if (this.selectedIndex >= 0) {
+        this.resumeDisabled = false;
+      } else {
+        this.resumeDisabled = true;
+      }
+    }
+  },
+  methods: {
+    unselect() {
+      this.selectedIndex = -1;
+    },
+    joinGame() {
+      this.$emit('back');
+      this.$emit('join-game-id', {
+        id: this.gamesList[this.selectedIndex].id,
+        username: this.username
+      });
+    },
+    updateGamesList() {
+      socketService
+        .getGamesList(this.username)
+        .then(games => {
+          this.gamesList = games;
+          if (this.gamesList.length === 0) {
+            this.loadingMessage = 'No games found, wait a new or create one !';
+          } else {
+            this.loading = false;
+          }
+        })
+        .catch(() => {
+          this.loadingMessage = 'Error reaching server';
+        });
+    }
+  },
+  mixins: [clickaway],
+  created() {
+    this.updateGamesList();
+    socketEventBus.$on('reload-games', () => {
+      this.updateGamesList();
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+// @import '../style/style.scss';
+</style>

src/menu/online-room/components/GameItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="col-md-12 ">
+    <div class="card card-default box-game " tabindex="0">
+      <h5 class="card-title">{{ gameElement | getGameTitle }}</h5>
+      <h6 class="card-subtitle mb-2 text-muted">
+        {{ gameElement | getGameInfo }}
+      </h6>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['game-element'],
+  filters: {
+    getGameTitle(gameEl) {
+      let title = '';
+      if (gameEl.player2 !== '') {
+        title = `Resume ${gameEl.player1} VS ${gameEl.player2}`;
+      } else {
+        title = `${gameEl.player1} waiting...`;
+      }
+      return title;
+    },
+    getGameInfo(gameEl) {
+      let desc = '';
+      let rules = '';
+      if (gameEl.adv_rules.length !== 0) {
+        gameEl.adv_rules.forEach((rule, index) => {
+          if (index === 0) {
+            rules += rule;
+          } else {
+            rules += ' + ' + rule;
+          }
+        });
+      } else {
+        rules = 'no advandced rules';
+      }
+      desc = `${gameEl.deck} | ${rules}`;
+      return desc;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.box-game {
+  cursor: pointer;
+}
+.box-game:hover {
+  background-color: lightblue;
+}
+.box-game:focus {
+  border: 1px solid blue;
+  background-color: lightblue;
+  outline: none;
+}
+</style>

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

@@ -1,155 +0,0 @@
-'use strict';
-import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
-import Phaser from 'phaser';
-
-import LoginDivPage from './menu-pages/login-div-page';
-import OnlineRoomDivPage from './menu-pages/online-room-div-page';
-import GameCreationDivPage from './menu-pages/game-creation-div-page';
-
-import MenuPages from '../../assets/html/main-menu.html';
-import Cover from '../../assets/twelveHeroes_cover.png';
-
-export default class MainMenuScene extends Phaser.Scene {
-
-  constructor(menuEventListener) {
-    super({ key: PhaserScene.MAIN_MENU, active: false });
-    this.menuEventListener = menuEventListener;
-
-    this.username = '';
-    this.previousPages = new Array();
-  }
-
-  preload() {
-    this.load.image('game-cover', Cover);
-  }
-
-
-  // create is call automatically by Phaser engine
-  create() {
-    let background = this.add.image(0, 0, 'game-cover');
-    background.setOrigin(0, 0);
-
-    // Add main-menu HTML
-    let element = this.add.dom(250, 0).createFromHTML(MenuPages);
-    element.setPerspective(800);
-
-    // Menu div pages
-    this.loginDivPage = new LoginDivPage(element,this.loginPageListener());
-    this.onlineRoomDivPage = new OnlineRoomDivPage(element, this.onlineRoomPageListener());
-    this.gameCreationDivPage = new GameCreationDivPage(element, this.gameCreationPageListener());
-
-
-    setTimeout(() => {
-      this.loginDivPage.show();
-      this.tweens.add({
-        targets: element,
-        y: 190,
-        duration: 2300,
-        ease: 'Power3'
-
-      });
-
-     }, 700);
-
-
-
-    // TODO : Display main menu
-    // Create new scenes : Local player room / Multi player room
-    // Pass to them the event listener
-    // On local player room, user can enter player names, selected color, game deck mode & rules
-
-  }
-
-  update() {
-  }
-
-
-  // Listener for login page events
-  loginPageListener() {
-    return {
-      onRequestConnection: this.onRequestConnection.bind(this),
-      onRequestDisconnection: this.onRequestDisconnection.bind(this),
-      onGoOnlineRoom: this.onGoOnlineRoom.bind(this)
-    };
-  }
-
-  // Listener for online room page events
-  onlineRoomPageListener() {
-    return {
-      onRequestOnlineGamesList: this.onRequestOnlineGamesList.bind(this),
-      onGoGameCreation: this.onGoGameCreation.bind(this),
-      onGoPreviousPage: this.onGoPreviousPage.bind(this),
-      onSetNewGameListenerCb: this.onSetNewGameListenerCb.bind(this),
-      onUnsetNewGameListenerCb: this.onSetNewGameListenerCb.bind(this)
-    };
-  }
-
-  // Listener for game creation page events
-  gameCreationPageListener() {
-    return {
-      onGoPreviousPage: this.onGoPreviousPage.bind(this),
-      onValidGameCreation: this.onValidGameCreation.bind(this),
-      onGameCreated:this.onGameCreated.bind(this)
-    };
-  }
-
-  // Callbacks implementation
-  onGoPreviousPage(fromPage) {
-    fromPage.hide();
-    this.previousPages.pop().show();
-  }
-
-  // Login page specific
-  onGoOnlineRoom() {
-
-    this.loginDivPage.hide();
-    this.previousPages.push(this.loginDivPage);
-    this.onlineRoomDivPage.setConnectionStatus(this.loginDivPage.getConnectionStatus());
-    this.onlineRoomDivPage.show();
-  }
-  onRequestConnection(username) {
-    this.username=username;
-    return this.menuEventListener.onTryConnect(username);
-  }
-  onRequestDisconnection() {
-    this.menuEventListener.onRequestDisconnection();
-  }
-
-  // Online room specific
-  onRequestOnlineGamesList() {
-    return this.menuEventListener.onOnlineGamesListRequested(this.username);
-  }
-
-  onGoGameCreation() {
-    this.onlineRoomDivPage.hide();
-    this.previousPages.push(this.onlineRoomDivPage);
-    this.gameCreationDivPage.show();
-  }
-
-  onSetNewGameListenerCb(callback) {
-    this.menuEventListener.onSetNewGameListenerCb(callback);
-  }
-  onUnsetNewGameListenerCb() {
-    this.menuEventListener.onUnsetNewGameListenerCb();
-  }
-
-
-  // Game cration div page specific
-
-  onValidGameCreation(deckModeSelected, advancedOptions) {
-    return this.menuEventListener.onGameCreationRequest(this.username, deckModeSelected, advancedOptions);
-  }
-
-  onGameCreated() {
-    console.log('Game created, send user to game scene');
-    this.gameCreationDivPage.hide();
-    setTimeout(() => {
-      alert('Sorry nothing more ! we are still coding the game part :)');
-    }, 1000);
-    // let gameDeckMode = "factions";
-    // let advancedRules = [];
-    // console.log("Calling listener");
-    // this.menuEventListener.onNewPnpGame(pBlueName, pRedName, gameDeckMode, advancedRules)
-  }
-
-}

src/menu/views/menu-pages/div-page-common.js

@@ -1,32 +0,0 @@
-
-export const canShow = (page) => ({
-  show() {
-    page.div.style.display = 'block';
-    if (typeof page.onShow === 'function') {
-      page.onShow();
-    } else {
-      console.log('Warning : class ' + page.className + ' needs to implement onShow()');
-    }
-  }
-});
-
-export const canHide = (page) => ({
-  hide() {
-    page.div.style.display = 'none';
-    if (typeof page.onHide === 'function') {
-      page.onHide();
-    } else {
-      console.log('Warning : class ' + page.className + ' needs to implement onHide()');
-    }
-  }
-});
-
-export const hasConnectionState = (page) => ({
-  getConnectionStatus() {
-    return page.connectionStatus.innerText;
-  },
-
-  setConnectionStatus(connectionStatus) {
-    page.connectionStatus.innerText=connectionStatus;
-  }
-});

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

@@ -1,98 +0,0 @@
-import * as DivCommon from './div-page-common';
-
-export default function GameCreationDivPage(element, listener) {
-
-  const id='game-creation';
-  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 deckModeSelected = null;
-  let advancedOptions = [];
-
-  let clickEventListener = function(event) {
-    let eventName = event.target.name;
-    switch (eventName) {
-        case "backToPrev":
-          listener.onGoPreviousPage(gameCreationDivPage);
-          break;
-
-        case "validGameCreation":
-          divSelectDeckMode.selectedIndex=0;
-          createGameButton.disabled=true;
-          console.log(deckModeSelected);
-          console.log(advancedOptions);
-          listener.onValidGameCreation(deckModeSelected, advancedOptions)
-            .then( () => {
-
-              listener.onGameCreated();
-            })
-            .catch( () => {
-              createGameButton.value='Server Error !';
-              setTimeout(() => {
-                createGameButton.value='CREATE';
-              }, 3000);
-            });
-          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;
-    }
-  };
-
-  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() {
-
-  };
-
-  let onHide = function() {
-
-  };
-
-  let gameCreationDivPage = {
-    className,
-    div,
-    onShow,
-    onHide
-  };
-  return Object.assign(
-    gameCreationDivPage,
-    DivCommon.canShow(gameCreationDivPage),
-    DivCommon.canHide(gameCreationDivPage)
-  );
-
-}
-
-
-

src/menu/views/menu-pages/login-div-page.js

@@ -1,106 +0,0 @@
-import * as DivCommon from './div-page-common';
-
-export default function LoginDivPage(element, listener) {
-
-  const id = 'login';
-  const className = LoginDivPage.name;
-
-  let div = element.getChildByID(id);
-  let connectButton = element.getChildByName('loginButton');
-  let username = element.getChildByName('username');
-  let connectionStatus = element.getChildByID('connectionStatus');
-  let onlineGame = element.getChildByName('onlineGame');
-
-
-  username.addEventListener("keyup", event => {
-    if (connectButton.value === 'Connect') {
-      if (event.key !== "Enter") return;
-      connectButton.click();
-      event.preventDefault();
-    }
-  });
-
-  let eventListener = function (event) {
-    let eventName = event.target.name;
-    switch (eventName) {
-      case "loginButton":
-        if (connectButton.value === 'Connect') {
-          if (username.value !== '') {
-            connectButton.disabled = true;
-            connectionStatus.innerText = 'Connecting...';
-            username.disabled = true;
-            listener.onRequestConnection(username.value).then(
-              () => {
-                connectionStatus.innerText = 'Connected as ' + username.value;
-                this.username = username.value;
-                onlineGame.disabled = false;
-                connectButton.value = "Disconnect";
-                connectButton.disabled = false;
-              },
-              (error) => {
-                console.log(`Could not connect as ${username.value} : ${error}`);
-                connectButton.disabled = false;
-                connectionStatus.innerText = error;
-                username.disabled = false;
-              }
-            );
-          } else {
-            connectionStatus.innerText = 'Not Connected : Enter Username';
-          }
-        } else {
-          connectButton.disabled = true;
-          connectionStatus.innerText = `Disconnecting ${this.username}...`;
-          onlineGame.disabled = true;
-          listener.onRequestDisconnection();
-          connectionStatus.innerText = 'Not Connected';
-          connectButton.value = "Connect";
-          connectButton.disabled = false;
-          username.value = '';
-          this.username = username.value;
-          username.disabled = false;
-        }
-        break;
-      case "onlineGame":
-        listener.onGoOnlineRoom();
-        break;
-      case "localGame":
-        alert("Feature not yet implemented!");
-        break;
-      default:
-        break;
-    }
-  };
-
-  div.addEventListener('click', eventListener);
-
-  let onShow = function () {
-
-    connectionStatus.focus();
-  };
-
-  let onHide = function () {
-
-  };
-
-  let loginDivPage = {
-    className,
-    div,
-    connectButton,
-    username,
-    connectionStatus,
-    onlineGame,
-    onShow,
-    onHide
-  };
-
-  return Object.assign(
-    loginDivPage,
-    DivCommon.canShow(loginDivPage),
-    DivCommon.canHide(loginDivPage),
-    DivCommon.hasConnectionState(loginDivPage)
-  );
-
-}
-
-
-

src/menu/views/menu-pages/online-room-div-page.js

@@ -1,132 +0,0 @@
-import * as DivCommon from './div-page-common';
-
-export default function OnlineRoomDivPage(element, listener) {
-
-  const id = 'online-room';
-  const className = OnlineRoomDivPage.name;
-  let div = element.getChildByID(id);
-
-  let createOnlineGameButton = element.getChildByName('createOnlineGame');
-  let joinOnlineGameButton = element.getChildByName('joinOnlineGame');
-  let backToMainButton = element.getChildByName('backToMain');
-  let listOnlineGames = element.getChildByID('list-games');
-  let connectionStatus = element.getChildByID('connectionStatusOnline');
-  let loaderOnlineGames = element.getChildByID('loader-online-games');
-
-  let eventListener = function (event) {
-    let eventName = event.target.name;
-    switch (eventName) {
-      case "backToMain":
-        console.log('in online room div page, backToMain clicked');
-        listener.onGoPreviousPage(onlineRoomDivPage);
-        break;
-      case "createOnlineGame":
-        listener.onGoGameCreation();
-        break;
-
-      default:
-        break;
-    }
-
-  };
-
-  div.addEventListener('click', eventListener);
-
-  let onShow = function () {
-    listener.onRequestOnlineGamesList()
-      .then((games) => {
-        console.log('received games : ', games);
-        displayGamesList(games);
-        loaderOnlineGames.style.display = 'none';
-        listOnlineGames.style.display = 'block';
-      })
-      .catch((error) => {
-        loaderOnlineGames.style.display = 'none';
-        listOnlineGames.style.display = 'block';
-        listOnlineGames.innerText = error;
-        connectionStatus.innerText = error;
-        createOnlineGameButton.disabled = true;
-        console.log('error to receive games : ' + error);
-      });
-
-    listener.onSetNewGameListenerCb(reloadGamesCallback);
-  };
-
-  let onHide = function () {
-    listener.onUnsetNewGameListenerCb();
-    listOnlineGames.style.display = 'none';
-    loaderOnlineGames.style.display = 'block';
-    createOnlineGameButton.disabled = false;
-    listOnlineGames.innerText = '';
-  };
-
-  let displayGamesList = function (games) {
-    console.log(games);
-
-    while (listOnlineGames.firstChild) listOnlineGames.removeChild(listOnlineGames.firstChild);
-    console.log('removed ex list');
-    games.forEach(game => {
-
-      let title = '';
-      let desc = '';
-      let rules = '';
-      if (game.adv_rules.length !== 0) {
-        game.adv_rules.forEach(rule => {
-          rules += ' + ' + rule;
-        });
-      } else {
-        rules = ' + no adv. rules';
-      }
-      desc = `${game.deck}${rules}`;
-      if (game.player2 !== '') {
-        title = `Resume ${game.player1} VS ${game.player2}`;
-      } else {
-        title = `${game.player1} waiting...`;
-      }
-      let li = document.createElement("li");
-      let spanTitle = document.createElement("span");
-      let spanDesc = document.createElement("span");
-      let div = document.createElement("div");
-      spanTitle.setAttribute("class", "game-entry-title");
-      spanDesc.setAttribute("class", "game-entry-desc");
-      spanTitle.appendChild(document.createTextNode(title));
-      spanDesc.appendChild(document.createTextNode(desc));
-      li.appendChild(spanTitle);
-      li.appendChild(div);
-      li.appendChild(spanDesc);
-      li.setAttribute("id", game.id);
-      listOnlineGames.appendChild(li);
-    });
-  };
-
-  let reloadGamesCallback = function () {
-
-    listener.onRequestOnlineGamesList()
-      .then((games) => {
-        console.log('received games : ', games);
-        displayGamesList(games);
-      })
-      .catch((error) => {
-        console.log('error to receive games : ' + error);
-      });
-  };
-
-  let onlineRoomDivPage = {
-    className,
-    div,
-    connectionStatus,
-    onShow,
-    onHide
-  };
-
-  return Object.assign(
-    onlineRoomDivPage,
-    DivCommon.canShow(onlineRoomDivPage),
-    DivCommon.canHide(onlineRoomDivPage),
-    DivCommon.hasConnectionState(onlineRoomDivPage)
-  );
-
-}
-
-
-

src/polyfills.js

@@ -1,2 +0,0 @@
-
-import '@babel/polyfill';

tests/unit/AppMenu.spec.js

@@ -0,0 +1,13 @@
+import { expect } from 'chai';
+import { shallowMount } from '@vue/test-utils';
+import AppMenu from '@/menu/AppMenu.vue';
+
+const wrapper = shallowMount(AppMenu);
+const defaultData = AppMenu.data();
+describe('AppMenu.vue', () => {
+  it('displays login page by default', () => {
+    expect(defaultData.menuPage)
+      .to.be.a('string')
+      .that.is.equals('menu-login');
+  });
+});

vue.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  devServer: {
+    overlay: {
+      warnings: true,
+      errors: true
+    }
+  },
+  runtimeCompiler: true
+};

webpack.config.js

@@ -1,112 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
-// var CopyWebpackPlugin = require('copy-webpack-plugin');
-var { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
-if (process.env.DEV) {
-  console.log('Loading .env variables');
-  require('dotenv').config({path: __dirname + '/.env'});
-}
-
-const JOJOAPPS_SERVER = '149.91.81.94';
-const JOJOAPPS_SERVER_PORT = 2610;
-
-// Env variables have effect in app : main.js & socket-service.js & index.html
-// Also in Server : mariadb-connector.js
-var definePlugin = new webpack.DefinePlugin({
-  'process.env.DEV': JSON.stringify(JSON.parse(process.env.DEV || 'false')),
-  'process.env.WEB': JSON.stringify(JSON.parse(process.env.WEB || 'false')),
-  'process.env.CORDOVA': JSON.stringify(JSON.parse(process.env.CORDOVA || 'false')),
-  'process.env.SERVER_HOST': JSON.stringify(process.env.SERVER_HOST || JOJOAPPS_SERVER),
-  'process.env.SERVER_PORT': JSON.stringify(process.env.SERVER_PORT || JOJOAPPS_SERVER_PORT)
-});
-
-var outpath = './webpack/';
-
-if (process.env.CORDOVA === "true") {
-  outpath = './www/';
-  console.log('CORDOVA environment : output in ',outpath);
-} else if (process.env.WEB === "true") {
-  outpath = './www_web/';
-  console.log('WEB environment : output in ',outpath);
-} else {
-  console.log('DEV env : output in ', outpath);
-}
-
-// new CopyWebpackPlugin([
-//   {
-//     context: path.resolve(__dirname, 'src', 'assets'),
-//     from: '**/*',
-//     to: path.resolve(__dirname, outpath, 'assets')
-//   }
-// ]),
-module.exports = {
-  devtool: 'cheap-source-map',
-  mode: 'development',
-  entry: {
-    app: path.resolve(__dirname, 'src/main.js')
-  },
-  output: {
-    filename: 'app.bundle.js',
-    path: path.resolve(__dirname, outpath)
-  },
-
-  plugins: [
-    definePlugin,
-    new CleanWebpackPlugin(),
-
-    new HtmlWebpackPlugin({
-      template: './src/index.html'
-    }),
-    new BrowserSyncPlugin({
-      host: process.env.IP || 'localhost',
-      port: process.env.PORT || 3000,
-      server: {
-        baseDir: [outpath, './build']
-      },
-      browser: ["firefox"]
-    }),
-    new BrowserSyncPlugin({
-      host: process.env.IP || 'localhost',
-      port: process.env.PORT || 3005,
-      server: {
-        baseDir: [outpath, './build']
-      },
-      browser: ["firefox"]
-    }),
-    new webpack.DefinePlugin({
-      CANVAS_RENDERER: JSON.stringify(true),
-      WEBGL_RENDERER: JSON.stringify(true)
-    })
-  ],
-  module: {
-    rules: [
-      { test: /\.js$/, exclude: /(node_modules|server)/, loaders: "babel-loader" },
-      {
-        test: /\.(png|svg|jpg|gif)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            esModule: false
-          }
-        }
-      },
-      {
-        test: /\.html$/,
-        exclude: /index.html/,
-        use: [
-          {
-            loader: 'html-loader',
-            options: { minimize: true }
-          }
-        ]
-      },
-      {
-        test: [/\.vert$/, /\.frag$/],
-        use: "raw-loader"
-      }
-    ]
-  }
-};