Various improvements

- Add icons - Add viewing files
whsmc · Apr 9, 2019 · c884a1a · c884a1a
1 parent b28be16
commit c884a1a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 52 deletions.
diff --git a/website/public/index.html b/website/public/index.html
@@ -21,19 +21,25 @@
             <fieldset>
                 <label>Store Name:</label>
                 <input type="text" v-model="store.name">
-                <span v-html="coloredTitle" class="minecraft"></span>
+                <span v-html="parseColorCodesToHTML(store.name)" class="minecraft"></span>
             </fieldset>
-            <div class="submenus">
-                <details v-for="submenu of store.submenus">
-                    <summary>{{submenu.icon}} {{submenu.name}}</summary>
-                    {{submenu.description}}
-                    <details v-for="item of submenu.items" style="padding: 2px 10px">
-                        <summary>{{item.amount}}x {{item.material}} {{item.name}}</summary>
-                        Buy: &dollar;{{item.price}}
-                        sell: &dollar;{{item.sellprice}}
+            <fieldset>
+                <div class="submenus">
+                    <details v-for="submenu of store.submenus">
+                        <summary><img v-bind:src="getItemIcon(submenu.icon)" alt="getItemInfo(submenu.icon).name"> <span v-html="parseColorCodesToHTML(submenu.name)" class="minecraft"></span></summary>
+                        <fieldset>
+                            <span v-html="parseColorCodesToHTML(submenu.description)" class="minecraft"></span>
+                            <details v-for="item of submenu.items" style="padding: 2px 10px">
+                                <summary>{{item.amount}}x <img v-bind:src="getItemIcon(item.material)" alt="getItemInfo(item.material).name"> <span v-html="parseColorCodesToHTML(item.name)" class="minecraft"></span></summary>
+                                <fieldset>
+                                    Buy: &dollar;{{item.price}}
+                                    sell: &dollar;{{item.sellprice}}
+                                </fieldset>
+                            </details>
+                        </fieldset>
                     </details>
-                </details>
-            </div>
+                </div>
+            </fieldset>
 
             <button v-on:click="download">Download</button>
             <input type="file" id="fileupload" accept="application/json" hidden v-on:change="uploadfile($event)">

diff --git a/website/src/app.ts b/website/src/app.ts
@@ -5,33 +5,44 @@
 import JSON5 from "json5";
 import "normalize.css";
 import Vue from "vue";
+import items from "./items.json";
+import mccodes from "./mccodes.json";
 import "./styles.scss";
-import { fuzzySearch, getItemIcon, IMapObject, parseColorCodesToHTML, zipObject } from "./util";
+import { fuzzySearch, getItemIcon, getItemInfo, IMapObject, parseColorCodesToHTML, zipObject } from "./util";
 
 interface IStore {
     name: string;
     submenus: ISubmenu[];
 }
 
 interface ISubmenu {
-    icon: string;
+    icon: IMaterial;
     name: string;
     description: string;
     items: IItem[];
 }
 
 interface IItem {
-    material: string;
+    material: IMaterial;
     name: string;
     amount: number;
     price: number;
     sellprice: number;
 }
 
-(async () => {
-    const items = (await import(/* webpackPreload: true */ "./items.json")).default;
-    const mccodes = await import(/* webpackPreload: true */ "./mccodes.json");
+export interface IMaterial {
+    type: number;
+    meta: number;
+}
+
+export interface IMaterialInfo {
+    type: number;
+    meta: number;
+    name: string;
+    text_type: string;
+}
 
+(async () => {
     const colorsZipped = zipObject(mccodes.colors).map(x => ({
         code: x.key,
         ...x.value
@@ -43,24 +54,43 @@ interface IItem {
     }));
 
     let store: IStore = {
-        name: "&8Example &3Shop &4Name",
-        submenus: []
+        name: "&2Example &3Shop &4Name",
+        submenus: [
+            {
+                description: "&8This is an example description",
+                icon: {
+                    meta: 0,
+                    type: 40
+                },
+                items: [
+                    {
+                        amount: 10,
+                        material: {
+                            meta: 0,
+                            type: 10
+                        },
+                        name: "&cCool Exclusive Item",
+                        price: 1000,
+                        sellprice: 1
+                    }
+                ],
+                name: "&5Example Submenu"
+            }
+        ]
     };
 
     let vm = new Vue({
-        computed: {
-            coloredTitle() {
-                return parseColorCodesToHTML(this.store.name);
-            }
-        },
         data: {
             colors: colorsZipped,
-            items: await Promise.all(items.map(async x => getItemIcon(x.type, x.meta))),
+            items: await Promise.all(items.map(async x => getItemIcon(x as IMaterial))),
             store,
             styles: stylesZipped
         },
         el: "#app",
         methods: {
+            getItemIcon,
+            getItemInfo,
+            parseColorCodesToHTML,
             upload() {
                 let input = document.querySelector<HTMLInputElement>("#fileupload");
 
@@ -94,24 +124,15 @@ interface IItem {
                 }
             },
             download() {
-                const header =
-`/*
-* DO NOT EDIT THIS FILE
-*
-* This file was generated at ${new Date().toISOString()}
-*/
-
-`;
+                const header = `/*\n\n* DO NOT EDIT THIS FILE\n*\n* This file was generated at ${new Date().toISOString()}\n*/\n\n`;
 
                 let element = document.createElement("a");
                 element.setAttribute("href", `data:application/json;charset=utf-8,${encodeURIComponent(header)}${encodeURIComponent(JSON.stringify(this.store))}`);
                 element.setAttribute("download", "shop.json");
 
-                element.style.display = "none";
                 document.body.appendChild(element);
-
+                element.style.display = "none";
                 element.click();
-
                 document.body.removeChild(element);
             }
         }

diff --git a/website/src/icons.ts b/website/src/icons.ts
diff --git a/website/src/util.ts b/website/src/util.ts
@@ -2,6 +2,8 @@
  * Copyright (C) 2019  Zachary Kohnen
  */
 
+import { IMaterial, IMaterialInfo } from "./app.js";
+import items from "./items.json";
 import mccodes from "./mccodes.json";
 
 export function zip<A, B>(arrayA: A[], arrayB: B[]) {
@@ -89,9 +91,24 @@ export function parseColorCodesToHTML(stringcolorcodes: string): string {
     });
 }
 
+export const icons: IMapObject<string> = (() => {
+    let context = require.context("./items/", true, /\.png$/);
+
+    let obj: IMapObject<string> = {};
+
+    context.keys().map(key => obj[key] = context(key) as string);
+
+    return obj;
+})();
+
 /** Get the icon item through webpack */
-export async function getItemIcon(id: number, meta: number = 0) {
-    let { icons } = await import("./icons");
+export function getItemIcon(material: IMaterial) {
+    return icons[`./${material.type}-${material.meta}.png`];
+}
+
+const itemlist = items as IMaterialInfo[];
 
-    return icons[`./${id}-${meta}.png`];
+/** Get the icon item through webpack */
+export function getItemInfo(material: IMaterial) {
+    return items.find(x => x.type === material.type && x.meta === material.type);
 }