103 lines
4 KiB
JavaScript
103 lines
4 KiB
JavaScript
|
{
|
||
|
|
var parameters = new Array(400);
|
||
|
|
const init = () => {
|
||
|
|
createGrid(20);
|
||
|
|
createColourButtons();
|
||
|
|
document.querySelector(".toggleExperimental").addEventListener(`click`, handleClickToggleExperimental);
|
||
|
|
document.querySelector(".amountOfSquares").addEventListener(`change`, handleChangeAmountOfSquares);
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClickToggleExperimental = () => {
|
||
|
|
$body = document.querySelector("body");
|
||
|
|
if($body.classList.contains("experimental")){
|
||
|
|
$body.classList.remove("experimental");
|
||
|
|
} else {
|
||
|
|
$body.classList.add("experimental");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const createGrid = amount =>{
|
||
|
|
$grid = document.querySelector(".grid");
|
||
|
|
$grid.innerHTML = "";
|
||
|
|
for(row = 0; row < amount; row++){
|
||
|
|
$row = document.createElement('div');
|
||
|
|
$row.classList.add("row");
|
||
|
|
if(row % 2 != 0){
|
||
|
|
$row.style.marginLeft = (50 / amount)+"%";
|
||
|
|
$row.style.marginRight = (-50 / amount)+"%";
|
||
|
|
}
|
||
|
|
$row.style.height = (100 / amount)+"%";
|
||
|
|
$row.classList.add("row_"+row);
|
||
|
|
for(col = 0; col<amount; col++){
|
||
|
|
$row.append(createSquare(col, row, amount));
|
||
|
|
}
|
||
|
|
$grid.append($row);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const createSquare = (col, row, amount) =>{
|
||
|
|
$square = document.createElement('div');
|
||
|
|
$square.classList.add("square");
|
||
|
|
$square.classList.add("square-"+row+"-"+col);
|
||
|
|
$square.style.width = (100/amount) +"%";
|
||
|
|
$square.addEventListener(`click`, handleSquareClick);
|
||
|
|
$square.addEventListener(`mouseover`, handleSquareHover);
|
||
|
|
return ($square);
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSquareClick = e => {
|
||
|
|
document.querySelectorAll(".colourButton").forEach(colour => {
|
||
|
|
if(colour.checked){
|
||
|
|
$name = e.currentTarget.classList[1];
|
||
|
|
console.log(e.currentTarget);
|
||
|
|
if(e.currentTarget.classList.length >= 2 && e.currentTarget.classList[2] != null){
|
||
|
|
e.currentTarget.classList.remove("planet_"+parameters[$name.split("-")[1]*20+$name.split("-")[2]][0]);
|
||
|
|
}
|
||
|
|
$parameters = document.getElementById("parametersToGive").value;
|
||
|
|
parameters[$name.split("-")[1]*20+$name.split("-")[2]] = [colour.value, $parameters];
|
||
|
|
e.currentTarget.classList.add("planet_"+colour.value);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(parameters));
|
||
|
|
a = document.querySelector(".downloadJSON");
|
||
|
|
a.href = 'data:' + data;
|
||
|
|
a.download = 'data.json';
|
||
|
|
a.innerHTML = 'download JSON';
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSquareHover = e => {
|
||
|
|
if(e.currentTarget.classList.length >= 3){
|
||
|
|
$name = e.currentTarget.classList[1];
|
||
|
|
document.getElementById("parametersFrom").value = parameters[$name.split("-")[1]*20+$name.split("-")[2]][1];
|
||
|
|
} else {
|
||
|
|
document.getElementById("parametersFrom").value = "Empty";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const createColourButtons = () => {
|
||
|
|
colours = ["blue", "cyan", "green", "yellow", "orange", "red", "pink", "purple"];
|
||
|
|
colours.forEach(colour => {
|
||
|
|
$colourButtonWrapper = document.querySelector(".colourButtonWrapper");
|
||
|
|
$button = document.createElement("input");
|
||
|
|
$button.name = "colourButton";
|
||
|
|
$button.classList.add("colourButton");
|
||
|
|
$button.type = "radio";
|
||
|
|
$button.value = colour;
|
||
|
|
$checkmark = document.createElement("span");
|
||
|
|
$checkmark.classList.add("colourButtonCheckmark");
|
||
|
|
$checkmark.classList.add("colourButton_"+colour);
|
||
|
|
$container = document.createElement("label");
|
||
|
|
$container.classList.add("colourButtonContainer");
|
||
|
|
$container.append($button);
|
||
|
|
$container.append($checkmark);
|
||
|
|
$colourButtonWrapper.append($container);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleChangeAmountOfSquares = e => {
|
||
|
|
createGrid(e.currentTarget.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
init();
|
||
|
|
}
|