<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script type="application/javascript" src="//rawgit.com/cstefanache/evolutionary-computation/master/dist/bundle.js"></script>

  <body>
    <p>By default the environment will be initialized with 3 populations of 1000 individuals each.</p>
    <p>You can use the bottom HUD to control the evolution. 
    <br/><b>Start/Stop</b> - evolution controlls
    <br/><b>Tick</b> - when stopped the evolution will be processed step by step. 
    <br/><b>+Population [num]</b> - adds a new population with num individuals. 
    <br/><b>Reset</b> - resets the environment</p>
    <script>
       System.import('Application').then(function(module) {
        window.application = new module.Application(function() {

            console.log(application.listOperators());
            application.addOperator(application.createOperator('Schwefel'));
            application.addOperator(application.createOperator('LinearRanking', ['schwefel']));
            application.addOperator(application.createOperator('CanvasRenderer', ['x', 'y', {
                x: [-510, 510],
                y: [-510, 510]
            }]));
            application.addOperator(application.createOperator('CanvasRenderer', ['x', 'y', {
                x: [-420.98, -420.96],
                y: [-420.98, -420.96]
            }]));
            application.addOperator(application.createOperator('TableRenderer', [5]));

            var selectionGroupOperator = application.createOperator('GroupOperator', ["SelectionGroup", 50]);
            application.addOperator(selectionGroupOperator);
            application.addOperator(
                    application.createOperator('Roulette', ['linearRanking']), selectionGroupOperator);
            application.addOperator(
                    application.createOperator('HauptGA', [0.5, 0.2]), selectionGroupOperator);

            application.addOperator(application.createOperator('PopulationSizeControl', [1000]));

            application.addPopulation(100);


            application.tick();
            application.initializeHud();
        })
    }, function(err) {
        console.log(err)
    }).catch(console.error.bind(console));
    console.log(System);
    </script>


  </body>

</html>
// Code goes here

/* Styles go here */