Complete search

website/package.json

@@ -32,5 +32,6 @@
     "watch": "webpack --watch",
     "start": "webpack-dev-server --open",
     "build": "webpack"
-  }
+  },
+  "sideEffects": false
 }

website/public/index.html

@@ -16,17 +16,16 @@
         <div class="container" id="app" v-cloak>
             <form >
                 <fieldset>
-                    <h1>{{title.length === 0 ? "No Search" : title}}</h1>
-                    <input v-model="title">
+                    <h1>{{search.length === 0 ? "No Search" : search}}</h1>
+                    <input v-model="search">
                 </fieldset>
             </form>
             <ul>
-                <li v-for="color of colors">
-                    <span v-bind:style="{'color': toColor(color.color)}">{{color.name}}</span>
+                <li v-for="color of colors" v-bind:style="{'color': toColor(color.color), 'display': color.show ? null : 'none'}">
+                    {{color.name}}
                 </li>
-                <div v-if="colors.length === 0">Nothing</div>
             </ul>
-            <img v-for="item of items" v-lazy="item.image" v-bind:alt="item.name" v-bind:title="item.info" v-bind:style="{'display': item.show ? 'inline' : 'none'}">
+            <img v-for="item of items" v-bind:src="item.image" v-bind:alt="item.name" v-bind:title="item.info" v-bind:style="{'display': item.show ? null : 'none'}">
         </div>
     </body>
 </html>

website/src/app.ts

@@ -6,30 +6,39 @@ import Vue from "vue";
 import VueLazyload from "vue-lazyload";
 import colors from "./colorcodes.json";
 import items from "./items.json";
+import { fuzzySearch, zipObject } from "./util";
 
-Vue.use(VueLazyload);
+const colorsZipped = zipObject<{ color: number; name: string }>(colors);
 
-// tslint:disable: no-invalid-this
+Vue.use(VueLazyload);
 
 // Test Vue App
+// tslint:disable: no-invalid-this
 let vm = new Vue({
     computed: {
         colors() {
-            return Object.values(colors).filter(x => x.name.toLowerCase().includes(this.title.toLowerCase()));
+            return colorsZipped.map(color => {
+                return {
+                    color: color.value.color,
+                    colorcode: color.key,
+                    name: color.value.name,
+                    show: fuzzySearch(color.value.name, this.search)
+                };
+            });
         },
         items() {
             return items.map(x =>
                 ({
                     image: `./items/${x.type}-${x.meta}.png`,
                     info: `${x.name} (${x.text_type}): ${x.type}:${x.meta}`,
                     name: x.name,
-                    show: x.name.toLowerCase().includes(this.title.toLowerCase())
+                    show: fuzzySearch(x.name, this.search)
                 })
             );
         }
     },
     data: {
-        title: ""
+        search: ""
     },
     el: "#app",
     methods: {
@@ -44,4 +53,5 @@ let vm = new Vue({
         }
         // tslint:enable: no-bitwise, no-parameter-reassignment
     }
-});
+});
+// tslint:enable: no-invalid-this

website/src/util.ts

@@ -0,0 +1,31 @@
+/*!
+ * Copyright (C) 2019  Zachary Kohnen
+ */
+
+export function zip<A, B>(arrayA: A[], arrayB: B[]) {
+    return arrayA.map((element, index) => {
+        return {
+            ...element,
+            ...arrayB[index]
+        };
+    });
+}
+
+interface IMapObject<V> {
+    [key: string]: V;
+}
+
+export function zipObject<V>(object: IMapObject<V>) {
+    let keys = Object.keys(object);
+
+    return keys.map((key) => {
+        return {
+            key,
+            value: object[key]
+        };
+    });
+}
+
+export function fuzzySearch(value: string, search: string) {
+    return value.toLowerCase().includes(search.toLowerCase());
+}

website/tsconfig.json

@@ -12,7 +12,7 @@
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
@@ -37,7 +37,7 @@
 
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "baseUrl": "",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */

website/webpack.config.js

@@ -10,14 +10,10 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.ts$/,
-                use: "ts-loader",
-                exclude: /node_modules/
-            },
-            {
-                test: /\.ts$/,
+                test: /\.tsx?$/,
                 enforce: "pre",
                 use: [
+                    { loader: "ts-loader" },
                     {
                         loader: 'tslint-loader',
                         options: {
@@ -33,9 +29,6 @@ module.exports = {
             }
         ]
     },
-    resolve: {
-        extensions: [".tsx", ".ts", ".js"]
-    },
     output: {
         filename: "[name].[hash].js",
         path: path.resolve(__dirname, "dist")
@@ -48,7 +41,7 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: "public/index.html"
         }),
-        new webpack.HotModuleReplacementPlugin()
+        // new webpack.HotModuleReplacementPlugin()
     ],
     devServer: {
         contentBase: "./dist",
@@ -58,6 +51,7 @@ module.exports = {
     resolve: {
         alias: {
             vue: "vue/dist/vue.js"
-        }
+        },
+        extensions: ['.tsx', '.ts', '.js']
     }
 };