Minor changes

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 assets/skins/download/*
 assets/skins/edit/*
-old/
+old/
+dist/

html/layout.html

@@ -17,7 +17,7 @@
         </ul>
         <ul>
             <li><a href="/partials/profile.html">Profile</a></li>
-            <li><a href="/partials/change.html">Change</a></li>
+            <li><a href="/partials/upload.html">Upload</a></li>
             <li><a href="/partials/random.html">Random</a></li>
             <li><a href="/partials/gallery.html">Saved</a></li>
             <li><a href="/partials/settings.html">Settings</a></li>

html/partials/change.html

@@ -1,58 +0,0 @@
-<h1 class="title">Change skin</h1>
-<div class="columns is-mobile">
-    <div class="column">
-        <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
-        <div id="mesh" style="display: inline;"></div>
-        <button class="button" id="switch" style="display: none;">Switch to 2D</button>
-    </div>
-    <div class="column">
-        <article class="message is-info">
-            <div class="message-body">
-                    Your existing skin will be overwritten, be sure to make a backup
-            </div>
-        </article>
-
-        <div class="buttons has-addons">
-            <button class="button" id="remote">Fetch from URL</button>
-            <button class="button" id="local">Upload file</button>
-        </div>
-
-        <form action="#" id="remote" style="display: none;">
-            <div class="field">
-                <input class="input" type="text" id="url" placeholder="URL">
-            </div>
-            <div class="field">
-                <button class="button" type="submit">Submit</button>
-            </div>
-        </form>
-        <form action="#" id="local" style="display: none;">
-            <div class="field">
-                <div class="file has-name">
-                    <label class="file-label">
-                        <input class="file-input" type="file" name="resume">
-                        <span class="file-cta">
-                            <span class="file-icon">
-                                <i class="fas fa-upload"></i>
-                            </span>
-                            <span class="file-label">
-                                Choose a file…
-                            </span>
-                        </span>
-                        <span class="file-name"></span>
-                    </label>
-                </div>
-            </div>
-            <div class="field">
-                <button class="button" type="submit">Submit</button>
-            </div>
-        </form>
-    </div>
-</div>
-
-<script>
-    $("button#remote, button#local").on("click", (e) => {
-        const id = e.target.id;
-        $("button#remote, button#local").css("display", "none");
-        $(`form#${id}`).css("display", "initial");
-    });
-</script>

html/partials/edit.html

@@ -2,7 +2,7 @@
 <div class="columns is-mobile">
     <div class="column">
         <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
-        <div id="mesh" style="display: inline;"></div>
+        <div id="mesh"></div>
         <button class="button" id="switch" style="display: none;">Switch to 2D</button>
     </div>
     <div class="column">

html/partials/gallery.html

@@ -2,7 +2,7 @@
 <div class="columns is-mobile">
     <div class="column">
         <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
-        <div id="mesh" style="display: inline;"></div>
+        <div id="mesh"></div>
     </div>
     <div class="column">
         <div class="box">
@@ -22,6 +22,9 @@
 <script src="../src/skin.js"></script>
 
 <script>
+    var fileid = 0;
+    var current = 0;
+
     fs.readdir(path.join(__dirname + "/../assets/skins/download/"), (err, files) => {
         files.forEach(file => {
             var ctx = document.createElement("canvas");
@@ -48,9 +51,35 @@
 
             ctx.addEventListener("click", (e) => {
                 setView(img.src);
+                current = $(ctx).attr("data-fileid")
             });
 
+            $(ctx).attr("data-fileid", fileid);
+
+            if (fileid == 0) {
+                setView(img.src);
+                current = $(ctx).attr("data-fileid")
+            };
+            
+            fileid++;
+
             list.appendChild(ctx);
         });
+
+        $("button#set").on("click", (e) => {
+            settings.set = view.flat.src;
+            load("/partials/upload.html");
+        });
+
+        $("button#delete").on("click", () => {
+            fs.unlink(path.join(__dirname + "/../assets/skins/download/" + files[current]), (err, res) => {
+                if (err) {
+                    notify("danger", "Something went wrong: " + err)
+                } else {
+                    notify("warning", "Skin has been deleted");
+                    load("/partials/gallery.html");
+                }
+            });
+        });
     });
 </script>

html/partials/profile.html

@@ -2,8 +2,7 @@
 <div class="columns is-mobile">
     <div class="column">
         <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
-        <div id="mesh" style="display: inline;"></div>
-        
+        <div id="mesh"></div>
     </div>
     <div class="column">
         <article class="message is-info">

html/partials/random.html

@@ -2,7 +2,7 @@
 <div class="columns is-mobile">
     <div class="column">
         <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
-        <div id="mesh" style="display: inline;"></div>
+        <div id="mesh"></div>
     </div>
     <div class="column">
         <article class="message is-warning">
@@ -57,8 +57,22 @@
 
         random();
 
-        $("button#random")[0].addEventListener("click", (e) => {
+        $("button#random").on("click", (e) => {
             random();
         });
+
+        $("button#set").on("click", (e) => {
+            axios({
+                method: "get",
+                url: view.flat.src,
+                responseType: "arraybuffer",
+                adapter: require("axios/lib/adapters/http")
+            }).then((res) => {
+                settings.set = "data:image/png;base64," + res.data.toString("base64");
+                load("/partials/upload.html");
+            }).catch((err) => {
+                notify("danger", "Something went wrong: " + err)
+            }); 
+        });
     });
 </script>

html/partials/upload.html

@@ -0,0 +1,132 @@
+<h1 class="title">Upload skin</h1>
+<div class="columns is-mobile">
+    <div class="column">
+        <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
+        <div id="mesh"></div>
+    </div>
+    <div class="column">
+        <article class="message is-info">
+            <div class="message-body">
+                Your existing skin will be overwritten, be sure to make a backup
+            </div>
+        </article>
+
+        <div class="buttons has-addons">
+            <button class="button" id="remote">Fetch URL</button>
+            <button class="button" id="local">Upload file</button>
+        </div>
+
+        <div class="field">
+            <form action="#" id="remote" style="display: none;">
+                <span class="has-text-weight-semibold">Fetch URL</span><br>
+                <div class="field">
+                    <input class="input" type="text" name="skin" placeholder="URL">
+                </div>
+                <div class="field">
+                    <button class="button" type="submit">Submit</button>
+
+                </div>
+            </form>
+
+            <form action="#" id="local" style="display: none;">
+                <span class="has-text-weight-semibold">Upload</span><br>
+                <div class="field">
+                    <div class="file has-name">
+                        <label class="file-label">
+                            <input class="file-input" type="file" id="file" name="skin">
+                            <span class="file-cta">
+                                <span class="file-icon">
+                                    <i class="fas fa-upload"></i>
+                                </span>
+                                <span class="file-label">
+                                    Choose file
+                                </span>
+                            </span>
+                            <span class="file-name"></span>
+                        </label>
+                    </div>
+                </div>
+                <div class="field">
+                    <button class="button" type="submit">Submit</button>
+                </div>
+            </form>
+
+            <form action="#" id="confirm" style="display: none;">
+                <div class="buttons has-addons">
+                    <button class="button" id="use">Use</button>
+                    <button class="button" id="save">Save</button>
+                </div>
+            </form>
+        </div>
+
+        <div class="field">
+            <div class="buttons">
+                <button class="button" id="switch" style="display: none;">Switch to 2D</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="../src/skin.js"></script>
+
+<script>
+    function select(url) {
+        $("form").each((i, e) => {
+            console.log(e);
+            $(e).css("display", "none");
+        });
+        $("button#remote, button#local").parent().css("display", "none");
+        $("form#confirm").css("display", "initial");
+
+        setView(url);
+    }
+
+    $("button#remote, button#local").on("click", (e) => {
+        const id = e.target.id;
+        $("button#remote, button#local").parent().css("display", "none");
+        $(`form#${id}`).css("display", "initial");
+    });
+
+    $("input#file").on("change", (e) => {
+        $("span.file-name").html($("input#file")[0].files[0].name);
+    });
+
+    $("button[type='submit']").each((i, e) => {
+        $(e).on("click", (event) => {
+            event.preventDefault();
+
+            var input = $(e.form.elements["skin"])[0];
+            switch (input.type) {
+                case "file":
+                    fs.readFile($(input)[0].files[0].path, (err, res) => {
+                        if (err) {
+                            notify("danger", "Something went wrong: " + err)
+                        }
+                        select("data:image/png;base64," + res.toString("base64"))
+                    })
+                    break;
+                case "text":
+                    axios({
+                        method: "get",
+                        url: $(input)[0].value,
+                        responseType: "arraybuffer",
+                        adapter: require("axios/lib/adapters/http")
+                    }).then((res) => {
+                        select("data:image/png;base64," + res.data.toString("base64"));
+                    }).catch((err) => {
+                        notify("danger", "Something went wrong: " + err)
+                    });
+                    break;
+            }
+        })
+    });
+
+    $("button#use").on("click", (e) => {
+        console.log(view.flat.src);
+    });
+
+    if (settings.set != undefined) {
+        select(settings.set);
+        settings.set = undefined;
+    }
+</script>

package.json

@@ -21,11 +21,7 @@
     "bulma": "^0.9.0",
     "bulmaswatch": "^0.8.1",
     "cross-env": "^7.0.2",
-    "electron": "^8.2.5",
-    "electron-builder": "^22.6.0",
     "electron-dl": "^3.0.0",
-    "electron-handlebars": "^2.0.0",
-    "electron-reload": "^1.5.0",
     "eslint": "^7.0.0",
     "jquery": "^3.5.1",
     "merge-images": "^2.0.0",
@@ -35,7 +31,11 @@
     "three": "^0.116.1",
     "uuid": "^8.2.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "electron": "^8.2.5",
+    "electron-builder": "^22.6.0",
+    "electron-reload": "^1.5.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://gitea.arnweb.nl/Hecc-inc./skinswitcher.git"

sass/index.css

@@ -14,6 +14,15 @@ div#notification-area {
   right: 1em;
 }
 
+div#mesh {
+  display: inline;
+}
+
+span.file-name {
+  max-width: 11.5em;
+  min-width: 11.5em;
+}
+
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
 @-webkit-keyframes spinAround {
   from {

sass/index.scss

@@ -8,4 +8,13 @@ div#notification-area {
     width: calc(50% - 1em);
     bottom: 1em;
     right: 1em;
+}
+
+div#mesh {
+    display: inline;
+}
+
+span.file-name {
+    max-width: 11.5em;
+    min-width: 11.5em;
 }

src/skin.js

@@ -28,6 +28,9 @@ function setView(src, controls = true) {
     control.enableRotate = controls;
 }
 
+var skinDefault = "data:image/png;base64," + fs.readFileSync(path.join(__dirname + "/../assets/skins/dummy.png"), "base64");
+setView(skinDefault);
+
 button.switch.addEventListener("click", () => {
     if (view.flat.style.display == "inline") {
         view.flat.style.display = "none";
@@ -40,8 +43,9 @@ button.switch.addEventListener("click", () => {
     }
 });
 
-if (button.download && button.save) {
-    button.download.addEventListener("click", () => {
+if (button.download) {
+    button.download.addEventListener("click", (e) => {
+        e.preventDefault();
         ipcRenderer.send("download", {
             url: view.flat.src,
             properties: {
@@ -53,7 +57,12 @@ if (button.download && button.save) {
             notify("success", "Download successful.");
         });
     });
-    button.save.addEventListener("click", () => {
+}
+
+if (button.save) {
+    button.save.addEventListener("click", (e) => {
+        e.preventDefault();
+        
         const src = view.flat.src;
         const r = new RegExp(/^data:image\/png;base64,/);
 
@@ -84,9 +93,4 @@ if (button.download && button.save) {
             });
         }
     });
-}
-
-fs.readFile(path.join(__dirname + "/../assets/skins/dummy.png"), "base64", (err, data) => {
-    if (err) throw err;
-    setView("data:image/png;base64," + data);
-});
+}