Added control panel

2020-07-08 19:32:05 -06:00
parent 2ba56abb1d
commit c6b0a5bafc
9 changed files with 176 additions and 37 deletions
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -6,9 +6,44 @@ body{

 canvas {
    display: block;
+
 }

 * {
    margin: 0;
    padding: 0;
+}
+
+.env {
+    height: 80vh;
+    position: static;
+}
+
+.control-panel {
+    height: 20vh;
+    width: 100vw;
+    background-color: gray;
+    position: fixed;
+    display: grid;
+}
+
+.control-set {
+    margin: 5px;
+    padding: 5px;
+    border: 10px;
+    border-color: black;
+    grid-row: 1;
+    height: 100%;
+}
+
+#speed-controller {
+    grid-column: 1;
+}
+
+#hyperparameters {
+    grid-column: 2;
+}
+
+#powers {
+    grid-column: 3;
 }
--- a/dist/html/index.html
+++ b/dist/html/index.html
@@ -4,9 +4,29 @@
 		<meta charste="UTF-8">
 		<title>Evolution Simulator</title>
 		<link rel="stylesheet" href="../css/style.css">
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 	</head>
 	<body>
-		<canvas id='canvas'></canvas>
 		<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>
+				<input id="slider" type="range" min="1" max="300" value="60">
+				<button id='pause-button'>Pause</button>
+			</div>
+			
+			<div id='hyperparameters' class='control-set'>
+				<h2>Hyperparameters</h2>
+			</div>
+
+			<div id='powers' class='control-set'>
+				<h2>Powers</h2>
+			</div>
+		</div>
+		
 	</body>
 </html>