index.html

﻿<!DOCTYPE html>

<html lang="en">

<head>
  <title>Game of Life</title>
  <link rel="stylesheet" type="text/css" href="styles/index.css">
  <meta charset="utf-8">
</head>

<body>
    <h1>It's a Hard Knock Game of Life!</h1>

    <div id="commentBox" class="scroll-box centerUs">
        <p id="comments">Comments about this Pattern:</p>
    </div>
    <div id="controls" class="centerUs">
        <div id="buttons">
            <button onclick="loadPattern()">Wiki Pattern</button>
            <button id="randomButton" onclick="random()">Random</button>
            <br>
            <button onclick="drawState(stepState(1))">Step forward</button>
            <button onclick="stepBack()">Step back</button>
            <button id="runButton" onclick="run()">Run</button>
            <br>
            <button onclick="clearState()">Clear</button>
            <button onclick="saveState()">Save</button>
            <button onclick="resetState()">Reset</button>
        </div>
        <div id="toggles">
            <form autocomplete="off">
                <input id="noResids" type="radio" name="residues" onclick="changeResidue()" value=0 checked><label for="noResids">No Residues</label><br>
                <input id="shadows" type="radio" name="residues" onclick="changeResidue()" value=1><label for="shadows">Shadows</label><br>
                <input id="husks" type="radio" name="residues" onclick="changeResidue()" value=2><label for="husks">Husks</label><br>
                <input id="autoZoom" type="checkbox" value="unlocked" onclick="shiftLockToggle()" checked/><label for="autoZoom">Auto Zoom</label><br>
                <label for="cellSizeInput">Cell Size:</label>
                <input id="cellSizeInput" type="range" value="3" min="0" max="6" oninput="cellSizeByInput()">
                <output id="cellSizeOutput">8px</output><br>
                <label for="tickrateInput">Tickrate:</label>
                <input id="tickrateInput" type="range" value="2" min="-2" max="9" oninput="tickrateByInput()">
                <output id="tickrateOutput">250ms</output>
            </form>
        </div>  
    </div>

    <div id="canvasStack">
        <canvas id="gameCanvas" width="800" height="600">
            No canvas support
        </canvas>
    </div>

    <p>
        This is our (work in progress: Pre-Pre-Alpha) version of Conway's Game of Life.
        <a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">Wikipedia Article</a>
        <a href="http://pmav.eu/stuff/javascript-game-of-life-v3.1.1/">Javascript Example</a>
    </p>

    <script src="scripts/patternsArray.js" type="text/javascript"></script>
    <script src="scripts/Game.js" type="text/javascript"></script>
    <!-- <script type="text/javascript">
        window.onload = Game.start;
    </script> -->

</body>

</html>