josh/lifeEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added zoom/drag controls, control panel minimizer

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2020-07-23 15:27:44 -06:00
parent 8fb471025e
commit b0af739747
7 changed files with 131 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dist/css/style.css vendored
View File

@@ -15,9 +15,17 @@ body{
#env {
position: fixed;
top: 0;
bottom: 300px; /* must correspond to control-panel height*/
height: 100%;
width: 100%;
text-align: center;
transform: scale(1);
image-rendering: pixelated;
}
#env-canvas {
top: 0;
left: 0;
position: relative;
}
.control-panel {
@@ -56,6 +64,7 @@ button {
text-decoration: none;
display: inline-block;
font-size: 16px;
min-width: 30px;
}
button:hover{
background-color: #81d2c7;
@@ -72,6 +81,11 @@ button:hover{
grid-column: 1;
}
#view-controls {
float:right;
padding: 10px;
}
.col-row-input {
display: none;
}
@@ -130,11 +144,15 @@ button:hover{
width: 30px;
height: 30px;
}
.edit-mode-btn#drag-view {
background-color: #81d2c7;
}
#drop-org {
bottom: 0;
}
#editor-env {
image-rendering: pixelated;
height: 195px;
width: 195px;
}
@@ -189,3 +207,15 @@ button:hover{
#editor-mode-cont{
padding-top: 20px;
}
#minimize {
margin: 10px;
/* align-self: center; */
float: right;
}
#maximize {
position: fixed;
bottom: 10px;
right: 10px;
display: none;
}

9
dist/index.html vendored
View File

@@ -6,6 +6,7 @@
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script src="./js/bundle.js"></script>
@@ -15,6 +16,10 @@
</div>
<div class='control-panel'>
<div id='speed-controller' class='control-set'>
<div id='view-controls'>
<button id="reset-view" title="Reset View"><i class="fa fa-video-camera"></i></button>
<button class="edit-mode-btn" id="drag-view" title="Drag View"><i class="fa fa-arrows"></i></button>
</div>
<h2>Simulation Speed</h2>
<input id="slider" type="range" min="1" max="300" value="60">
<button id='pause-button'><i class="fa fa-pause"></i></button>
@@ -53,11 +58,12 @@
<p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='hyperparameters'>Rule Tuning</p>
<p class='tabnav-item' id='stats'>Stats</p>
<button id="minimize" title="Minimze Control Panel"><i class="fa fa-minus"></i></button>
</div>
<div id='about' class='tab'>
<div class='left-half'>
<img src="../img/title.png" alt="Life Engine">
<img src="./img/title.png" alt="Life Engine">
<p>The Life Engine is a virtual ecosystem that allows organisms to grow, spread, and compete.</p>
<p>Each organism is made up by a structure of cells, which provide different benefits based on their color.</p>
@@ -171,5 +177,6 @@
</div>
</div>
</div>
<button id="maximize" title="Show Control Panel"><i class="fa fa-plus-square"></i></button>
</body>
</html>

2
dist/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long