| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <title>Life Demo</title> | |
| 4 <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> | |
| 5 <meta HTTP-EQUIV="Expires" CONTENT="-1"> | |
| 6 <link href="css/life.css" rel="stylesheet" type="text/css"> | |
| 7 <link href="css/toolbar.css" rel="stylesheet" type="text/css"> | |
| 8 <link href="css/stamp_editor.css" rel="stylesheet" type="text/css"> | |
| 9 | |
| 10 <script type="text/javascript" src="closure.js"></script> | |
| 11 <!-- Loads the Life application code. This is order dependent. --> | |
| 12 <script type="text/javascript" src="events/dragger.js"></script> | |
| 13 <script type="text/javascript" src="events/event.js"></script> | |
| 14 <script type="text/javascript" src="controllers/stamp_editor.js"></script> | |
| 15 <script type="text/javascript" src="controllers/stamp_panel.js"></script> | |
| 16 <script type="text/javascript" src="controllers/viewcontroller.js"> </script> | |
| 17 <script type="text/javascript" src="life.js"></script> | |
| 18 <!--Resolve interdependencies in Life. --> | |
| 19 <script type="text/javascript"> | |
| 20 goog.require('life.Application'); | |
| 21 goog.require('life.controllers.ViewController'); | |
| 22 goog.require('uikit.events.Dragger'); | |
| 23 goog.require('uikit.events.Event'); | |
| 24 </script> | |
| 25 </head> | |
| 26 <body id="bodyId"> | |
| 27 <!-- | |
| 28 Place the Life game UI components inside an auto-sizing container so that | |
| 29 they change size with the window. | |
| 30 --> | |
| 31 <div id="autosize_background"> | |
| 32 <div id="life_top_toolbar" class="life-toolbar top-toolbar"> | |
| 33 <div class="vertical-align-center">Conway's Game of Life 2011</div> | |
| 34 <form name="game_controls_form" | |
| 35 class="vertical-align-center text-align-right" | |
| 36 action="" | |
| 37 method="get"> | |
| 38 <button type="button" | |
| 39 id="stamp_editor_button" | |
| 40 style="position: relative;"></button> | |
| 41 <!-- Lay out the stamp editor panel. There is some title text, followed | |
| 42 the the stamp editor itself, a set of cancel/ok buttons and then | |
| 43 an explanatory legend. The stamp editor DOM is built via | |
| 44 Javascript in stamp.Editor.makeStampEditorPanel(). --> | |
| 45 <div class="panel" style="display: none;" id="stamp_editor_panel"> | |
| 46 <p id="title_text">Click on a cell to change its state.</p> | |
| 47 <table id="stamp_editor_outer_container" | |
| 48 style="font-size: inherit; text-align: center;"> | |
| 49 <tr> | |
| 50 <!-- The cell editor table. This gets populated in stamp_editor.js
--> | |
| 51 <td id="stamp_editor_container" colspan=2></td> | |
| 52 <td valign="top"> | |
| 53 <!-- The add/collapse column buttons. --> | |
| 54 <table rows=2 cols=1 style="font-size: inherit;"> | |
| 55 <tr> | |
| 56 <td id="add_column_button"><img src="img/plus_button.png" | |
| 57 alt="Add column" border=0 /></td> | |
| 58 </tr> | |
| 59 <tr> | |
| 60 <td id="remove_column_button" | |
| 61 style="opacity: 0.5;"><img | |
| 62 src="img/minus_button.png" | |
| 63 alt="Remove column" border=0 /></td> | |
| 64 </tr> | |
| 65 </table> | |
| 66 </td> | |
| 67 </tr> | |
| 68 <!-- The add/remove row buttons --> | |
| 69 <tr> | |
| 70 <td id="add_row_button" width="12"><img src="img/plus_button.png" | |
| 71 alt="Add row" border=0 /></td> | |
| 72 <td id="remove_row_button" | |
| 73 align="left" | |
| 74 style="opacity: 0.5;"><img | |
| 75 src="img/minus_button.png" | |
| 76 alt="Remove row" border=0 /></td> | |
| 77 </tr> | |
| 78 </table> | |
| 79 <table id="ok_cancel_buttons"> | |
| 80 <!-- The OK/Cancel buttons --> | |
| 81 <tr> | |
| 82 <td id="cancel_button" class="stamp_editor_button">Cancel</td> | |
| 83 <td id="ok_button" class="stamp_editor_button">OK</td> | |
| 84 </tr> | |
| 85 </table> | |
| 86 <!-- The editor legend. --> | |
| 87 <table id="stamp_editor_legend" | |
| 88 rows=1 cols=4 align=center width=100%> | |
| 89 <tr> | |
| 90 <td><img src="img/live_cell.png" width=8 height=8 /></td> | |
| 91 <td>alive</td> | |
| 92 <td><img src="img/dead_cell.png" width=8 height=8 /></td> | |
| 93 <td>dead</td> | |
| 94 </tr> | |
| 95 </table> | |
| 96 </div> | |
| 97 <select id="play_mode_select"> | |
| 98 <option selected="yes" value="random_seed">Random Seed</option> | |
| 99 <option value="stamp">Stamp</option> | |
| 100 </select> | |
| 101 <select id="sound_select"> | |
| 102 <option value="sounds/ahem_x.wav">Ahem</option> | |
| 103 <option value="sounds/bicycle_bell.wav">Bell</option> | |
| 104 <option selected="yes" value="sounds/boing_x.wav">Boing</option> | |
| 105 <option value="sounds/doorbell.wav">Doorbell</option> | |
| 106 </select> | |
| 107 <button id="play_button" | |
| 108 type="button" | |
| 109 class="image_button" | |
| 110 altimage="url(img/pause_button.png)" | |
| 111 state="off" | |
| 112 style="background-image:url(img/play_button.png);"> | |
| 113 </button> | |
| 114 <button id="clear_button" | |
| 115 type="button" | |
| 116 style="width: 72px;">Clear</button> | |
| 117 </form> | |
| 118 </div> | |
| 119 <!-- The Life NaCl module will end up in this <DIV>. --> | |
| 120 <div id="life_game_view" class="life-view"></div> | |
| 121 <div id="life_bottom_toolbar" class="life-toolbar bottom-toolbar"> | |
| 122 <p class="vertical-align-center" | |
| 123 style="font-size: 10pt; padding-left: 32px;"> | |
| 124 <a href="about.html">Acknowledgements and Notices</a> | |
| 125 </p> | |
| 126 <form name="automaton_rules_form" | |
| 127 class="vertical-align-center text-align-right" | |
| 128 action="" | |
| 129 method="get"> | |
| 130 <div style="font-size: 10pt;"> | |
| 131 Birth: <input type="text" | |
| 132 id="birth_field" | |
| 133 value="3" | |
| 134 size="3" /> | |
| 135 <div id="separator" class="toolbar-separator"></div> | |
| 136 Keep Alive: <input type="text" | |
| 137 id="keep_alive_field" | |
| 138 value="2,3" | |
| 139 size="3" /> | |
| 140 </div> | |
| 141 </form> | |
| 142 </div> | |
| 143 </div> | |
| 144 | |
| 145 <script type="text/javascript"> | |
| 146 var application = new life.Application(); | |
| 147 application.run('life_game_view'); | |
| 148 </script> | |
| 149 </body> | |
| 150 </html> | |
| OLD | NEW |