map builder gemaakt
This commit is contained in:
kindtanton
parent
c846031aa3
commit
fc9ecee9b1
17 changed files with 378 additions and 44 deletions
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
48
mapbuilder/deprecated/index.html
Normal file
48
mapbuilder/deprecated/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Planetwars Mapbuilder</title>
|
||||||
|
<!-- <link rel="stylesheet" type="text/css" href="./static/res/style.css"> -->
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="mySidepanel" class="sidepanel">
|
||||||
|
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<span class="title">Grid</span>
|
||||||
|
<div id="gridConfig">
|
||||||
|
</div>
|
||||||
|
<button class="btn" id="addbtn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="canvasWrapper" class="wrapper">
|
||||||
|
<canvas id="canvas" class="canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="openbtn" class="openbtn" onclick="toggleNav()">☰</button>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var nav_open = false;
|
||||||
|
/* Set the width of the sidebar to 250px (show it) */
|
||||||
|
function toggleNav() {
|
||||||
|
if (nav_open) {
|
||||||
|
document.getElementById("mySidepanel").style.width = "0";
|
||||||
|
} else {
|
||||||
|
document.getElementById("mySidepanel").style.width = "350px";
|
||||||
|
}
|
||||||
|
nav_open = !nav_open;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="dist/bundle.js"></script>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,48 +1,22 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
<title>Planetwars Mapbuilder</title>
|
<head>
|
||||||
<!-- <link rel="stylesheet" type="text/css" href="./static/res/style.css"> -->
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="grid"></div>
|
||||||
<div id="mySidepanel" class="sidepanel">
|
<div class="controls">
|
||||||
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
|
<h2>controls</h2>
|
||||||
|
<div class="colourButtonWrapper">
|
||||||
<div class="section">
|
<label class="colourButtonContainer"><input checked name="colourButton" class="colourButton" type="radio" value="gray"><span class="colourButtonCheckmark colourButton_gray"></span></label>
|
||||||
<span class="title">Grid</span>
|
|
||||||
<div id="gridConfig">
|
|
||||||
</div>
|
|
||||||
<button class="btn" id="addbtn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<label>how many squares (this will remove your map)</label>
|
||||||
|
<input class="amountOfSquares" type="number" min="10" max="50" value="20"></input>
|
||||||
|
<label for="giveParameters">give parameters</label>
|
||||||
|
<textarea id="parametersToGive" rows="10" cols="50">planetPopulation = 100</textarea>
|
||||||
|
<label for="readParameters">read parameters</label>
|
||||||
|
<textarea id="parametersFrom" rows="10" cols="50" disabled></textarea>
|
||||||
|
<button class="toggleExperimental hidden">experimental</button>
|
||||||
|
<a class="downloadJSON"></a>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
<div id="canvasWrapper" class="wrapper">
|
<body>
|
||||||
<canvas id="canvas" class="canvas"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="openbtn" class="openbtn" onclick="toggleNav()">☰</button>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var nav_open = false;
|
|
||||||
/* Set the width of the sidebar to 250px (show it) */
|
|
||||||
function toggleNav() {
|
|
||||||
if (nav_open) {
|
|
||||||
document.getElementById("mySidepanel").style.width = "0";
|
|
||||||
} else {
|
|
||||||
document.getElementById("mySidepanel").style.width = "350px";
|
|
||||||
}
|
|
||||||
nav_open = !nav_open;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="dist/bundle.js"></script>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
102
mapbuilder/script.js
Normal file
102
mapbuilder/script.js
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
{
|
||||||
|
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();
|
||||||
|
}
|
||||||
210
mapbuilder/style.css
Normal file
210
mapbuilder/style.css
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
background: black;
|
||||||
|
color: cyan;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
overflow:hidden;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.experimental {
|
||||||
|
height: 150%;
|
||||||
|
width: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
width: 120vh;
|
||||||
|
height: 95vh;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
padding-left: 3rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
.experimental .grid {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 10rem solid gray;
|
||||||
|
}
|
||||||
|
.experimental .controlls {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
width: 100%;
|
||||||
|
height: 4.75%;
|
||||||
|
display:flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.row:nth-child(even){
|
||||||
|
position: relative;
|
||||||
|
margin-left: 2.5%;
|
||||||
|
margin-right: -2.5%;
|
||||||
|
}
|
||||||
|
.row:nth-child(even) .square:nth-child(even) {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row:nth-child(even) .square:nth-child(odd) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row:nth-child(odd) .square:nth-child(even) {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.row:nth-child(odd) .square:nth-child(odd) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.square {
|
||||||
|
clip-path: polygon(
|
||||||
|
50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
|
||||||
|
);
|
||||||
|
background: #444466;
|
||||||
|
width: calc(4.75% - 2px);
|
||||||
|
height: 130%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square:hover {
|
||||||
|
filter:brightness(80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row>.square.planet-red {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row .planet-blue {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Customize the label (the container) */
|
||||||
|
.colourButtonContainer {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the browser's default radio button */
|
||||||
|
.colourButtonContainer input {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
margin: 1rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create a custom radio button */
|
||||||
|
.colourButtonCheckmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
.colourButton_gray{
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
.colourButton_blue{
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
.colourButton_cyan{
|
||||||
|
background-color: cyan;
|
||||||
|
}
|
||||||
|
.colourButton_green{
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.colourButton_yellow{
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
.colourButton_orange{
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
.colourButton_red{
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
.colourButton_pink{
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
.colourButton_purple{
|
||||||
|
background-color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet_gray{
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
.planet_blue{
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
.planet_cyan{
|
||||||
|
background-color: cyan;
|
||||||
|
}
|
||||||
|
.planet_green{
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.planet_yellow{
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
.planet_orange{
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
.planet_red{
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
.planet_pink{
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
.planet_purple{
|
||||||
|
background-color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On mouse-over, add a grey background color */
|
||||||
|
.colourButtonContainer:hover input ~ .colourButtonCheckmark {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When the radio button is checked, add a blue background */
|
||||||
|
.colourButtonContainer input:checked ~ .colourButtonCheckmark {
|
||||||
|
border: 1px solid blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create the indicator (the dot/circle - hidden when not checked) */
|
||||||
|
.colourButtonCheckmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the indicator (dot/circle) when checked */
|
||||||
|
.colourButtonContainer input:checked ~ .colourButtonCheckmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the indicator (dot/circle) */
|
||||||
|
.colourButtonContainer .colourButtonCheckmark:after {
|
||||||
|
top: 9px;
|
||||||
|
left: 9px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
input, textarea {
|
||||||
|
border: 1px solid darkcyan;
|
||||||
|
color: darkcyan;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
background: black;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue