Skip to content

Commit 6a14a15

Browse files
nera-wnera-w
committed
Updated Pack Combiner ui
1 parent 298a90c commit 6a14a15

File tree

4 files changed

+94
-73
lines changed

4 files changed

+94
-73
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎mcmetahelp.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717
#header {
1818
font: 32px mcfont, sans-serif;
19-
text-shadow: 4px 4px black;
19+
text-shadow: 2px 2px black;
2020
}
2121
.hidden {
2222
display:none;
@@ -27,7 +27,7 @@
2727
width:100%;
2828
margin-bottom:10px;
2929
font: 16px mcfont, sans-serif;
30-
text-shadow: 4px 4px black;
30+
text-shadow: 2px 2px black;
3131
box-sizing: border-box;
3232
}
3333
input, select {

‎packcombiner.html‎

Lines changed: 91 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,36 @@
1616

1717
<link rel="icon" href="neralogo.png">
1818
<style>
19+
@font-face {
20+
font-family: mcfont;
21+
src: url(mcfont.ttf);
22+
}
23+
input, select, button {
24+
padding:4px;
25+
color:white;
26+
width:100%;
27+
margin-bottom:10px;
28+
font: 16px mcfont, sans-serif;
29+
text-shadow: 2px 2px black;
30+
box-sizing: border-box;
31+
}
32+
input, select {
33+
background-color:black;
34+
border:1px solid white;
35+
outline:0;
36+
}
37+
button, select {
38+
cursor:pointer;
39+
}
40+
button {
41+
background-color:#6B6B6B;
42+
outline:4px solid black;
43+
border-top: 4px solid #AAAAAA;
44+
border-left: 4px solid #AAAAAA;
45+
border-bottom: 4px solid #535353;
46+
border-right: 4px solid #535353;
47+
padding:0 auto;
48+
}
1949
body{
2050
background-image:url(bg32.png);
2151
image-rendering:pixelated;
@@ -54,6 +84,7 @@
5484
align-items:center;
5585
}
5686
.onepack{
87+
font: 16px mcfont, sans-serif;
5788
cursor:grab;
5889
}
5990
.packicon{
@@ -62,35 +93,9 @@
6293
width:calc(14vh - 10px);
6394
padding:5px;
6495
}
65-
#fakebutton{
66-
width:calc(100% - 30px);
67-
margin:15px;
68-
cursor:pointer;
69-
}
70-
#newnameinput {
71-
background-color:black;
72-
border:1px solid white;
73-
padding:2px;
74-
outline:0;
75-
color:white;
76-
width:calc(100% - 6px);
77-
float:left;
78-
}
79-
#downloadbutton, #newiconbutton, #versioninput{
80-
background-color:white;
81-
border:1px solid black;
82-
padding:2px;
83-
outline:0;
84-
color:black;
85-
width:100%;
86-
float:left;
87-
}
8896
#newpacktext{
8997
width:calc(34vw - 14vh - 5px);
9098
}
91-
input[type=button]{
92-
cursor:pointer;
93-
}
9499
.hidden{
95100
display:none;
96101
}
@@ -113,6 +118,14 @@
113118
top:15px;
114119
left:15px;
115120
}
121+
#arrow {
122+
font: 90px mcfont, sans-serif;
123+
color: white;
124+
position: fixed;
125+
left: 50vw;
126+
top: 50vh;
127+
transform: translate(-50%, -50%);
128+
}
116129
</style>
117130
<!-- Google tag (gtag.js) -->
118131
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5DJPSM88KS"></script>
@@ -130,12 +143,13 @@
130143
<input type="file" id="newiconupload" class="hidden" onchange="newIcon(event.target.files[0])">
131144
<div class="half">
132145
<div id="packholder">
133-
<input type="button" id="fakebutton" onclick="$('packupload').click()" value="Upload Packs">
146+
<button id="fakebutton" onclick="$('packupload').click()">Upload Packs</button>
134147
<div id="uploadedholder">
135148

136149
</div>
137150
</div>
138151
</div>
152+
<div id="arrow">→</div>
139153
<div class="half">
140154
<div id="downloadholder">
141155
<div id="newpack">
@@ -146,8 +160,8 @@
146160
<option value="j">Java</option>
147161
<option value="b">Bedrock</option>
148162
</select>
149-
<input type="button" value="Custom Icon" onclick="$('newiconupload').click()" id="newiconbutton">
150-
<input type="button" value="Download Pack" onclick="download()" id="downloadbutton">
163+
<button onclick="$('newiconupload').click()" id="newiconbutton">Custom Icon</button>
164+
<button onclick="download()" id="downloadbutton">Download Pack</button>
151165
</div>
152166
</div>
153167
</div>
@@ -285,50 +299,56 @@
285299

286300
function download() {
287301
if (packs.length > 0) {
288-
let nzip = new JSZip();
289-
let iconname = "pack.png";
290-
if ($('versioninput').value=="j") {
291-
nzip.file("pack.mcmeta", '{"pack":{"pack_format":'+biggestVersion+',"description":[{"text":"' + $('newnameinput').value + '","color":"blue"},{"text":"\\nCombined by Nera","color":"green"}]}}');
292-
} else {
293-
iconname = "pack_icon.png";
294-
nzip.file("manifest.json", '{"format_version":2,"header":{"description":"Combined by Nera","name":"' + $('newnameinput').value + '","uuid":"6e120eda-fd77-4227-a10b-e3d86898a6a9","version":[1,0,0],"min_engine_version": [ 1, '+biggestVersion+', 0 ]},"modules":[{"description":"Combined by Nera","type":"resources","uuid":"15e0f346-f963-4cd7-ad2a-c0d386c8995e","version":[1, 0, 0]}]}');
295-
}
296-
297-
if (customicon != "") {
298-
nzip.file(iconname, customicon, {
299-
base64: true
300-
});
301-
} else if (packs[0].files[iconname] != undefined) {
302-
nzip.file(iconname, packs[0].files[iconname], {
303-
base64: true
304-
});
305-
} else {
306-
nzip.file(iconname, "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", {
307-
base64: true
308-
});
309-
}
310-
311-
for (let p of packs) {
312-
for (let fname of Object.keys(p.files)) {
313-
if (nzip.file(fname) == null) {
314-
nzip.file(fname, p.files[fname], {
315-
base64: true
316-
});
302+
document.getElementById("downloadbutton").textContent = "Downloading...";
303+
setTimeout(() => {
304+
document.getElementById("downloadbutton").textContent = "Download Pack";
305+
}, 5000);
306+
setTimeout(() => {
307+
let nzip = new JSZip();
308+
let iconname = "pack.png";
309+
if ($('versioninput').value=="j") {
310+
nzip.file("pack.mcmeta", '{"pack":{"pack_format":'+biggestVersion+',"description":[{"text":"' + $('newnameinput').value + '","color":"blue"},{"text":"\\nCombined by Nera","color":"green"}]}}');
311+
} else {
312+
iconname = "pack_icon.png";
313+
nzip.file("manifest.json", '{"format_version":2,"header":{"description":"Combined by Nera","name":"' + $('newnameinput').value + '","uuid":"6e120eda-fd77-4227-a10b-e3d86898a6a9","version":[1,0,0],"min_engine_version": [ 1, '+biggestVersion+', 0 ]},"modules":[{"description":"Combined by Nera","type":"resources","uuid":"15e0f346-f963-4cd7-ad2a-c0d386c8995e","version":[1, 0, 0]}]}');
314+
}
315+
316+
if (customicon != "") {
317+
nzip.file(iconname, customicon, {
318+
base64: true
319+
});
320+
} else if (packs[0].files[iconname] != undefined) {
321+
nzip.file(iconname, packs[0].files[iconname], {
322+
base64: true
323+
});
324+
} else {
325+
nzip.file(iconname, "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", {
326+
base64: true
327+
});
328+
}
329+
330+
for (let p of packs) {
331+
for (let fname of Object.keys(p.files)) {
332+
if (nzip.file(fname) == null) {
333+
nzip.file(fname, p.files[fname], {
334+
base64: true
335+
});
336+
}
317337
}
318338
}
319-
}
320-
321-
nzip.generateAsync({
322-
type: "base64"
323-
}).then(function(base64) { // download zip
324-
var element = document.createElement('a');
325-
element.setAttribute('href', "data:application/zip;base64," + base64);
326-
element.setAttribute('download', $('newnameinput').value.split(" ").join("-") + '.zip');
327-
element.click();
328-
element.setAttribute('href', "");
329-
}, function(e) {
330-
alert(e);
331-
});
339+
340+
nzip.generateAsync({
341+
type: "base64"
342+
}).then(function(base64) { // download zip
343+
var element = document.createElement('a');
344+
element.setAttribute('href', "data:application/zip;base64," + base64);
345+
element.setAttribute('download', $('newnameinput').value.split(" ").join("-") + '.zip');
346+
element.click();
347+
element.setAttribute('href', "");
348+
}, function(e) {
349+
alert(e);
350+
});
351+
}, 20);
332352
}
333353
}
334354

‎screenshots/pack_combiner.png‎

-22.8 KB
Loading

0 commit comments

Comments
 (0)