JSFiddle - React, Tailwind, and code Playground

by chris k

HTML

<div class="stats">
<form id="mainform">

<label for="population">population</label>
<input id="population" name="population" type="text" value="0">

<label for="day">Day</label>
<input id="day" name="day" type="text" value="0">

<label for="healthy">healthy</label>
<input id="healthy" name="healthy" type="text" value="0">

<label for="infected">infected</label>
<input id="infected" name="infected" type="text" value="0">

<label for="immune">immune</label>
<input id="immune" name="immune" type="text" value="0">

<label for="dead">dead</label>
<input id="dead" name="dead" type="text" value="0">

<input type="button" value="start" onclick="start()" />
<input type="button" value="stop" onclick="stop()" />
<input type="button" value="continue" onclick="weiter()" />
<input type="button" value="step" onclick="doStep()" />
<input type="button" value="reset" onclick="doReset()" />

<label for="infectionRate">infectionRate</label>
<input id="infectionRate" name="infectionRate" type="number" value=0 min=0 max=10 onchange="setInfectionRate()"> 

<label for="immuneRate">immuneRate</label>
<input id="immuneRate" name="immuneRate" type="number" value=0 min=0 max=10 onchange="setImmuneRate()"> 

<label for="deadRate">deadRate</label>
<input id="deadRate" name="deadRate" type="number" value=0 min=0 max=10 onchange="setDeadRate()"> 


</form>
</div>


<div class="actions">
	<ul id="actionList"></ul>
</div>

CSS

.grid {
	background-color: gray;
}

.row {
	background-color: black;
}

.cell {
	margin:1px;
	background-color: green;
	height:5px;
	width: 5px;
	display:inline-block;
}

.healthy {
	background-color: green;
}

.infected {
	background-color: yellow;
}

.immune {
	background-color: white;
}

.dead {
	background-color: black;
}

.actionActive {
	border-color:green;
	border-width:1px;
	border-style:solid;
}

JavaScript

var config_grid_size = 45;
var cellList = [];
var actionList = [];

var intervalCnt = 0;
var running = true;


var infectVAL = 2;
var deadVAL = 8;
var immuneVal = 5;


var healthyPpl = [];
var infectedPpl = [];
var immunePpl = [];
var deadPpl = [];


var populationState = {
  HEALTHY : "healthy",
  INFECTED : "infected",
  IMMUNE : "immune",
  DEAD : "dead",
};

var actionState = {
	ACTIVE : "actionActive",
	INACTIVE: "actionInactive",
}

var actionDefinition = '{ "actions" : [' +
'{ "id":"0", "active":"true", "text":"testtext1" , "infect": "2" },' +
'{ "id":"1", "active":"false", "text":"testtext2" , "infect": "1" },' +
'{ "id":"2", "active":"false", "text":"testtext3" , "infect": "3" } ]}';



function init() {
	
	var gameActions = JSON.parse(actionDefinition);
	var actionCnt = 0;
	while(actionCnt < gameActions.actions.length){
		actionList.push(new Action(gameActions.actions[actionCnt].id, gameActions.actions[actionCnt].text, gameActions.actions[actionCnt].infect, gameActions.actions[actionCnt].active ));
		actionCnt++;
	}
	
	drawActionDefs(actionList);
	
	drawGrid(config_grid_size);
	console.log("created " + cellList.length + " cells.");
	setStartConditions2();
	updateStats();

	document.getElementById("infectionRate").value = infectVAL;
	document.getElementById("immuneRate").value = immuneVal;
	document.getElementById("deadRate").value = deadVAL;
	
}

function start() {
		setInterval(function(){ interval() }, 500);
}

function stop() {
	running = false;
}

function weiter() {
	running = true;
}

function doStep() {
	interval();
	updateStats();
}

function setImmuneRate(){
	immuneVal = document.getElementById("immuneRate").value;
	document.getElementById("immuneRate").value = immuneVal;
}

function setInfectionRate(){
	infectVAL = document.getElementById("infectionRate").value;
	document.getElementById("infectionRate").value = infectVAL;
}

function setDeadRate() {
	deadVAL =...