Kelder/planet-wars
32
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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> <body>
<div class="grid"></div> <div class="grid"></div>
<div class="controls"> <div class="controls">
<h2>controls</h2> <h2>Controls</h2>
<div class="colourButtonWrapper"> <div class="colourButtonWrapper"></div>
<label class="colourButtonContainer"><input checked name="colourButton" class="colourButton" type="radio" value="gray"><span class="colourButtonCheckmark colourButton_gray"></span></label> <label>How many squares (this will remove your map)</label>
</div>
<label>how many squares (this will remove your map)</label>
<input class="amountOfSquares" type="number" min="10" max="50" value="20"></input> <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="currentName">Planet parameters</label>
<label for="readParameters">read parameters</label> <div class="input_container">
<textarea id="parametersFrom" rows="10" cols="50" disabled></textarea> <label for="currentName">Name:</label>
<button class="toggleExperimental hidden">experimental</button> <input id="currentName" type="text" placeholder="name"></input>
<a class="downloadJSON"></a> </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> </div>
<script src="script.js"></script> <script src="script.js"></script>
<body> <body>

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