first commit
This commit is contained in:
132
journeymap/colorpalette.html
Normal file
132
journeymap/colorpalette.html
Normal file
@ -0,0 +1,132 @@
|
||||
<!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>
|
||||
|
Reference in New Issue
Block a user