133 lines
4.4 KiB
HTML
133 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
JourneyMap Mod <journeymap.info> for Minecraft
|
|
Copyright (c) 2011-2018 Techbrew Interactive, LLC <techbrew.net>. All Rights Reserved.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JourneyMap Color Palette</title>
|
|
<meta name="author" content="journeymap.info">
|
|
<style>
|
|
html, body { height: 100% }
|
|
body{font-family: Helvetica,Arial,sans-serif; font-size:11px}
|
|
#header {text-align: center; border: 1px solid green; background-color: #efefef; padding-bottom: 10px;}
|
|
#description {margin:10px; font-family: monospace; white-space: pre;}
|
|
#generated {font-style: italic;}
|
|
#toc{display: flex; flex-wrap: wrap; justify-content: center; }
|
|
#toc h2 {display: flex; margin:10px}
|
|
a.tocArrow {text-decoration: none; margin-left:10px; width:10px; padding:2px; background-color: #cccccc}
|
|
.mod{display: flex; flex-flow: row wrap; }
|
|
.mod h2 {flex: 1 100%;}
|
|
.entry{flex: 1;padding:8px; border:1px solid transparent;}
|
|
.entry:hover{border:1px solid black;}
|
|
.blockInfo{font-size:10px; padding-bottom:4px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="header">
|
|
|
|
<h1 id="title">JourneyMap Color Palette</h1>
|
|
|
|
<div id="overview">
|
|
<div id="generated"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="description">Put this file in the same directory as colorpalette.json to view the color palette.</div>
|
|
|
|
<div id="contents">
|
|
|
|
<h2><span id="colorCount"></span> Basic Colors</h2>
|
|
|
|
<h2>Resource Packs:</h2>
|
|
<div id="resourcePacks"></div>
|
|
|
|
<hr/>
|
|
|
|
<h2>Mods:</h2>
|
|
|
|
<div id="modNames"></div>
|
|
|
|
<div id="toc"></div>
|
|
|
|
<hr/>
|
|
|
|
<div id="blockColors"></div>
|
|
</div>
|
|
|
|
<script src="colorpalette.json"></script>
|
|
|
|
|
|
<script language="JavaScript">
|
|
|
|
function getContrastYIQ(hexcolor){
|
|
hexcolor = hexcolor.replace("#","");
|
|
var r = parseInt(hexcolor.substr(0,2),16);
|
|
var g = parseInt(hexcolor.substr(2,2),16);
|
|
var b = parseInt(hexcolor.substr(4,2),16);
|
|
var yiq = ((r*299)+(g*587)+(b*114))/1000;
|
|
return (yiq >= 128) ? '#000000' : '#dddddd';
|
|
}
|
|
|
|
if(typeof(colorpalette)=='undefined') {
|
|
document.getElementById("overview").innerHTML = "";
|
|
document.getElementById("contents").innerHTML = "";
|
|
} else {
|
|
document.getElementById("description").innerHTML = colorpalette.description.join("<br/>");
|
|
document.getElementById("resourcePacks").innerHTML = colorpalette.resourcePacks;
|
|
document.getElementById("modNames").innerHTML = colorpalette.modNames;
|
|
document.getElementById("generated").innerHTML = colorpalette.generated;
|
|
|
|
var tocEl = document.getElementById("toc");
|
|
var tableEl = document.getElementById("blockColors");
|
|
var count = 0;
|
|
var table = colorpalette.table;
|
|
|
|
for (var mod in table) {
|
|
var modEl = document.createElement("div");
|
|
modEl.className = "mod";
|
|
modEl.innerHTML = "<h2 id='" + mod + "'>" + mod + "<a class='tocArrow' href='#toc'>↑</a></h2>";
|
|
tableEl.appendChild(modEl);
|
|
|
|
var linkEl = document.createElement("h2");
|
|
linkEl.innerHTML = "<a href='#" + mod + "'>" + mod + "</a>";
|
|
tocEl.appendChild(linkEl);
|
|
|
|
for (var block in table[mod]) {
|
|
for (var state in table[mod][block]) {
|
|
|
|
var entryEl = document.createElement("span");
|
|
entryEl.className='entry';
|
|
modEl.appendChild(entryEl);
|
|
|
|
var list = table[mod][block][state];
|
|
var blockStateColor = {
|
|
"color": list[0],
|
|
"alpha": list[1] || 1
|
|
}
|
|
|
|
var alphaInfo = (blockStateColor.alpha && blockStateColor.alpha<1) ? (" Alpha: " + blockStateColor.alpha) : "";
|
|
var wrapState = "[" + (state.split(",").join(",​")) + "]";
|
|
var labelColor = getContrastYIQ(blockStateColor.color);
|
|
|
|
entryEl.innerHTML = [mod + ":", block, wrapState, alphaInfo].join("​");
|
|
entryEl.style = 'color: ' + labelColor + '; background-color:' + blockStateColor.color;
|
|
entryEl.title = blockStateColor.color;
|
|
count++;
|
|
}
|
|
}
|
|
}
|
|
|
|
document.getElementById("colorCount").innerHTML = count;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|