max fps and active tab css

This commit is contained in:
MaxRobinsonTheGreat
2021-12-18 10:34:19 -06:00
parent 19c2772e62
commit b813dfa4c4
3 changed files with 12 additions and 3 deletions

4
dist/css/style.css vendored
View File

@@ -134,6 +134,10 @@ button:active{
background-color: #81d2c7;
color: black;
}
.open-tab {
background-color: #66a39b;
color: black;
}
.tab {
grid-template-columns: repeat(2, 1fr);

2
dist/index.html vendored
View File

@@ -59,7 +59,7 @@
<div id='tab-container' class='control-set'>
<div class="tabnav">
<p class='tabnav-item' id='about'>About</p>
<p class='tabnav-item open-tab' id='about'>About</p>
<p class='tabnav-item' id='editor'>Editor</p>
<p class='tabnav-item' id='hyperparameters'>Simulation Controls</p>
<p class='tabnav-item' id='stats'>Stats</p>

View File

@@ -114,11 +114,14 @@ class ControlPanel {
defineEngineSpeedControls(){
this.slider = document.getElementById("slider");
this.slider.oninput = function() {
this.fps = this.slider.value
const max_fps = 300;
this.fps = this.slider.value;
if (this.fps>=max_fps) this.fps = 1000;
if (this.engine.running) {
this.changeEngineSpeed(this.fps);
}
$('#fps').text("Target FPS: "+this.fps);
let text = this.fps >= max_fps ? 'MAX' : this.fps;
$('#fps').text("Target FPS: "+text);
}.bind(this);
$('.pause-button').click(function() {
$('.pause-button').find("i").toggleClass("fa fa-pause");
@@ -177,6 +180,8 @@ class ControlPanel {
$('.tab').css('display', 'none');
var tab = '#'+this.id+'.tab';
$(tab).css('display', 'grid');
$('.tabnav-item').removeClass('open-tab')
$('#'+this.id+'.tabnav-item').addClass('open-tab');
self.engine.organism_editor.is_active = (this.id == 'editor');
self.stats_panel.stopAutoRender();
if (this.id === 'stats') {