JSFiddle - React, Tailwind, and code Playground

by bramvandijk88

HTML

<!-- 
  ###########################################################################################
    This is a JSFiddle example of "Cacatoo". This HTML page does not contain the code itself,
    but determines where the grids, graphs, buttons, etc are placed. The real code is in the 
    Javascript Tab. I recommend enabling "Tabs (Columns)" under the settings in the top-right. 
  ###########################################################################################
-->

<html>
  <script src="https://bramvandijk88.github.io/cacatoo/scripts/cacatoo.js"></script>
	  <script src="https://bramvandijk88.github.io/cacatoo/scripts/all.js"></script>  <!-- Dependencies
    <link rel="stylesheet" href="style.css">        <!-- Set style sheet -->

  <head>
    <title>Cacatoo examples</title>
  </head>


  <script>
    /*-------------------------End user-defined code ---------------------*/

  </script>

  <body onload="cacatoo()">
    <div class="header" id="header">
      <h2>Cacatoo (example project)</h2>
    </div>

    <div class="content" id="canvas_holder"> </div>
    <div class="content" id="graph_holder"> </div>
    <div class="content" id="form_holder"></div>
    <div class="footer" id="footer"></div>

  </body>

</html>

CSS

* {
	color:black;
}


body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: #BBBBBB;
  margin: 10px;
  font-size: 13px;
}

/* Style the header */
.header {
  background-color: rgb(108, 62, 122);
  display: block;
  border: 0px solid #FFFFFF;
  /*box-shadow: 3px 1px 0px #24242444;*/
  border-radius: 15px 15px 0px 0px;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}


.logos {
  z-index: -1;
  vertical-align: middle;
  display: inline-block;
  padding-left: 10px;
  padding-top: 10px;
}

.example_card {
  width: 220px;
  height: 220px;
  background-color: rgb(151, 183, 204);
  box-shadow: rgba(100, 100, 111, 0.1) 20px 7px 29px 0px;
  /* font-weight: bold; */
  color: rgb(229, 239, 245);
  font-size: 12px;
  line-height: 25px;
  margin: 25px;
  padding: 20px;
  padding-bottom: 40px;
  padding-top: 10px;
  border-radius: 0px 0px 0px 0px;
  display: inline-block;
  transition: all 100ms ease-out 200ms;
  transition-delay: 0s;
}

.example_card_img {
  width: 100%;
  height: 100%;
  border-radius: 0px 0px 0px 0px;
  background-position: 45% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.example_card:hover {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  color: black;
  border-radius: 30px 0px 30px 0px;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}

.example_card:active {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  padding-top: 11px;
  height: 199px;
  color: black;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}


/* Content (grid, graphs, sliders) */
.content {
  text-align: center;
  /*box-shadow: 3px 1px 0px #24242444;*/
  /*border-bottom: 1px dashed #88888844;*/
  background-color: #e2e2e2;
  padding: 10px;
}

/* Output div */
.output {
  border-radius: 8px 8px 8px 8px;
  margin: 30px;
  height: 300px;
  overflow-y: scroll;
  font-size: 11px;
 ...

JavaScript

// First, we define a few 'variables', which we can use to ajust the model later

var sim; // This 'global' variable will hold the entire simulation
var base_fitness_1 = 1e-20
var base_fitness_2 = 1e-20
var helper_rate_type_1 = 5.0 // Determines how much help a 'cooperative' individual gives to its neighbours
var helper_rate_type_2 = 0.00 // Determines how much help a 'cheating' individual gives to its neighbours
var death = 0.15 // Determines how often an individual spontaneously dies, making a new spot available
var movement = 0.8 // Determines how much individuals 'move around'

/**
 * function cacatoo() contains all the user-defined parts of a cacatoo-model. Configuration, update rules, what is displayed or plotted, etc. It's all here.
 */
function cacatoo() {
  /*
      1. SETUP. First, set up a configuration-object. Here we define how large the grid is, how long will it run, what colours will the critters be, etc. 
  */
  let config = { // Configuration of your model. How large is the grid, how long will it run, what colours will the critters be, etc. 
    title: "Simulating cooperation",
    description: "",
    maxtime: 1000000,
    ncol: 200,
    nrow: 200, // dimensions of the grid to build
    seed: 61,
    wrap: [true, true], // Wrap boundary [COLS, ROWS]
    scale: 3, // scale of the grid (nxn pixels per grid point)            
    graph_interval: 5,
    graph_update: 10,
    statecolours: {
      'type': {
        'Cooperator': 'gold',
        'Cheater': 'violet'
      },
      'alive': {
        1: 'white'
      }
    }
  }

  /*
        1. SETUP. (continued) Now, let's use that configuration-object to generate a new Cacatoo simulation
    */
  sim = new Simulation(config) // Initialise a new Simulation instance with configuration given above 

  sim.makeGridmodel("coop") // Make a new gridmodel named cheater

  sim.initialise = function() {
    sim.coop.clearGrid()
    let init_individuals = [{
        type: "Cooperator",
        alive: 1,
       ...