Add support for mobile devices

Still missing a lot of features, but you can draft with it.

client/package.json

@@ -16,6 +16,7 @@
     "tslib": "^2.0.0",
     "vue": "^2.6.11",
     "vue-async-computed": "^3.8.2",
+    "vue-directive-long-press": "^1.1.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   }

client/src/App.vue

@@ -7,11 +7,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import { authStore } from './state/AuthStore';
+import { formatStore, LayoutFormFactor } from './state/FormatStore';
 import { FALLBACK_USER_PICTURE } from './parse/fallbacks';
 
 export default Vue.extend({
   created() {
     this.loadAuthInfo();
+    this.initFormat();
   },
 
   methods: {
@@ -25,9 +27,28 @@ export default Vue.extend({
         });
       }
     },
+
+    initFormat() {
+      this.updateFormFactor();
+
+      window.addEventListener('resize', () => {
+        this.updateFormFactor();
+      });
+    },
+
+    updateFormFactor() {
+      const layout = getLayoutFormFactor();
+      if (layout != formatStore.layout) {
+        formatStore.setLayout(layout);
+      }
+    },
   },
 });
 
+function getLayoutFormFactor(): LayoutFormFactor {
+  return window.innerWidth >= 768 ? 'desktop' : 'mobile';
+}
+
 interface SourceUserInfo {
   name: string;
   picture: string;

client/src/shims/shims-longpress.d.ts

@@ -0,0 +1 @@
+declare module 'vue-directive-long-press';

client/src/state/FormatStore.ts

@@ -0,0 +1,29 @@
+import { vuexModule } from './vuex/vuexModule';
+import { rootStore } from './store';
+
+export const formatStore = vuexModule(
+  rootStore,
+  'format',
+  {
+    layout: 'desktop',
+  } as FormatState,
+  {
+    mutations: {
+      setLayout(state: FormatState, layout: LayoutFormFactor) {
+        state.layout = layout;
+      },
+    },
+
+    getters: {},
+
+    actions: {},
+  }
+)
+
+export interface FormatState {
+  layout: LayoutFormFactor;
+}
+
+export type LayoutFormFactor = 'mobile' | 'desktop';
+
+export type FormatStore = typeof formatStore;

client/src/ui/Replay.vue

@@ -5,25 +5,23 @@
       @mousedown="onBubbleMouseDown"
       >
     <template v-if="status == 'loaded'">
-      <ControlsRow />
-      <div class="main">
-        <PlayerSelector class="table" />
-        <DraftPicker v-if="showDraftPicker" class="picker" />
-        <CardGrid v-else class="grid" />
-      </div>
+      <ReplayMobile
+          v-if="formatStore.layout == 'mobile'"
+          :showDraftPicker="showDraftPicker"
+          />
+      <ReplayDesktop v-else :showDraftPicker="showDraftPicker" />
     </template>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import ControlsRow from './replay/ControlsRow.vue';
-import PlayerSelector from './replay/player_selector/PlayerSelector.vue';
-import CardGrid from './replay/CardGrid.vue';
-import DraftPicker from './replay/DraftPicker.vue';
+import ReplayDesktop from './replay/ReplayDesktop.vue';
+import ReplayMobile from './replay/ReplayMobile.vue';
 
 import { rootStore } from '../state/store';
 import { authStore } from '../state/AuthStore';
+import { formatStore, FormatStore } from '../state/FormatStore';
 import { replayStore } from '../state/ReplayStore';
 import { draftStore, DraftStore } from '../state/DraftStore';
 import { applyReplayUrlState, parseDraftUrl, pushDraftUrlFromState } from '../router/url_manipulation';
@@ -38,10 +36,8 @@ import { isAuthedUserSelected } from './replay/isAuthedUserSelected';
 
 export default Vue.extend({
   components: {
-    ControlsRow,
-    PlayerSelector,
-    DraftPicker,
-    CardGrid,
+    ReplayMobile,
+    ReplayDesktop,
   },
 
   data() {
@@ -75,8 +71,8 @@ export default Vue.extend({
   },
 
   computed: {
-    draftStore(): DraftStore {
-      return draftStore;
+    formatStore(): FormatStore {
+      return formatStore;
     },
 
     showDraftPicker(): boolean {
@@ -160,23 +156,5 @@ export default Vue.extend({
 <style scoped>
 ._replay {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.table {
-  width: 300px;
-  flex: 0 0 auto;
-}
-
-.grid, .picker {
-  flex: 1;
 }
 </style>

client/src/ui/replay/ControlsRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="_controls-row">
     <div class="start">
-      <TimelineButton class="timeline-btn" />
+      <TimelineButton class="timeline-btn" popoverAlignment="left below" />
       <button
           v-if="draftStore.isFilteredDraft"
           @click="onPicksClick"

client/src/ui/replay/DraftPicker.vue

@@ -14,7 +14,7 @@
       </div>
       <div v-else class="no-picks">You don't have any picks (yet)</div>
     </div>
-    <DeckBuilderMain class="pool" :horizontal="true" />
+    <DeckBuilderMain v-if="showDeckBuilder" class="pool" :horizontal="true" />
   </div>
 </template>
 
@@ -39,6 +39,13 @@ export default Vue.extend({
     DeckBuilderMain,
   },
 
+  props: {
+    showDeckBuilder: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
   created() {
     deckBuilderStore.setSelectedSeat(this.currentSeat.position);
   },

client/src/ui/replay/ReplayDesktop.vue

@@ -0,0 +1,70 @@
+<!--
+
+Root component for desktop layout
+
+-->
+
+<template>
+  <div class="_replay-desktop">
+    <ControlsRow />
+    <div class="main">
+      <PlayerSelector class="table" />
+      <DraftPicker
+          v-if="showDraftPicker"
+          class="picker"
+          :showDeckBuilder="true"
+          />
+      <CardGrid v-else class="grid" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ControlsRow from './ControlsRow.vue';
+import PlayerSelector from './player_selector/PlayerSelector.vue';
+import CardGrid from './CardGrid.vue';
+import DraftPicker from './DraftPicker.vue';
+
+export default Vue.extend({
+  components: {
+    DraftPicker,
+    CardGrid,
+    ControlsRow,
+    PlayerSelector,
+  },
+
+  props: {
+    showDraftPicker: {
+      type: Boolean,
+      required: true,
+    },
+  },
+})
+
+</script>
+
+<style scoped>
+._replay-desktop {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.table {
+  width: 300px;
+  flex: 0 0 auto;
+}
+
+.grid, .picker {
+  flex: 1;
+}
+</style>
+