src/store/draft/actions.ts

@@ -0,0 +1,12 @@
+import { ActionTree } from "vuex";
+import { AppState } from "../types";
+import { DraftState } from "./types";
+import { Card } from "@/mlpccg";
+
+const actions: ActionTree<DraftState, AppState> = {
+  pickCard({ commit }, card: Card) {
+    //TODO
+  }
+};
+
+export default actions;

src/store/draft/getters.ts

@@ -0,0 +1,12 @@
+import { GetterTree } from "vuex";
+import { AppState } from "../types";
+import { DraftState } from "./types";
+import { createPonyheadURL } from "@/mlpccg";
+
+const getters: GetterTree<DraftState, AppState> = {
+  ponyheadURL(state): string {
+    return createPonyheadURL(state.picks);
+  }
+};
+
+export default getters;

src/store/draft/index.ts

@@ -4,16 +4,24 @@ import { Module } from "vuex";
 
 const namespaced = true;
 
+import actions from "./actions";
+import mutations from "./mutations";
+import getters from "./getters";
+
 export const state: DraftState = {
-  picks: []
+  cards: [],
+  picks: [],
+  pod: [],
+  packCount: 0,
+  currentPack: 0
 };
 
 export const draft: Module<DraftState, AppState> = {
   namespaced,
-  state
-  //actions,
-  //mutations,
-  //getters,
+  state,
+  actions,
+  mutations,
+  getters
 };
 
 export default draft;

src/store/draft/mutations.ts

@@ -0,0 +1,37 @@
+import { MutationTree } from "vuex";
+import { DraftState, PlayerStatus } from "./types";
+import { Card } from "@/mlpccg";
+
+const mutations: MutationTree<DraftState> = {
+  playerPicked(state, payload: { name: string; picked: boolean }) {
+    const idx = state.pod.findIndex(p => p.name == payload.name);
+    state.pod[idx].picked = payload.picked;
+  },
+
+  resetPickStatus(state) {
+    state.pod = state.pod.map(p => ({ ...p, picked: false }));
+  },
+
+  setCardPool(state, pool: Card[]) {
+    state.cards = pool;
+  },
+
+  setPackInfo(state, payload: { current: number; total: number }) {
+    state.currentPack = payload.current;
+    state.packCount = payload.total;
+  },
+
+  addPicks(state, pick: Card) {
+    state.picks.push(pick);
+  },
+
+  setPod(state, pod: PlayerStatus[]) {
+    state.pod = pod;
+  },
+
+  resetPicks(state) {
+    state.picks = [];
+  }
+};
+
+export default mutations;

src/store/draft/types.ts

@@ -3,5 +3,19 @@ import { Card } from "@/mlpccg";
 
 export interface DraftState {
   session?: Session;
+
+  pod: PlayerStatus[];
+  cards: Card[];
   picks: Card[];
+
+  // Multiple pack draft
+  packCount: number;
+  currentPack: number;
+}
+
+export interface PlayerStatus {
+  name: string;
+  isBot: boolean;
+  isMe: boolean;
+  picked: boolean;
 }

src/store/network/index.ts

@@ -3,6 +3,7 @@ import { AppState } from "../types";
 import { Module } from "vuex";
 
 import actions from "./actions";
+import mutations from "./mutations";
 import getters from "./getters";
 
 const namespaced = true;
@@ -16,7 +17,7 @@ export const network: Module<NetworkState, AppState> = {
   namespaced,
   state,
   actions,
-  //mutations,
+  mutations,
   getters
 };
 

src/views/Draft.vue

@@ -152,13 +152,7 @@ import { Component, Vue } from "vue-property-decorator";
 import { getCards, CardSlot, cardLimit, Card } from "@/mlpccg";
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 import DeckList from "@/components/DeckBuilder/DeckList.vue";
-
-interface PlayerStatus {
-  name: string;
-  isBot: boolean;
-  isMe: boolean;
-  picked: boolean;
-}
+import { PlayerStatus } from "@/store/draft/types";
 
 @Component({
   components: {