Skip to content

Commit

Permalink
initial release
Browse files Browse the repository at this point in the history
  • Loading branch information
@rogerhnn
rogerhnn committed Apr 23, 2021
1 parent aae9894 commit ece3f87
Show file tree
Hide file tree
Showing 9 changed files with 6,625 additions and 0 deletions.
179 changes: 179 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');

@font-face {
font-family: 'geosanslight';
src: url("../src/fonts/geonms-webfont.eot");
src: url("../src/fonts/geonms-webfont.eot?#iefix") format("embedded-opentype"),
url("../src/fonts/geonms-webfont.woff") format("woff"),
url("../src/fonts/geonms-webfont.ttf") format("truetype"),
url("../src/fonts/geonms-webfont.svg#geosanslight-nmsregular") format("svg");
font-weight: normal;
font-style: normal;
}

html, body {
margin: 0;
padding: 0;
font-size: 18px;
font-family: Raleway, sans-serif;
height: 100%;
overflow: hidden;
}

body {
background-color: #d9d9d9;
color: #fff;
}

header {
display: flex;
align-items: center;
background-color: #101b21;
height: 3rem;
padding: 0.5rem 1rem;
border-bottom: 2px solid #ff8400;
font-family: geosanslight, sans-serif;
font-size: 28px;
font-weight: 400;
color: #f7f7f7;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px #fff, 1px 1px 5px #00ffff, 1px 1px 15px #00ffff, 1px 1px 30px #00ffff;
line-height: 31px;
}

header h1 {
color: #ffffff;
margin: 0;
padding: 0;
}

footer {
background-color: #000000;
height: 2rem;
padding: 0.5rem 1rem;
border-top: 2px solid #ff8400;
display: flex;
align-items: center;
justify-content: center;
}
footer p {
color: #fff;
font-size: 12px;
letter-spacing: 0.05rem;
}

main {
background: #101b21;
height: calc(100vh - 90px);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.input {
width: 95vw;
height: 85vh;
display: flex;
flex-direction: column;
}
.input.hidden {
display: none;
}

#drop-area {
border: 2px dashed #f9f9f9;
border-radius: 10px;
width: 100%;
margin: auto;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#drop-area.highlight {
border-color: #ff8400;
}
#drop-area .info {
padding: 0.5rem;
}


p {
margin: 0;
}
.error {
background-color: #cc0000;
border-radius: 6px;
color: #ffffff;
text-align: center;
padding: 8px 0;
width: 80vw;
max-width: 480px;
margin: 1rem auto 0;
}
.error.hidden {
display: none;
}

.button {
display: inline-block;
padding: 10px;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ff8400;
text-transform: uppercase;
margin-top: 0.5rem;
}

.button:hover {
background: #ff8400;
}

#fileElem {
display: none;
}

.output {
overflow-y: scroll;
height: calc(100vh - 108px);
padding: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.output.hidden {
display: none;
}
.block {
width: 520px;
}

.colorblock {
display: flex;
flex-wrap: wrap;
width: 520px;
}

.color {
display: flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 1px 1px 1px black;
font-family: Consolas, sans-serif;
}

42 changes: 42 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<title>NMS Color Parser</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="RogerHN">
<meta name="description" content="Parser that shows the colors of file BASECOLOURPALETTES.EXML">
<meta name="keywords" content="No Man's Sky, BASECOLOURPALETTES">
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
<div class="app">
<header>
<img src="./src/img/logo-nms.png" alt="No Man's Sky Logo" class="nmslogo">
<span>Color parser</span>
</header>
<main>
<section class="input">
<div id="drop-area">
<p class="error hidden"></p>
<p class="info">Drag the EXML of a color pallete here or select it using the button below.</p>
<p class="info">Supported files: BASECOLOURPALETTES.EXML and LEGACYBASECOLOURPALETTES.EXML</p>
<input type="file" id="fileElem" onchange="handleFile(this.files)">
<label for="fileElem" class="button">Select</label>
</div>
</section>
<section class="output hidden"></section>
</main>
<footer>
<p>Created by RogerHN</p>
</footer>
</div>

<script src='js/xml2json.js'></script>
<script src="js/script.js"></script>

</body>

</html>
140 changes: 140 additions & 0 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
const dropArea = document.getElementById("drop-area");
const outputElement = document.getElementsByClassName("output")[0];
const inputElement = document.getElementsByClassName("input")[0];
const errorElement = document.getElementsByClassName("error")[0];
console.log(errorElement)

function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

function prettyDate2(time) {
let date = new Date(parseInt(time));
return date.toLocaleTimeString(navigator.language, {
hour: '2-digit',
minute:'2-digit',
second:'2-digit',
hour12: false
});
}

const formatSeconds = s => (new Date(s * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
const format = (date, locale) => new Intl.DateTimeFormat(locale).format(date);

function readFile(input) {
let file = input[0];
let fileName = input[0].name;
console.log(fileName)
let fileSize = formatBytes(input[0].size,0);
let lastModified = input[0].lastModified;
let lastModifiedDate = input[0].lastModifiedDate;
let filenameUpper = fileName.toUpperCase();

if(filenameUpper == "BASECOLOURPALETTES.EXML" || filenameUpper == "LEGACYBASECOLOURPALETTES.EXML"){
let lastDate = format(new Date(lastModified), 'pt-BR')
let lastTime = prettyDate2(lastModified);

lastModified = new Date(lastModified);

let reader = new FileReader();

//reader.readAsArrayBuffer(file);
reader.readAsText(file);
reader.onload = function() {
let x2js = new X2JS();
let json = x2js.xml_str2json(reader.result);
showColors(json)
};


reader.onerror = function() {
console.log(reader.error);
};
} else {
console.error("Unsupported file");
errorElement.classList.remove('hidden');
errorElement.innerHTML = "! Unsupported file !";
}

};

const preventDefaults = e => {
e.preventDefault();
e.stopPropagation();
};

const highlight = e => {
dropArea.classList.add("highlight");
};

const unhighlight = e => {
dropArea.classList.remove("highlight");
};

const handleDrop = e => {
const dt = e.dataTransfer;
const files = dt.files;
handleFile(files);
};

const handleFile = file => {
readFile(file)
};


["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
["dragenter", "dragover"].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
["dragleave", "drop"].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});

dropArea.addEventListener("drop", handleDrop, false);


function showColors(data){
let list = data.Data.Property.Property;

let output = "";
list.map((item) => {
output += `
<div class="block">
<div class="title">${item._name}</div>
<div class="colorblock">`;

let colors = item.Property[1].Property;
let colorNum = 0;
colors.map((color) => {
let R = color.Property[0]._value;
let G = color.Property[1]._value;
let B = color.Property[2]._value;
let A = color.Property[3]._value;
R = R * 255;
G = G * 255;
B = B * 255;
A = A * 255;
R = Math.round(R);
G = Math.round(G);
B = Math.round(B);
A = Math.round(A);

let bgcolor = `rgba(${R}, ${G}, ${B}, ${A})`;
output += `<span class="color" style="background-color:${bgcolor}">${colorNum}</span>`;
colorNum = colorNum + 1;
});
output += `</div></div>`;

});
//$('.output').html(output);
outputElement.classList.remove("hidden");
inputElement.classList.add("hidden");
document.querySelector('.output').innerHTML = output;
}
Loading

0 comments on commit ece3f87

Please sign in to comment.