Code cleanup and added save option in-program

.gitignore

@@ -1 +1,3 @@
 node_modules/
+assets/skins/download/*
+assets/skins/edit/*

assets/data.json

@@ -0,0 +1 @@
+{"theme":"light","user":"arne.v.iterson@hotmail.nl","password":"","session":"","skinDefault":"http://assets.mojang.com/SkinTemplates/steve.png"}

css/index.css

@@ -57,8 +57,8 @@ body div.content .message.warning {
 }
 
 body div.content .message.success {
-  border: 1px solid green;
+  border: 1px solid limegreen;
-  background: rgba(0, 255, 0, 0.5);
+  background: rgba(50, 205, 50, 0.5);
 }
 
 body div.content div.left {
@@ -73,6 +73,11 @@ body div.content div.right {
   grid-area: right;
 }
 
+body div.content div.right div#list canvas {
+  cursor: pointer;
+  padding: 0 2px 0 2px;
+}
+
 body div.content img.skin {
   width: 60%;
   padding: 0 1em 1em 1em;

css/index.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,4BAA4B;EACzC,UAAU,EAAE,MAAM;CA+ErB;;AAjFD,AAIQ,IAJJ,CAGA,MAAM,CACF,EAAE,CAAC;EACC,aAAa,EAAE,CAAC;CACnB;;AANT,AAOQ,IAPJ,CAGA,MAAM,CAIF,EAAE,CAAC;EACC,MAAM,EAAE,CAAC;CACZ;;AATT,AAWI,IAXA,CAWA,GAAG,AAAA,QAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,OAAO;EAC9B,mBAAmB,EACf,+BAEJ;EACA,KAAK,EAAE,IAAI;CA6Cd;;AA/DL,AAoBY,IApBR,CAWA,GAAG,AAAA,QAAQ,CAQP,IAAI,CACA,KAAK,CAAC;EACF,SAAS,EAAE,KAAK;CACnB;;AAtBb,AAwBQ,IAxBJ,CAWA,GAAG,AAAA,QAAQ,CAaP,KAAK,EAxBb,IAAI,CAWA,GAAG,AAAA,QAAQ,CAaA,MAAM,CAAC;EACV,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,MAAM;CAClB;;AA3BT,AA4BQ,IA5BJ,CAWA,GAAG,AAAA,QAAQ,CAiBP,MAAM,CAAC;EACH,KAAK,EAAE,GAAG;CACb;;AA9BT,AA+BQ,IA/BJ,CAWA,GAAG,AAAA,QAAQ,CAoBP,QAAQ,CAAC;EACL,SAAS,EAAE,OAAO;EAClB,KAAK,EAAE,iBAAiB;EACxB,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,iBAAiB;EAC1B,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;CAaf;;AAnDT,AAuCY,IAvCR,CAWA,GAAG,AAAA,QAAQ,CAoBP,QAAQ,AAQH,KAAK,CAAC;EACH,MAAM,EAAE,cAAc;EACtB,UAAU,EAAE,oBAAoB;CACnC;;AA1Cb,AA2CY,IA3CR,CAWA,GAAG,AAAA,QAAQ,CAoBP,QAAQ,AAYH,QAAQ,CAAC;EACN,MAAM,EAAE,aAAa;EACrB,UAAU,EAAE,oBAAoB;CACnC;;AA9Cb,AA+CY,IA/CR,CAWA,GAAG,AAAA,QAAQ,CAoBP,QAAQ,AAgBH,QAAQ,CAAC;EACN,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,oBAAoB;CACnC;;AAlDb,AAoDQ,IApDJ,CAWA,GAAG,AAAA,QAAQ,CAyCP,GAAG,AAAA,KAAK,CAAC;EACL,SAAS,EAAE,IAAI;CAClB;;AAtDT,AAuDQ,IAvDJ,CAWA,GAAG,AAAA,QAAQ,CA4CP,GAAG,AAAA,MAAM,CAAC;EACN,SAAS,EAAE,KAAK;CACnB;;AAzDT,AA0DQ,IA1DJ,CAWA,GAAG,AAAA,QAAQ,CA+CP,GAAG,AAAA,KAAK,CAAC;EACL,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,aAAa;EACtB,eAAe,EAAE,SAAS;CAC7B;;AA9DT,AAgEI,IAhEA,AAgEC,KAAK,CAAC;EACH,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,IAAI;CACzB;;AAnEL,AAoEI,IApEA,AAoEC,MAAM,CAAC;EACJ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;CACnB;;AAvEL,AAwEI,IAxEA,CAwEA,MAAM,CAAC;EACH,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,UAAU,EAAE,MAAM;CACrB",
+    "mappings": "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",
     "sources": [
         "index.scss"
     ],

css/index.scss

@@ -46,8 +46,8 @@ body {
                 background: rgba(255, 0, 0, 0.5);
             }
             &.success {
-                border: 1px solid green;
+                border: 1px solid limegreen;
-                background: rgba(0, 255, 0, 0.5);
+                background: rgba(50, 205, 50, 0.5);
             }
         }
         div.left {
@@ -55,6 +55,12 @@ body {
         }
         div.right {
             grid-area: right;
+            div#list {
+                canvas {
+                    cursor: pointer;
+                    padding: 0 2px 0 2px;
+                }
+            }
         }
         img.skin {
             width: 60%;

data/data.json

@@ -1 +0,0 @@
-{"theme":"dark","user":"arne.v.iterson@hotmail.nl","password":"","skinDefault":"http://assets.mojang.com/SkinTemplates/steve.png"}

data/skins/in.png

@@ -1 +0,0 @@
-Unable to open this file -- only text documents are supported

html/main.hbs

@@ -30,6 +30,7 @@
             <button id="current">Current Skin</button><br>
             <button id="upload">Upload Skin</button><br>
             <button id="random">Random Skin</button><br>
+            <button id="gallery">Saved skins</button><br>
             <button id="logout">Logout</button>
         </div>
     </div>

html/skin_current.hbs

@@ -14,7 +14,7 @@
         <h3>Current Skin</h3>
     </header>
 
-    <div class="content">
+    <div class="content" id="current">
         <p class="message"></p>
 
         <div class="left">
@@ -24,7 +24,9 @@
         </div>
 
         <div class="right">
+            <button id="edit">Edit</button>
             <button id="download">Download</button>
+            <button id="save">Save</button>
             <button id="main">Back</button>
         </div>
     </div>

html/skin_edit.hbs

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <link rel="stylesheet" href="{{ css }}">
+</head>
+
+<body class="{{ theme }}">
+    <header>
+        <h1>{{ header }}</h1>
+        <h3>Edit Skin</h3>
+    </header>
+
+    <div class="content" id="edit">
+        <p class="message"></p>
+
+        <div class="left">
+            <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
+            <div id="mesh" style="display: inline;"></div>
+            <button id="switch" style="display: none;">Switch to 2D</button>
+        </div>
+
+        <div class="right">
+            <button id="set">Use this skin</button>
+            <button id="download">Download</button>
+            <button id="main">Back</button>
+        </div>
+    </div>
+
+    <script src="../src/skin.js"></script>
+
+    <footer>
+        {{ footer }}
+    </footer>
+</body>
+
+</html>

html/skin_gallery.hbs

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <link rel="stylesheet" href="{{ css }}">
+</head>
+
+<body class="{{ theme }}">
+    <header>
+        <h1>{{ header }}</h1>
+        <h3>Saved skins</h3>
+    </header>
+
+    <div class="content" id="gallery">
+        <p class="message"></p>
+
+        <div class="left">
+            <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
+            <div id="mesh" style="display: inline;"></div>
+            <button id="switch" style="display: none;">Switch to 2D</button>
+        </div>
+
+        <div class="right">
+            <div id="list">
+
+            </div>
+            <button id="set">Use this skin</button>
+            <button id="delete">Delete</button>
+            <button id="main">Back</button>
+        </div>
+    </div>
+
+    <script src="../src/skin.js"></script>
+
+    <footer>
+        {{ footer }}
+    </footer>
+</body>
+
+</html>

html/skin_random.hbs

@@ -27,6 +27,7 @@
             <button id="random">Random</button>
             <button id="set">Use this skin</button>
             <button id="download">Download</button>
+            <button id="save">Save</button>
             <button id="main">Back</button>
         </div>
     </div>

html/skin_upload.hbs

@@ -14,7 +14,7 @@
         <h3>Upload Skin</h3>
     </header>
 
-    <div class="content" id="current">
+    <div class="content" id="upload">
         <p class="message"></p>
 
         <div class="left">

main.js

@@ -5,7 +5,11 @@ const path = require("path");
 
 if (process.env.NODE_ENV === "dev") {
   require("electron-reload")(__dirname, {
-    electron: path.join(__dirname, "node_modules", ".bin", "electron")
+    electron: path.join(__dirname, "node_modules", ".bin", "electron"),
+    ignored: [
+      /node_modules|[/\\]\./,
+      /assets\/skins|[/\\]\./
+    ]
   });
 }
 
@@ -30,7 +34,7 @@ function createWindow () {
 }
 
 // Load previous credentials and settings
-var authData = JSON.parse(fs.readFileSync("./data/data.json"));
+var authData = JSON.parse(fs.readFileSync("./assets/data.json"));
 
 // Define handlebars with loaded settings
 require("electron-handlebars")({
@@ -43,14 +47,14 @@ require("electron-handlebars")({
 
 // Respond to renderer requests
 ipcMain.on("getAuth", (event) => {
-  authData = JSON.parse(fs.readFileSync("./data/data.json"));
+  authData = JSON.parse(fs.readFileSync("./assets/data.json"));
   event.returnValue = authData;
 });
 
 ipcMain.on("setAuth", (event, data) => {
-  authData = JSON.parse(fs.readFileSync("./data/data.json"));
+  authData = JSON.parse(fs.readFileSync("./assets/data.json"));
   if (data != authData) {
-    fs.writeFileSync("./data/data.json", JSON.stringify(data));
+    fs.writeFileSync("./assets/data.json", JSON.stringify(data));
   }
   event.returnValue = true;
 });

package-lock.json

@@ -1944,6 +1944,11 @@
         "escape-string-regexp": "^2.0.0"
       }
     },
+    "merge-images": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-images/-/merge-images-2.0.0.tgz",
+      "integrity": "sha512-bpI4j54n/Zl6ZTgxaR3xWou/lqI53RAAt8peXijW37BKqoON83LQ7XCZqtFiwzBfEXIws1isYyR06584yffAyA=="
+    },
     "mime": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",

package.json

@@ -24,6 +24,7 @@
     "electron-handlebars": "^2.0.0",
     "electron-reload": "^1.5.0",
     "eslint": "^7.0.0",
+    "merge-images": "^2.0.0",
     "pngjs": "^5.0.0",
     "skinview3d": "^2.0.0-alpha.1",
     "three": "^0.116.1"

src/main.js

@@ -1,14 +1,10 @@
 /* eslint-disable no-unused-vars */
 const { ipcRenderer, remote } = require("electron");
-const axios = require("axios").default;
 const path = require("path");
 
 const session = ipcRenderer.sendSync("getSession");
 if (!session.accessToken) {
-  console.log("Session does not exist, return to auth");
   remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/auth.hbs`));
-} else {
-  console.log("Session does exist, continue");
 }
 
 const msg = document.querySelectorAll("div.content > p.message")[0];
@@ -16,22 +12,22 @@ msg.classList.add("success");
 msg.innerHTML = `Logged in as ${session.selectedProfile.name}`;
 
 document.querySelectorAll("div.content > div.right > button#current")[0].addEventListener("click", (e) => {
-  console.log("Clicked current button");
   remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_current.hbs`));
 });
 
 document.querySelectorAll("div.content > div.right > button#upload")[0].addEventListener("click", (e) => {
-  console.log("Clicked upload button");
   remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_upload.hbs`));
 });
 
 document.querySelectorAll("div.content > div.right > button#random")[0].addEventListener("click", (e) => {
-  console.log("Clicked random button");
   remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_random.hbs`));
 });
 
+document.querySelectorAll("div.content > div.right > button#gallery")[0].addEventListener("click", (e) => {
+  remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_gallery.hbs`));
+});
+
 document.querySelectorAll("div.content > div.right > button#logout")[0].addEventListener("click", (e) => {
-  console.log("Clicked logout button");
   if (ipcRenderer.sendSync("setSession", {})) {
     var authData = ipcRenderer.sendSync("getAuth");
     authData.password = "";

src/skin.js

@@ -6,7 +6,7 @@ const {
 } = require("electron");
 const axios = require("axios").default;
 const path = require("path");
-
+const fs = require("fs");
 const skinview3d = require("skinview3d/dist/skinview3d.min.js");
 
 const session = ipcRenderer.sendSync("getSession");
@@ -24,54 +24,89 @@ var parser = new DOMParser();
 var randomUrls = [];
 
 // Switch button and views
-var btn = document.querySelectorAll("div.content > div.left > button#switch")[0];
+var button = {
+  switch: document.querySelectorAll("div.left > button#switch"),
+  edit: document.querySelectorAll("div.right > button#edit"),
+  random: document.querySelectorAll("div.right > button#random"),
+  save: document.querySelectorAll("div.right > button#save"),
+  download: document.querySelectorAll("div.right > button#download"),
+  main: document.querySelectorAll("div.right > button#main"),
+  set: document.querySelectorAll("div.right > button#set")
+};
+var message = document.querySelectorAll("div.content > p.message")[0];
+var list = document.querySelectorAll("div.right > div#list")[0];
 var view = {
-  flat: document.querySelectorAll("div.content > div.left > img.skin#flat")[0],
+  flat: document.querySelectorAll("div.left > img.skin#flat")[0],
-  mesh: document.querySelectorAll("div.content > div.left > div#mesh")[0]
+  mesh: document.querySelectorAll("div.left > div#mesh")[0]
 };
 
-function setView(url, controls = true) {
+var skin = new skinview3d.SkinViewer({
-  btn.style.display = "initial";
-  view.flat.src = url;
-
-  view.mesh.innerHTML = "";
-
-  // Set mesh view
-  let skinViewer = new skinview3d.SkinViewer({
   domElement: view.mesh,
   width: 300,
-    height: 250,
+  height: 250
-    skinUrl: url
 });
 
-  let control = skinview3d.createOrbitControls(skinViewer);
+var control = skinview3d.createOrbitControls(skin);
-  control.enableRotate = controls;
+control.enableRotate = true;
 control.enableZoom = false;
 control.enablePan = false;
+
+function setView(url, controls = true) {
+  button.switch[0].style.display = "initial";
+
+  view.flat.src = url;
+  skin.skinUrl = url;
+  control.enableRotate = controls;
 }
 
+// Switch button action
+button.switch[0].addEventListener("click", (e) => {
+  if (view.flat.style.display == "inline") {
+    view.flat.style.display = "none";
+    view.mesh.style.display = "inline";
+    button.switch[0].innerHTML = "Switch to 2D";
+  } else {
+    view.flat.style.display = "inline";
+    view.mesh.style.display = "none";
+    button.switch[0].innerHTML = "Switch to 3D";
+  }
+});
+
+
 switch (action) {
+
 case "current":
   axios({
     method: "GET",
     url: "https://sessionserver.mojang.com/session/minecraft/profile/" + session.selectedProfile.id
   }).then((data) => {
     setView(JSON.parse(atob(data.data.properties[0].value)).textures.SKIN.url);
+
+    button.edit[0].addEventListener("click", (e) => {
+      remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_edit.hbs`));
+    });
   });
   break;
+
 case "upload":
-  document.querySelectorAll("div.content > div.right > button").forEach(element => {
+  console.log(window);
+
+  var buttons = document.querySelectorAll("div.right > button");
+  buttons.forEach(element => {
+    if (element.id != "main") {
       element.addEventListener("click", (e) => {
-      document.querySelectorAll("div.content > div.right > button").forEach(button => {
+        buttons.forEach(btn => {
-        if (button.id != "main") {
+          if (btn.id != "main") {
-          button.style.display = "none";
+            btn.style.display = "none";
           }
         });
-      document.querySelectorAll(`div.content > div.right > form#${element.id}`)[0].style.display = "block";
+        document.querySelectorAll(`div.right > form#${element.id}`)[0].style.display = "block";
       });
+    }
   });
 
   break;
+
 case "random":
   axios({
     method: "GET",
@@ -101,16 +136,92 @@ case "random":
 
     random();
 
-    document.querySelectorAll("div.content > div.right > button#random")[0].addEventListener("click", (e) => {
+    button.random[0].addEventListener("click", (e) => {
       random();
     });
   });
 
   break;
+
+case "edit":
+  axios({
+    method: "GET",
+    url: "https://sessionserver.mojang.com/session/minecraft/profile/" + session.selectedProfile.id
+  }).then((data) => {
+    const url = JSON.parse(atob(data.data.properties[0].value)).textures.SKIN.url;
+    setView(url);
+
+    axios({
+      method: "get",
+      url: url,
+      responseType: "stream",
+      adapter: require("axios/lib/adapters/http")
+    }).then((res) => {
+      res.data.pipe(fs.createWriteStream(path.join(__dirname + "/../assets/skins/edit/in.png")));
+    });
+  });
+  break;
+
+case "gallery":
+  fs.readdir(path.join(__dirname + "/../assets/skins/download/"), (err, files) => {
+    files.forEach(file => {
+      var ctx = document.createElement("canvas");
+      ctx.width = 32;
+      ctx.height = 32;
+      var canvas = ctx.getContext("2d");
+
+      canvas["imageSmoothingEnabled"] = false;       /* standard */
+      canvas["mozImageSmoothingEnabled"] = false;    /* Firefox */
+      canvas["oImageSmoothingEnabled"] = false;      /* Opera */
+      canvas["webkitImageSmoothingEnabled"] = false; /* Safari */
+      canvas["msImageSmoothingEnabled"] = false;     /* IE */
+  
+      var img = new Image();
+      img.onload = function() {
+        canvas.drawImage(img, 8, 8, 8, 8, 0, 0, 32, 32);
+      };
+      img.src = "data:image/png;base64," + fs.readFileSync(path.join(__dirname + "/../assets/skins/download/" + file), {encoding: "base64"});
+
+      ctx.addEventListener("click", (e) => {
+        setView(img.src);
+      });
+
+      list.appendChild(ctx);
+    });
+  });
+  break;
+}
+
+// Set button action
+if (button.set.length > 0) {
+  button.set[0].addEventListener("click", (e) => {
+    remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/skin_upload.hbs?url=test`));
+  });
+}
+
+// Save button action
+if (button.save.length > 0) {
+  button.save[0].addEventListener("click", (e) => {
+    axios({
+      method: "get",
+      url: view.flat.src,
+      responseType: "stream",
+      adapter: require("axios/lib/adapters/http")
+    }).then((res) => {
+      var p = res.request.path.split("/")[2];
+      if (p.split(".").length < 2) {
+        p = p + ".png";
+      }
+      res.data.pipe(fs.createWriteStream(path.join(__dirname + `/../assets/skins/download/${p}`)));
+      message.classList.add("success");
+      message.innerHTML = "Saved successfully";
+    });
+  });
 }
 
 // Download button action
-document.querySelectorAll("div.content > div.right > button#download")[0].addEventListener("click", (e) => {
+if (button.download.length > 0) {
+  button.download[0].addEventListener("click", (e) => {
     ipcRenderer.send("download", {
       url: view.flat.src,
       properties: {
@@ -119,27 +230,13 @@ document.querySelectorAll("div.content > div.right > button#download")[0].addEve
     });
 
     ipcRenderer.on("downloadResult", (event, arg) => {
-    var msg = document.querySelectorAll("div.content > p.message")[0];
+      message.classList.add("success");
-    console.log(msg);
+      message.innerHTML = "Downloaded successfully";
-    msg.classList.add("success");
-    msg.innerHTML = "Downloaded successfully";
     });
   });
-
-// Switch button action
-btn.addEventListener("click", (e) => {
-  if (view.flat.style.display == "inline") {
-    view.flat.style.display = "none";
-    view.mesh.style.display = "inline";
-    btn.innerHTML = "Switch to 2D";
-  } else {
-    view.flat.style.display = "inline";
-    view.mesh.style.display = "none";
-    btn.innerHTML = "Switch to 3D";
 }
-});
 
 // Back button action
-document.querySelectorAll("div.content > div.right > button#main")[0].addEventListener("click", (e) => {
+button.main[0].addEventListener("click", (e) => {
   remote.getCurrentWindow().loadURL(path.join(`file://${__dirname}/main.hbs`));
 });