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

Add finishing touches

Browse source
This commit is contained in:
ajuvercr 2020-03-21 16:19:47 +01:00
parent fc9ecee9b1
commit def6f62726
3 changed files with 196 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
mapbuilder/index.html
View file

@ -4,19 +4,41 @@
<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>
<h2>Controls</h2>
<div class="colourButtonWrapper"></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>
<label for="currentName">Planet parameters</label>
<div class="input_container">
<label for="currentName">Name:</label>
<input id="currentName" type="text" placeholder="name"></input>
</div>
<div class="input_container">
<label for="currentShipCount">Ship count:</label>
<input id="currentShipCount" type="number" value="20"></input>
</div>
<label>Hovered planet parameters</label>
<div class="input_container">
<label for="name">Name:</label>
<input id="name" type="text" disabled></input>
</div>
<div class="input_container">
<label class="small_label" for="shipCount">Ship count:</label>
<input id="shipCount" type="number" disabled></input>
</div>
<div class="input_container">
<label class="small_label" for="owner">Owner:</label>
<input id="owner" type="number" disabled></input>
</div>
<div class="buttons">
<button class="confirm">Use Map</button>
<button class="clear">Clear Map</button>
</div>
<textarea id="mapOutput" class="output hidden"></textarea>
</div>
<script src="script.js"></script>
<body>

147
mapbuilder/script.js
View file

File diff suppressed because one or more lines are too long

64
mapbuilder/style.css
View file

@ -7,8 +7,9 @@ body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
background: black;
color: cyan;
color: #ff7f00;
line-height: 1.5rem;
overflow:hidden;
align-items: center;
@ -70,7 +71,7 @@ body {
clip-path: polygon(
50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
);
background: #444466;
background: #804000;
width: calc(4.75% - 2px);
height: 130%;
}
@ -79,14 +80,6 @@ body {
filter:brightness(80%);
}
.row>.square.planet-red {
background-color: red;
}
.row .planet-blue {
background-color: blue;
}
/* Customize the label (the container) */
.colourButtonContainer {
position: relative;
@ -110,7 +103,7 @@ body {
width: 25px;
}
.colourButton_gray{
background-color: gray;
background-color: lightgray;
}
.colourButton_blue{
background-color: blue;
@ -138,7 +131,7 @@ body {
}
.planet_gray{
background-color: gray;
background-color: lightgray;
}
.planet_blue{
background-color: blue;
@ -165,7 +158,7 @@ body {
background-color: purple;
}
/* On mouse-over, add a grey background color */
/* On mouse-over, add a gray background color */
.colourButtonContainer:hover input ~ .colourButtonCheckmark {
opacity: 0.7;
}
@ -201,10 +194,51 @@ label {
padding-top: 1rem;
}
input, textarea {
border: 1px solid darkcyan;
color: darkcyan;
border: 1px solid #804000;
color: #804000;
padding: 0.5rem;
margin: 0.5rem 0;
background: black;
font-size: 0.8rem;
}
.input_container {
display: flex;
width: 100%;
}
.input_container label {
width: 140px;
font-size: normal;
}
.input_container input {
width: 100%;
font-size: small;
}
.output {
height: 100%;
margin-bottom: 20px;
}
button {
background-color: #E67300; /* Green */
border: none;
color: black;
padding: 10px;
margin: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
flex-grow: 1;
}
.buttons {
display: flex;
width: 100%;
justify-content: center;
}