game model + logic for deck building on server side + logic to select faction in app + auto re-login/re-join

server/src/client-server-shared/duel-controller.js

@@ -21,7 +21,7 @@ Provides interface :
 
 import { initHeroesFromJson } from './heroesHelper';
 import gameStates from './gameStates/gameStates';
-const DuelController = function(dataStore) {
+let DuelController = function(dataStore) {
   let gameData = {
     game: {},
     bluePlayer: {},
@@ -38,6 +38,7 @@ const DuelController = function(dataStore) {
   let setCurrentState = stateName => {
     currentGameState = states[stateName];
     gameData.game.gameState = stateName;
+    console.log('Set new state : ', stateName);
   };
 
   // get new State
@@ -63,8 +64,10 @@ const DuelController = function(dataStore) {
   let getGameData = () => gameData;
 
   // Interface to set data and store it
-  let storeData = data => {
-    setData(data);
+  let storeData = (data = null) => {
+    if (data) {
+      setData(data);
+    }
     return dataStore.save(gameData);
   };
 
@@ -104,7 +107,10 @@ const DuelController = function(dataStore) {
   // First state to be set after public APIs (start or resume game) are called
   let states = {
     '0_INIT': new gameStates.initState(stateCtrl),
-    '1_SELECT_FACTION': new gameStates.selectFactionState(stateCtrl)
+    '1_SELECT_FACTION': new gameStates.selectFactionState(stateCtrl),
+    '1_SELECT_DRAFT': new gameStates.selectDraftState(stateCtrl),
+    '1_SELECT_TOURNAMENT': new gameStates.selectTournamentState(stateCtrl),
+    '2_CHANGE_UP_TO_3_CARDS': new gameStates.changeUpTo3Cards(stateCtrl)
   };
 
   /** ***** Following are public methods ***** */
@@ -126,13 +132,14 @@ const DuelController = function(dataStore) {
     gameData = data;
     // Just set state per data in DB
     // This state will wait for update
-    setCurrentState(gameData.gameState);
+    setCurrentState(gameData.game.gameState);
   };
 
   // Provide an interface so that players can notify the DuelController
   let DuelControllerProxy = () => {
     return {
       endTurn: data => {
+        console.log('data from player :>> ', data);
         currentGameState.update(data);
       }
     };

server/src/client-server-shared/gameStates/0-initState.js

@@ -13,10 +13,11 @@ export default function(duelController) {
           color: 'red'
         },
         game: {
+          allHeroes: duelCtrl.getAllHeroes(),
           deckMode: payload.gameOptions.deck,
           advRules: payload.gameOptions.advRules,
-          waitingForBlue: false,
-          waitingForRed: false,
+          'waitingFor/blue': false,
+          'waitingFor/red': false,
           currentPlayer: '',
           'battleTiles/left': [{ id: 0, name: 'mine', redPoints: 3 }]
         }
@@ -33,9 +34,13 @@ export default function(duelController) {
         duelCtrl.startCurrentState();
         break;
       case 'tournament':
+        duelCtrl.setCurrentState('1_SELECT_TOURNAMENT');
+        duelCtrl.startCurrentState();
         break;
 
       case 'draft':
+        duelCtrl.setCurrentState('1_SELECT_DRAFT');
+        duelCtrl.startCurrentState();
         break;
 
       default:

server/src/client-server-shared/gameStates/1-selectDraftState.js

@@ -0,0 +1,89 @@
+'use strict';
+import { shuffleHeroes, getDraftSets } from '../heroesHelper';
+export default function selectDraftState(duelController) {
+  let duelCtrl = duelController;
+  let draftSets = [];
+  // For draft there are two turns, we are at 0
+  let draftTurn = 0;
+  //Blue will get first 6 cards, and red following 6
+  let blueDraftSetnb = 0;
+  let redDraftSetnb = 1;
+
+  let start = () => {
+    let gameData = duelCtrl.getGameData();
+    draftSets = getDraftSets(
+      gameData.game.allHeroes,
+      gameData.game.advRules.includes('popularity')
+    );
+    draftTurn = 1;
+
+    gameData.bluePlayer.draftHeroesIds =
+      draftSets[draftTurn - 1][blueDraftSetnb];
+    gameData.redPlayer.draftHeroesIds = draftSets[draftTurn - 1][redDraftSetnb];
+    gameData.game['waitingFor/blue'] = true;
+    gameData.game['waitingFor/red'] = true;
+    gameData.game.currentPlayer = 'both';
+    duelCtrl.storeData(gameData);
+  };
+
+  // Should receive in paylod : {color, twelveHeroes [{id, position,possibleActions}] of size 2 to 12, draftHeroesIds}
+  let update = (payload = null) => {
+    let gameData = duelCtrl.getGameData();
+    if (payload) {
+      let player = payload.color + 'player';
+      gameData[player].twelveHeroes = payload.twelveHeroes;
+      gameData[player].draftHeroesIds = payload.draftHeroesIds;
+      gameData.game['waitingFor/' + payload.color] = false;
+      duelCtrl.storeData(gameData);
+    }
+
+    // We finished waiting for both players to select 2 cards
+    if (
+      gameData.game['waitingFor/blue'] === false &&
+      gameData.game['waitingFor/red'] === false
+    ) {
+      // Check if players completed their deck
+      if (
+        gameData.bluePlayer.twelveHeroes.length == 12 &&
+        gameData.redPlayer.twelveHeroes.length == 12
+      ) {
+        shuffleHeroes(gameData.bluePlayer.twelveHeroes);
+        shuffleHeroes(gameData.redPlayer.twelveHeroes);
+        // End of state, decks are complete
+        duelCtrl.endCurrentState();
+      } else {
+        // Check if set of 6 cards is done
+        if (gameData.redPlayer.draftHeroesIds.length === 0) {
+          // Deal next 6 cards
+          draftTurn++;
+          gameData.bluePlayer.draftHeroesIds =
+            draftSets[draftTurn - 1][blueDraftSetnb];
+          gameData.redPlayer.draftHeroesIds =
+            draftSets[draftTurn - 1][redDraftSetnb];
+        } else {
+          // swap cards
+          let temp = gameData.bluePlayer.draftHeroesIds;
+          gameData.bluePlayer.draftHeroesIds =
+            gameData.redPlayer.draftHeroesIds;
+          gameData.redPlayer.draftHeroesIds = temp;
+        }
+        // Wait again for players to chose 2 more cards
+        gameData.game['waitingFor/blue'] = true;
+        gameData.game['waitingFor/red'] = true;
+        duelCtrl.storeData(gameData);
+      }
+    }
+  };
+
+  let end = () => {
+    console.log('Go to next game state : 2_CHANGE_UP_TO_3_CARDS');
+
+    duelCtrl.setCurrentState('2_CHANGE_UP_TO_3_CARDS');
+    duelCtrl.startCurrentState();
+  };
+  return {
+    start,
+    update,
+    end
+  };
+}

server/src/client-server-shared/gameStates/1-selectFactionState.js

@@ -1,36 +1,52 @@
 'use strict';
-import { getHeroesByFaction } from '../heroesHelper';
+import { getHeroesIdsByFaction } from '../heroesHelper';
 export default function selectFactionState(duelController) {
   let duelCtrl = duelController;
   let start = () => {
     let gameData = duelCtrl.getGameData();
-    gameData.game.heroes = duelCtrl.getAllHeroes();
     gameData.game['waitingFor/blue'] = true;
     gameData.game['waitingFor/red'] = true;
     gameData.game.currentPlayer = 'both';
     duelCtrl.storeData(gameData);
   };
 
+  // Should receive in paylod : {color, faction}
   let update = (payload = null) => {
     let gameData = duelCtrl.getGameData();
     if (payload) {
-      let player = payload.player + 'player';
+      let player = payload.color + 'Player';
       gameData[player].faction = payload.faction;
-      gameData[player].twelveHeroes = getHeroesByFaction(payload.faction);
-      gameData.game['waitingFor/' + payload.player] = false;
+      let randomHeroes = getHeroesIdsByFaction(
+        gameData.game.allHeroes,
+        payload.faction,
+        gameData.game.advRules.includes('popularity')
+      );
+      // Init player twelve heroes
+      gameData[player].twelveHeroes = [];
+      randomHeroes.forEach(id => {
+        gameData[player].twelveHeroes.push({
+          id,
+          position: 'pile',
+          possibleActions: []
+        });
+      });
+      gameData.game['waitingFor/' + payload.color] = false;
       duelCtrl.storeData(gameData);
     }
 
     if (
-      duelCtrl.gameData.game['waitingFor/blue'] === false &&
-      duelCtrl.gameData.game['waitingFor/red'] === false
+      gameData.game['waitingFor/blue'] === false &&
+      gameData.game['waitingFor/red'] === false
     ) {
       duelCtrl.endCurrentState();
     }
   };
 
   let end = () => {
-    console.log('Go to next game state : 2_CHANGE_UP_TO_3');
+    console.log('Go to next game state : 2_CHANGE_UP_TO_3_CARDS');
+
+    duelCtrl.setCurrentState('2_CHANGE_UP_TO_3_CARDS');
+    duelCtrl.startCurrentState();
   };
   return {
     start,

server/src/client-server-shared/gameStates/1-selectTournamentState.js

@@ -0,0 +1,44 @@
+'use strict';
+import { shuffleHeroes } from '../heroesHelper';
+export default function selectTournamentState(duelController) {
+  let duelCtrl = duelController;
+  let start = () => {
+    let gameData = duelCtrl.getGameData();
+    gameData.game['waitingFor/blue'] = true;
+    gameData.game['waitingFor/red'] = true;
+    gameData.game.currentPlayer = 'both';
+    duelCtrl.storeData(gameData);
+  };
+
+  // Should receive in paylod : {color, twelveHeroes [{id, position,possibleActions}] of size 12}
+  let update = (payload = null) => {
+    let gameData = duelCtrl.getGameData();
+    if (payload) {
+      let player = payload.color + 'player';
+      let randomHeroes = shuffleHeroes(payload.twelveHeroes);
+      // Init player twelve heroes
+      gameData[player].twelveHeroes = randomHeroes;
+      gameData.game['waitingFor/' + payload.color] = false;
+      duelCtrl.storeData(gameData);
+    }
+
+    if (
+      gameData.game['waitingFor/blue'] === false &&
+      gameData.game['waitingFor/red'] === false
+    ) {
+      duelCtrl.endCurrentState();
+    }
+  };
+
+  let end = () => {
+    console.log('Go to next game state : 2_CHANGE_UP_TO_3_CARDS');
+
+    duelCtrl.setCurrentState('2_CHANGE_UP_TO_3_CARDS');
+    duelCtrl.startCurrentState();
+  };
+  return {
+    start,
+    update,
+    end
+  };
+}

server/src/client-server-shared/gameStates/2-changeUpTo3Cards.js

@@ -0,0 +1,41 @@
+'use strict';
+export default function changeUpTo3Cards(duelController) {
+  let duelCtrl = duelController;
+  let start = () => {
+    console.log('Start state 2');
+    let gameData = duelCtrl.getGameData();
+    console.log('gameData :>> ', gameData);
+    duelCtrl.storeData(gameData);
+  };
+
+  // Should receive in paylod : {color, faction}
+  let update = (payload = null) => {
+    let gameData = duelCtrl.getGameData();
+    if (payload) {
+      console.log('payload :>> ', payload);
+
+      /**  TODO : process player response */
+      gameData.game['waitingFor/' + payload.color] = false;
+      duelCtrl.storeData(gameData);
+    }
+
+    if (
+      gameData.game['waitingFor/blue'] === false &&
+      gameData.game['waitingFor/red'] === false
+    ) {
+      duelCtrl.endCurrentState();
+    }
+  };
+
+  let end = () => {
+    console.log('Go to next game state : 3...');
+
+    // duelCtrl.setCurrentState('3...');
+    // duelCtrl.startCurrentState();
+  };
+  return {
+    start,
+    update,
+    end
+  };
+}

server/src/client-server-shared/gameStates/gameStates.js

@@ -10,7 +10,13 @@
 
 import initState from './0-initState';
 import selectFactionState from './1-selectFactionState';
+import selectDraftState from './1-selectDraftState';
+import selectTournamentState from './1-selectTournamentState';
+import changeUpTo3Cards from './2-changeUpTo3Cards';
 export default {
   initState,
-  selectFactionState
+  selectFactionState,
+  selectDraftState,
+  selectTournamentState,
+  changeUpTo3Cards
 };

server/src/client-server-shared/heroesHelper.js

@@ -38,24 +38,45 @@ export const initHeroesFromJson = function(allHeroesJson) {
   });
   return heroes;
 };
-export const getHeroesByFaction = function(allHeroes, faction) {
-  return allHeroes.filter(hero => {
-    return hero.faction === faction;
-  });
+export const getHeroesIdsByFaction = function(
+  allHeroes,
+  faction,
+  popularityRule
+) {
+  let popularity = 'without';
+  if (popularityRule === true) {
+    popularity = 'with';
+  }
+  let heroIds = allHeroes
+    .filter(hero => {
+      return (
+        hero.faction === faction &&
+        (hero.popularity === popularity || hero.popularity === 'any')
+      );
+    })
+    .map(hero => hero.id);
+  return shuffle(heroIds);
 };
-export const getDraftSets = function(allHeroes) {
-  let heroesDraftable = allHeroes.filter(hero => {
-    return hero.isDraftable === true;
-  });
+export const getDraftSets = function(allHeroes, popularityRule) {
+  let popularity = 'without';
+  if (popularityRule === true) {
+    popularity = 'with';
+  }
+  let heroesDraftable = allHeroes
+    .filter(hero => {
+      return (
+        hero.isDraftable === true &&
+        (hero.popularity === popularity || hero.popularity === 'any')
+      );
+    })
+    .map(hero => hero.id);
 
   let shuffledHeroes = shuffle(heroesDraftable);
 
   // Return 4 sets of 6 heroes for draft mode
   let draftSets = [
-    shuffledHeroes.slice(0, 5),
-    shuffledHeroes.slice(6, 11),
-    shuffledHeroes.slice(12, 17),
-    shuffledHeroes.slice(18, 23)
+    [shuffledHeroes.slice(0, 6), shuffledHeroes.slice(6, 12)],
+    [shuffledHeroes.slice(12, 18), shuffledHeroes.slice(18, 24)]
   ];
   return draftSets;
 };

server/src/game-server/games-manager.js

@@ -60,8 +60,11 @@ export default function GamesManager(ioServer, mariadbConn) {
     if (currentGames.has(id)) {
       currentGames.get(id).playerLeft(player, disconnected);
       if (!currentGames.get(id).hasPlayers()) {
+        // If it was new created game, don't set it to pause, game will be removed
+        if (!currentGames.get(id).isNewlyCreatedGame()) {
+          mariadbConn.updateGameStatus(id, 'PAUSED');
+        }
         currentGames.delete(id);
-        mariadbConn.updateGameStatus(id, 'PAUSED');
       }
     }
 

server/src/game-server/online-duel-sync.js

@@ -179,9 +179,13 @@ export default function OnlineDuelSync(
   let hasPlayers = function() {
     return players.size > 0;
   };
+  let isNewlyCreatedGame = function() {
+    return isNew;
+  };
   return {
     addPlayer,
     playerLeft,
-    hasPlayers
+    hasPlayers,
+    isNewlyCreatedGame
   };
 }

server/src/server.js

@@ -166,16 +166,18 @@ function Server() {
       callback(response);
     });
 
-    socket.on('leave-game', async (username, callback) => {
+    socket.on('leave-game', (username, callback) => {
       // Remove player from game he is playing
-      try {
-        let res = removeAllGamesCreatedByPlayer(username);
-        if (res.affectedRows > 0) {
-          forceClientsReloadGames();
-        }
-      } catch (err) {
-        console.log('Error removing games : ' + err.message);
-      }
+      removeAllGamesCreatedByPlayer(username)
+        .then(res => {
+          if (res.affectedRows > 0) {
+            forceClientsReloadGames();
+          }
+        })
+        .catch(err => {
+          console.log('Error removing games : ' + err.message);
+        });
+
       gamesManager.playerLeft(authorizedPlayers.get(username), false);
       callback(true);
     });

src/App.vue

@@ -11,7 +11,7 @@
           <br />
           <button
             class="btn btn-primary custom-button"
-            @click="display = 'app-menu'"
+            @click="test = 'app-menu'"
           >
             Enter Menu
           </button>
@@ -19,22 +19,23 @@
           <br />
           <button
             class="btn btn-primary custom-button"
-            @click="display = 'app-game'"
+            @click="test = 'app-game'"
           >
             Enter Game
           </button>
         </div>
         <div class="col">
-          <button style="font-size:8px" @click="hideTest = !hideTest">
+          <button
+            style="font-size:8px"
+            @click="
+              hideTest = !hideTest;
+              if (hideTest) test = '';
+            "
+          >
             Test
           </button>
           <keep-alive>
-            <component
-              :is="display"
-              @join-game-id="launchOnlineGame($event)"
-              :username="username"
-              :game-id="onlineGameId"
-            ></component>
+            <component :is="choseDisplay"></component>
           </keep-alive>
         </div>
       </div>
@@ -45,36 +46,55 @@
 <script>
 import AppMenu from './menu/AppMenu';
 import AppGame from './game/AppGame';
-import { globalEventsBus } from './main';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'App',
   data() {
     return {
-      display: 'app-menu',
-      username: '',
-      onlineGameId: -1,
-      hideTest: true
+      hideTest: true,
+      test: ''
     };
   },
   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';
+  computed: {
+    ...mapGetters({
+      isGameRunning: 'isGameRunning'
+    }),
+    choseDisplay() {
+      if (this.test !== '') {
+        return this.test;
+      }
+      if (!this.isGameRunning) {
+        return 'app-menu';
+      } else {
+        return 'app-game';
+      }
+    }
+  },
+  beforeMount() {
+    let user = localStorage.getItem('username');
+    if (user) {
+      console.log('user in storage, try to connect ! : ', user);
+      this.$store
+        .dispatch('menu/connect', user)
+        .then(() => {
+          let gameId = localStorage.getItem('gameId');
+          if (gameId && gameId > -1) {
+            console.log('gameId in storage, try to join ! : ', gameId);
+            this.$store.dispatch('menu/joinOnlineGame', {
+              id: gameId,
+              isNew: false
+            });
+          }
+        })
+        .catch(() => {});
     }
   },
   created() {
-    globalEventsBus.$on('game-stopped', () => {
-      this.username = '';
-      this.onlineGameId = -1;
-      this.display = 'app-menu';
-    });
     this.$store.watch(
       () => this.$store.getters['messages'],
       messages => {

src/common/heroes-display/HeroesDisplay.vue

@@ -1,9 +1,17 @@
 <template>
   <div>
-    <button class="btn btn-primary" @click="showFilter = !showFilter">
+    <button
+      class="btn btn-primary"
+      @click="showFilter = !showFilter"
+      v-if="display12heroesOnly === false"
+    >
       Show/Hide filter
     </button>
-    <button class="btn btn-primary" @click="resetFilter">
+    <button
+      class="btn btn-primary"
+      @click="resetFilter"
+      v-if="display12heroesOnly === false"
+    >
       Reset filter
     </button>
     <heroes-filter
@@ -11,20 +19,21 @@
       :filter-options="filterOptions"
       v-model="filter"
     ></heroes-filter>
-    <hr />
-    <heroes-selector v-if="selectHeroes.enable"></heroes-selector>
-    <button class="btn btn-primary" @click="selectFaction">
-      Select faction
-    </button>
+    <heroes-selector
+      v-if="selectHeroes"
+      :factionSelected="factionSelected"
+    ></heroes-selector>
     <hr />
     <div
       class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mt-3"
     >
       <hero
-        v-for="(hero, index) in heroesBy(filter)"
+        v-for="(hero, index) in heroesToDisplay"
         :key="index"
         :hero="hero"
-        :selectable="['draft', 'tournament'].includes(selectHeroes.mode)"
+        :selectable="
+          selectHeroes === true && ['draft', 'tournament'].includes(deckMode)
+        "
       ></hero>
       <!-- v-model="selected" -->
     </div>
@@ -36,7 +45,6 @@ import { mapGetters } from 'vuex';
 import Hero from './components/Hero';
 import HeroesFilter from './components/HeroesFilter';
 import HeroesSelector from './components/HeroesSelector';
-import { socketService } from '../../main';
 
 let initialFilter = function(filterOptions) {
   return {
@@ -53,11 +61,33 @@ let initialFilter = function(filterOptions) {
 };
 
 export default {
-  props: ['filterOptions', 'selectHeroes'],
+  // selectHeroes : if true it means we are not just displaying the cards
+  // we need to offer a way to user to select heroes based on current game mode
+  props: {
+    selectHeroes: {
+      type: Boolean,
+      default: false
+    },
+    display12heroesOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      showFilter: false,
-      filter: initialFilter(this.filterOptions)
+      showFilter: this.selectHeroes,
+      filter: {
+        minPower: 0,
+        maxPower: 6,
+        minCost: 0,
+        maxCost: 7,
+        faction: '',
+        popularity: '',
+        draft: '',
+        name: '',
+        byName: false,
+        byId: []
+      }
     };
   },
   components: {
@@ -68,17 +98,65 @@ export default {
   computed: {
     ...mapGetters({
       heroesBy: 'game/filterHeroes',
-      allHeroes: 'game/allHeroes'
-    })
+      allHeroes: 'game/allHeroes',
+      deckMode: 'game/deckMode',
+      isPopularityRule: 'game/isPopularityRule',
+      myColor: 'game/myColor',
+      getSelectableDraftIds: 'game/myDraftIds',
+      getTwelveHeroes: 'game/myTwelveHeroes'
+    }),
+    filterOptions() {
+      // init filter options will all
+      let factionFilter = ['all', 'orcs', 'humans', 'elves', 'meca', 'none'];
+      let popularityFilter = ['without', 'with'];
+      let draftFilter = ['all', 'yes', 'no'];
+      if (this.selectHeroes === true) {
+        draftFilter = ['all'];
+        // if tournament and pop rule ON, let's authorize to select between all golems
+        if (this.isPopularityRule === true && this.deckMode !== 'tournament') {
+          popularityFilter = ['with'];
+        } else if (this.isPopularityRule === false) {
+          popularityFilter = ['without'];
+        }
+        if (this.deckMode === 'faction') {
+          factionFilter = ['orcs', 'humans', 'elves', 'meca'];
+        }
+      }
+      if (this.display12heroesOnly === true) {
+        popularityFilter = ['none'];
+      }
+      return {
+        faction: factionFilter,
+        popularity: popularityFilter,
+        draft: draftFilter,
+        power: true,
+        cost: true,
+        byName: true
+      };
+    },
+    heroesToDisplay() {
+      if (this.display12heroesOnly === true) {
+        return this.getTwelveHeroes;
+      }
+      if (this.selectHeroes === true) {
+        return this.heroesBy(this.filter);
+      } else {
+        return this.allHeroes;
+      }
+    },
+    factionSelected() {
+      return this.filter.faction;
+    }
   },
   methods: {
     resetFilter() {
       Object.assign(this.filter, initialFilter(this.filterOptions));
-    },
-    selectFaction() {
-      socketService.endTurn();
     }
   },
+  created() {
+    Object.assign(this.filter, initialFilter(this.filterOptions));
+    this.filter.byId = this.getSelectableDraftIds;
+  },
   watch: {
     'filter.byName'(newValue) {
       if (newValue === false) {

src/common/heroes-display/components/HeroesFilter.vue

@@ -98,6 +98,7 @@
         :disabled="!value.byName"
       />
     </div>
+    <hr />
   </div>
 </template>
 

src/common/heroes-display/components/HeroesSelector.vue

@@ -1,11 +1,51 @@
 <template>
   <div>
-    <hr />
+    <button
+      class="btn btn-primary"
+      v-if="deckMode === 'faction'"
+      :disabled="!isItMyTurn"
+      @click="submitFaction(factionSelected)"
+    >
+      {{ factionButtonText }}
+    </button>
+    <div v-if="deckMode === 'tournament'">
+      Here logic to select tournament deck
+    </div>
+    <div v-if="deckMode === 'draft'">
+      Here logic to select draft deck
+    </div>
   </div>
 </template>
 
 <script>
-export default {};
+import { mapGetters, mapActions } from 'vuex';
+export default {
+  props: ['factionSelected'],
+  computed: {
+    ...mapGetters({
+      deckMode: 'game/deckMode',
+      myColor: 'game/myColor',
+      isItMyTurn: 'game/isItMyTurn'
+    }),
+    factionButtonText() {
+      if (this.isItMyTurn === true) {
+        return 'Select Faction ' + this.factionSelected;
+      } else {
+        return 'Wait other player...';
+      }
+    }
+  },
+  methods: {
+    ...mapActions({
+      submitFaction(dispatch, faction) {
+        return dispatch(
+          'game/' + this.myColor + 'Player/submitFaction',
+          faction
+        );
+      }
+    })
+  }
+};
 </script>
 
 <style></style>

src/common/socket-service.js

@@ -5,7 +5,6 @@ const SERVER_URL = 'http://' + process.env.VUE_APP_SERVER_HOST;
 const SERVER_PORT = process.env.VUE_APP_SERVER_PORT;
 
 export default function SocketService(socketEventBus, vuexStore) {
-  let eventBus = socketEventBus;
   let store = vuexStore;
   let ioClient = null;
   let connect = function(name) {
@@ -46,13 +45,13 @@ export default function SocketService(socketEventBus, vuexStore) {
 
       ioClient.on('reload-games-list', () => {
         console.log('force reload games list !');
-        eventBus.$emit('reload-games');
+        store.dispatch('menu/fetchJoinableGames');
       });
       ioClient.on('message', message => {
         store.dispatch('addMessageToQueue', message);
       });
       ioClient.on('update-game-data', data => {
-        if (data) {
+        if (data && data.game) {
           store.dispatch('game/update', data);
         }
       });
@@ -106,7 +105,6 @@ export default function SocketService(socketEventBus, vuexStore) {
     );
   };
   let joinGame = function(username, gameId, joinCreatedGame) {
-    console.log('gameId :>> ', gameId);
     return checkConnection(username).then(
       () => {
         return new Promise((resolve, reject) => {

src/game/AppGame.vue

@@ -2,22 +2,10 @@
   <div>
     <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"
-        >
+        <button class="btn btn-danger" @click="stopGame">
           Stop game
         </button>
-        <button
-          class="btn btn-success"
-          v-else
-          @click="isGameRunning = !isGameRunning"
-        >
-          Start game
-        </button>
-        <input type="text" v-model="chatMessage" />
+        <input type="text" v-model="chatMessage" @keydown.enter="sendChat" />
         <button
           class="btn btn-primary"
           @click="sendChat"
@@ -28,66 +16,59 @@
       </div>
     </div>
     <hr />
-    <label>Deck mode to select heroes :</label>
-    <select
-      class="form-control pull-left"
-      v-model="deckSelectionMode"
-      style="width:180px"
-    >
-      <option selected>faction</option>
-      <option>draft</option>
-      <option>tournament</option>
-      <option value="display">just display</option>
-    </select>
-    <hr />
-    <heroes-display
-      :filter-options="filterOptions"
-      :select-heroes="{ enable: true, mode: deckSelectionMode }"
-    ></heroes-display>
+    <component :is="gameStepDisplay" :select-heroes="true"></component>
   </div>
 </template>
 
 <script>
-import { globalEventsBus } from '../main';
+import { mapGetters } from 'vuex';
 import { socketService } from '../main';
 import HeroesDisplay from '../common/heroes-display/HeroesDisplay';
+import OnlineWait from './components/OnlineWait';
+import GameBoard from './components/GameBoard';
 export default {
   components: {
-    HeroesDisplay
+    HeroesDisplay,
+    OnlineWait,
+    GameBoard
   },
-  props: ['game-id', 'username'],
   data() {
     return {
-      isGameRunning: false,
-      filterOptions: {
-        //  - faction (orcs humans elves meca none all)
-        //  - popularity (with without)
-        //  - draftMode (yes no all)
-        faction: ['all', 'orcs', 'humans', 'elves', 'meca', 'none'],
-        popularity: ['without', 'with'],
-        draft: ['all', 'yes', 'no'],
-        power: true,
-        cost: true,
-        byName: true
-      },
-      deckSelectionMode: 'faction',
       chatMessage: ''
     };
   },
-  watch: {
-    isGameRunning() {
-      if (this.isGameRunning) {
-        globalEventsBus.$emit('game-running');
-      } else {
-        socketService.leaveGame(this.username).catch(err => {
-          console.log('Error communicating to server to remove games : ' + err);
-        });
-        globalEventsBus.$emit('game-stopped');
+  computed: {
+    ...mapGetters({
+      gameState: 'game/state'
+    }),
+    gameStepDisplay() {
+      let componentToDisplay = '';
+      switch (this.gameState) {
+        case null:
+        case '':
+        case '0_INIT':
+          componentToDisplay = 'online-wait';
+          break;
+        case '1_SELECT_FACTION':
+        case '1_SELECT_DRAFT':
+        case '1_SELECT_TOURNAMENT':
+          componentToDisplay = 'heroes-display';
+          break;
+        case '2_CHANGE_UP_TO_3_CARDS':
+          componentToDisplay = 'game-board';
+          break;
+        default:
+          componentToDisplay = 'online-wait';
+          break;
       }
+      return componentToDisplay;
     }
   },
-  computed: {},
   methods: {
+    stopGame() {
+      this.$store.dispatch('stopGame');
+      this.$store.dispatch('game/resetGameState');
+    },
     sendChat() {
       socketService.chat(this.chatMessage);
       this.chatMessage = '';

src/game/components/GameBoard.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Game board will be here</h1>
+    <h3>Next to come : replace up to 3 cards</h3>
+    <hr />
+    <h3>The 12 heroes in my deck :</h3>
+    <heroes-display :display12heroesOnly="true"></heroes-display>
+  </div>
+</template>
+
+<script>
+import HeroesDisplay from '../../common/heroes-display/HeroesDisplay';
+export default {
+  components: {
+    HeroesDisplay
+  }
+};
+</script>
+
+<style></style>

src/game/components/OnlineWait.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Wait...</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {}
+};
+</script>
+
+<style></style>

src/main.js

@@ -12,6 +12,9 @@ import SocketService from './common/socket-service';
 
 import { store } from './store/store';
 
+import Constants from './store/types';
+Vue.use(Constants);
+
 export const socketEventBus = new Vue({});
 export const socketService = new SocketService(socketEventBus, store);
 

src/menu/AppMenu.vue

@@ -27,6 +27,7 @@
 import MenuLogin from './login/MenuLogin';
 import MenuOnlineRoom from './online-room/MenuOnlineRoom';
 import MenuGameCreation from './game-creation/MenuGameCreation';
+import { mapGetters } from 'vuex';
 export default {
   data() {
     return {
@@ -46,7 +47,6 @@ export default {
     },
     enterOnline(username) {
       this.previousPage.push(this.menuPage);
-      console.log('enter online with username : ' + username);
       this.username = username;
       this.menuPage = 'menu-online-room';
     },
@@ -54,6 +54,17 @@ export default {
       this.previousPage.push(this.menuPage);
       this.menuPage = 'menu-game-creation';
     }
+  },
+  computed: {
+    ...mapGetters({ isGameRunning: 'isGameRunning' })
+  },
+  watch: {
+    isGameRunning(value) {
+      if (value === true) {
+        this.menuPage = 'menu-login';
+        this.previousPage = [];
+      }
+    }
   }
 };
 </script>

src/menu/game-creation/MenuGameCreation.vue

@@ -39,15 +39,15 @@
       <hr />
       <button
         class="btn btn-primary"
-        @click.prevent="createGame"
-        :disabled="creatingGame"
+        @click.prevent="createGame({ deckMode: selectedDeck, advRules })"
+        :disabled="createGameStatus.status === $types('request').REQUESTED"
       >
-        {{ createButtonText }}
+        {{ createGameStatus.status | getButtonText }}
       </button>
       <button
         class="btn btn-primary"
         @click.prevent="$emit('back')"
-        :disabled="creatingGame"
+        :disabled="createGameStatus.status === $types('request').REQUESTED"
       >
         Back
       </button>
@@ -56,7 +56,8 @@
 </template>
 
 <script>
-import { socketService } from '../../main';
+import { mapActions, mapGetters } from 'vuex';
+import types from '../../store/types';
 
 const decks = ['Faction', 'Draft', 'Tournament'];
 export default {
@@ -65,38 +66,22 @@ export default {
     return {
       deckChoices: decks,
       selectedDeck: decks[0].toLowerCase(),
-      advRules: [],
-      creatingGame: false,
-      createButtonText: 'Create'
+      advRules: []
     };
   },
+  computed: {
+    ...mapGetters({
+      createGameStatus: 'menu/createGameStatus'
+    })
+  },
   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 + ')');
-        });
+    ...mapActions({
+      createGame: 'menu/createOnlineGame'
+    })
+  },
+  filters: {
+    getButtonText(status) {
+      return status === types.request.REQUESTED ? 'Creating' : 'Create';
     }
   }
 };

src/menu/login/MenuLogin.vue

@@ -7,31 +7,33 @@
           placeholder="Username"
           autocomplete="off"
           class="form-control"
-          v-model="username"
-          :disabled="lockUsername"
-          @keydown.enter="connect()"
+          :value="username"
+          @input="usernameInput = $event.target.value"
+          :disabled="
+            connectionStatus.status === $types('request').REQUESTED ||
+              isConnected
+          "
+          @keydown.enter="connect(usernameInput)"
         />
         <button
           class="btn btn-primary form-control"
-          @click.prevent="connect"
-          :disabled="connectButton.disabled"
+          @click.prevent="connectButtonAction"
+          :disabled="connectionStatus.status === $types('request').REQUESTED"
         >
-          {{ connectButton.text }}
+          {{ connectButtonText }}
         </button>
-        <p>
-          {{ connectionStatus }}
-        </p>
+        <p>{{ connectionStatus.text }} {{ isGameRunning | getRunningText }}</p>
         <button
           class="btn btn-primary form-control"
-          :disabled="onlineButtonDisable || isOneGameRunning"
+          :disabled="!isConnected || isGameRunning"
           @click.prevent="$emit('enter-online', username)"
         >
           Online Game
         </button>
         <button
           class="btn btn-primary form-control"
-          @click.prevent="test"
-          :disabled="isOneGameRunning"
+          @click.prevent="$emit('enter-local')"
+          :disabled="isGameRunning"
         >
           Local Game
         </button>
@@ -41,72 +43,54 @@
 </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
-  };
-}
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   data() {
-    return initialState();
+    return {
+      usernameInput: this.username
+    };
   },
   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 + ')';
-            });
-        }
+    ...mapActions({
+      connect: 'menu/connect',
+      disconnect: 'disconnect'
+    }),
+    connectButtonAction() {
+      if (this.isConnected) {
+        this.disconnect();
       } else {
-        socketService.disconnect();
-        Object.assign(this.$data, initialState());
+        this.connect(this.usernameInput);
       }
-    },
-    test() {
-      socketService.test(this.username);
     }
   },
-  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;
-    });
+  computed: {
+    ...mapGetters({
+      isGameRunning: 'isGameRunning',
+      username: 'username',
+      isConnected: 'isConnected',
+      connectionStatus: 'menu/connectionStatus'
+    }),
+    connectButtonText() {
+      if (this.isConnected === true) {
+        return 'Disconnect';
+      } else if (
+        this.connectionStatus.status === this.$types('request').REQUESTED
+      ) {
+        return 'Connecting';
+      } else {
+        return 'Connect';
+      }
+    }
+  },
+  filters: {
+    getRunningText(isRunning) {
+      if (isRunning === true) {
+        return '(Game running)';
+      } else {
+        return '';
+      }
+    }
   }
 };
 </script>

src/menu/online-room/MenuOnlineRoom.vue

@@ -5,12 +5,18 @@
         Existing Games
         <hr />
         <div style="border:1px solid black; height:300px">
-          <div v-if="loading">
-            <h3>{{ loadingMessage }}</h3>
+          <div
+            v-if="
+              loadGamesStatus.status === $types('request').IDLE ||
+                loadGamesStatus.status === $types('request').REQUESTED ||
+                joinableGames.length == 0
+            "
+          >
+            <h3>{{ loadGamesStatus.text }}</h3>
           </div>
           <div v-on-clickaway="unselect" v-else>
             <game-item
-              v-for="(game, index) in gamesList"
+              v-for="(game, index) in joinableGames"
               :key="game.id"
               :game-element="game"
               @click.native="selectedIndex = index"
@@ -27,7 +33,12 @@
           <button
             class="btn btn-primary"
             :disabled="resumeDisabled"
-            @click="joinGame()"
+            @click="
+              joinGame({
+                id: joinableGames[selectedIndex].id,
+                isNew: joinableGames[selectedIndex].player2 === ''
+              })
+            "
           >
             Join / Resume game
           </button>
@@ -41,16 +52,13 @@
 <script>
 import GameItem from './components/GameItem';
 import { mixin as clickaway } from 'vue-clickaway';
-import { socketService, socketEventBus } from '../../main';
+import { mapActions, mapGetters } from 'vuex';
 export default {
   props: ['username'],
   data() {
     return {
       selectedIndex: -1,
-      resumeDisabled: true,
-      loading: true,
-      loadingMessage: 'Loading...',
-      gamesList: []
+      resumeDisabled: true
     };
   },
   components: {
@@ -58,7 +66,6 @@ export default {
   },
   watch: {
     selectedIndex() {
-      console.log('index selected: ' + this.selectedIndex);
       if (this.selectedIndex >= 0) {
         this.resumeDisabled = false;
       } else {
@@ -67,47 +74,24 @@ export default {
     }
   },
   methods: {
+    ...mapActions({
+      joinGame: 'menu/joinOnlineGame',
+      fetchJoinableGames: 'menu/fetchJoinableGames'
+    }),
     unselect() {
       this.selectedIndex = -1;
-    },
-    joinGame() {
-      let index = this.selectedIndex;
-      let id = this.gamesList[index].id;
-      socketService
-        .joinGame(this.username, id, this.gamesList[index].player2 === '')
-        .then(() => {
-          this.$emit('back');
-          this.$emit('join-game-id', {
-            id,
-            username: this.username
-          });
-        })
-        .catch(err => {
-          console.log('error joining : ', err);
-        });
-    },
-    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';
-        });
     }
   },
+  computed: {
+    ...mapGetters({
+      joinableGames: 'menu/joinableGames',
+      loadGamesStatus: 'menu/loadGamesStatus'
+    })
+  },
   mixins: [clickaway],
   created() {
-    this.updateGamesList();
-    socketEventBus.$on('reload-games', () => {
-      this.updateGamesList();
-    });
+    // When entering this component, fetch joignable games from server
+    this.fetchJoinableGames();
   }
 };
 </script>

src/store/game/game.js

@@ -1,7 +1,7 @@
 import AnyPlayer from './player/any-player';
 import allHeroesJson from '../../../server/src/client-server-shared/all-heroes.json';
 
-const state = {
+const initGameState = {
   gameState: '',
   allHeroes: [],
   deckMode: '',
@@ -15,6 +15,7 @@ const state = {
   totalFood: 0,
   allHeroesJson
 };
+const state = Object.assign({}, initGameState);
 
 const getters = {
   state(state) {
@@ -23,11 +24,49 @@ const getters = {
   allHeroes(state) {
     return state.allHeroes;
   },
+  deckMode(state) {
+    return state.deckMode;
+  },
+  myColor(state, getters, rootState) {
+    let color = 'blue';
+    if (rootState.username === state.redPlayer.name) {
+      color = 'red';
+    }
+    return color;
+  },
+  ennemyColor(state, getters) {
+    let color = 'red';
+    if (getters.myColor === 'red') {
+      color = 'blue';
+    }
+    return color;
+  },
+  isItMyTurn(state, getters) {
+    return state['waitingFor/' + getters.myColor];
+  },
+  isPopularityRule(state) {
+    return state.advRules.includes('popularity');
+  },
+  isDiscardRule(state) {
+    return state.advRules.includes('discard');
+  },
   heroById: state => id => {
     return state.allHeroes.find(hero => hero.id === id);
   },
+  myTwelveHeroes(state, getters) {
+    let myColor = getters.myColor;
+    let myHeroesIds = getters[myColor + 'Player/twelveHeroes'].map(
+      hero => hero.id
+    );
+    return state.allHeroes.filter(hero => {
+      return myHeroesIds.includes(hero.id);
+    });
+  },
+  myDraftIds(state, getters) {
+    let myColor = getters.myColor;
+    return getters[myColor + 'Player/draftIds'];
+  },
   filterHeroes: state => filter => {
-    console.log('filter :>> ', filter);
     // filter has
     //  - faction (orcs humans elves meca none all)
     //  - popularity (with without)
@@ -56,11 +95,14 @@ const getters = {
         draftFilter = 'all';
         break;
     }
-    console.log('state.allHeroes :>> ', state.allHeroes);
     return state.allHeroes.filter(hero => {
       if (filter.faction !== 'all' && hero.faction !== filter.faction)
         return false;
-      if (hero.popularity !== 'any' && hero.popularity !== filter.popularity)
+      if (
+        filter.popularity !== 'none' &&
+        hero.popularity !== 'any' &&
+        hero.popularity !== filter.popularity
+      )
         return false;
 
       if (draftFilter !== 'all' && hero.isDraftable !== draftFilter)
@@ -80,13 +122,10 @@ const getters = {
       if (
         filter.byId &&
         filter.byId.length > 0 &&
-        filter.byId.includes(hero.id)
+        !filter.byId.includes(hero.id)
       ) {
-        console.log('not returning hero :>> ', hero);
-        console.log('filter.byId :>> ', filter.byId);
         return false;
       }
-      console.log('returning hero :>> ', hero);
       return true;
     });
   }
@@ -98,6 +137,12 @@ const mutations = {
   },
   SET_FULL_GAME_STATE: (state, payload) => {
     Object.assign(state, payload);
+  },
+  INIT_GAME_STATE: state => {
+    Object.assign(state, initGameState);
+  },
+  SET_WAITING_FOR: (state, payload) => {
+    state['waitingFor/' + payload.color] = payload.value;
   }
 };
 
@@ -109,6 +154,11 @@ const actions = {
     commit('SET_FULL_GAME_STATE', payload.game);
     commit('bluePlayer/SET_FULL_PLAYER_STATE', payload.bluePlayer);
     commit('redPlayer/SET_FULL_PLAYER_STATE', payload.redPlayer);
+  },
+  resetGameState: ({ commit }) => {
+    commit('INIT_GAME_STATE');
+    commit('bluePlayer/INIT_PLAYER_STATE');
+    commit('redPlayer/INIT_PLAYER_STATE');
   }
 };
 const bluePlayer = new AnyPlayer();

src/store/game/player/any-player.js

@@ -1,5 +1,6 @@
+import { socketService } from '../../../main';
 export default function AnyPlayer() {
-  const state = {
+  const initPlayerState = {
     // Username of this player
     name: '',
     // Color of this player (blue or red)
@@ -10,7 +11,7 @@ export default function AnyPlayer() {
     draftHeroesIds: [],
     // the 12 heroes the player is playing with
     // Player will fill it himself if mode is draft or tournament
-    // contains object : {id , position , possibleActions :[]}
+    // contains object : {id:heroId , position:'pile' , possibleActions :[]}
     twelveHeroes: [],
     foodInCamp: 0,
     // Can see already we might have issues with left/right depending from where we look :)
@@ -21,19 +22,49 @@ export default function AnyPlayer() {
     actionsPerformed: []
   };
 
+  const state = Object.assign({}, initPlayerState);
+
   const getters = {
     color: state => {
       return state.color;
+    },
+    draftIds: state => {
+      return state.draftHeroesIds;
+    },
+    twelveHeroes: state => {
+      return state.twelveHeroes;
     }
   };
 
   const mutations = {
     SET_FULL_PLAYER_STATE: (state, payload) => {
       Object.assign(state, payload);
+    },
+    INIT_PLAYER_STATE: state => {
+      Object.assign(state, initPlayerState);
     }
   };
 
-  const actions = {};
+  const actions = {
+    submitFaction: ({ commit, state }, payload) => {
+      commit(
+        'game/SET_WAITING_FOR',
+        { color: state.color, value: false },
+        { root: true }
+      );
+      socketService
+        .endTurn({ color: state.color, faction: payload })
+        .catch(err => {
+          console.log('Error sending data : ', err);
+          //Unvalid submit
+          commit(
+            'game/SET_WAITING_FOR',
+            { color: state.color, value: true },
+            { root: true }
+          );
+        });
+    }
+  };
   return {
     namespace: true,
     state,

src/store/menu/menu.js

@@ -1,22 +1,182 @@
+import { socketService } from '../../main';
+import types from '../types';
+
 const state = {
-  joinableGames: []
+  joinableGames: [],
+  loadGamesStatus: { status: types.request.IDLE, text: 'Not connected' },
+  connectionStatus: { status: types.request.IDLE, text: 'Not connected' },
+  createGameStatus: { status: types.request.IDLE, text: 'Not connected' },
+  joinGameStatus: { status: types.request.IDLE, text: 'Not connected' }
 };
 
 const getters = {
   joinableGames(state) {
     return state.joinableGames;
+  },
+  connectionStatus(state) {
+    return state.connectionStatus;
+  },
+  loadGamesStatus(state) {
+    return state.loadGamesStatus;
+  },
+  createGameStatus(state) {
+    return state.createGameStatus;
+  },
+  joinGameStatus(state) {
+    return state.joinGameStatus;
   }
 };
 
 const mutations = {
-  SET_JOIGNABLE_GAMES: (state, payload) => {
+  SET_JOINABLE_GAMES: (state, payload) => {
     state.joinableGames = payload;
+  },
+  SET_CONNECTION_STATUS: (state, payload) => {
+    state.connectionStatus = payload;
+  },
+  SET_LOAD_GAMES_STATUS: (state, payload) => {
+    state.loadGamesStatus = payload;
+  },
+  SET_CREATE_GAME_STATUS: (state, payload) => {
+    state.createGameStatus = payload;
+  },
+  SET_JOIN_GAME_STATUS: (state, payload) => {
+    state.joinGameStatus = payload;
+  },
+  RESET_ALL_STATUS: state => {
+    let status = { status: types.request.IDLE, text: 'Not connected' };
+    state.connectionStatus = status;
+    state.loadGamesStatus = status;
+    state.createGameStatus = status;
+    state.joinGameStatus = status;
   }
 };
 
 const actions = {
-  setJoignableGames: ({ commit }, payload) => {
-    commit('SET_JOIGNABLE_GAMES', payload);
+  fetchJoinableGames: ({ commit, rootState }) => {
+    let loadGamesStatus = {
+      status: types.request.REQUESTED,
+      text: 'Loading Games'
+    };
+    commit('SET_LOAD_GAMES_STATUS', loadGamesStatus);
+    socketService
+      .getGamesList(rootState.username)
+      .then(games => {
+        loadGamesStatus.status = types.request.SUCCESS;
+        if (games.length === 0) {
+          loadGamesStatus.text =
+            'No games found, wait for a new or create one !';
+        } else {
+          loadGamesStatus.text = 'Online games loaded';
+        }
+        commit('SET_JOINABLE_GAMES', games);
+        commit('SET_LOAD_GAMES_STATUS', loadGamesStatus);
+      })
+      .catch(() => {
+        loadGamesStatus = {
+          status: types.request.ERROR,
+          text: 'Error reaching server'
+        };
+        commit('SET_LOAD_GAMES_STATUS', loadGamesStatus);
+      });
+  },
+  connect: ({ commit }, payload) => {
+    return new Promise((resolve, reject) => {
+      let connectionStatus = {};
+      if (payload === '') {
+        connectionStatus = {
+          status: types.request.ERROR,
+          text: 'Enter a valid username'
+        };
+
+        commit('SET_CONNECTION_STATUS', connectionStatus);
+        reject();
+      } else {
+        connectionStatus = {
+          status: types.request.REQUESTED,
+          text: 'Connecting...'
+        };
+        commit('SET_CONNECTION_STATUS', connectionStatus);
+        socketService
+          .connect(payload)
+          .then(() => {
+            connectionStatus = {
+              status: types.request.SUCCESS,
+              text: 'Connected as ' + payload
+            };
+            commit('SET_CONNECTION_STATUS', connectionStatus);
+            commit('SET_USERNAME', payload, { root: true });
+            commit('SET_IS_CONNECTED', true, { root: true });
+            localStorage.setItem('username', payload);
+            resolve();
+          })
+          .catch(err => {
+            connectionStatus = {
+              status: types.request.ERROR,
+              text: 'Could not connect as ' + payload + ' (' + err + ')'
+            };
+            commit('SET_CONNECTION_STATUS', connectionStatus);
+            reject();
+          });
+      }
+    });
+  },
+  createOnlineGame: ({ commit, rootState }, payload) => {
+    let createGameStatus = {
+      status: types.request.REQUESTED,
+      text: 'Creating Game'
+    };
+    let game = {
+      player1: rootState.username,
+      player2: '',
+      deck: payload.deckMode,
+      advRules: payload.advRules,
+      status: 'CREATED',
+      data: '{}'
+    };
+    commit('SET_CREATE_GAME_STATUS', createGameStatus);
+
+    socketService
+      .createGame(game)
+      .then(id => {
+        createGameStatus.status = types.request.SUCCESS;
+        createGameStatus.text = 'Success creating online game ' + id;
+        commit('SET_CREATE_GAME_STATUS', createGameStatus);
+        commit('SET_GAME_ID', id, { root: true });
+        commit('SET_IS_GAME_RUNNING', true, { root: true });
+      })
+      .catch(() => {
+        createGameStatus = {
+          status: types.request.ERROR,
+          text: 'Error reaching server'
+        };
+        commit('SET_CREATE_GAME_STATUS', createGameStatus);
+      });
+  },
+  joinOnlineGame: ({ commit, rootState }, payload) => {
+    let joinGameStatus = {
+      status: types.request.REQUESTED,
+      text: 'Joining Game'
+    };
+    commit('SET_JOIN_GAME_STATUS', joinGameStatus);
+
+    socketService
+      .joinGame(rootState.username, payload.id, payload.isNew)
+      .then(() => {
+        joinGameStatus.status = types.request.SUCCESS;
+        joinGameStatus.text = 'Success joining online game ' + payload.id;
+        commit('SET_JOIN_GAME_STATUS', joinGameStatus);
+        commit('SET_GAME_ID', payload.id, { root: true });
+        commit('SET_IS_GAME_RUNNING', true, { root: true });
+        if (!payload.isNew) {
+          localStorage.setItem('gameId', payload.id);
+        }
+      })
+      .catch(() => {
+        joinGameStatus.status = types.request.ERROR;
+        joinGameStatus.text = 'Error +-reaching server';
+        commit('SET_JOIN_GAME_STATUS', joinGameStatus);
+      });
   }
 };
 export default {

src/store/store.js

@@ -6,30 +6,72 @@ Vue.use(Vuex);
 
 import menu from './menu/menu';
 import game from './game/game';
+import { socketService } from '../main';
 
 const state = {
   username: '',
+  isConnected: false,
   gameId: -1,
+  isGameRunning: false,
   messages: []
 };
 
 const getters = {
   messages(state) {
     return state.messages;
+  },
+  gameId(state) {
+    return state.gameId;
+  },
+  isGameRunning(state) {
+    return state.isGameRunning;
+  },
+  username(state) {
+    return state.username;
+  },
+  isConnected(state) {
+    return state.isConnected;
   }
 };
 
 const mutations = {
   ADD_MESSAGE: (state, payload) => {
     state.messages.push(payload);
+  },
+  SET_GAME_ID: (state, payload) => {
+    state.gameId = payload;
+  },
+  SET_IS_GAME_RUNNING: (state, payload) => {
+    state.isGameRunning = payload;
+  },
+  SET_USERNAME: (state, payload) => {
+    state.username = payload;
+  },
+  SET_IS_CONNECTED: (state, payload) => {
+    state.isConnected = payload;
   }
 };
 const actions = {
   addMessageToQueue: ({ commit }, payload) => {
     commit('ADD_MESSAGE', payload);
+  },
+  stopGame: ({ commit, rootState }) => {
+    socketService.leaveGame(rootState.username);
+    commit('SET_IS_GAME_RUNNING', false);
+    localStorage.removeItem('gameId');
+  },
+  disconnect: ({ commit }) => {
+    socketService.disconnect();
+    commit('SET_GAME_ID', -1);
+    commit('SET_IS_GAME_RUNNING', false);
+    commit('SET_USERNAME', '');
+    commit('SET_IS_CONNECTED', false);
+    commit('menu/RESET_ALL_STATUS');
+    localStorage.removeItem('username');
+    localStorage.removeItem('gameId');
   }
 };
-console.log('menu :>> ', menu);
+
 export const store = new Vuex.Store({
   state,
   getters,

src/store/types.js

@@ -1,6 +1,14 @@
 'use strict';
 
-export default {
+const Constants = {
+  //  Server requests status
+  request: {
+    IDLE: 'idle',
+    REQUESTED: 'requested',
+    SUCCESS: 'success',
+    ERROR: 'ERROR'
+  },
+
   // Positions of heroes in game
   POS_PILE: 'pile',
   POS_HAND: 'hand',
@@ -21,3 +29,11 @@ export default {
   // Possible actions for player in game
   PLAYER_SUPPLY: 'supply'
 };
+
+Constants.install = function(Vue) {
+  Vue.prototype.$types = key => {
+    return Constants[key];
+  };
+};
+
+export default Constants;