Kelder/planet-wars
25
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

map builder gemaakt

Browse source
This commit is contained in:
kindtanton 2020-03-05 14:38:57 +01:00
parent c846031aa3
commit fc9ecee9b1
17 changed files with 378 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
mapbuilder/LICENSE-APACHE → mapbuilder/deprecated/LICENSE-APACHE
View file

0
mapbuilder/LICENSE-MIT → mapbuilder/deprecated/LICENSE-MIT
View file

0
mapbuilder/README.md → mapbuilder/deprecated/README.md
View file

0
mapbuilder/favicon.ico → mapbuilder/deprecated/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

48
mapbuilder/deprecated/index.html Normal file
View 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()">&times;</a>
<div class="section">
<span class="title">Grid</span>
<div id="gridConfig">
</div>
<button class="btn" id="addbtn">&#43;</button>
</div>
</div>
<div id="canvasWrapper" class="wrapper">
<canvas id="canvas" class="canvas"></canvas>
</div>
<button id="openbtn" class="openbtn" onclick="toggleNav()">&#9776;</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>

0
mapbuilder/package-lock.json → mapbuilder/deprecated/package-lock.json generated
View file

0
mapbuilder/package.json → mapbuilder/deprecated/package.json
View file

0
mapbuilder/src/grid.ts → mapbuilder/deprecated/src/grid.ts
View file

0
mapbuilder/src/index.ts → mapbuilder/deprecated/src/index.ts
View file

0
mapbuilder/src/state.ts → mapbuilder/deprecated/src/state.ts
View file

0
mapbuilder/src/style/style.scss → mapbuilder/deprecated/src/style/style.scss
View file

0
mapbuilder/src/util.ts → mapbuilder/deprecated/src/util.ts
View file

0
mapbuilder/tsconfig.json → mapbuilder/deprecated/tsconfig.json
View file

0
mapbuilder/webpack.config.js → mapbuilder/deprecated/webpack.config.js
View file

62
mapbuilder/index.html
View file

@ -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 id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&times;</a>
<div class="section">
<span class="title">Grid</span>
<div id="gridConfig">
</div>
<button class="btn" id="addbtn">&#43;</button>
<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>
<div id="canvasWrapper" class="wrapper">
<canvas id="canvas" class="canvas"></canvas>
</div>
<button id="openbtn" class="openbtn" onclick="toggleNav()">&#9776;</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>
<script src="script.js"></script>
<body>

102
mapbuilder/script.js Normal file
View 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
View 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;
}