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>
|
||||
<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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<head>
|
||||
<body>
|
||||
<div class="grid"></div>
|
||||
<div class="controls">
|
||||
<h2>controls</h2>
|
||||
<div class="colourButtonWrapper">
|
||||
<label class="colourButtonContainer"><input checked name="colourButton" class="colourButton" type="radio" value="gray"><span class="colourButtonCheckmark colourButton_gray"></span></label>
|
||||
</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>
|
||||
<script src="script.js"></script>
|
||||
<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>
|
||||
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