feat: support compatability on card

Former-commit-id: 9807f3e
Voxelum · Jul 15, 2019 · 6ee16bc · 6ee16bc
1 parent b77b6c1
commit 6ee16bc
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 36 deletions.
diff --git a/src/renderer/windows/main/ProfileSettingPage/ForgeSetting.vue b/src/renderer/windows/main/ProfileSettingPage/ForgeSetting.vue
@@ -15,26 +15,26 @@
 			<v-flex d-flex xs6>
 			</v-flex>
 			<v-flex d-flex xs6>
-				<v-card dark class="pack-list" @drop="onDropLeft" @dragover="onDragOver">
+				<v-card dark class="pack-list" @drop="onDropLeft" @dragover="onDragOver" @mousewheel="onMouseWheel">
 					<p class="text-xs-center headline" style="position: absolute; top: 120px; right: 0px; user-select: none;"
 					  v-if="mods[1].length === 0">
 						<v-icon style="font-size: 50px; display: block;">save_alt</v-icon>
 						{{$t('mod.hint')}}
 					</p>
 					<mod-card v-for="(pack, index) in mods[1]" :key="pack.hash" :data="pack.metadata[0]"
-					  :isSelected="false" :index="index" :hash="pack.hash" :compatible="compatibilities[pack.hash]">
+					  :isSelected="false" :index="index" :hash="pack.hash">
 					</mod-card>
 				</v-card>
 			</v-flex>
 			<v-flex d-flex xs6>
-				<v-card dark class="pack-list right" @drop="onDropRight" @dragover="onDragOver">
+				<v-card dark class="pack-list right" @drop="onDropRight" @dragover="onDragOver" @mousewheel="onMouseWheel">
 					<p class="text-xs-center headline" style="position: absolute; top: 120px; right: 0px; user-select: none;"
 					  v-if="mods[0].length === 0">
 						<v-icon style="font-size: 50px; display: block;">save_alt</v-icon>
 						{{$t('mod.hint')}}
 					</p>
 					<mod-card v-for="(pack, index) in mods[0]" :key="pack.hash" :data="pack.metadata[0]"
-					  :isSelected="true" :index="index" :hash="pack.hash" :compatible="compatibilities[pack.hash]">
+					  :isSelected="true" :index="index" :hash="pack.hash">
 					</mod-card>
 				</v-card>
 			</v-flex>
@@ -49,7 +49,6 @@ import SelectionList from '../SelectionList';
 import ModCard from './ModCard';
 import unknownPack from 'static/unknown_pack.png';
 import ForgeVersionMenu from '../ForgeVersionMenu';
-import { isCompatible } from 'universal/utils/versions';
 
 export default {
   mixins: [SelectionList, AbstractSetting],
@@ -65,19 +64,7 @@ export default {
   computed: {
     profile() { return this.$repo.getters['profile/current']; },
     forge() { return this.profile.forge; },
-    compatibilities() {
-      const mods = this.$repo.getters['resource/mods'];
-      const map = {};
-      for (const mod of mods) {
-        const meta = mod.metadata[0];
-        console.log(meta);
-        const acceptVersion = meta.acceptMinecraftVersion ? meta.acceptMinecraftVersion : `[${meta.mcversion}]`;
-        map[mod.hash] = isCompatible(acceptVersion, this.profile.mcversion);
-      }
-      return map;
-    },
     mods() {
-
       const mods = this.$repo.getters['resource/mods'];
       const selectedModsIds = this.forge.mods || [];
       const selected = {};
@@ -106,6 +93,7 @@ export default {
         .finally(() => {
           this.refreshing = false;
         });
+      this.forgeVersion = this.forge.version;
     },
     save() {
       this.$repo.commit('profile/forge', { enabled: this.enabled });

diff --git a/src/renderer/windows/main/ProfileSettingPage/ModCard.vue b/src/renderer/windows/main/ProfileSettingPage/ModCard.vue
@@ -19,26 +19,60 @@
 				</v-layout>
 			</v-card>
 		</template>
-		{{ compatible ? data.modid : $t('mod.incompatible') }}
+		{{ compatible ? $t('mod.compatible') : $t('mod.incompatible', { accept: acceptedRange, actual:
+		mcversion }) }}
 		<v-divider></v-divider>
 	</v-tooltip>
 </template>
 
 <script>
+import { isCompatible } from 'universal/utils/versions';
+import unknownPack from 'static/unknown_pack.png';
+
 export default {
   data() {
     return {
       icon: '',
     };
   },
-  props: ['data', 'isSelected', 'index', 'hash', 'compatible'],
+  props: {
+    data: {
+      required: true,
+      type: Object
+    },
+    isSelected: {
+      required: true,
+      type: Boolean,
+    },
+    index: {
+      required: true,
+      type: Number,
+    },
+    hash: {
+      required: true,
+      type: String
+    }
+  },
   mounted() {
     this.$repo.dispatch('resource/readForgeLogo', this.hash).then((icon) => {
       if (typeof icon === 'string' && icon !== '') {
         this.icon = `data:image/png;base64, ${icon}`;
+      } else {
+        this.icon = unknownPack;
       }
     })
   },
+  computed: {
+    mcversion() {
+      return this.$repo.getters['profile/current'].mcversion;
+    },
+    acceptedRange() {
+      return this.data.acceptedMinecraftVersions ? this.data.acceptedMinecraftVersions : `[${this.data.mcversion}]`;
+    },
+    compatible() {
+      return isCompatible(this.acceptedRange, this.mcversion);
+    },
+  },
   methods: {
     onDragStart(e) {
       e.dataTransfer.setData("Index", `${this.isSelected ? 'R' : 'L'}${this.index}`);
@@ -56,6 +90,10 @@ export default {
 .incompatible.draggable-card:hover {
   background-color: #e65100;
 }
+.draggable-card:hover {
+  background-color: #388E3C;
+}
+
 .title {
   max-width: 100%;
   white-space: nowrap;

diff --git a/src/renderer/windows/main/ProfileSettingPage/ResourcePackCard.vue b/src/renderer/windows/main/ProfileSettingPage/ResourcePackCard.vue
@@ -1,27 +1,47 @@
 <template>
-	<div>
-		<v-card color="darken-1" flat hover class="draggable-card white--text" style="margin-top: 10px;"
-		  draggable @dragstart="onDragStart">
-			<v-layout justify-center align-center fill-height>
-				<v-flex xs6 style="padding: 0;">
-					<v-img style="user-drag: none; user-select: none; height: 125px;" :src="data.icon" contain>
-					</v-img>
-				</v-flex>
-				<v-flex xs6 style="padding-top: 10px;">
-					<text-component style="white-space: normal; word-break: break-word;" :source="data.packName"
-					  class="title"></text-component>
-					<text-component style="white-space: normal; word-break: break-word;" :source="data.description"></text-component>
-				</v-flex>
-			</v-layout>
-		</v-card>
+	<v-tooltip top>
+		<template v-slot:activator="{ on }">
+			<v-card v-on="on" color="darken-1" flat hover :class="{ incompatible: !compatible }" class="draggable-card white--text"
+			  style="margin-top: 10px;" draggable @dragstart="onDragStart">
+				<v-layout justify-center align-center fill-height>
+					<v-flex xs6 style="padding: 0;">
+						<v-img style="user-drag: none; user-select: none; height: 125px;" :src="data.icon" contain>
+						</v-img>
+					</v-flex>
+					<v-flex xs6 style="padding-top: 10px;">
+						<text-component style="white-space: normal; word-break: break-word;" :source="data.packName"
+						  class="title"></text-component>
+						<text-component style="white-space: normal; word-break: break-word;" :source="data.description"></text-component>
+					</v-flex>
+				</v-layout>
+			</v-card>
+		</template>
+		{{ compatible ? $t('resourcepack.compatible', { format: data.format, version: mcversion }) : $t('resourcepack.incompatible', {
+			accept: acceptedRange,
+			actual: mcversion,
+			format: data.format
+		}) }}
 		<v-divider></v-divider>
-	</div>
+	</v-tooltip>
+
 </template>
 
 <script>
+import { isCompatible } from 'universal/utils/versions';
+import packFormatMapping from 'universal/utils/packFormatMapping.json'
+
 export default {
   props: ['data', 'isSelected', 'index'],
-  mounted() {
+  computed: {
+    mcversion() {
+      return this.$repo.getters['profile/current'].mcversion;
+    },
+    acceptedRange() {
+      return packFormatMapping[this.data.format];
+    },
+    compatible() {
+      return isCompatible(this.acceptedRange, this.mcversion);
+    },
   },
   methods: {
     onDragStart(e) {
@@ -32,6 +52,13 @@ export default {
 </script>
 
 <style scoped=true>
+.incompatible.draggable-card:hover {
+  background-color: #e65100;
+}
+.draggable-card:hover {
+  background-color: #388E3C;
+}
+
 .title {
   max-width: 100%;
   white-space: nowrap;