Hecc-inc.
/
skinswitcher
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Minor changes

This commit is contained in:
Arne van Iterson 2021-09-06 19:40:51 +02:00
parent e91c3ac6d8
commit d62f708508
14 changed files with 220 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

BIN
assets/Skinswitcher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

2
html/layout.html
View File

@ -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>

58
html/partials/change.html
View File

@ -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>

2
html/partials/edit.html
View File

@ -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">

31
html/partials/gallery.html
View File

@ -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>

3
html/partials/profile.html
View File

@ -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">

18
html/partials/random.html
View File

@ -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>

132
html/partials/upload.html Normal file
View File

@ -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>

10
package.json
View File

@ -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"

9
sass/index.css
View File

@ -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 {

2
sass/index.css.map
View File

File diff suppressed because one or more lines are too long

9
sass/index.scss
View File

@ -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;
}

22
src/skin.js
View File

@ -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);
});
}