Skip to content

Commit ece3f87

Browse files
rogerhnnrogerhnn
committed
initial release
1 parent aae9894 commit ece3f87

File tree

9 files changed

+6625
-0
lines changed

9 files changed

+6625
-0
lines changed

‎css/styles.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');
8+
9+
@font-face {
10+
font-family: 'geosanslight';
11+
src: url("../src/fonts/geonms-webfont.eot");
12+
src: url("../src/fonts/geonms-webfont.eot?#iefix") format("embedded-opentype"),
13+
url("../src/fonts/geonms-webfont.woff") format("woff"),
14+
url("../src/fonts/geonms-webfont.ttf") format("truetype"),
15+
url("../src/fonts/geonms-webfont.svg#geosanslight-nmsregular") format("svg");
16+
font-weight: normal;
17+
font-style: normal;
18+
}
19+
20+
html, body {
21+
margin: 0;
22+
padding: 0;
23+
font-size: 18px;
24+
font-family: Raleway, sans-serif;
25+
height: 100%;
26+
overflow: hidden;
27+
}
28+
29+
body {
30+
background-color: #d9d9d9;
31+
color: #fff;
32+
}
33+
34+
header {
35+
display: flex;
36+
align-items: center;
37+
background-color: #101b21;
38+
height: 3rem;
39+
padding: 0.5rem 1rem;
40+
border-bottom: 2px solid #ff8400;
41+
font-family: geosanslight, sans-serif;
42+
font-size: 28px;
43+
font-weight: 400;
44+
color: #f7f7f7;
45+
text-transform: uppercase;
46+
letter-spacing: 0.1em;
47+
text-shadow: 1px 1px 1px #fff, 1px 1px 5px #00ffff, 1px 1px 15px #00ffff, 1px 1px 30px #00ffff;
48+
line-height: 31px;
49+
}
50+
51+
header h1 {
52+
color: #ffffff;
53+
margin: 0;
54+
padding: 0;
55+
}
56+
57+
footer {
58+
background-color: #000000;
59+
height: 2rem;
60+
padding: 0.5rem 1rem;
61+
border-top: 2px solid #ff8400;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
}
66+
footer p {
67+
color: #fff;
68+
font-size: 12px;
69+
letter-spacing: 0.05rem;
70+
}
71+
72+
main {
73+
background: #101b21;
74+
height: calc(100vh - 90px);
75+
padding: 1rem;
76+
display: flex;
77+
flex-direction: column;
78+
align-items: center;
79+
justify-content: center;
80+
}
81+
82+
.input {
83+
width: 95vw;
84+
height: 85vh;
85+
display: flex;
86+
flex-direction: column;
87+
}
88+
.input.hidden {
89+
display: none;
90+
}
91+
92+
#drop-area {
93+
border: 2px dashed #f9f9f9;
94+
border-radius: 10px;
95+
width: 100%;
96+
margin: auto;
97+
padding: 20px;
98+
height: 100%;
99+
display: flex;
100+
flex-direction: column;
101+
align-items: center;
102+
justify-content: center;
103+
}
104+
#drop-area.highlight {
105+
border-color: #ff8400;
106+
}
107+
#drop-area .info {
108+
padding: 0.5rem;
109+
}
110+
111+
112+
p {
113+
margin: 0;
114+
}
115+
.error {
116+
background-color: #cc0000;
117+
border-radius: 6px;
118+
color: #ffffff;
119+
text-align: center;
120+
padding: 8px 0;
121+
width: 80vw;
122+
max-width: 480px;
123+
margin: 1rem auto 0;
124+
}
125+
.error.hidden {
126+
display: none;
127+
}
128+
129+
.button {
130+
display: inline-block;
131+
padding: 10px;
132+
cursor: pointer;
133+
border-radius: 5px;
134+
border: 1px solid #ff8400;
135+
text-transform: uppercase;
136+
margin-top: 0.5rem;
137+
}
138+
139+
.button:hover {
140+
background: #ff8400;
141+
}
142+
143+
#fileElem {
144+
display: none;
145+
}
146+
147+
.output {
148+
overflow-y: scroll;
149+
height: calc(100vh - 108px);
150+
padding: 1rem;
151+
display: flex;
152+
flex-wrap: wrap;
153+
gap: 0.5rem;
154+
justify-content: center;
155+
}
156+
.output.hidden {
157+
display: none;
158+
}
159+
.block {
160+
width: 520px;
161+
}
162+
163+
.colorblock {
164+
display: flex;
165+
flex-wrap: wrap;
166+
width: 520px;
167+
}
168+
169+
.color {
170+
display: flex;
171+
width: 32px;
172+
height: 32px;
173+
align-items: center;
174+
justify-content: center;
175+
color: #fff;
176+
text-shadow: 1px 1px 1px black;
177+
font-family: Consolas, sans-serif;
178+
}
179+

‎index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>NMS Color Parser</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<meta name="author" content="RogerHN">
9+
<meta name="description" content="Parser that shows the colors of file BASECOLOURPALETTES.EXML">
10+
<meta name="keywords" content="No Man's Sky, BASECOLOURPALETTES">
11+
<link rel="stylesheet" href="css/styles.css">
12+
</head>
13+
14+
<body>
15+
<div class="app">
16+
<header>
17+
<img src="./src/img/logo-nms.png" alt="No Man's Sky Logo" class="nmslogo">
18+
<span>Color parser</span>
19+
</header>
20+
<main>
21+
<section class="input">
22+
<div id="drop-area">
23+
<p class="error hidden"></p>
24+
<p class="info">Drag the EXML of a color pallete here or select it using the button below.</p>
25+
<p class="info">Supported files: BASECOLOURPALETTES.EXML and LEGACYBASECOLOURPALETTES.EXML</p>
26+
<input type="file" id="fileElem" onchange="handleFile(this.files)">
27+
<label for="fileElem" class="button">Select</label>
28+
</div>
29+
</section>
30+
<section class="output hidden"></section>
31+
</main>
32+
<footer>
33+
<p>Created by RogerHN</p>
34+
</footer>
35+
</div>
36+
37+
<script src='js/xml2json.js'></script>
38+
<script src="js/script.js"></script>
39+
40+
</body>
41+
42+
</html>

‎js/script.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
const dropArea = document.getElementById("drop-area");
2+
const outputElement = document.getElementsByClassName("output")[0];
3+
const inputElement = document.getElementsByClassName("input")[0];
4+
const errorElement = document.getElementsByClassName("error")[0];
5+
console.log(errorElement)
6+
7+
function formatBytes(bytes, decimals = 2) {
8+
if (bytes === 0) return '0 Bytes';
9+
const k = 1024;
10+
const dm = decimals < 0 ? 0 : decimals;
11+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
12+
const i = Math.floor(Math.log(bytes) / Math.log(k));
13+
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
14+
}
15+
16+
function prettyDate2(time) {
17+
let date = new Date(parseInt(time));
18+
return date.toLocaleTimeString(navigator.language, {
19+
hour: '2-digit',
20+
minute:'2-digit',
21+
second:'2-digit',
22+
hour12: false
23+
});
24+
}
25+
26+
const formatSeconds = s => (new Date(s * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
27+
const format = (date, locale) => new Intl.DateTimeFormat(locale).format(date);
28+
29+
function readFile(input) {
30+
let file = input[0];
31+
let fileName = input[0].name;
32+
console.log(fileName)
33+
let fileSize = formatBytes(input[0].size,0);
34+
let lastModified = input[0].lastModified;
35+
let lastModifiedDate = input[0].lastModifiedDate;
36+
let filenameUpper = fileName.toUpperCase();
37+
38+
if(filenameUpper == "BASECOLOURPALETTES.EXML" || filenameUpper == "LEGACYBASECOLOURPALETTES.EXML"){
39+
let lastDate = format(new Date(lastModified), 'pt-BR')
40+
let lastTime = prettyDate2(lastModified);
41+
42+
lastModified = new Date(lastModified);
43+
44+
let reader = new FileReader();
45+
46+
//reader.readAsArrayBuffer(file);
47+
reader.readAsText(file);
48+
reader.onload = function() {
49+
let x2js = new X2JS();
50+
let json = x2js.xml_str2json(reader.result);
51+
showColors(json)
52+
};
53+
54+
55+
reader.onerror = function() {
56+
console.log(reader.error);
57+
};
58+
} else {
59+
console.error("Unsupported file");
60+
errorElement.classList.remove('hidden');
61+
errorElement.innerHTML = "! Unsupported file !";
62+
}
63+
64+
};
65+
66+
const preventDefaults = e => {
67+
e.preventDefault();
68+
e.stopPropagation();
69+
};
70+
71+
const highlight = e => {
72+
dropArea.classList.add("highlight");
73+
};
74+
75+
const unhighlight = e => {
76+
dropArea.classList.remove("highlight");
77+
};
78+
79+
const handleDrop = e => {
80+
const dt = e.dataTransfer;
81+
const files = dt.files;
82+
handleFile(files);
83+
};
84+
85+
const handleFile = file => {
86+
readFile(file)
87+
};
88+
89+
90+
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
91+
dropArea.addEventListener(eventName, preventDefaults, false);
92+
});
93+
["dragenter", "dragover"].forEach(eventName => {
94+
dropArea.addEventListener(eventName, highlight, false);
95+
});
96+
["dragleave", "drop"].forEach(eventName => {
97+
dropArea.addEventListener(eventName, unhighlight, false);
98+
});
99+
100+
dropArea.addEventListener("drop", handleDrop, false);
101+
102+
103+
function showColors(data){
104+
let list = data.Data.Property.Property;
105+
106+
let output = "";
107+
list.map((item) => {
108+
output += `
109+
<div class="block">
110+
<div class="title">${item._name}</div>
111+
<div class="colorblock">`;
112+
113+
let colors = item.Property[1].Property;
114+
let colorNum = 0;
115+
colors.map((color) => {
116+
let R = color.Property[0]._value;
117+
let G = color.Property[1]._value;
118+
let B = color.Property[2]._value;
119+
let A = color.Property[3]._value;
120+
R = R * 255;
121+
G = G * 255;
122+
B = B * 255;
123+
A = A * 255;
124+
R = Math.round(R);
125+
G = Math.round(G);
126+
B = Math.round(B);
127+
A = Math.round(A);
128+
129+
let bgcolor = `rgba(${R}, ${G}, ${B}, ${A})`;
130+
output += `<span class="color" style="background-color:${bgcolor}">${colorNum}</span>`;
131+
colorNum = colorNum + 1;
132+
});
133+
output += `</div></div>`;
134+
135+
});
136+
//$('.output').html(output);
137+
outputElement.classList.remove("hidden");
138+
inputElement.classList.add("hidden");
139+
document.querySelector('.output').innerHTML = output;
140+
}

0 commit comments

Comments
 (0)