Added color scheme/better brain
This commit is contained in:
MaxRobinsonTheGreat
37
dist/css/style.css
vendored
37
dist/css/style.css
vendored
@@ -98,7 +98,10 @@ button:hover{
|
||||
grid-template-columns: 1;
|
||||
}
|
||||
.editor-buttons {
|
||||
display: block;
|
||||
display: grid;
|
||||
grid-template-rows: 3;
|
||||
grid-template-columns: 1;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.col-row-input {
|
||||
@@ -158,6 +161,7 @@ button:hover{
|
||||
.edit-mode-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.edit-mode-btn:hover{
|
||||
background-color: #81d2c7;
|
||||
@@ -165,6 +169,9 @@ button:hover{
|
||||
.edit-mode-btn#drag-view {
|
||||
background-color: #81d2c7;
|
||||
}
|
||||
#clear-walls {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#organism-options {
|
||||
display: none;
|
||||
}
|
||||
@@ -181,6 +188,10 @@ button:hover{
|
||||
}
|
||||
#cell-selections {
|
||||
display: none;
|
||||
grid-template-columns: 2;
|
||||
height: fit-content;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#cell-legend {
|
||||
display: flex;
|
||||
@@ -206,30 +217,6 @@ button:hover{
|
||||
border-color: black;
|
||||
border: 5px;
|
||||
}
|
||||
#mouth{
|
||||
background-color: orange;
|
||||
}
|
||||
#producer{
|
||||
background-color: white;
|
||||
}
|
||||
#mover{
|
||||
background-color: #3493eb;
|
||||
}
|
||||
#killer{
|
||||
background-color: red;
|
||||
}
|
||||
#armor{
|
||||
background-color: purple;
|
||||
}
|
||||
#eye{
|
||||
background-color: #d4bb3f;
|
||||
}
|
||||
#food{
|
||||
background-color: green;
|
||||
}
|
||||
#wall{
|
||||
background-color: gray;
|
||||
}
|
||||
#editor-mode-cont{
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
76
dist/index.html
vendored
76
dist/index.html
vendored
@@ -38,7 +38,7 @@
|
||||
<br>
|
||||
<h3>Grid Size</h3>
|
||||
<label for="cell-size">Cell Size:</label>
|
||||
<input type="number" id="cell-size" min="1" max="100" value=4 step="1">
|
||||
<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'>
|
||||
@@ -82,6 +82,7 @@
|
||||
<div class='cell-legend-type' id='mover' title="Mover: Allows for movement and rotation."></div>
|
||||
<div class='cell-legend-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
|
||||
<div class='cell-legend-type' id='armor' title="Armor: Negates affects of killer cell."></div>
|
||||
<div class='cell-legend-type' id='eye' title="Eye: Observes cells and decides movement."></div>
|
||||
<div class='cell-legend-type' id='food' title="Food: Not part of an organism. Once an organism has eaten enough food, it will reproduce."></div>
|
||||
<div class='cell-legend-type' id='wall' title="Wall: Not part of an organism. Blocks movement and reproduction."></div>
|
||||
</div>
|
||||
@@ -103,32 +104,75 @@
|
||||
<canvas id='editor-canvas'></canvas>
|
||||
</div>
|
||||
<div id='cell-selections'>
|
||||
<div class='cell-type' id='mouth' title="Mouth: Eats adjacent food."></div>
|
||||
<div class='cell-type' id='producer' title="Producer: Produces adjacent food."></div>
|
||||
<div class='cell-type' id='mover' title="Mover: Allows for movement and rotation."></div>
|
||||
<div class='cell-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
|
||||
<div class='cell-type' id='armor' title="Armor: Negates affects of killer cell."></div>
|
||||
<div class='cell-type' id='eye' title="Eye: Looks for cells to move away from or towards"></div>
|
||||
<div style='grid-column: 1;'>
|
||||
<div class='cell-type' id='mouth' title="Mouth: Eats adjacent food."></div>
|
||||
<div class='cell-type' id='producer' title="Producer: Produces adjacent food."></div>
|
||||
<div class='cell-type' id='mover' title="Mover: Allows for movement and rotation."></div>
|
||||
</div>
|
||||
<div style='grid-column: 2;'>
|
||||
<div class='cell-type' id='killer' title="Killer: Harms oranisms in adjacent cells."></div>
|
||||
<div class='cell-type' id='armor' title="Armor: Negates affects of killer cell."></div>
|
||||
<div class='cell-type' id='eye' title="Eye: Looks for cells to move away from or towards. Click again on a placed cell to rotate"></div>
|
||||
</div>
|
||||
|
||||
<button id='clear-editor'>Clear</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='right-half'>
|
||||
<div id='editor-details'>
|
||||
<div id='organism-details'>
|
||||
<p id='editor-cell-count'>1 cell</p>
|
||||
</div>
|
||||
<div id='organism-options'>
|
||||
<label for="birth-distance" title='The number of cells away offspring will spawn.'>Reproduction Distance:</label>
|
||||
<input type="number" id="birth-distance" min="1" max="100" value=3 step="1">
|
||||
<div id='organism-details' style="display:none;">
|
||||
<h3>Organism Details</h3>
|
||||
<p class='cell-count'>Cell count: </p>
|
||||
<p id='birth-distance'>Reproduction Distance: </p>
|
||||
<p id='move-range'>Move Range: </p>
|
||||
<p id='mutation-rate'>Mutation Rate: </p>
|
||||
<br>
|
||||
|
||||
<div class='brain-details'>
|
||||
<h4>Brain</h4>
|
||||
<p id='chase-types'>Move Towards: food</p>
|
||||
<p id='retreat-types'>Move Away From: killer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='edit-organism-details' style="display:none;">
|
||||
<h3>Edit Organism</h3>
|
||||
<p class='cell-count'>Cell count: </p>
|
||||
<label for="birth-distance-edit" title='The number of cells away offspring will spawn.'>Reproduction Distance:</label>
|
||||
<input type="number" id="birth-distance-edit" min="1" max="100" value=3 step="1">
|
||||
<br>
|
||||
<div id='move-range-cont'>
|
||||
<label for="move-range-edit" title='The number of cells to move before randomly changing direction. Overriden by brain decisions.'>Move Range:</label>
|
||||
<input type="number" id="move-range-edit" min="1" max="100" value=3 step="1">
|
||||
</div>
|
||||
<br>
|
||||
<div class='brain-details'>
|
||||
<h4>Brain</h4>
|
||||
<label for="observation-type-edit">Observation: </label>
|
||||
<select name="observation-type-edit" id="observation-type-edit">
|
||||
<option value="food">food</option>
|
||||
<option value="mouth">mouth</option>
|
||||
<option value="producer">producer</option>
|
||||
<option value="mover">mover</option>
|
||||
<option value="killer">killer</option>
|
||||
<option value="armor">armor</option>
|
||||
<option value="eye">eye</option>
|
||||
</select>
|
||||
|
||||
<label for="reaction-edit">Reaction: </label>
|
||||
<select name="reaction-edit" id="reaction-edit">
|
||||
<option value="0">ignore</option>
|
||||
<option value="1">move away</option>
|
||||
<option value="2">move towards</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id='hyperparameters' class='tab'>
|
||||
<div class='left-half'>
|
||||
<h2>Simulation Controls</h2>
|
||||
<h4>Food Production vs Lifespan</h4>
|
||||
<label for="food-prod-prob" title='The probability that a producer cell will produce food each tick.'>Probability of producing food:</label>
|
||||
<input type="number" id="food-prod-prob" min=".001" max="100" value=4 step="1">
|
||||
<br>
|
||||
@@ -145,7 +189,7 @@
|
||||
<input type="checkbox" id="insta-kill">
|
||||
<br>
|
||||
<label for="look-range" title='How far an eye cell can see (in number of cells)'>Look range:</label>
|
||||
<input type="number" id="look-range" min="1" max="50" value=10 step="1">
|
||||
<input type="number" id="look-range" min="1" max="50" value=20 step="1">
|
||||
|
||||
</div>
|
||||
<div class='right-half'>
|
||||
|
||||
2
dist/js/bundle.js
vendored
2
dist/js/bundle.js
vendored
File diff suppressed because one or more lines are too long
3
dist/json/color_scheme.json
vendored
Normal file
3
dist/json/color_scheme.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"hello": "world"
|
||||
}
|
||||
Reference in New Issue
Block a user