1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <!-- ===================================================================
  5 |
  6 | NAME
  7 | 
  8 |     overview.html
  9 |
 10 | DESCRIPTION
 11 |
 12 |     This is the game of life web page.
 13 |     It is a hand-crafted HTML 5 W3C validated document.
 14 |
 15 | AUTHOR
 16 |
 17 |    Sean Erik O'Connor
 18 |
 19 =================================================================== -->
 20 
 21 
 22 <head>
 23    <!-- Define the MIME type for this document. -->
 24    <meta charset="utf-8">
 25 
 26    <title>Game of Life</title>
 27 
 28    <meta name="description" 
 29          content="Game of Life implemented in Javascript and Windows --- free software." />
 30 
 31    <meta name="author"
 32          content="Sean Erik O'Connor" />
 33 
 34    <meta name="copyright"
 35          content="Copyright (C) 1999-2019 by Sean Erik O'Connor.  All Rights Reserved." />   
 36 
 37    <meta name="rating"
 38          content="general" />
 39 
 40    <meta name="keywords" 
 41          content="Sean Erik O'Connor,
 42                   game of life, Javascript, Windows, Win 32, Cygwin,
 43                   J. H. Conway, cellular automata,
 44                   educational software,mathematical software,
 45                   source code, C software, free software, freeware, shareware" />
 46 
 47    <!-- Point to the Javascript Game of Life -->
 48    <script src="Scripts/gameOfLife.js"></script>
 49 
 50    <!-- If we can't load the style sheet below turn off the border images. -->
 51    <style>
 52        img.border { display: none ; }
 53    </style>
 54 
 55    <!-- Cascading style sheet for this document. -->
 56     <link rel="StyleSheet" href="../../../StyleSheet.css" type="text/css" /> 
 57 
 58     <!-- For Win/IE we must load additional styles to work
 59          around the Win/IE bug in handling position:fixed.
 60          This hack uses Win IE conditional comments which won't 
 61          be seen by other browsers.
 62      -->
 63     <!--[if lte IE 9]>
 64     <link rel="StyleSheet" href="../../../StyleSheetWinIE.css" type="text/css" /> 
 65     <![endif]-->
 66 </head>
 67 
 68 <body>
 69     <!-- Insert a border at the left side of the page. -->
 70     <p>
 71         <img class="border" 
 72              src="../../../WebPageImages/sinXYPlot.png" 
 73              alt="Sin( x y ) Image Border." />
 74     </p>
 75 
 76 
 77     <h1>GAME OF LIFE</h1>
 78 
 79     <hr />
 80 
 81     <h3>Game of Life in Javascript</h3>
 82 
 83     <p>
 84     This is an implementation of J. H. Conway's cellular automata
 85     <a href="http://conwaylife.com/wiki/Main_Page">game of life</a>
 86     in Javascript where the game board is a topologically a torus.  See my
 87     <a href="theory.html">design notes</a>
 88     for a description of the game and how it is designed.
 89     </p>
 90 
 91     <!-- Game of Life canvas -->
 92     <p>
 93         <canvas id="GameOfLifeCanvas" 
 94                 width="1000" height="1000" 
 95                 style="background-color:  rgb( 170, 235, 245 ) ;">
 96             <em>Your browser does not support the canvas API so I can't show game of life!</em>
 97         </canvas>
 98     </p>
 99 
100     <!-- Game of Life form controls -->
101     <form id="LifePatternsForm">
102         <ul>
103             <li>
104                 <!-- Buttons to start/stop, single step and reset the game.  
105                      Upon click, call the Javascript functions runStopGame(), singleStepGame() and clearGame(). 
106                   -->
107                   <fieldset>
108                       <legend>Game Controls</legend>
109 
110                       <input type="button" onclick="gameOfLife.runStopGame()"    value="Run/Stop" />
111                       <input type="button" onclick="gameOfLife.singleStepGame()" value="Single Step" />
112                       <input type="button" onclick="gameOfLife.clearGame()"      value="Clear" />
113                  </fieldset>
114             </li>
115 
116             <li>
117                 <!-- Check box buttons to select number of neighbors for survival and birth.  
118                      If the user toggles the button, call the Javascript function changeRules( flag ) 
119                      where flag = true for survival or false for birth.
120                      Default to the Conway rules. 
121                   -->
122                <fieldset>
123                    <legend>Neighbors to survive</legend>
124 
125                    <label> 1 <input type="checkbox" name="SurvivalRules" value="1"         onchange="gameOfLife.changeRules( true )"> </label>
126                    <label> 2 <input type="checkbox" name="SurvivalRules" value="2" checked onchange="gameOfLife.changeRules( true )"> </label>
127                    <label> 3 <input type="checkbox" name="SurvivalRules" value="3" checked onchange="gameOfLife.changeRules( true )"> </label>
128                    <label> 4 <input type="checkbox" name="SurvivalRules" value="4"         onchange="gameOfLife.changeRules( true )"> </label>
129                    <label> 5 <input type="checkbox" name="SurvivalRules" value="5"         onchange="gameOfLife.changeRules( true )"> </label>
130                    <label> 6 <input type="checkbox" name="SurvivalRules" value="6"         onchange="gameOfLife.changeRules( true )"> </label>
131                    <label> 7 <input type="checkbox" name="SurvivalRules" value="7"         onchange="gameOfLife.changeRules( true )"> </label>
132                    <label> 8 <input type="checkbox" name="SurvivalRules" value="8"         onchange="gameOfLife.changeRules( true )"> </label>
133                </fieldset>
134             </li>
135 
136             <li>
137                 <fieldset>
138                      <legend>Neighbors for birth</legend>
139 
140                      <label> 1 <input type="checkbox" name="BirthRules" value="1"            onchange="gameOfLife.changeRules( false )"> </label>
141                      <label> 2 <input type="checkbox" name="BirthRules" value="2"            onchange="gameOfLife.changeRules( false )"> </label>
142                      <label> 3 <input type="checkbox" name="BirthRules" value="3" checked    onchange="gameOfLife.changeRules( false )"> </label>
143                      <label> 4 <input type="checkbox" name="BirthRules" value="4"            onchange="gameOfLife.changeRules( false )"> </label>
144                      <label> 5 <input type="checkbox" name="BirthRules" value="5"            onchange="gameOfLife.changeRules( false )"> </label>
145                      <label> 6 <input type="checkbox" name="BirthRules" value="6"            onchange="gameOfLife.changeRules( false )"> </label>
146                      <label> 7 <input type="checkbox" name="BirthRules" value="7"            onchange="gameOfLife.changeRules( false )"> </label>
147                      <label> 8 <input type="checkbox" name="BirthRules" value="8"            onchange="gameOfLife.changeRules( false )"> </label>
148                  </fieldset>
149             </li>
150 
151             <li>
152                 <!-- Game of Life File I/O -->
153                 <fieldset>
154                     <legend>File I/O</legend>
155 
156                     <!-- Tag the input form with unique id GameOfLifeLoadFile.
157                          Get the element by its id in the Javascript function initializeGameOfLife().
158                          Add an event listener to the element which responds to changes by calling a function make_fileSelectForReading(). 
159                          The function argument is an event which is the list of files.
160                      -->
161                     <input type="file"   id="GameOfLifeLoadFile"  name="files[]" multiple />
162                 </fieldset>
163             </li>
164 
165             <li>
166                 <!-- Game of Life clipboard controls -->
167                 <fieldset>
168                     <legend>Clipboard</legend>
169 
170                     <input type="button" onclick="gameOfLife.writeGameToClipboard()"  value="Write" />
171                     <input type="button" onclick="gameOfLife.readGameFromClipboard()" value="Read" />
172                 </fieldset>
173             </li>
174 
175             <li>
176                 <!-- Radio buttons for loading sample life patterns. 
177                      Call the Javascript function loadSampleLifePattern(). 
178                 -->
179                 <fieldset>
180                     <legend>Life Pattern</legend>
181 
182                     <!-- Tag the selection in the form with unique id LifePatterns.
183                      Get the element by its id in the Javascript function initializeGameOfLife().
184                      Add an event listener to the element which responds to changes by calling a function make_loadSampleLifePattern().
185                      The function argument is an event which is the option selected. 
186                     -->
187                     <select id="LifePatterns">
188                         <option selected value="glidergun">Glider Gun</option>
189                         <option value="replicator">Replicator</option>
190                         <option value="crab">Crab</option>
191                         <option value="shickengine">Schick Engine</option>
192                         <option value="trafficcircle">Traffic Circle</option>
193                         <option value="highlifeglidergun">High Life Glider Gun</option>
194                     </select>
195                 </fieldset>
196             </li>
197 
198             <li>
199                 <!-- Game of life status.  Javascript accesses the span by its id and rewrites its contents.  -->
200                 <span style="color: navy;  font-size: 0.8em;" id="GameOfLifeState"> --- Game State --- </span>
201             </li>
202         </ul>
203     </form>
204 
205     <p>
206         <!-- Clipboard form for Game of Life files. -->
207         <form>
208             <ul>
209                 <li>
210                     Game of Life Clipboard
211                     <fieldset>
212                         <textarea id="GameOfLifeClipboard" rows="10">
213                         ---Life file---
214                         </textarea>
215                     </fieldset>
216                 </li>
217 
218                 <li>
219                     <!-- Game of life cell state -->
220                     <span style="color: navy;  font-size: 0.6em ; clear: both;" id="GameOfLifeCellState"> --- Cell State --- </span>
221                 </li>
222             </ul>
223         </form>
224     </p>
225 
226     <!-- Output window for game of life. -->
227     <div class="scrollBox"  style="height: 30em">
228         <div class="scrollBoxContent" id="GameOfLifeDebug">
229             --- Life Counter States Go Here ---
230         </div>
231     </div>
232 
233     <!-- Call the Game of Life application after all HTML elements have been defined. -->
234     <script>
235         var gameOfLife = new GameOfLifeApp() ;
236     </script>
237 
238     <h3>Software Architecture</h3>
239 
240     <p>
241     It's in two parts, HTML/CSS for the user interface and the Javascript for the actions.
242     </p>
243 
244     <h4>Preloading the JavaScript</h4>
245     <p>
246     In this HTML file, <em>overview.html</em>, we preload the Javascript program <em>gameOfLife.js</em> in the head section.
247     </p>
248 
249     <h4>Canvas, Forms and Controls</h4>
250 
251     <p>
252     First, we set up a page wide canvas for the game board.
253     </p>
254 
255     <p>
256     Game controls and status buttons are HTML forms.  Their styles defined by CSS.  The controls have types and ID's to tie
257     them to the Javascript.
258 
259         <ul>
260             <li>Some fields of the form have their actions call Javascript functions directly.  Example:  birth and death rule checkboxes.</li>
261             <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>
262             <li>Still other fields have their contents rewritten by Javascript functions as internal states change.  Example:  clipboard.</li>
263         </ul>
264     </p>
265 
266     <h4>Initializing the Game</h4>
267 
268     <p>
269     We create the Game of Life object by invoking <em>var gameOfLife = new GameOfLifeApp() ;</em> after loading the forms and defining the controls.
270     It does the following:
271 
272     <ul>
273         <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,
274             clipboard, and other HTML elements.</li>
275         <li>Creates callback functions, some using closures, tied to form actions, events, etc.</li>
276         <li>Creates a timer and registers a single step game function with it.</li>
277         <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>
278     </ul>
279     </p>
280 
281 
282     <h3>Download</h3>
283 
284     <p>
285         Source code is distributed under the terms of the
286         <a href="http://www.gnu.org/licenses/">GNU General Public License</a>.
287 
288     <em>The current version number is 3.2</em>
289     </p>
290 
291     <table class="download">
292         <tr>
293             <td>
294                 <em>gameOfLife.js</em>
295             </td>
296 
297             <td>
298             Game of Life implemented in <em class="lowlighted">Javascript</em>
299             </td>
300 
301             <td>
302                 <a href="Scripts/gameOfLife.js.html">
303                    <img src="../../../WebPageImages/eye.png" 
304                         alt="Eye icon for source code viewing." 
305                         width="30" height="30" />
306                 View</a>
307 
308                 &nbsp; &nbsp;
309 
310                 <a href="Scripts/gameOfLife.js" download="gameOfLife.js">
311                    <img src="../../../WebPageImages/compactDisk.png" 
312                         alt="Compact disk icon for source code download." 
313                         width="25" height="25" />
314                 Download</a>
315             </td>
316         </tr>
317         <tr>
318             <td>
319             <em>overview.html</em>
320             </td>
321 
322             <td>
323             HTML code for this page which calls gameOfLife.js
324             </td>
325 
326             <td>
327                 <a href="overview.html.html">
328                    <img src="../../../WebPageImages/eye.png" 
329                         alt="Eye icon for source code viewing." 
330                         width="30" height="30" />
331                 View</a>
332 
333                 &nbsp; &nbsp;
334 
335                 <a href="overview.html" download="overview.html">
336                    <img src="../../../WebPageImages/compactDisk.png" 
337                         alt="Compact disk icon for source code download." 
338                         width="25" height="25" />
339                 Download</a>
340             </td>
341         </tr>
342     </table>
343 
344 
345 
346     <h3>Debugging</h3>
347 
348     The browsers (Safari, Firefox, Opera) have developer tools for debugging,
349 
350     <figure>
351         <img src="WebPageImages/SafariDeveloperTools.jpg" alt="Safari Web Browser Developer Tools" >
352 
353        <figcaption>
354            Safari Web Browser Developer Tools
355        </figcaption>
356     </figure>
357 
358 
359 <!-- ===================== Navigation and copyright ==================== -->
360 
361 <hr />
362 
363 <!-- Quick return to my home page. -->
364 <nav>
365     <p>
366         <a href="../../../index.html">
367             <img src="../../../WebPageImages/home.png"
368                  alt="Home Page Button."
369                  width="64" height="64" 
370             />
371             <em>Home</em>
372             </a>
373 
374             <!-- Go up one level -->
375             <a href="../../../professionalInterests.html">
376                 <img src="../../../WebPageImages/upArrow.png"
377                      alt="Up Page Button." 
378                      width="64" height="64" />
379                 <em>Up</em>
380             </a>
381     </p>
382 </nav>
383 
384 
385     <!-- A copyright footnote to preserve my legal rights. -->
386     <p class="footnote">
387     Copyright &copy; 1986-2019 by Sean Erik O'Connor.
388     All Rights Reserved.
389     &nbsp;&nbsp;&nbsp;
390     last updated 01 Jan 19.
391     </p>
392 
393 </body>
394 </html>