Added rotations, health, damage

This commit is contained in:
MaxRobinsonTheGreat
2020-07-16 13:29:17 -06:00
parent 9f13068cda
commit 2fc2ba7b80
12 changed files with 434 additions and 62 deletions

256
dist/bundle.js vendored

File diff suppressed because one or more lines are too long

21
dist/css/style.css vendored
View File

@@ -2,6 +2,8 @@ body{
background: black;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
canvas {
@@ -15,15 +17,18 @@ canvas {
}
.env {
height: 80vh;
position: static;
position: absolute;
top: 0;
bottom: 300px; /* must correspond to control-panel height*/
width: 100%;
}
.control-panel {
height: 20vh;
width: 100vw;
height: 300px;
width: 100%;
bottom: 0;
position: absolute;
background-color: gray;
position: fixed;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
@@ -35,20 +40,16 @@ canvas {
border: 10px;
border-color: black;
background-color: lightgray;
max-width: 100%;
/* height: 100%; */
}
#speed-controller {
grid-column: 1;
grid-row: 1;
/* background-color: blue; */
}
#stats {
grid-column: 1;
grid-row: 2;
/* background-color: blue; */
}
#hyperparameters {
@@ -60,8 +61,6 @@ canvas {
#abilities {
grid-column: 3;
grid-row: 1 / 3;
/* background-color: yellow; */
}
.control-mode-button {

13
dist/html/index.html vendored
View File

@@ -4,14 +4,15 @@
<meta charste="UTF-8">
<title>Evolution Simulator</title>
<link rel="stylesheet" href="../css/style.css">
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script src="../bundle.js"></script>
<div class='env'>
<canvas id='canvas'></canvas>
</div>
<div class='control-panel'>
<div id='speed-controller' class='control-set'>
<h2>Simulation Speed</h2>
@@ -48,6 +49,15 @@
<label for="remove-prob">Remove Cell:</label>
<input class="mut-prob" type="number" id="remove-prob" min="0" max="100" value=33>
<br/>
<h4>Organism Rotation</h4>
<label for="mover-rot">Movers can rotate</label>
<input type="checkbox" id="mover-rot" name="scales" checked>
<br/>
<label for="offspring-rot">Offspring rotate</label>
<input type="checkbox" id="offspring-rot" name="scales" checked>
<br/>
<label for="insta-kill">Insta Kill</label>
<input type="checkbox" id="insta-kill" name="scales">
</div>
<div id='abilities' class='control-set'>
@@ -62,6 +72,5 @@
<button id='clear-walls'>Clear All Walls</button>
</div>
</div>
</body>
</html>