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