End phase replace up to 3 cards in hand + changes in data model

package-lock.json

@@ -8435,6 +8435,11 @@
       "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.12.0",
     "core-js": "^3.6.4",
+    "lodash.clonedeep": "^4.5.0",
     "socket.io-client": "^2.3.0",
     "vue": "^2.6.11",
     "vue-clickaway": "^2.2.2",

server/src/client-server-shared/const/constants.js

@@ -128,6 +128,8 @@ export const Constants = {
    */
   HERO_DISCARD: 'discard',
   /**
+   * Only for phase before game starts, when player can replace up to 3 cards (place them under the heroes pile)
+   *
    * @constant
    * @type {import("type/game").HeroAction}
    * @default

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

@@ -9,12 +9,16 @@ export default function initState(duelController) {
         bluePlayer: {
           name: payload.player1Name,
           color: 'blue',
-          twelveHeroes: []
+          heroesInPile: [],
+          twelveHeroes: [],
+          instructions: 'Initializing Game...'
         },
         redPlayer: {
           name: payload.player2Name,
           color: 'red',
-          twelveHeroes: []
+          heroesInPile: [],
+          twelveHeroes: [],
+          instructions: 'Initializing Game...'
         },
         game: {
           allHeroes: duelCtrl.getAllHeroes(),
@@ -23,7 +27,8 @@ export default function initState(duelController) {
           'waitingFor/blue': false,
           'waitingFor/red': false,
           currentPlayer: '',
-          'battleTiles/left': [{ id: 0, name: 'mine', redPoints: 3 }]
+          'battleTiles/left': [{ id: 0, name: 'mine', redPoints: 3 }],
+          updatePlayerState: 'both'
         }
       });
       // Init state just initialize game data, end it

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

@@ -5,11 +5,6 @@ export default function selectDraftState(duelController) {
   stateMixins.call(this);
   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;
 
   this.start = () => {
     /** @type {import('type/game').TH_GameDataStore} */
@@ -18,14 +13,19 @@ export default function selectDraftState(duelController) {
       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.bluePlayer.draftHeroesIds = draftSets[0][0];
+    gameData.redPlayer.draftHeroesIds = draftSets[0][1];
+    let instructions =
+      'Select 2 heroes, the 4 others will be given to other player';
+    gameData.bluePlayer.instructions = instructions;
+    gameData.redPlayer.instructions = instructions;
     gameData.game['waitingFor/blue'] = true;
     gameData.game['waitingFor/red'] = true;
     gameData.game.currentPlayer = 'both';
+    //Save draftSets in case game is stopped and resumed  in the middle of draft phase
+    gameData.game.draftSets = draftSets;
+    gameData.game.updatePlayerState = 'both';
     duelCtrl.storeData(gameData);
   };
 
@@ -36,19 +36,21 @@ export default function selectDraftState(duelController) {
     let gameData = duelCtrl.getGameData();
     if (payload) {
       let player = payload.color + 'Player';
-      /** @type {import('type/game').TH_HeroInGame[]} */
+      /** @type {number[]} */
+      let heroesInPile = gameData[player].heroesInPile;
+      /**@type {import('type/game').TH_HeroCard[]} */
       let twelveHeroes = gameData[player].twelveHeroes;
       /** @type {number[]} */
       let draftHeroesIds = gameData[player].draftHeroesIds;
       payload.chosenIds.forEach(id => {
-        twelveHeroes.push({ id, position: 'pile', possibleActions: [] });
+        heroesInPile.push(id);
+        twelveHeroes.push(gameData.game.allHeroes.find(hero => hero.id === id));
         draftHeroesIds = draftHeroesIds.filter(item => item !== id);
       });
 
-      gameData[player].twelveHeroes = twelveHeroes;
+      gameData[player].heroesInPile = heroesInPile;
       gameData[player].draftHeroesIds = draftHeroesIds;
       gameData.game['waitingFor/' + payload.color] = false;
-      duelCtrl.storeData(gameData);
     }
 
     // We finished waiting for both players to select 2 cards
@@ -56,36 +58,53 @@ export default function selectDraftState(duelController) {
       gameData.game['waitingFor/blue'] === false &&
       gameData.game['waitingFor/red'] === false
     ) {
+      gameData.game.updatePlayerState = 'both';
       // Check if players completed their deck
       if (
-        gameData.bluePlayer.twelveHeroes.length == 12 &&
-        gameData.redPlayer.twelveHeroes.length == 12
+        gameData.bluePlayer.heroesInPile.length == 12 &&
+        gameData.redPlayer.heroesInPile.length == 12
       ) {
-        shuffleHeroes(gameData.bluePlayer.twelveHeroes);
-        shuffleHeroes(gameData.redPlayer.twelveHeroes);
+        //Shuffle the pile (not the tweleve heroes)
+        shuffleHeroes(gameData.bluePlayer.heroesInPile);
+        shuffleHeroes(gameData.redPlayer.heroesInPile);
+
+        // No need to keep all heroes now for rest of the game
+        gameData.game.allHeroes = [];
+        // Clean Json file
+        gameData.game.allHeroesJson = '';
+        duelCtrl.storeData(gameData);
+
         // 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];
+          gameData.bluePlayer.draftHeroesIds = gameData.game.draftSets[1][0];
+          gameData.redPlayer.draftHeroesIds = gameData.game.draftSets[1][1];
+          let instructions =
+            'Another time with those 6 cards, until you both have 12 heroes';
+          gameData.bluePlayer.instructions = instructions;
+          gameData.redPlayer.instructions = instructions;
         } else {
           // swap cards
           let temp = gameData.bluePlayer.draftHeroesIds;
           gameData.bluePlayer.draftHeroesIds =
             gameData.redPlayer.draftHeroesIds;
           gameData.redPlayer.draftHeroesIds = temp;
+          let instructions = 'Keep going, select 2 more cards';
+          gameData.bluePlayer.instructions = instructions;
+          gameData.redPlayer.instructions = instructions;
         }
         // Wait again for players to chose 2 more cards
         gameData.game['waitingFor/blue'] = true;
         gameData.game['waitingFor/red'] = true;
         duelCtrl.storeData(gameData);
       }
+    } else {
+      // Still waiting for one player
+      gameData.game.updatePlayerState = payload.color;
+      duelCtrl.storeData(gameData);
     }
   };
 

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

@@ -1,5 +1,5 @@
 'use strict';
-import { getHeroesIdsByFaction } from '../heroesHelper';
+import { getHeroesByFaction, shuffleHeroes } from '../heroesHelper';
 import stateMixins from './stateMixins';
 export default function selectFactionState(duelController) {
   stateMixins.call(this);
@@ -10,6 +10,11 @@ export default function selectFactionState(duelController) {
     gameData.game['waitingFor/blue'] = true;
     gameData.game['waitingFor/red'] = true;
     gameData.game.currentPlayer = 'both';
+    let instructions =
+      'Select a faction of 12 Heroes between Orcs, Humans, Elves or Mecanics';
+    gameData.bluePlayer.instructions = instructions;
+    gameData.redPlayer.instructions = instructions;
+    gameData.game.updatePlayerState = 'both';
     duelCtrl.storeData(gameData);
   };
 
@@ -23,33 +28,41 @@ export default function selectFactionState(duelController) {
       let player = payload.color + 'Player';
       gameData[player].faction = payload.faction;
 
-      let randomHeroes = getHeroesIdsByFaction(
+      // Init player twelve heroes
+      gameData[player].twelveHeroes = getHeroesByFaction(
         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: []
-        });
-      });
+
+      // Init player pile and shuffle
+      gameData[player].heroesInPile = gameData[player].twelveHeroes.map(
+        hero => hero.id
+      );
+      shuffleHeroes(gameData[player].heroesInPile);
+
       gameData.game['waitingFor/' + payload.color] = false;
       duelCtrl.sendChat(
         gameData[player].name,
         `I chose the ${payload.faction} faction !`
       );
-      duelCtrl.storeData(gameData);
-    }
 
-    if (
-      gameData.game['waitingFor/blue'] === false &&
-      gameData.game['waitingFor/red'] === false
-    ) {
-      duelCtrl.endCurrentState();
+      if (
+        gameData.game['waitingFor/blue'] === false &&
+        gameData.game['waitingFor/red'] === false
+      ) {
+        gameData.game.updatePlayerState = 'both';
+        // No need to keep all heroes now for rest of the game
+        gameData.game.allHeroes = [];
+        // Clean Json file
+        gameData.game.allHeroesJson = '';
+        duelCtrl.storeData(gameData);
+        duelCtrl.endCurrentState();
+      } else {
+        gameData.game.updatePlayerState = payload.color;
+        // Still waiting for one player
+        duelCtrl.storeData(gameData);
+      }
     }
   };
 

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

@@ -17,6 +17,10 @@ export default function selectTournamentState(duelController) {
     gameData.game['waitingFor/blue'] = true;
     gameData.game['waitingFor/red'] = true;
     gameData.game.currentPlayer = 'both';
+    let instructions = 'Select 12 heroes below to build your game deck';
+    gameData.bluePlayer.instructions = instructions;
+    gameData.redPlayer.instructions = instructions;
+    gameData.game.updatePlayerState = 'both';
     duelCtrl.storeData(gameData);
   };
 
@@ -27,23 +31,36 @@ export default function selectTournamentState(duelController) {
     let gameData = duelCtrl.getGameData();
     if (payload) {
       let player = payload.color + 'Player';
-      /** @type {import('type/game').TH_HeroInGame[]} */
-      let twelveHeroes = [];
-      payload.chosenIds.forEach(id => {
-        twelveHeroes.push({ id, position: 'pile', possibleActions: [] });
-      });
-      let randomHeroes = shuffleHeroes(twelveHeroes);
+      let heroesInPile = [];
+      heroesInPile.push(...payload.chosenIds);
+      gameData[player].twelveHeroes = gameData.game.allHeroes.filter(hero =>
+        heroesInPile.includes(hero.id)
+      );
+
+      shuffleHeroes(heroesInPile);
       // Init player twelve heroes
-      gameData[player].twelveHeroes = randomHeroes;
+      gameData[player].heroesInPile = heroesInPile;
       gameData.game['waitingFor/' + payload.color] = false;
-      duelCtrl.storeData(gameData);
-    }
 
-    if (
-      gameData.game['waitingFor/blue'] === false &&
-      gameData.game['waitingFor/red'] === false
-    ) {
-      duelCtrl.endCurrentState();
+      if (
+        gameData.game['waitingFor/blue'] === false &&
+        gameData.game['waitingFor/red'] === false
+      ) {
+        gameData.game.updatePlayerState = 'both';
+        // No need to keep all heroes now for rest of the game
+        gameData.game.allHeroes = [];
+        // Clean Json file
+        gameData.game.allHeroesJson = '';
+        //Clean draft Ids
+        gameData.bluePlayer.draftHeroesIds = [];
+        gameData.redPlayer.draftHeroesIds = [];
+        duelCtrl.storeData(gameData);
+        duelCtrl.endCurrentState();
+      } else {
+        gameData.game.updatePlayerState = payload.color;
+        // Still waiting for one player
+        duelCtrl.storeData(gameData);
+      }
     }
   };
 

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

@@ -4,28 +4,80 @@ export default function changeUpTo3Cards(duelController) {
   stateMixins.call(this);
   let duelCtrl = duelController;
   this.start = () => {
-    console.log('Start state 2');
+    /** @type {import('type/game').TH_GameDataStore} */
     let gameData = duelCtrl.getGameData();
-    console.log('gameData :>> ', gameData);
+
+    // Now let's prepare next turn
+    /** @type {import('type/game').TH_PlayerActions} */
+    let playerAvailActions = {
+      canDrawCards: 3,
+      canPass: false,
+      canEndTurn: false
+    };
+    gameData.bluePlayer.playerAvailActions = Object.assign(
+      {},
+      playerAvailActions
+    );
+    gameData.redPlayer.playerAvailActions = Object.assign(
+      {},
+      playerAvailActions
+    );
+    gameData.game['waitingFor/blue'] = true;
+    gameData.game['waitingFor/red'] = true;
+    gameData.game.currentPlayer = 'both';
+    let instructions =
+      'Draw 3 cards. You can replace up to 3 cards (or none if of you want) by placing them at the bottom of your pile';
+    gameData.bluePlayer.instructions = instructions;
+    gameData.redPlayer.instructions = instructions;
+    gameData.game.updatePlayerState = 'both';
     duelCtrl.storeData(gameData);
   };
 
-  // Should receive in paylod : {color, faction}
-  this.update = (payload = null) => {
+  this.update = (
+    /**@type {import('type/comm').TH_MessageReplace3CardsStep} */ payload = null
+  ) => {
+    /**@type {import('type/game').TH_GameDataStore} */
     let gameData = duelCtrl.getGameData();
     if (payload) {
-      console.log('payload :>> ', payload);
+      let player = payload.color + 'Player';
+      if (payload.heroesInHand.length === 3) {
+        duelCtrl.sendChat(
+          gameData[player].name,
+          `I did not change any cards in my hand !`
+        );
+      } else {
+        let nbCardsToReplace = 3 - payload.heroesInHand.length;
+        duelCtrl.sendChat(
+          gameData[player].name,
+          `I replaced ${nbCardsToReplace} cards in my hand !`
+        );
+        for (let index = 0; index < nbCardsToReplace; index++) {
+          let hero = payload.heroesInPile.shift();
+          payload.heroesInHand.push(hero);
+        }
+      }
+      gameData[player].heroesInHand = payload.heroesInHand;
+      gameData[player].heroesInPile = payload.heroesInPile;
 
-      /**  TODO : process player response */
+      gameData[player].playerAvailActions.canDrawCards = 0;
       gameData.game['waitingFor/' + payload.color] = false;
-      duelCtrl.storeData(gameData);
     }
 
     if (
       gameData.game['waitingFor/blue'] === false &&
       gameData.game['waitingFor/red'] === false
     ) {
+      gameData.game.updatePlayerState = 'both';
+      let instructions =
+        'Wait for the next step to be coded by the developers...';
+      gameData.bluePlayer.instructions = instructions;
+      gameData.redPlayer.instructions = instructions;
+      duelCtrl.storeData(gameData);
       duelCtrl.endCurrentState();
+    } else {
+      gameData.game.updatePlayerState = payload.color;
+      // Still waiting for one player
+      duelCtrl.storeData(gameData);
     }
   };
 

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

@@ -22,7 +22,8 @@ export const initHeroesFromJson = function(allHeroesJson) {
   allHeroesJson.heroes.forEach(hero => {
     let i = 0;
     while (i < hero.nbInDeck) {
-      heroes.push({
+      /** @type {import('type/game').TH_HeroCard} */
+      let heroCard = {
         id: heroUniqueId,
         name: hero.name,
         cost: hero.cost,
@@ -30,8 +31,10 @@ export const initHeroesFromJson = function(allHeroesJson) {
         faction: hero.faction,
         ability: abilitiesMap.get(hero.ability),
         isDraftable: hero.draftMode,
-        popularity: hero.popularity
-      });
+        popularity: hero.popularity,
+        possibleActions: []
+      };
+      heroes.push(heroCard);
       heroUniqueId++;
       i++;
     }
@@ -40,39 +43,33 @@ export const initHeroesFromJson = function(allHeroesJson) {
 };
 
 /**
- * Get 12 heroes id by faction in random order.
+ * Get 12 heroes id by faction.
  *
- * @param {import("type/game").HeroCard[]} allHeroes - Array of all heroes cards
- * @param {import("type/game").Faction} faction - Faction to filter on
+ * @param {import("type/game").TH_HeroCard[]} allHeroes - Array of all heroes cards
+ * @param {import("type/game").TH_Faction} faction - Faction to filter on
  * @param {boolean} popularityRule - Are we playing with popularity rule
- * @returns {Array<number>} Ids of heroes
+ * @returns {import("type/game").TH_HeroCard[]} - Array of heroes
  */
-export const getHeroesIdsByFaction = function(
-  allHeroes,
-  faction,
-  popularityRule
-) {
+export const getHeroesByFaction = function(allHeroes, faction, popularityRule) {
   /** @type {import("type/game").TH_Popularity} */
   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);
+  let heroes = allHeroes.filter(hero => {
+    return (
+      hero.faction === faction &&
+      (hero.popularity === popularity || hero.popularity === 'any')
+    );
+  });
+  return heroes;
 };
 
 /**
  * Get draft sets to play draft mode
  *
- * @param {import("type/game").HeroCard[]} allHeroes - Array of all heroes cards
- * @param {import("type/game").Popularity} popularityRule - Are we playing with popularity rule
+ * @param {import("type/game").TH_HeroCard[]} allHeroes - Array of all heroes cards
+ * @param {import("type/game").TH_Popularity} popularityRule - Are we playing with popularity rule
  * @returns {Array<Array<number>>} Ids of heroes (4 arrays of 6 cards)
  */
 export const getDraftSets = function(allHeroes, popularityRule) {

server/src/client-server-shared/type/comm.js

@@ -44,5 +44,13 @@
  * @property {string} from - From is the message from
  * @property {string} text - The content of chat message
  */
+/**
+ * Message from player for ending turn in phase 2 (change up to 3 cards).
+ *
+ * @typedef {object} TH_MessageReplace3CardsStep
+ * @property {import('type/game').TH_Color} color - color of player
+ * @property {number[]} heroesInHand - The heroes in hand
+ * @property {number[]} heroesInPile - The heroes in pile
+ */
 
 exports.unused = {};

server/src/client-server-shared/type/game.js

@@ -39,7 +39,7 @@
 /**
  * Possible position for a hero
  *
- * @typedef {'pile' | 'hand' | 'discard' | 'camp' | 'battle_left' | 'battle_center' | 'battle_right'} TH_HeroPosition
+ * @typedef {'Pile' | 'Hand' | 'Discard' | 'Camp' | 'BattleLeft' | 'BattleCenter' | 'BattleRight'} TH_HeroPosition
  */
 /**
  * Ability Hook
@@ -67,6 +67,7 @@
  * @property {TH_Popularity} popularity - popularity attribute of hero
  * @property {boolean} isDraftable - Is hero available in Draft mode
  * @property {TH_Ability} ability - Ability of a hero
+ * @property {Array<TH_HeroAction>} possibleActions - Actions possible on hero
  *
  */
 /**
@@ -96,20 +97,16 @@
  * @property {Array<TH_BattleTile>} battleTiles/right/ofBlue - Battle tiles on right side of blue player
  * @property {number} totalFood - Total food available for players to take
  * @property {string} allHeroesJson - All heroes in JSON format (read from a JSON file)
+ * @property {TH_Color | 'both'} updatePlayerState - if set, update player state accordingly
  */
+
 /**
- * Hero in game
- *
- * @typedef {object} TH_HeroInGame
- * @property {number} id - unique ID of hero
- * @property {TH_HeroPosition} position - position of hero in game
- * @property {Array<TH_HeroAction>} possibleActions - Actions possible on hero
- *
- */
-/**
- * Possible action for a player
+ * Possible actions for a player
  *
- * @typedef {'supply' | 'pass'} TH_PlayerAction
+ * @typedef {object} TH_PlayerActions
+ * @property {number} canDrawCards - Player can draw a number of cards
+ * @property {boolean} canPass - If true, player can pass his turn
+ * @property {boolean} canEndTurn - If true, player can end his turn. Otherwise he must perform some action(s)
  */
 /**
  * Game state for one player
@@ -119,13 +116,21 @@
  * @property {TH_Color} color - color of the player
  * @property {TH_Faction|''} faction - Chosen faction (empty if not playing faction mode)
  * @property {Array<number>} draftHeroesIds - Will contain the IDs of the heroes selectable for draft and tournament mode
- * @property {Array<TH_HeroInGame>} twelveHeroes - The 12 Heroes used by player
+ * @property {Array<TH_HeroCard>} twelveHeroes - The 12 Heroes cards used by player
+ * @property {Array<number>} heroesInPile - The heroes in player pile
+ * @property {Array<number>} heroesInHand - The heroes in player hand
+ * @property {Array<number>} heroesInDiscard - The heroes in discard pile
+ * @property {Array<number>} heroesInCamp - The heroes in player camp (recruited)
+ * @property {Array<number>} heroesInBattleLeft - The heroes in left battle field (deployed)
+ * @property {Array<number>} heroesInBattleCenter - The heroes in center battle field (deployed)
+ * @property {Array<number>} heroesInBattleRight - The heroes in right battle field (deployed)
  * @property {number} foodInCamp - Number of food in camp
  * @property {number} foodInBattle/left - Food on left battle field
  * @property {number} foodInBattle/center - Food on center battle field
  * @property {number} foodInBattle/right - Food on right battle field
  * @property {Array<object>} actionsPerformed - During military phase it will contain actions made by player to be replayed by other
- * @property {Array<TH_PlayerAction>} - Actions avalaible for the player
+ * @property {TH_PlayerActions} playerAvailActions - Actions avalaible for the player
+ * @property {string} instructions - Instructions to the player
  *
  */
 /**

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

@@ -18,7 +18,8 @@ export default function OnlineDuelSync(
 
   // internal method to load game data from DB
   let loadGameData = async function() {
-    let gameDetails = { game_data: {} };
+    let gameDetails = {};
+    gameDetails.game_data = {};
     try {
       let game = await mdb.getGameById(gameId);
       gameDetails = game[0];
@@ -26,11 +27,14 @@ export default function OnlineDuelSync(
         gameDetails.game_data = JSON.parse(game[0].game_data);
       } catch (err) {
         console.log('err converting JSON data :>> ', err);
-        gameDetails.game_data = {};
       }
     } catch (err) {
       console.log('Error retreiving game : ', err.message);
     }
+    if (!gameDetails.game_data.game) {
+      gameDetails.game_data.game = {};
+    }
+
     return gameDetails;
   };
 
@@ -77,9 +81,11 @@ export default function OnlineDuelSync(
   // Set array of players with first one that joined
   players.set(firstPlayer.playerName, firstPlayer);
 
+  /** @type {import('type/game').TH_GameDataStore} */
   let game_data = {};
   loadGameData().then(gameDetails => {
     game_data = gameDetails.game_data;
+    game_data.game.updatePlayerState = 'both';
     // Join 1st player to game room and notify it
     // Also send the game data (might be empty for new game but it is ok)
     firstPlayer
@@ -124,6 +130,7 @@ export default function OnlineDuelSync(
       players.set(player.playerName, player);
       loadGameData().then(gameDetails => {
         game_data = gameDetails.game_data;
+        game_data.game.updatePlayerState = 'both';
         // second player is in ! notify the game room and send latest game data (ok if empty)
         player
           .getSocket()

src/App.vue

@@ -25,7 +25,7 @@
           </button>
         </div>
         <div class="col">
-          <button
+          <!-- <button
             style="font-size:8px"
             @click="
               hideTest = !hideTest;
@@ -33,7 +33,7 @@
             "
           >
             Test
-          </button>
+          </button> -->
           <keep-alive>
             <component :is="choseDisplay"></component>
           </keep-alive>

src/common/heroes-display/HeroesDisplay.vue

@@ -6,36 +6,29 @@
     ></heroes-selector>
     <hr />
     <h4 v-if="areHeroesSelectable">Select Heroes from below</h4>
-    <button
-      class="btn btn-primary"
-      @click="showFilter = !showFilter"
-      v-if="display12heroesOnly === false"
-    >
-      Show/Hide filter
-    </button>
-    <button
-      class="btn btn-primary"
-      @click="resetFilter"
-      v-if="display12heroesOnly === false"
-    >
-      Reset filter
-    </button>
-    <heroes-filter
-      v-if="showFilter"
-      :filter-options="filterOptions"
-      v-model="filter"
-    ></heroes-filter>
+    <div v-if="noFilter === false">
+      <button class="btn btn-primary" @click="showFilter = !showFilter">
+        Show/Hide filter
+      </button>
+      <button class="btn btn-primary" @click="resetFilter">
+        Reset filter
+      </button>
+      <heroes-filter
+        v-if="showFilter"
+        :filter-options="filterOptions"
+        v-model="filter"
+      ></heroes-filter>
+    </div>
     <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 in heroesToDisplay"
-        :key="hero.id"
-        :hero="hero"
-        :selectable="areHeroesSelectable"
-        :removable="false"
-      ></hero>
-      <!-- v-model="selected" -->
+      <div class="col mb-4" v-for="hero in heroesToDisplay" :key="hero.id">
+        <hero
+          :hero="hero"
+          :selectable="areHeroesSelectable"
+          :removable="false"
+        ></hero>
+      </div>
     </div>
   </div>
 </template>
@@ -72,6 +65,14 @@ export default {
     display12heroesOnly: {
       type: Boolean,
       default: false
+    },
+    noFilter: {
+      type: Boolean,
+      default: false
+    },
+    displayCustomListOfHeroes: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -98,13 +99,13 @@ export default {
   },
   computed: {
     ...mapGetters({
-      heroesBy: 'game/filterHeroes',
+      filterHeroes: 'game/filterHeroes',
       allHeroes: 'game/allHeroes',
       deckMode: 'game/deckMode',
       isPopularityRule: 'game/isPopularityRule',
       myColor: 'game/myColor',
       getSelectableDraftIds: 'game/myDraftIds',
-      getTwelveHeroes: 'game/myTwelveHeroes',
+      myTwelveHeroes: 'game/myTwelveHeroes',
       chosenIds: 'chosenIds',
       isItMyTurn: 'game/isItMyTurn'
     }),
@@ -137,13 +138,16 @@ export default {
         byName: true
       };
     },
-    // TODO Here filter directly with heroesByIds ??
     heroesToDisplay() {
+      //Possibility here to display heroes we want
+      if (this.displayCustomListOfHeroes.length > 0) {
+        return this.displayCustomListOfHeroes;
+      }
       if (this.display12heroesOnly === true) {
-        return this.getTwelveHeroes;
+        return this.myTwelveHeroes;
       }
       if (this.selectHeroes === true) {
-        return this.heroesBy(
+        return this.filterHeroes(
           this.filter,
           this.deckMode === 'draft' || this.deckMode === 'tournament'
         );
@@ -175,6 +179,7 @@ export default {
   },
   created() {
     Object.assign(this.filter, initialFilter(this.filterOptions));
+    this.showFilter = this.selectHeroes === true && this.deckMode === 'faction';
   },
   watch: {
     'filter.byName'(newValue) {
@@ -186,4 +191,8 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+div {
+  color: antiquewhite;
+}
+</style>

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

@@ -1,47 +1,60 @@
 <template>
-  <div class="col mb-4">
-    <div class="card" style="width: 15rem;">
-      <div class="card-body">
-        <h5 class="card-title">{{ hero.name }}</h5>
-      </div>
-      <ul class="list-group list-group-flush">
-        <li class="list-group-item">Power : {{ hero.power }}</li>
-        <li class="list-group-item">Cost : {{ hero.cost }}</li>
-        <li class="list-group-item">
-          {{ hero.faction }} {{ hero.isDraftable | draftText }}
-        </li>
-      </ul>
-      <div class="card-body">
-        <p class="card-text text-justify">
-          {{ hero.ability.desc }}
-        </p>
-      </div>
-      <div class="text-center mb-2" v-if="selectable">
-        <button
-          class="btn btn-primary"
-          style="width:50%;"
-          @click="selectId(hero.id) && removeInMyDraftIds(hero.id)"
-        >
-          Select
-        </button>
-      </div>
-      <div class="text-center mb-2" v-if="removable">
-        <button
-          class="btn btn-primary"
-          style="width:50%;"
-          @click="unselectId(hero.id) && addInMyDraftIds(hero.id)"
-        >
-          Remove
-        </button>
-      </div>
+  <div
+    class="card"
+    :style="{ width: '15rem', flex: '0 0 auto', 'margin-right': '3px' }"
+  >
+    <div class="card-body">
+      <h5 class="card-title">{{ hero.name }} ({{ hero.faction }})</h5>
+    </div>
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item">Power : {{ hero.power }}</li>
+      <li class="list-group-item">Cost : {{ hero.cost }}</li>
+    </ul>
+    <div class="card-body">
+      <p class="card-text text-justify" style="font-size:16px;">
+        {{ hero.ability.desc }}
+      </p>
+    </div>
+    <div class="text-center mb-2" v-if="selectable">
+      <button
+        class="btn btn-primary"
+        style="width:50%;"
+        @click="selectId(hero.id) && removeInMyDraftIds(hero.id)"
+      >
+        Select
+      </button>
+    </div>
+    <div class="text-center mb-2" v-if="removable">
+      <button
+        class="btn btn-primary"
+        style="width:50%;"
+        @click="unselectId(hero.id) && addInMyDraftIds(hero.id)"
+      >
+        Remove
+      </button>
+    </div>
+    <div
+      class="text-center mb-2"
+      v-if="hero.possibleActions.includes('replace')"
+    >
+      <button
+        class="btn btn-primary"
+        style="width:50%;"
+        @click="toggleSelectId"
+      >
+        {{ replaceBtnText }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 export default {
   props: ['hero', 'selectable', 'removable'],
+  data() {
+    return {};
+  },
   methods: {
     ...mapActions({
       selectId: 'selectId',
@@ -49,7 +62,26 @@ export default {
       clearChosenIds: 'clearChosenIds',
       addInMyDraftIds: 'game/addInMyDraftIds',
       removeInMyDraftIds: 'game/removeInMyDraftIds'
-    })
+    }),
+    toggleSelectId() {
+      if (this.chosenIds.includes(this.hero.id)) {
+        this.unselectId(this.hero.id);
+      } else {
+        this.selectId(this.hero.id);
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      chosenIds: 'chosenIds'
+    }),
+    replaceBtnText() {
+      if (this.chosenIds.includes(this.hero.id)) {
+        return 'Undo (' + (this.chosenIds.indexOf(this.hero.id) + 1) + ')';
+      } else {
+        return 'Replace';
+      }
+    }
   },
   filters: {
     draftText(value) {
@@ -63,4 +95,8 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.card {
+  color: black;
+}
+</style>

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

@@ -108,4 +108,8 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+div {
+  color: antiquewhite;
+}
+</style>

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

@@ -12,27 +12,24 @@
       {{ factionButtonText }}
     </button>
     <div v-if="deckMode === 'draft' || deckMode === 'tournament'">
-      <div v-if="myHeroes.length > 0 || heroesSelected.length > 0">
+      <div v-if="myTwelveHeroes.length > 0 || heroesSelected.length > 0">
         <hr />
         <h3>My Heroes</h3>
 
         <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 in myHeroes"
-            :key="hero.id"
-            :hero="hero"
-            :selectable="false"
-            :removable="false"
-          ></hero>
-          <hero
-            v-for="hero in heroesSelected"
-            :key="hero.id"
-            :hero="hero"
-            :selectable="false"
-            :removable="isItMyTurn"
-          ></hero>
+          <div class="col mb-4" v-for="hero in myTwelveHeroes" :key="hero.id">
+            <hero :hero="hero" :selectable="false" :removable="false"></hero>
+          </div>
+
+          <div class="col mb-4" v-for="hero in heroesSelected" :key="hero.id">
+            <hero
+              :hero="hero"
+              :selectable="false"
+              :removable="isItMyTurn"
+            ></hero>
+          </div>
         </div>
       </div>
       <button
@@ -59,7 +56,7 @@ export default {
     ...mapGetters({
       deckMode: 'game/deckMode',
       isItMyTurn: 'game/isItMyTurn',
-      myHeroes: 'game/myTwelveHeroes',
+      myTwelveHeroes: 'game/myTwelveHeroes',
       heroesByIds: 'game/heroesByIds',
       chosenIds: 'chosenIds'
     }),
@@ -125,7 +122,10 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+div {
+  color: antiquewhite;
+}
 p {
   font-size: 20px;
 }

src/game/AppGame.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <div class="row">
-      <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
+      <div
+        class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3"
+        style="display:inline-block;"
+      >
         <button class="btn btn-danger" @click="stopGame">
           Stop game
         </button>
@@ -13,6 +16,15 @@
         >
           Chat
         </button>
+        <button
+          class="btn btn-danger"
+          :disabled="endTurnBtn.disable"
+          v-if="!gameState.startsWith('0_') && !gameState.startsWith('1_')"
+          @click="endTurn"
+        >
+          {{ endTurnBtn.text }}
+        </button>
+        <h4>{{ myInstructions }}</h4>
       </div>
     </div>
     <hr />
@@ -21,11 +33,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { socketService } from '../main';
 import HeroesDisplay from '../common/heroes-display/HeroesDisplay';
 import OnlineWait from './components/OnlineWait';
-import GameBoard from './components/GameBoard';
+import GameBoard from './board/GameBoard';
 export default {
   components: {
     HeroesDisplay,
@@ -39,7 +51,11 @@ export default {
   },
   computed: {
     ...mapGetters({
-      gameState: 'game/state'
+      gameState: 'game/state',
+      isItMyTurn: 'game/isItMyTurn',
+      canIPass: 'game/canIPass',
+      canIEndTurn: 'game/canIEndTurn',
+      myInstructions: 'game/myInstructions'
     }),
     gameStepDisplay() {
       let componentToDisplay = '';
@@ -62,9 +78,24 @@ export default {
           break;
       }
       return componentToDisplay;
+    },
+    endTurnBtn() {
+      // If not my turn
+      if (this.isItMyTurn === false) {
+        return { disable: true, text: 'Waiting other player' };
+      } else {
+        if (this.canIEndTurn === true) {
+          return { disable: false, text: 'End Turn' };
+        } else {
+          return { disable: true, text: 'Play...' };
+        }
+      }
     }
   },
   methods: {
+    ...mapActions({
+      submitMyReplace3CardsTurn: 'game/submitMyReplace3CardsTurn'
+    }),
     stopGame() {
       this.$store.dispatch('stopGame');
       this.$store.dispatch('game/resetGameState');
@@ -72,10 +103,23 @@ export default {
     sendChat() {
       socketService.chat(this.chatMessage);
       this.chatMessage = '';
+    },
+    endTurn() {
+      switch (this.gameState) {
+        case '2_CHANGE_UP_TO_3_CARDS':
+          this.submitMyReplace3CardsTurn();
+          break;
+        default:
+          break;
+      }
     }
   },
   created() {}
 };
 </script>
 
-<style></style>
+<style scoped>
+div {
+  color: antiquewhite;
+}
+</style>

src/game/board/GameBoard.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <b-overlay :show="overlay" rounded="sm" @shown="onShown" @hidden="onHidden">
+      <b-row>
+        <b-col cols="5">
+          <ennemy-hand></ennemy-hand>
+        </b-col>
+        <b-col>
+          <heroes-pile
+            :nbCardsInHeroesPile="hisNbOfHeroesIn('Pile')"
+            :nbCardsToDraw="0"
+          ></heroes-pile>
+        </b-col>
+        <b-col>
+          <discard-pile
+            :heroesInDiscard="hisHeroesIn('Discard')"
+          ></discard-pile>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <div
+            style="height:300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;"
+          >
+            <h3>
+              Camps and combat zones will be here
+            </h3>
+          </div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="8">
+          <my-hand></my-hand>
+        </b-col>
+        <b-col>
+          <heroes-pile
+            :nbCardsInHeroesPile="myNbOfHeroesIn('Pile')"
+            :nbCardsToDraw="canIDrawCards"
+          ></heroes-pile>
+        </b-col>
+        <b-col>
+          <discard-pile :heroesInDiscard="myHeroesIn('Discard')"></discard-pile>
+        </b-col>
+      </b-row>
+      <template v-slot:overlay>
+        <div class="text-center">
+          <heroes-display></heroes-display>
+          <b-button
+            ref="cancel"
+            variant="outline-danger"
+            size="sm"
+            aria-describedby="cancel-label"
+            @click="overlay = false"
+          >
+            Cancel
+          </b-button>
+        </div>
+      </template>
+    </b-overlay>
+  </div>
+</template>
+
+<script>
+import HeroesDisplay from '../../common/heroes-display/HeroesDisplay';
+import MyHand from './components/MyHand';
+import EnnemyHand from './components/EnnemyHand';
+import DiscardPile from './components/DiscardPile';
+import HeroesPile from './components/HeroesPile';
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {
+      overlay: false
+    };
+  },
+  components: {
+    HeroesDisplay,
+    MyHand,
+    EnnemyHand,
+    DiscardPile,
+    HeroesPile
+  },
+  methods: {
+    onShown() {
+      // Focus the cancel button when the overlay is showing
+      this.$refs.cancel.focus();
+    },
+    onHidden() {
+      // Focus the show button when the overlay is removed
+      this.$refs.show.focus();
+    }
+  },
+  computed: {
+    ...mapGetters({
+      myHeroesIn: 'game/myHeroesIn',
+      hisHeroesIn: 'game/hisHeroesIn',
+      myNbOfHeroesIn: 'game/myNbOfHeroesIn',
+      hisNbOfHeroesIn: 'game/hisNbOfHeroesIn',
+      isItMyTurn: 'game/isItMyTurn',
+      canIPass: 'game/canIPass',
+      canIEndTurn: 'game/canIEndTurn',
+      canIDrawCards: 'game/canIDrawCards'
+    })
+  }
+};
+</script>
+
+<style></style>

src/game/board/components/DiscardPile.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div class="discard-pile" v-if="heroesInDiscard.length === 0">0</div>
+    <div v-else>
+      <hero
+        :hero="heroesInDiscard[0]"
+        :selectable="false"
+        :removable="false"
+      ></hero>
+    </div>
+    <button
+      v-if="heroesInDiscard.length > 0"
+      class="btn btn-primary"
+      @click="$emit('zoom-list-heroes', heroesInDiscard)"
+    >
+      Show All
+    </button>
+  </div>
+</template>
+
+<script>
+import Hero from '../../../common/heroes-display/components/Hero';
+export default {
+  props: ['heroesInDiscard'],
+  components: {
+    Hero
+  }
+};
+</script>
+
+<style scoped>
+.discard-pile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 100px;
+  border: medium solid white;
+  background-color: unset;
+  color: antiquewhite;
+}
+</style>

src/game/board/components/EnnemyHand.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="display:flex;">
+    <div class="pile">{{ hisNbOfHeroesIn('Hand') }}</div>
+    <div class="pile2"></div>
+    <div class="pile2"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  computed: {
+    ...mapGetters({
+      hisNbOfHeroesIn: 'game/hisNbOfHeroesIn'
+    })
+  }
+};
+</script>
+
+<style scoped>
+.pile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 100px;
+  background-color: brown;
+  color: antiquewhite;
+  border: medium solid antiquewhite;
+}
+.pile2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 20px;
+  background-color: brown;
+  color: antiquewhite;
+  border: medium solid antiquewhite;
+}
+</style>

src/game/board/components/HeroesPile.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="pile">{{ nbCardsInHeroesPile }}</div>
+    <button
+      class="btn btn-primary"
+      v-if="nbCardsToDraw > 0"
+      @click="draw(nbCardsToDraw)"
+    >
+      Draw {{ nbCardsToDraw }} Heroes
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+export default {
+  props: ['nbCardsInHeroesPile', 'nbCardsToDraw'],
+  methods: {
+    ...mapActions({
+      draw: 'game/draw'
+    })
+  }
+};
+</script>
+
+<style scoped>
+.pile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 100px;
+  background-color: brown;
+  color: antiquewhite;
+}
+</style>

src/game/board/components/MyHand.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="scrolling-wrapper-flexbox">
+    <div style="display:flex;" v-if="myHeroesIn('Hand').length === 0">
+      <div class="pile">0</div>
+      <div class="pile2"></div>
+      <div class="pile2"></div>
+    </div>
+    <hero
+      v-else
+      :add-style="{ flex: '0 0 auto', 'margin-right': '3px' }"
+      v-for="hero in myHeroesIn('Hand')"
+      :key="hero.id"
+      :hero="hero"
+      :selectable="false"
+      :removable="false"
+    ></hero>
+  </div>
+</template>
+
+<script>
+import Hero from '../../../common/heroes-display/components/Hero';
+import { mapGetters } from 'vuex';
+export default {
+  components: {
+    Hero
+  },
+  computed: {
+    ...mapGetters({
+      myHeroesIn: 'game/myHeroesIn'
+    })
+  }
+};
+</script>
+
+<style scoped>
+.scrolling-wrapper-flexbox {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.pile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 100px;
+  background-color: brown;
+  color: antiquewhite;
+  border: medium solid antiquewhite;
+}
+.pile2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  width: 20px;
+  background-color: brown;
+  color: antiquewhite;
+  border: medium solid antiquewhite;
+}
+</style>

src/game/components/GameBoard.vue

@@ -1,20 +0,0 @@
-<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/store/game/game.js

@@ -1,7 +1,9 @@
 'use strict';
 import AnyPlayer from './player/any-player';
 import allHeroesJson from '../../../server/src/client-server-shared/all-heroes.json';
+import cloneDeep from 'lodash.clonedeep';
 
+/** @type {import('type/game').TH_GameGlobalState} */
 const initGameState = {
   gameState: '',
   allHeroes: [],
@@ -16,7 +18,7 @@ const initGameState = {
   totalFood: 0,
   allHeroesJson
 };
-const state = Object.assign({}, initGameState);
+const state = cloneDeep(initGameState);
 
 const getters = {
   state(state) {
@@ -45,6 +47,9 @@ const getters = {
     }
     return color;
   },
+  his: (state, getters) => target => {
+    return getters.ennemyColor + 'Player/' + target;
+  },
   isItMyTurn(state, getters) {
     return state['waitingFor/' + getters.myColor];
   },
@@ -54,19 +59,21 @@ const getters = {
   isDiscardRule(state) {
     return state.advRules.includes('discard');
   },
-  heroesByIds: state => ids => {
-    return state.allHeroes.filter(hero => ids.includes(hero.id));
-  },
-  myTwelveHeroes(state, getters) {
-    let myHeroesIds = getters[getters.my('twelveHeroes')].map(hero => hero.id);
-    return state.allHeroes.filter(hero => {
-      return myHeroesIds.includes(hero.id);
+  heroesByIdsFrom: () => (
+    /** @type {number[]}*/ ids,
+    /** @type {import('type/game').TH_HeroCard[]} */ heroesFrom
+  ) => {
+    let heroes = [];
+    // This will keep the order of the ids specified in input parameter array
+    ids.forEach(id => {
+      heroes.push(heroesFrom.find(hero => hero.id === id));
     });
+    return heroes;
   },
-  myDraftIds(state, getters) {
-    return getters[getters.my('draftIds')];
+  heroesByIds: state => (/** @type {number[]}*/ ids) => {
+    // This getters filter through all heroes;
+    return getters.heroesByIdsFrom()(ids, state.allHeroes);
   },
-
   filterHeroes: (state, getters) =>
     /**
      * Get a filtered array of heroes
@@ -149,7 +156,40 @@ const getters = {
         }
         return true;
       });
-    }
+    },
+  myTwelveHeroes: (state, getters) => getters[getters.my('twelveHeroes')],
+  hisTwelveHeroes: (state, getters) => getters[getters.his('twelveHeroes')],
+
+  myDraftIds(state, getters) {
+    return getters[getters.my('draftIds')];
+  },
+  myHeroesIn: (state, getters) => (
+    /** @type {import('type/game').TH_HeroPosition} */ position
+  ) => {
+    let heroesIds = getters[getters.my('heroesIn' + position)];
+    let heroesFrom = getters.myTwelveHeroes;
+    return getters.heroesByIdsFrom(heroesIds, heroesFrom);
+  },
+  hisHeroesIn: (state, getters) => (
+    /** @type {import('type/game').TH_HeroPosition} */ position
+  ) => {
+    let heroesIds = getters[getters.his('heroesIn' + position)];
+    return getters.heroesByIdsFrom(heroesIds, getters.hisTwelveHeroes);
+  },
+  myNbOfHeroesIn: (state, getters) => (
+    /** @type {import('type/game').TH_HeroPosition} */ position
+  ) => {
+    return getters.myHeroesIn(position).length;
+  },
+  hisNbOfHeroesIn: (state, getters) => (
+    /** @type {import('type/game').TH_HeroPosition} */ position
+  ) => {
+    return getters.hisHeroesIn(position).length;
+  },
+  canIEndTurn: (state, getters) => getters[getters.my('canEndTurn')],
+  canIPass: (state, getters) => getters[getters.my('canPass')],
+  canIDrawCards: (state, getters) => getters[getters.my('canDrawCards')],
+  myInstructions: (state, getters) => getters[getters.my('instructions')]
 };
 
 const mutations = {
@@ -187,15 +227,25 @@ const actions = {
    *
    * @param {object} Context - vuex context
    * @param {Function} Context.commit - vuex commit func
-   * @param {object} payload - the full game state
+   * @param {import('type/game').TH_GameDataStore} payload - the full game state
    * @param {object} payload.game - match store state in game.js
    * @param {object} payload.bluePlayer - match store state in any-player.js for blue
    * @param {object} payload.redPlayer - match store state in any-player.js for red
    */
   update: ({ commit }, payload) => {
     commit('SET_FULL_GAME_STATE', payload.game);
-    commit('bluePlayer/SET_FULL_PLAYER_STATE', payload.bluePlayer);
-    commit('redPlayer/SET_FULL_PLAYER_STATE', payload.redPlayer);
+    if (
+      payload.game.updatePlayerState === 'both' ||
+      payload.game.updatePlayerState === 'blue'
+    ) {
+      commit('bluePlayer/SET_FULL_PLAYER_STATE', payload.bluePlayer);
+    }
+    if (
+      payload.game.updatePlayerState === 'both' ||
+      payload.game.updatePlayerState === 'red'
+    ) {
+      commit('redPlayer/SET_FULL_PLAYER_STATE', payload.redPlayer);
+    }
   },
   /**
    * Reset the whole game state
@@ -233,6 +283,30 @@ const actions = {
   },
   removeInMyDraftIds: ({ dispatch, getters }, payload) => {
     dispatch(getters.my('removeInDraftIds'), payload);
+  },
+  draw: ({ dispatch, getters }, payload = 1) => {
+    dispatch(getters.my('draw'), payload);
+    dispatch('updateHeroesPossibleActions');
+  },
+  submitMyReplace3CardsTurn: ({ dispatch, getters }) => {
+    dispatch(getters.my('submitReplace3CardsTurn'));
+  },
+  updateHeroesPossibleActions: ({ commit, getters, state }) => {
+    let myHeroesInHand = getters.myHeroesIn('Hand');
+    switch (state.gameState) {
+      case '2_CHANGE_UP_TO_3_CARDS':
+        myHeroesInHand.forEach((
+          /** @type {import('type/game').TH_HeroCard} */ hero
+        ) => {
+          hero.possibleActions = ['replace'];
+        });
+
+        break;
+
+      default:
+        break;
+    }
+    commit(getters.my('SET_TWELVE_HEROES'), myHeroesInHand);
   }
 };
 const bluePlayer = new AnyPlayer();

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

@@ -1,5 +1,36 @@
 'use strict';
 import { socketService } from '../../../main';
+import cloneDeep from 'lodash.clonedeep';
+
+/** @type {import('type/game').TH_PlayerGameState} */
+const initPlayerState = {
+  // Username of this player
+  name: '',
+  // Color of this player (blue or red)
+  color: '',
+  // Faction chosen (will stay empty if not faction mode)
+  faction: '',
+  // Will contain the IDs of the heroes selectable for draft mode
+  draftHeroesIds: [],
+  // the 12 heroes the player will be playing with
+  twelveHeroes: [],
+  heroesInPile: [],
+  heroesInHand: [],
+  heroesInCamp: [],
+  heroesInDiscard: [],
+  heroesInBattleLeft: [],
+  heroesInBattleCenter: [],
+  heroesInBattleRight: [],
+  foodInCamp: 0,
+  // Can see already we might have issues with left/right depending from where we look :)
+  'foodInBattle/left': 0,
+  'foodInBattle/center': 0,
+  'foodInBattle/right': 0,
+  // During military phase it will contain actions made by player to be replayed by other
+  actionsPerformed: [],
+  playerAvailActions: { canDrawCards: 0, canEndTurn: false, canPass: false },
+  instructions: ''
+};
 
 /**
  * Description of game state model for a player
@@ -7,29 +38,7 @@ import { socketService } from '../../../main';
  * @returns {object} Player state in vuex format
  */
 export default function AnyPlayer() {
-  const initPlayerState = {
-    // Username of this player
-    name: '',
-    // Color of this player (blue or red)
-    color: '',
-    // Faction chosen (will stay empty if not faction mode)
-    faction: '',
-    // Will contain the IDs of the heroes selectable for draft mode
-    draftHeroesIds: [],
-    // the 12 heroes the player is playing with
-    // Player will fill it himself if mode is draft or tournament
-    // 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 :)
-    'foodInBattle/left': 0,
-    'foodInBattle/center': 0,
-    'foodInBattle/right': 0,
-    // During military phase it will contain actions made by player to be replayed by other
-    actionsPerformed: []
-  };
-
-  const state = Object.assign({}, initPlayerState);
+  const state = cloneDeep(initPlayerState);
 
   const getters = {
     color: state => {
@@ -40,7 +49,36 @@ export default function AnyPlayer() {
     },
     twelveHeroes: state => {
       return state.twelveHeroes;
-    }
+    },
+    heroesInPile: state => {
+      return state.heroesInPile;
+    },
+    heroesInHand: state => {
+      return state.heroesInHand;
+    },
+    heroesInCamp: state => {
+      return state.heroesInCamp;
+    },
+    heroesInDiscard: state => {
+      return state.heroesInDiscard;
+    },
+    heroesInBattleLeft: state => {
+      return state.heroesInBattleLeft;
+    },
+    heroesInBattleCenter: state => {
+      return state.heroesInBattleCenter;
+    },
+    heroesInBattleRight: state => {
+      return state.heroesInBattleRight;
+    },
+    heroesIn: (state, getters) => position => {
+      return getters['heroesIn' + position];
+    },
+    playerAvailActions: state => state.playerAvailActions,
+    canDrawCards: state => state.playerAvailActions.canDrawCards,
+    canPass: state => state.playerAvailActions.canPass,
+    canEndTurn: state => state.playerAvailActions.canEndTurn,
+    instructions: state => state.instructions
   };
 
   const mutations = {
@@ -49,12 +87,25 @@ export default function AnyPlayer() {
     },
     INIT_PLAYER_STATE: state => {
       Object.assign(state, initPlayerState);
+      state.heroesInHand = [];
+      state.heroesInPile = [];
     },
     ADD_IN_DRAFT_IDS: (state, payload) => {
       state.draftHeroesIds.push(payload);
     },
     REMOVE_IN_DRAFT_IDS: (state, payload) => {
       state.draftHeroesIds = state.draftHeroesIds.filter(id => id !== payload);
+    },
+    SET_HEROES_IN_POSITION: (state, payload) => {
+      let position = payload.position;
+      let ids = payload.ids;
+      state['heroesIn' + position] = ids;
+    },
+    SET_PLAYER_AVAIL_ACTIONS: (state, payload) => {
+      state.playerAvailActions = payload;
+    },
+    SET_TWELVE_HEROES: (state, payload) => {
+      state.twelveHeroes = payload;
     }
   };
 
@@ -98,11 +149,72 @@ export default function AnyPlayer() {
           );
         });
     },
+    submitReplace3CardsTurn: ({ commit, state, rootState }) => {
+      commit(
+        'game/SET_WAITING_FOR',
+        { color: state.color, value: false },
+        { root: true }
+      );
+      let heroesInHand = state.heroesInHand;
+      let heroesInPile = state.heroesInPile;
+      let chosenIds = rootState.chosenIds;
+      heroesInPile.push(...chosenIds);
+      heroesInHand = heroesInHand.filter(heroId => !chosenIds.includes(heroId));
+
+      commit('SET_HEROES_IN_POSITION', {
+        position: 'Pile',
+        ids: heroesInPile
+      });
+      commit('SET_HEROES_IN_POSITION', {
+        position: 'Hand',
+        ids: heroesInHand
+      });
+      commit('CLEAR_CHOSEN_IDS', null, { root: true });
+      /**@type {import('type/comm').TH_MessageReplace3CardsStep} */
+      let message = {};
+      message.color = state.color;
+      message.heroesInHand = state.heroesInHand;
+      message.heroesInPile = state.heroesInPile;
+      socketService
+        .endTurn(message)
+        .then(() => {})
+        .catch(err => {
+          console.log('Error sending data : ', err);
+          //Unvalid submit
+          commit(
+            'game/SET_WAITING_FOR',
+            { color: state.color, value: true },
+            { root: true }
+          );
+        });
+    },
     addInDraftIds: ({ commit }, payload) => {
       commit('ADD_IN_DRAFT_IDS', payload);
     },
     removeInDraftIds: ({ commit }, payload) => {
       commit('REMOVE_IN_DRAFT_IDS', payload);
+    },
+    draw: ({ commit, getters }, payload = 1) => {
+      // Possibility to draw multiple cards
+      for (let index = 0; index < payload; index++) {
+        /** @type {number[]} */
+        let heroesInPile = getters.heroesIn('Pile');
+        let heroesInHand = getters.heroesIn('Hand');
+
+        heroesInHand.push(heroesInPile.shift());
+        commit('SET_HEROES_IN_POSITION', {
+          position: 'Pile',
+          ids: heroesInPile
+        });
+        commit('SET_HEROES_IN_POSITION', {
+          position: 'Hand',
+          ids: heroesInHand
+        });
+      }
+      let actions = getters.playerAvailActions;
+      actions.canDrawCards = 0;
+      actions.canEndTurn = true;
+      commit('SET_PLAYER_AVAIL_ACTIONS', actions);
     }
   };
   return {

src/store/store.js

@@ -89,6 +89,7 @@ const actions = {
   stopGame: ({ commit, rootState }) => {
     socketService.leaveGame(rootState.username);
     commit('SET_IS_GAME_RUNNING', false);
+    commit('SET_GAME_ID', -1);
     localStorage.removeItem('gameId');
   },
   disconnect: ({ commit }) => {