Add lodash pkg, bugfix config loader (update:configData), stat filters implemented with lodash

package.json

@@ -11,6 +11,7 @@
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.3.0",
     "core-js": "^3.4.4",
+    "lodash": "^4.17.15",
     "vue": "^2.6.10",
     "vue-router": "^3.1.5"
   },
@@ -50,6 +51,7 @@
     "last 2 versions"
   ],
   "peerDependencies": {
-    "jquery": "^3.4.1"
+    "jquery": "^3.4.1",
+    "webpack": "^5.0.04"
   }
 }

src/components/ConfigSection.vue

@@ -170,7 +170,7 @@ export default {
 			return new Promise((resolve, reject) => {
 				let fr = new FileReader();
 				fr.onload = () => {
-					this.$emit('update', JSON.parse(fr.result));
+					this.$emit('update:configData', JSON.parse(fr.result));
 				};
 				fr.readAsText(file);
 			});

src/components/MainContent.vue

@@ -11,9 +11,9 @@ export default {
 		return {
 			mainConfig: {
 				statUnlocks: [
-					{id: 0, name: 'Slayer level', value: {min: 1, current: 99, max: 99}, image: 'slayer_icon.png', unlock: false},
-					{id: 1, name: 'Combat level', value: {min: 3, current: 126, max: 126}, image: 'combat_icon.png', unlock: false},
-					{id: 2, name: 'Defence level', value: {min: 1, current: 99, max: 99}, image: 'defence_icon.png', unlock: false},
+					{id: 0, name: 'Slayer level', filter: 'slayer_req', value: {min: 1, current: 99, max: 99}, image: 'slayer_icon.png', unlock: false},
+					{id: 1, name: 'Combat level', filter: 'combat_req', value: {min: 3, current: 126, max: 126}, image: 'combat_icon.png', unlock: false},
+					{id: 2, name: 'Defence level', filter: 'defence_req', value: {min: 1, current: 99, max: 99}, image: 'defence_icon.png', unlock: false},
 				],
 				pointUnlocks: [
 					{id: 0, name: 'Seeing red', monster_ids: [83, 3], unlock: false, masters: [5,6,7]},
@@ -77,6 +77,9 @@ export default {
 		if (localStorage.getItem("configData") && localStorage.getItem('remember') === 'true') {
 			this.mainConfig = JSON.parse(localStorage.getItem("configData"));
 		}
+		else if (localStorage.getItem("configData") && localStorage.getItem('remember') === 'false') {
+			localStorage.removeItem("configData");
+		}
 	},
 }
 </script>

src/components/TableSection.vue

@@ -61,13 +61,13 @@ export default {
 					key: 'combat_req',
 					label: 'Combat Requirement',
 					sortable: true,
-					class: 'd-none',
+					// class: 'd-none',
 				},
 				{
 					key: 'slayer_req',
 					label: 'Slayer Requirement',
 					sortable: true,
-					class: 'd-none',
+					class: '',
 				},
 				{
 					key: 'defence_req',
@@ -87,16 +87,6 @@ export default {
 					sortable: true,
 				},
 			],
-			config: {
-				combat_level: 60,
-				slayer_level: 50,
-				defence_level: 1,
-			},
-			accountFilters: {
-				combat_req: combat_req => combat_req <= this.config.combat_level,
-				slayer_req: slayer_req => slayer_req <= this.config.slayer_level,
-				defence_req: defence_req => defence_req <= this.config.defence_level,
-			},
 			filtered_items: [],
 		}
 	},
@@ -111,18 +101,12 @@ export default {
 		    this.generateTaskWeights();
 		},
 	    filterData() {
-			//filter based on Account Settings
-			this.filtered_items = this.filterArray(this.monstersData, this.accountFilters);
-		},
-		filterArray(array, filters) {
-			const filterKeys = Object.keys(filters);
-			return array.filter(item => {
-				// validates all filter criteria
-				return filterKeys.every(key => {
-					// ignores non-function predicates
-					if (typeof filters[key] !== 'function') return true;
-					return filters[key](item[key]);
-				});
+			this.filtered_items = this.monstersData;
+			//filter based on Account Stats
+
+			this.configData.statUnlocks.forEach(stat=>{
+				// For each stat requirement, remove those from list where the current stat value is greater or equal to the monsters requirement value.
+				this.filtered_items = _.filter(this.filtered_items, function(o){ return parseInt(stat.value.current) >= parseInt(o[stat.filter]) } );
 			});
 		},
 		generateTaskWeights() {
@@ -145,7 +129,6 @@ export default {
 			this.reload();
 		}
 	}
-
 }
 </script>
 

src/main.js

@@ -1,5 +1,6 @@
 import '@babel/polyfill'
 import 'mutationobserver-shim'
+import 'lodash'
 import Vue from 'vue'
 import './plugins/bootstrap-vue'
 import VueRouter from 'vue-router'