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 |