handle duplicated games better

src/components/Lists/List.vue

@@ -1,8 +1,14 @@
 <template lang="html">
-  <div :class="['list mr-3', viewClass, { unique, dragging }]">
-    <b-card no-body>
+  <div
+    :class="['list mr-3', viewClass, { unique, dragging }]"
+    :id="listIndex"
+  >
+    <b-card
+      no-body
+    >
       <b-card-header
         class="py-0 pr-0 pl-2 d-flex justify-content-between align-items-center"
+        :header-bg-variant="showDuplicateWarning ? 'warning' : null"
       >
         <h6 class="m-0" v-b-modal="`rename-list-${listIndex}`">
           <b-badge v-if="autoSortEnabled">
@@ -13,7 +19,7 @@
               {{ list.games.length }}
           </b-badge>
 
-          {{ list.name }}
+          {{ showDuplicateWarning ? 'Game already in list' : list.name }}
         </h6>
 
         <b-button-group>
@@ -33,6 +39,7 @@
       >
         <component
           v-for="game in sortedGames"
+          :id="game"
           :is="gameCardComponent"
           :key="game"
           :list="list"
@@ -86,6 +93,7 @@ export default {
 
   data() {
     return {
+      draggingId: null,
       gameDraggableOptions: {
         handle: '.card',
         ghostClass: 'card-placeholder',
@@ -107,7 +115,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['games', 'dragging', 'progresses', 'board']),
+    ...mapState(['games', 'dragging', 'progresses', 'board', 'duplicatedGame']),
 
     autoSortEnabled() {
       const { settings } = this.list;
@@ -119,6 +127,13 @@ export default {
       return ['sortByName', 'sortByRating', 'sortByReleaseDate', 'sortByProgress'].includes(settings.sortOrder);
     },
 
+    showDuplicateWarning() {
+      return this.duplicatedGame
+        && this.duplicatedGame.originListId !== this.listIndex
+        && this.duplicatedGame.listId === this.listIndex
+        && this.list.games.includes(this.duplicatedGame.gameId);
+    },
+
     sortedGames() {
       const { settings, games } = this.list;
       const sortOrder = settings.sortOrder || 'sortByCustom';
@@ -182,23 +197,30 @@ export default {
     validateMove({ from, to }) {
       const isDifferentList = from.id !== to.id;
       const isDuplicate = this.board.lists[to.id].games.includes(Number(this.draggingId));
-      const validMove = isDifferentList && isDuplicate;
-      return !validMove;
+
+      if (isDuplicate) {
+        this.$store.commit('SET_DUPLICATED_GAME', {
+          gameId: Number(this.draggingId),
+          listId: Number(to.id),
+          originListId: Number(from.id) },
+        );
+      }
+
+      if (isDuplicate && isDifferentList) {
+        return false;
+      }
+
+      return true;
     },
 
     dragStart({ item }) {
       this.$store.commit('SET_DRAGGING_STATUS', true);
       this.draggingId = item.id;
-
-      this.$nextTick(() => {
-        if (window.innerWidth <= 780) {
-          window.navigator.vibrate([100]);
-        }
-      });
     },
 
     dragEnd() {
       this.$store.commit('SET_DRAGGING_STATUS', false);
+      this.$store.commit('SET_DUPLICATED_GAME', null);
       this.saveBoard();
     },
 

src/store/mutations.js

@@ -216,6 +216,10 @@ export default {
     state.dragging = status;
   },
 
+  SET_DUPLICATED_GAME(state, data) {
+    state.duplicatedGame = data;
+  },
+
   REMOVE_GAME_NOTE(state, gameId) {
     if (state.notes[gameId]) {
       Vue.delete(state.notes, gameId);

src/store/state.js

@@ -15,5 +15,6 @@ export default {
   gameModalData: null,
   wallpapers: [],
   platform: null,
+  duplicatedGame: null,
   legacyPlatforms: [],
 };