107 lines
2.2 KiB
HTML
107 lines
2.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/100_blocks.css"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="save"><a href="javascript:save();">Save Board</a></div>
|
|
<div id="palettes"></div>
|
|
<div id="current-palette"></div>
|
|
<div id="gridcontainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
/// begin JavaScript
|
|
|
|
function changeColor(o){
|
|
|
|
o.style.backgroundColor = o.style.backgroundColor == paletteColor ? '#AAA' : paletteColor;
|
|
|
|
}
|
|
|
|
|
|
function setPalette(o) {
|
|
|
|
paletteColor = o.style.backgroundColor;
|
|
currentPaletteDiv.style.backgroundColor = paletteColor;
|
|
|
|
}
|
|
|
|
function save() {
|
|
boxes = document.getElementsByClassName('griditem');
|
|
layout = '';
|
|
|
|
for (var box of boxes) {
|
|
num = colorNumLookup[box.style.backgroundColor];
|
|
if (num == undefined) {
|
|
num = 0;
|
|
}
|
|
layout += num
|
|
}
|
|
|
|
console.log(layout);
|
|
fetch("/save", {
|
|
|
|
headers: {'Accept': 'application/json',
|
|
'Content-Type': 'application/json'},
|
|
method: "POST",
|
|
body: JSON.stringify({layout: layout})
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
window.onload = function () {
|
|
|
|
paletteColors = {{ colors | tojson }};
|
|
colorLabelLookup = {{ color_label_dict | tojson }};
|
|
colorNumLookup = {{ color_num_dict | tojson }};
|
|
console.log(colorNumLookup);
|
|
paletteColor = paletteColors[0];
|
|
gridContainer = document.getElementById('gridcontainer');
|
|
palettesDiv = document.getElementById('palettes');
|
|
|
|
for (i=0; i<264; i++) {
|
|
|
|
box = document.createElement('div');
|
|
box.className = 'griditem';
|
|
|
|
box.addEventListener('click', function () {
|
|
|
|
changeColor(this);
|
|
|
|
});
|
|
|
|
box.style.marginRight = '4px';
|
|
gridContainer.appendChild(box);
|
|
|
|
}
|
|
|
|
for (colorIndex in paletteColors) {
|
|
|
|
paletteElement = document.createElement('div');
|
|
paletteElement.className = 'palette';
|
|
paletteElement.style.backgroundColor = paletteColors[colorIndex];
|
|
paletteElement.addEventListener('click', function () {
|
|
|
|
setPalette(this);
|
|
|
|
});
|
|
|
|
palettesDiv.appendChild(paletteElement);
|
|
|
|
}
|
|
|
|
currentPaletteDiv = document.getElementById('current-palette')
|
|
currentPaletteDiv.style.backgroundColor = paletteColor;
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|