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

created world controls tab

Browse Source
This commit is contained in:
MaxRobinsonTheGreat
2021-12-18 11:06:55 -06:00
parent b813dfa4c4
commit 09ed9edb07
2 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/css/style.css vendored
View File

@@ -57,11 +57,15 @@ body{
img {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
width: 60%;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
object-fit: cover;
width: 85%;
max-width: 500px;
max-height: 40%;
border-radius: 10px;
overflow: hidden;
}
button {
@@ -261,3 +265,7 @@ button:active{
#maximize-hot-control {
right: 10px;
}
.grid-size-in {
width: 75px;
}

64
dist/index.html vendored
View File

@@ -24,9 +24,9 @@
<button class="edit-mode-btn wall-drop" id="wall-drop" title="Drop/Remove Wall. Hotkey: D"><i class="fa fa-square"></i></button>
<button class="edit-mode-btn food-drop selected" id="food-drop" title="Drop/Remove Food. Hotkey: F"><i class="fa fa-cutlery"></i></button>
<button class="edit-mode-btn click-kill" id="click-kill" title="Click to kill. Hotkey: G"><i class="fa fa-bolt"></i></button>
<button id="clear-walls" title="Clear All Walls. Hotkey: B"><i class="fa fa-window-close"></i></button>
</div>
<h2>Simulation Speed</h2>
<img src="./img/title.png" alt="Life Engine">
<h3>Simulation Speed</h3>
<input id="slider" type="range" min="1" max="300" value="60">
<button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></i></button>
<button class="headless" title="Toggle rendering. Hotkey: H"><i class="fa fa-eye-slash"></i></button>
@@ -34,26 +34,6 @@
<p id='fps-actual'></p>
<button id='reset-env' title='Restarts simulation with default organism.'>Reset</button>
<button id='clear-env' title="Removes all organisms and walls. Will disable 'reset on extinction'"">Clear</button>
<br>
<button id='random-walls' title="Generates random walls.">Random Walls</button>
<br>
<label for="auto-reset">Reset on total extinction</label>
<input type="checkbox" id="auto-reset" checked>
<br>
<p id='reset-count'>Auto reset count: </p>
<h3>Grid Size</h3>
<label for="cell-size">Cell Size:</label>
<input type="number" id="cell-size" min="1" max="100" value=5 step="1">
<label for="fill-window">Fill Window</label>
<input type="checkbox" id="fill-window" checked>
<div class='col-row-input'>
<label for="col-input">Columns:</label>
<input type="number" id="col-input" min="1" value=100 step="1">
<label for="row-input">Rows:</label>
<input type="number" id="row-input" min="1" value=100 step="1">
</div>
<br>
<button id='resize'>Resize and Reset</button>
</div>
<div id='tab-container' class='control-set'>
@@ -61,15 +41,15 @@
<div class="tabnav">
<p class='tabnav-item open-tab' id='about'>About</p>
<p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='world-controls'>World Controls</p>
<p class='tabnav-item' id='hyperparameters'>Simulation Controls</p>
<p class='tabnav-item' id='stats'>Stats</p>
<p class='tabnav-item' id='challenges'>Challenges</p>
<!-- <p class='tabnav-item' id='challenges'>Challenges</p> -->
<button id="minimize" title="Minimze Control Panel."><i class="fa fa-minus-square"></i></button>
</div>
<div id='about' class='tab'>
<div class='left-half'>
<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>
@@ -177,6 +157,42 @@
</div>
</div>
<div id='world-controls' class='tab'>
<div class='left-half'>
<h3>Grid Size</h3>
<label for="cell-size">Cell Size:</label>
<input type="number" id="cell-size" min="1" max="100" value=5 step="1">
<label for="fill-window">Fill Window</label>
<input type="checkbox" id="fill-window" checked>
<div class='col-row-input'>
<label for="col-input">Columns:</label>
<input type="number" class="grid-size-in" id="col-input" min="1" value=100 step="1">
<label for="row-input">Rows:</label>
<input type="number" class="grid-size-in" id="row-input" min="1" value=100 step="1">
</div>
<br>
<button id='resize'>Resize and Reset</button>
<h3>Reset Options</h3>
<label for="auto-reset">Reset on total extinction</label>
<input type="checkbox" id="auto-reset" checked>
<br>
<p id='reset-count'>Auto reset count: </p>
<label for="reset-options">Starting state:</label>
<select name="reset-options" id="reset-options">
<option value="default-org">Simple producer</option>
<option value="rand-orgs">Random organisms</option>
<option value="empty">No organisms</option>
</select>
</div>
<div class='right-half'>
<button id='random-walls' title="Generates random walls.">Generate random walls</button> <br>
<button id="clear-walls" title="Clear All Walls. Hotkey: B">Clear all walls</button>
<br>
<label for="clear-walls-reset" title='When on, walls will be cleared when the environment resets'>Clear walls on reset</label>
<input type="checkbox" id="clear-walls-reset" checked>
</div>
</div>
<div id='hyperparameters' class='tab'>
<div class='left-half'>
<h2>Simulation Controls</h2>