index.html

<title>Acan Demo Page</title>
<script src="js/HackTimer.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/grid.js"></script>
<script src="js/world.js"></script>
<script src="js/simulation-interface.js"></script>
<link rel="stylesheet" href="main.css"/>

<!-- codemirror -->
<link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="js/codemirror/addon/hint/show-hint.css">
<script src="js/codemirror/lib/codemirror.js"></script>
<script src="js/codemirror/addon/hint/show-hint.js"></script>
<script src="js/codemirror/addon/hint/javascript-hint.js"></script>
<script src="js/codemirror/addon/comment/comment.js"></script>
<script src="js/codemirror/mode/javascript/javascript.js"></script>
<!-- /codemirror -->

<div id="overlay">
    <div id="overlayPopup">
        Sharable link: <br />
        <input onclick="this.select()" id="urlBox" class="cody" readonly />
    </div>
</div>

<canvas id="test"></canvas>

<div id="controls">
    <select id="simulation"></select>
    <a id="run">Run</a>
    <a id="pause">Pause</a>
    <a id="step">Step</a>
    <a id="reset">Reset</a>
    <a id="save">Save</a>
    <a id="load"><< Load</a>

    <label for="stepDelay">Step delay (ms)</label>
    <input type="number" id="stepDelay" value="100">

    <label for="iterationCount">Iteration #</label>
    <input type="number" id="iterationCount" value="0" disabled>

    <div id="stats"></div>
    <div id="legend"></div>
</div>

<textarea id="code" class="cody"></textarea>


<script>
    // init
    var sims = {
        'Game of Life': 'game-of-life',
        'Langton\'s Ant': 'langtons-ant',
        'Racist People': 'racist-people',
        'Forest Fire': 'forest-fire',
        'BZ Reaction': 'bz-reaction'
    };
    var width = 75;
    var height = 75;

    var world = new World(width, height);
    var grid = new Grid('test', width, height);

    // helpers
    function getColorMapHTML() {
        var rowTemplate = '<tr><td><div class="legendColor" style="background: {color}"></div></td><td>{name}</td></tr>';

        var html = '<table>';
        if(world.sim.legend) {
            var legendData = world.sim.legend();
            for(var color in legendData) {
                if(!legendData.hasOwnProperty(color)) continue;
                var name = legendData[color];
                if(color.charAt(0) != '#') {
                    color = grid.colors[color];
                }
                html += rowTemplate.replace('{color}', color).replace('{name}', name);
            }
        } else {
            for(var entry of grid.colorMap.entries()) {
                html += rowTemplate.replace('{color}', entry[1]).replace('{name}', entry[0]);
            }
        }
        html += '</table>';
        return html;
    }

    function redraw() {
        grid.updateData(world.getData());
        document.getElementById('legend').innerHTML = getColorMapHTML();
        renderStats();
    }

    function step() {
        var res = world.step();
        generationDisplay.value = world.generation;
        redraw();
        return res;
    }

    var paused = true;
    var timeoutRef = null;
    function startLoop() {
        if(step()) { // finished
            pause();
        }
        if(!paused) {
            timeoutRef = setTimeout(startLoop, Number(stepDelayInput.value));
        }
    }

    function getCode() {
        if(editor) {
            return editor.getValue();
        } else {
            return codeArea.value;
        }
    }

    function loadFromCode() {
        pause();

        try {
            var sim = eval('(' + getCode() + ')');
        } catch(e) {
            alert('There is an error occured while loading the code.');
        }
        world.setSimulation(sim);
        world.reset();

        grid.reset();
        if(sim.colorPicker) {
            grid.colorPicker = sim.colorPicker;
        }

        run();
    }

    function saveCode() {
        var newUrl = window.location.origin + window.location.pathname + '#' + btoa(getCode());
        window.location = newUrl;
        var urlBox = document.getElementById('urlBox');

        urlBox.value = 'Creating link...';

        fetch('https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyC1CXR3sIpbTtiz_kDoP3TrIpOMPDGV9Bo',
                {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    method: 'POST',
                    body: JSON.stringify({longUrl: newUrl})
                }).then(function(res) {
            return res.json();
        }).then(function(data) {
            urlBox.value = data.id;
        });

        overlay.style.display = 'block';
        urlBox.select();
    }

    function changeSim(sim) {
        fetch('./js/examples/' + sim + '.js', {
            method: 'get'
        }).then(function(response) {
            return response.text();
        }).then(function(text) {
            codeArea.value = text.replace(/\t/g, '    ');
            editor.setValue(codeArea.value);
            loadFromCode();
        });
    }

    function renderStats() {
        var html = '<table>';
        var stats = world.getStats();
        for(var stat in stats) {
            if(!stats.hasOwnProperty(stat)) continue;
            html += '<tr><td>' + stat + '</td><td>' + stats[stat] + '</td></tr>';
        }
        html += '</table>';
        document.getElementById('stats').innerHTML = html;
    }

    function hideOverlay() {
        overlay.style.display = 'none';
    }

    // ui stuff
    var stepDelayInput = document.getElementById('stepDelay');
    var generationDisplay = document.getElementById('iterationCount');
    var runButton = document.getElementById('run');
    var pauseButton = document.getElementById('pause');
    var stepButton = document.getElementById('step');
    var resetButton = document.getElementById('reset');
    var loadButton = document.getElementById('load');
    var saveButton = document.getElementById('save');
    var simSelect = document.getElementById('simulation');
    var codeArea = document.getElementById('code');
    var overlay = document.getElementById('overlay');

    // add simulations
    for(var sim in sims) {
        if(!sims.hasOwnProperty(sim)) continue;
        var option = document.createElement('option');
        option.value = sims[sim];
        option.innerText = sim;
        simSelect.appendChild(option);
    }

    function run() {
        paused = false;
        runButton.style.display = 'none';
        pauseButton.style.display = 'block';
        startLoop();
    }

    function pause() {
        paused = true;
        runButton.style.display = 'block';
        pauseButton.style.display = 'none';
        clearTimeout(timeoutRef);
    }

    runButton.addEventListener('click', run);
    pauseButton.addEventListener('click', pause);
    stepButton.addEventListener('click', step);
    resetButton.addEventListener('click', function() {
        world.reset();
        redraw();

    });
    loadButton.addEventListener('click', loadFromCode);
    saveButton.addEventListener('click', saveCode);
    overlay.addEventListener('click', function(e) {
        if(e.target.id == 'overlay') {
            hideOverlay();
        }
    });

    simSelect.addEventListener('change', function(e) {
        changeSim(e.target.value);
    });

    // initial
    var editor = null;
    function initEditor() {
        // code mirror editor
        editor = CodeMirror.fromTextArea(codeArea, {
            lineNumbers: true,
            dragDrop: false,
            lineWrapping: true,
            indentWithTabs: true,
            mode: {name: "javascript", globalVars: true},
            extraKeys: {
                "Alt-Enter": "autocomplete",
                "Alt-Space": "toggleComment"
            }
        });
    }

    window.onload = function() {
        var sim = 'game-of-life';
        if(window.location.hash) {
            sim = decodeURIComponent(window.location.hash.substring(1));
        }

        var found = false;
        for(var simName in sims) {
            if(!sims.hasOwnProperty(simName)) continue;
            if(sim == sims[simName]) {
                simSelect.value = sim;
                changeSim(sim);
                found = true;
            }
        }

        if(!found) {
            codeArea.value = atob(sim);
            loadFromCode();
        }

        // escape key handle
        document.onkeydown = function(evt) {
            evt = evt || window.event;
            if(evt.keyCode == 27) {
                overlay.style.display = 'none';
            }
        };

        initEditor();
    };
</script>