fix select component

Author: stanislav

Diff for: README.md

@@ -9,15 +9,23 @@ This is a basic Diablo 2 save editor for D2 and D2R. The parser uses the TXT dat
 * Modify waypoints
 * Import items (~1000 different items to import)
 * Modify basic stats on items
-* Copy item between chars (drag between browser windows)
+* Copy item between chars
 
 ### How to use on your own mod
 
-1. Clone this repo or download a zip.
-2. Extract your MPQ data to a public/data folder in the same directory as the repo. (the tool needs TXTs, strings, pallettes, and item dc6s to work properly)
-3. Run 
+1. Install Node
+2. Clone this repo or download a zip.
+3. Extract your MPQ data to a public/data folder in the same directory as the repo. (the tool needs TXTs, strings, pallettes, and item dc6s to work properly)
+4. On first install or version updates, in the command prompt, run the following commands to install the editor:
+
 ```
 npm install 
+```
+
+5. Run the command below to start the editor
+
+```
 npm run serve
 ```
-4. Go to http://localhost:${PORT}/ verify everything works.
+
+6. Go to http://localhost:8080/ with your web browser to access the editor.

Diff for: package-lock.json

@@ -3,39 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
+    "serve": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint" ,
     "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@dschu012/d2s": "^2.0.36",
-    "@popperjs/core": "^2.11.6",
-    "core-js": "^3.6.5",
+    "@popperjs/core": "^2.11.8",
+    "@vueform/multiselect": "^2.6.6",
+    "core-js": "^3.35.0",
+    "node-cache": "^5.1.2",
+    "rollup-plugin-vue": "^6.0.0",
     "select2": "^4.1.0-rc.0",
     "tippy.js": "^6.3.7",
-    "vue": "^3.2.45"
+    "vue": "^3.4.13",
+    "vue-tippy": "^6.4.1",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.2",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "^4.5.6",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
-    "@web/rollup-plugin-copy": "^0.3.0",
-    "@web/rollup-plugin-html": "^1.10.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "rollup": "^2.75.4",
-    "rollup-plugin-html": "^0.2.1",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-summary": "^1.4.3",
-    "rollup-plugin-terser": "^7.0.2",
+    "@babel/eslint-parser": "^7.23.3",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "^5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.13",
+    "@web/rollup-plugin-copy": "^0.5.1",
+    "@web/rollup-plugin-html": "^2.1.2",
+    "dotenv-webpack": "^8.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.20.1",
+    "prettier": "^3.2.2",
     "serve-static": "^1.15.0"
   },
   "eslintConfig": {

Diff for: package.json

@@ -11,7 +11,6 @@
   </script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/darkly/bootstrap.min.css"
     crossorigin="anonymous">
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
   <link href="css/app.css" rel="stylesheet" />
   <title>d2s - Example</title>
 </head>
@@ -25,13 +24,12 @@
       crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-      crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
-    
+      crossorigin="anonymous"></script>    
 
-    <!-- 
+   
     <script src="./d2/constants_96.bundle.min.js"></script>
     <script src="./d2/constants_99.bundle.min.js"></script>
+    <!-- 
     <script src="https://github.com/dschu012/d2s/releases/latest/download/d2s.bundle.min.js"></script> 
     -->
 

Diff for: public/css/app.css

@@ -1,21 +1,21 @@
 // Import rollup plugins
-import html from "@web/rollup-plugin-html";
-import { copy } from "@web/rollup-plugin-copy";
-import resolve from "@rollup/plugin-node-resolve";
-import { terser } from "rollup-plugin-terser";
-import minifyHTML from "rollup-plugin-minify-html-literals";
-import summary from "rollup-plugin-summary";
-import json from "@rollup/plugin-json";
-import typescript from "@rollup/plugin-typescript";
-import serve from "rollup-plugin-serve";
-import postcss from "rollup-plugin-postcss";
+// import html from "@web/rollup-plugin-html";
+// import { copy } from "@web/rollup-plugin-copy";
+// import resolve from "@rollup/plugin-node-resolve";
+// import { terser } from "rollup-plugin-terser";
+// import minifyHTML from "rollup-plugin-minify-html-literals";
+// import summary from "rollup-plugin-summary";
+// import json from "@rollup/plugin-json";
+// import typescript from "@rollup/plugin-typescript";
+// import serve from "rollup-plugin-serve";
+// import postcss from "rollup-plugin-postcss";
+import vue from 'rollup-plugin-vue'
 
 
 export default {
   process: {},
   input: "",
-  plugins: [
-  ],
+  plugins: [vue(/* options */)],
   output: {
     dir: "",
   }

Diff for: public/css/theme.css

@@ -42,9 +42,7 @@
               <Item v-if="preview" :item="preview" clazz="item-edit"></Item>
             </div>
             <label for="Item">Item</label>
-            <select class="form-control" v-model="previewModel" @change="previewItem" v-select="'#LoadItem'">
-              <option v-for="item in itempack" :value="item" :key="item.key">{{item.key}}</option>
-            </select>
+            <multiselect v-model="previewModel" :options="itempack" label="key" valueProp="value" :searchable="true" @update:model-value="previewItem"/>
           </div>
           <div class="modal-footer">
             <input style="display:none;" type="file" name="d2iFile" @change="onItemFileChange" id="d2iFile">
@@ -440,12 +438,18 @@
         this.grid = JSON.parse(localStorage.getItem('grid'));
       }
 
-      d2s.setConstantData(96, constants96);
-      d2s.setConstantData(97, constants96);
-      d2s.setConstantData(98, constants96);
-      d2s.setConstantData(99, constants99);
+      // d2s.setConstantData(96, constants96);
+      // d2s.setConstantData(97, constants96);
+      // d2s.setConstantData(98, constants96);
+      // d2s.setConstantData(99, constants99);
+      // window.constants = constants99;
+
+      d2s.setConstantData(96, window.constants_96.constants);
+      d2s.setConstantData(97, window.constants_96.constants);
+      d2s.setConstantData(98, window.constants_96.constants);
+      d2s.setConstantData(99, window.constants_99.constants);
+      window.constants = window.constants_99.constants;
 
-      window.constants = constants99;
       this.addItemsPackBases(window.constants.weapon_items, "Weapons");
       this.addItemsPackBases(window.constants.armor_items, "Armor");
     },
@@ -658,8 +662,10 @@
         utils.removeMaxDurabilityFromRunwords(this.preview);
       },
       async previewItem(e) {
-        let bytes = utils.b64ToArrayBuffer(this.previewModel.value);
-        this.readItem(bytes, 0x63);
+         if (this.previewModel) {
+          let bytes = utils.b64ToArrayBuffer(this.previewModel.base64);
+          this.readItem(bytes, 0x63);
+        }
       },
       async onItemFileLoad(event) {
         this.readItem(event.target.result, 0x60);
@@ -980,7 +986,9 @@
           let category = item.categories[0];
           this.itempack.push({
             key: "./Bases/"+ categoryName +"/" + category + "/" + item.type_name + '.d2i',
-            value: base64
+            value: { 
+              base64: base64
+            }
           });
         }
       },