<!DOCTYPE html>
<html lang="en">

<!-- ===================================================================
|
| NAME
| 
|     overview.html
|
| DESCRIPTION
|
|     This is the game of life web page.
|     It is a hand-crafted HTML 5 W3C validated document.
|
| AUTHOR
|
|    Sean Erik O'Connor
|
=================================================================== -->


<head>
   <!-- Define the MIME type for this document. -->
   <meta charset="utf-8">

   <title>Game of Life</title>

   <meta name="description" 
         content="Game of Life implemented in Javascript and Windows --- free software." />

   <meta name="author"
         content="Sean Erik O'Connor" />

   <meta name="copyright"
         content="Copyright (C) 1999-2017 by Sean Erik O'Connor.  All Rights Reserved." />   

   <meta name="rating"
         content="general" />

   <meta name="keywords" 
         content="Sean Erik O'Connor,
                  game of life, Javascript, Windows, Win 32, Cygwin,
                  J. H. Conway, cellular automata,
                  educational software,mathematical software,
                  source code, C software, free software, freeware, shareware" />

   <!-- Point to the Javascript Game of Life -->
   <script src="Scripts/gameOfLife.js"></script>

   <!-- If we can't load the style sheet below turn off the border images. -->
   <style type="text/css">
       img.border { display: none ; }
   </style>

   <!-- Cascading style sheet for this document. -->
    <link rel="StyleSheet" href="../../../StyleSheet.css" type="text/css" /> 

    <!-- For Win/IE we must load additional styles to work
         around the Win/IE bug in handling position:fixed.
         This hack uses Win IE conditional comments which won't 
         be seen by other browsers.
     -->
    <!--[if lte IE 9]>
    <link rel="StyleSheet" href="../../../StyleSheetWinIE.css" type="text/css" /> 
    <![endif]-->
</head>

<body onload="setChecked()">
    <!-- Insert a border at the left side of the page. -->
    <p>
        <img class="border" 
             src="../../../WebPageImages/sinXYPlot.png" 
             alt="Sin( x y ) Image Border." />
    </p>


    <h1>GAME OF LIFE</h1>

    <hr />

    <h3>Game of Life in Javascript</h3>

    <p>
    This is an implementation of J. H. Conway's cellular automata
    <a href="http://conwaylife.com/wiki/Main_Page">game of life</a>
    in Javascript where the game board is a topologically a torus.  See my
    <a href="theory.html">design notes</a>
    for a description of the game and how it is designed.
    </p>

    <!-- Game of Life canvas -->
    <div class="scrollBox">
        <canvas id="GameOfLifeCanvas" 
                width="1000" height="1000" 
                style="width:  1000px ; height: 1000px ; background-color:  rgb( 170, 235, 245 ) ;">
            <em>Your browser does not support the canvas API so I can't show game of life!</em>
        </canvas>
    </div>

    <!-- Put the forms into a table for nice layout -->
    <table>
        <tr>
            <td>
                <!-- Buttons to start/stop, single step and reset the game.  
                     Upon click, call the Javascript functions runStopGame(), singleStepGame() and clearGame(). 
                -->
                <form>
                    <fieldset>
                        <legend>Game Controls</legend>
                            <input type="button" onclick="gameOfLife.runStopGame()"    value="Run/Stop" />
                            <input type="button" onclick="gameOfLife.singleStepGame()" value="Single Step" />
                            <input type="button" onclick="gameOfLife.clearGame()"      value="Clear" />
                    </fieldset>
                </form>
            </td>

            <td>
                <!-- Check box buttons to select number of neighbors for survival and birth.  
                     If the user toggles the button, call the Javascript function changeRules( flag ) 
                     where flag = true for survival or false for birth.
                     Default to the Conway rules. 
                -->
                <form>
                    <fieldset>
                        <legend>Number of neighbors to survive</legend>
                        <label> 1 <input type="checkbox" name="SurvivalRules" value="1"         onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 2 <input type="checkbox" name="SurvivalRules" value="2" checked onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 3 <input type="checkbox" name="SurvivalRules" value="3" checked onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 4 <input type="checkbox" name="SurvivalRules" value="4"         onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 5 <input type="checkbox" name="SurvivalRules" value="5"         onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 6 <input type="checkbox" name="SurvivalRules" value="6"         onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 7 <input type="checkbox" name="SurvivalRules" value="7"         onchange="gameOfLife.changeRules( true )"> </label>
                        <label> 8 <input type="checkbox" name="SurvivalRules" value="8"         onchange="gameOfLife.changeRules( true )"> </label>
                    </fieldset>
                </form>
            </td>

            <td>
                <form>
                    <fieldset>
                    <legend>Number of neighbors for empty cell birth</legend>
                        <label> 1 <input type="checkbox" name="BirthRules" value="1"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 2 <input type="checkbox" name="BirthRules" value="2"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 3 <input type="checkbox" name="BirthRules" value="3" checked    onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 4 <input type="checkbox" name="BirthRules" value="4"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 5 <input type="checkbox" name="BirthRules" value="5"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 6 <input type="checkbox" name="BirthRules" value="6"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 7 <input type="checkbox" name="BirthRules" value="7"            onchange="gameOfLife.changeRules( false )"> </label>
                        <label> 8 <input type="checkbox" name="BirthRules" value="8"            onchange="gameOfLife.changeRules( false )"> </label>
                    </fieldset>
                </form>
            </td>
        </table>

    <table>
        <tr>
            <td>
                <!-- File I/O 
                     How to get the file name: 
                         Tag the input form with unique id GameOfLifeLoadFile.
                         Get the element by its id in the Javascript function initializeGameOfLife().
                         Add an event listener to the element which responds to changes by calling a function handleFileSelectForReading().
                     Call the Javascript functions runStopGame(), readGameFromClipboard() and writeGameToClipboard(). 
                -->
                <form>
                    <fieldset>
                        <legend>File I/O</legend>
                        <input type="file"   id="GameOfLifeLoadFile"  name="files[]" multiple />
                        <input type="button" onclick="gameOfLife.writeGameToClipboard()"  value="Write to Clipboard" />
                        <input type="button" onclick="gameOfLife.readGameFromClipboard()" value="Read from Clipboard" />
                    </fieldset>
                </form>
            </td>
        </tr>

        <tr>
            <td>
                <!-- Radio buttons for loading sample life patterns. 
                     Call the Javascript function loadSampleLifePattern(). 
                -->
                <form>
                    <fieldset>
                        <legend>Life Patterns</legend>
                        <label>Glider Gun     <input type="radio" name="LifePatterns" value="Glider Gun" id="GliderGunPat" checked onclick="gameOfLife.loadSampleLifePattern()" /></label>
                        <label>Replicator     <input type="radio" name="LifePatterns" value="Replicator"                           onclick="gameOfLife.loadSampleLifePattern()" /></label>
                        <label>Crab           <input type="radio" name="LifePatterns" value="Crab"                                 onclick="gameOfLife.loadSampleLifePattern()" /></label>
                        <label>Schick Engine  <input type="radio" name="LifePatterns" value="Schick Engine"                        onclick="gameOfLife.loadSampleLifePattern()" /></label>
                        <label>Traffic Circle <input type="radio" name="LifePatterns" value="Traffic Circle"                       onclick="gameOfLife.loadSampleLifePattern()" /></label>
                        <label>High Life Glider Gun <input type="radio" name="LifePatterns" value="High Life Glider Gun"           onclick="gameOfLife.loadSampleLifePattern()" /></label>
                    </fieldset>
                </form>
            </td>
        </tr>
    </table>

    <!-- Game of life status. 
         Javascript accesses the span by its id and rewrites its contents.
    -->
    <p>
        <span style="color: blue" id="GameOfLifeState"> --- Game State --- </span>
    </p>
    <p>
        <span style="color: blue" id="GameOfLifeCellState"> --- Cell State --- </span>
    </p>

    <script> 
        // Force the first radio button to be checked.
        function setChecked()
        {
            document.getElementById( "GliderGunPat" ).checked = true ;
        }
    </script>

    <!-- Clipboard window for game of life files. -->
    <p>
        <form>
            <fieldset>
                <legend>Clipboard</legend>
                <textarea id="GameOfLifeClipboard" rows="20" cols="120">
                ---Life file---
                </textarea>
            </fieldset>
        </form>
    </p>

    <!-- Output window for game of life. -->
    <p>Game of Life Debug Information</p>
    <p class="scrollBox" id="GameOfLifeDebug" style="height: 30em ; margin-left: 0">
        --- Life state ---
    </p>

    <!-- Call the Game of Life application after all HTML elements have been defined. -->
    <script type="text/javascript">
        var gameOfLife = new GameOfLifeApp() ;
    </script>

    <h3>Software Architecture</h3>

    <p>
    It's in two parts, HTML/CSS for the user interface and the Javascript for the actions.
    </p>

    <h4>Preloading the JavaScript</h4>
    <p>
    In this HTML file, <em>overview.html</em>, we preload the Javascript program <em>gameOfLife.js</em> in the head section.
    </p>

    <h4>Canvas, Forms and Controls</h4>

    <p>
    First, we set up a page wide canvas for the game board.
    </p>

    <p>
    Game controls and status buttons are HTML forms.  Their styles defined by CSS.  The controls have types and ID's to tie
    them to the Javascript.

        <ul>
            <li>Some fields of the form have their actions call Javascript functions directly.  Example:  birth and death rule checkboxes.</li>
            <li>Other fields send their handles to into the Javascript upon initialization where they are linked to event listeners.  Example: file name box, mouse click on the canvas.</li>
            <li>Still other fields have their contents rewritten by Javascript functions as internal states change.  Example:  clipboard.</li>
        </ul>
    </p>

    <h4>Initializing the Game</h4>

    <p>
    We create the Game of Life object by invoking <em>var gameOfLife = new GameOfLifeApp() ;</em> after loading the forms and defining the controls.
    It does the following:

    <ul>
        <li>Using the unique id's in the HTML form controls, it gets handles to the canvas, game state, cell state, debug scrollbox, file input form,
            clipboard, and other HTML elements.</li>
        <li>Creates callback functions (LISPISH closures, or C++ functionoids) tied to form actions, events, etc.</li>
        <li>Creates a timer and registers a single step game function with it.</li>
        <li>There's a bit of minor cleanup where upon loading the body section, we call a function to initialize checkmarks in the game state form.</li>
    </ul>
    </p>


    <h3>Download</h3>

    <p>
        Source code is distributed under the terms of the
        <a href="http://www.gnu.org/licenses/">GNU General Public License</a>.

    <em>The current version number is 3.0</em>
    </p>

    <table class="download">
        <tr>
            <td>
                <em>gameOfLife.js</em>
            </td>

            <td>
            Game of Life implemented in <em class="lowlighted">Javascript</em>
            </td>

            <td>
                <a href="Scripts/gameOfLife.js.html">
                   <img src="../../../WebPageImages/eye.png" 
                        alt="Eye icon for source code viewing." 
                        width="30" height="30" />
                View</a>

                &nbsp; &nbsp;

                <a href="Scripts/gameOfLife.js" download="gameOfLife.js">
                   <img src="../../../WebPageImages/compactDisk.png" 
                        alt="Compact disk icon for source code download." 
                        width="25" height="25" />
                Download</a>
            </td>
        </tr>
        <tr>
            <td>
            <em>overview.html</em>
            </td>

            <td>
            HTML code for this page which calls gameOfLife.js
            </td>

            <td>
                <a href="overview.html.html">
                   <img src="../../../WebPageImages/eye.png" 
                        alt="Eye icon for source code viewing." 
                        width="30" height="30" />
                View</a>

                &nbsp; &nbsp;

                <a href="overview.html" download="overview.html">
                   <img src="../../../WebPageImages/compactDisk.png" 
                        alt="Compact disk icon for source code download." 
                        width="25" height="25" />
                Download</a>
            </td>
        </tr>
    </table>



    <h3>Debugging</h3>

    The browsers (Safari, Firefox, Opera) have developer tools for debugging,

    <figure>
        <img src="WebPageImages/SafariDeveloperTools.jpg" alt="Safari Web Browser Developer Tools" >

       <figcaption>
           Safari Web Browser Developer Tools
       </figcaption>
    </figure>


<!-- ===================== Navigation and copyright ==================== -->

<hr />

<!-- Quick return to my home page. -->
<div class="navigate">
    <p>
        <a href="../../../index.html">
           <img src="../../../WebPageImages/home.png"
                alt="Home Page Button."
                width="64" height="64" 
            />
            <em>Home</em>
            </a>
        </p>
    </div>

        <!-- Go up one level -->
    <div class="navigate">
        <p>
            <a href="../../../professionalInterests.html">
               <img src="../../../WebPageImages/upArrow.png"
                    alt="Up Page Button." 
                    width="64" height="64" />
               <em>Up</em>
            </a>
        </p>
    </div>


    <!-- A copyright footnote to preserve my legal rights. -->
    <p class="footnote">
    Copyright &copy; 1986-2017 by Sean Erik O'Connor.
    All Rights Reserved.
    &nbsp;&nbsp;&nbsp;
    last updated 04 Nov 17.
    </p>

</body>
</html>