<!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-2018 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>
       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>
    <!-- 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 -->
    <p>
        <canvas id="GameOfLifeCanvas" 
                width="1000" height="1000" 
                style="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>
    </p>

    <!-- Game of Life form controls -->
    <form id="LifePatternsForm">
        <ul>
            <li>
                <!-- Buttons to start/stop, single step and reset the game.  
                     Upon click, call the Javascript functions runStopGame(), singleStepGame() and clearGame(). 
                  -->
                  <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>
            </li>

            <li>
                <!-- 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. 
                  -->
               <fieldset>
                   <legend>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>
            </li>

            <li>
                <fieldset>
                     <legend>Neighbors for 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>
            </li>

            <li>
                <!-- Game of Life File I/O -->
                <fieldset>
                    <legend>File I/O</legend>

                    <!-- 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 make_fileSelectForReading(). 
                         The function argument is an event which is the list of files.
                     -->
                    <input type="file"   id="GameOfLifeLoadFile"  name="files[]" multiple />
                </fieldset>
            </li>

            <li>
                <!-- Game of Life clipboard controls -->
                <fieldset>
                    <legend>Clipboard</legend>

                    <input type="button" onclick="gameOfLife.writeGameToClipboard()"  value="Write" />
                    <input type="button" onclick="gameOfLife.readGameFromClipboard()" value="Read" />
                </fieldset>
            </li>

            <li>
                <!-- Radio buttons for loading sample life patterns. 
                     Call the Javascript function loadSampleLifePattern(). 
                -->
                <fieldset>
                    <legend>Life Pattern</legend>

                    <!-- Tag the selection in the form with unique id LifePatterns.
                     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 make_loadSampleLifePattern().
                     The function argument is an event which is the option selected. 
                    -->
                    <select id="LifePatterns">
                        <option selected value="glidergun">Glider Gun</option>
                        <option value="replicator">Replicator</option>
                        <option value="crab">Crab</option>
                        <option value="shickengine">Schick Engine</option>
                        <option value="trafficcircle">Traffic Circle</option>
                        <option value="highlifeglidergun">High Life Glider Gun</option>
                    </select>
                </fieldset>
            </li>

            <li>
                <!-- Game of life status.  Javascript accesses the span by its id and rewrites its contents.  -->
                <span style="color: navy;  font-size: 0.8em;" id="GameOfLifeState"> --- Game State --- </span>
            </li>
        </ul>
    </form>

    <p>
        <!-- Clipboard form for Game of Life files. -->
        <form>
            <ul>
                <li>
                    Game of Life Clipboard
                    <fieldset>
                        <textarea id="GameOfLifeClipboard" rows="10">
                        ---Life file---
                        </textarea>
                    </fieldset>
                </li>

                <li>
                    <!-- Game of life cell state -->
                    <span style="color: navy;  font-size: 0.6em ; clear: both;" id="GameOfLifeCellState"> --- Cell State --- </span>
                </li>
            </ul>
        </form>
    </p>

    <!-- Output window for game of life. -->
    <div class="scrollBox"  style="height: 30em">
        <div class="scrollBoxContent" id="GameOfLifeDebug">
            --- Life Counter States Go Here ---
        </div>
    </div>

    <!-- Call the Game of Life application after all HTML elements have been defined. -->
    <script>
        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, some using closures, 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.2</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. -->
<nav>
    <p>
        <a href="../../../index.html">
            <img src="../../../WebPageImages/home.png"
                 alt="Home Page Button."
                 width="64" height="64" 
            />
            <em>Home</em>
            </a>

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


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

</body>
</html>