git @ Cat's Eye Technologies HTML5-Gewgaws / f617fe9
Yes, it works. Would setting innerHTML be cleaner, though? Chris Pressey 10 years ago
3 changed file(s) with 72 addition(s) and 33 deletion(s). Raw diff Collapse all Expand all
+14
-24
chzrxl/chzrxl.js less more
00 /*
11 <br>% to hold fixed:
2 <input id="hold_fixed" type="range" min="0" max="100" value="5"/>
32 */
4
5 function makeCanvas(container, id, width, height) {
6 var canvas = document.createElement('canvas');
7 canvas.id = id;
8 canvas.width = width;
9 canvas.height = height;
10 container.appendChild(canvas);
11 return canvas;
12 }
13
14 function makeButton(container, name, label) {
15 var button = document.createElement('button');
16 button.id = 'btn_' + name;
17 button.innerHTML = label;
18 container.appendChild(button);
19 return button;
20 }
213
224 function launch(container) {
235 var deps = [
6 "../common-yoob.js-0.6/element-factory.js",
247 "../common-yoob.js-0.6/animation.js"
258 ];
269 var loaded = 0;
3013 elem.onload = function() {
3114 if (++loaded == deps.length) {
3215 container = document.getElementById('container');
33 var canvas = makeCanvas(container, 'canvas', 500, 500);
34 var button = makeButton(container, 'restart', 'Restart');
16 var canvas = yoob.makeCanvas(container, 500, 500);
17 canvas.style.display = "inline-block";
18 container.appendChild(document.createElement('br'));
19 var button = yoob.makeButton(container, 'Restart');
20 container.appendChild(document.createTextNode("Percent to hold fixed:"));
21 var slider = yoob.makeSlider(container, 0, 100, 5);
3522 var t = new Chzrxl();
3623 t.init({
3724 'canvas': canvas,
38 'button': button
25 'restartButton': button,
26 'pctFixedSlider': slider
3927 });
4028 }
4129 };
9684 this.init = function(opts) {
9785 options = opts || {};
9886
99 canvas = opts.canvas;
87 canvas = options.canvas;
10088 ctx = canvas.getContext("2d");
10189
102 button = opts.button;
90 button = options.restartButton;
10391 var $this = this;
10492 button.onclick = function() {
10593 $this.restart();
10694 };
10795
10896 percentToHoldFixed = options.percentToHoldFixed || 10;
109 pctToHoldFixedCtrl = document.getElementById('hold_fixed');
97 pctToHoldFixedCtrl = options.pctFixedSlider;
98 pctToHoldFixedCtrl.value = percentToHoldFixed;
99
110100 this.restart();
111101 this.animation = (new yoob.Animation()).init({
112102 object: this
+6
-9
chzrxl/index.html less more
22 <meta charset="utf-8">
33 <title>Chzrxl</title>
44 <style>
5 #canvas { border: 1px solid blue; }
5 canvas { border: 1px solid blue; }
6 #container {
7 width: 100%;
8 text-align: center;
9 }
610 </style>
711 </head>
812 <body>
913
1014 <h1>Chzrxl</h1>
1115
12 <!--
13 <br>% to hold fixed:
14 <input id="hold_fixed" type="range" min="0" max="100" value="5"/>
15 <button id="restart" onclick='t.restart()'>Restart</button>
16 <div id="info"></div>
17 -->
18
19 <div id='container'></div>
16 <div id="container"></div>
2017
2118 </body>
2219 <script src="chzrxl.js"></script>
+52
-0
common-yoob.js-0.6/element-factory.js less more
0 /*
1 * This file is part of yoob.js version 0.7-PRE
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * Functions for creating elements.
9 *
10 * I dunno -- maybe just setting innerHTML would be better.
11 */
12
13 yoob.makeCanvas = function(container, width, height) {
14 var canvas = document.createElement('canvas');
15 canvas.width = width;
16 canvas.height = height;
17 container.appendChild(canvas);
18 return canvas;
19 };
20
21 yoob.makeButton = function(container, label) {
22 var button = document.createElement('button');
23 button.innerHTML = label;
24 container.appendChild(button);
25 return button;
26 };
27
28 yoob.makeCheckbox = function(container, name, labelText) {
29 var checkbox = document.createElement('input');
30 checkbox.type = "checkbox";
31 checkbox.id = 'cb_' + name;
32 checkbox.checked = false;
33 var label = document.createElement('label');
34 label.htmlFor = 'cb_' + name;
35 label.appendChild(document.createTextNode(labelText));
36
37 container.appendChild(checkbox);
38 container.appendChild(label);
39
40 return checkbox;
41 };
42
43 yoob.makeSlider = function(container, min, max, value) {
44 var slider = document.createElement('input');
45 slider.type = "range";
46 slider.min = min;
47 slider.max = max;
48 slider.value = value;
49 container.appendChild(slider);
50 return slider;
51 };