git @ Cat's Eye Technologies Cyclobots / bc4bbc1
Convert demo to use DAM to build the UI. Chris Pressey 2 years ago
4 changed file(s) with 248 addition(s) and 68 deletion(s). Raw diff Collapse all Expand all
00 /*
1 * pixi-min.js, pixi-viewport.js, and cyclobots.js must be loaded before this source.
1 * dam.js, dam-widgets.js, pixi-min.js, pixi-viewport.js, and cyclobots.js must be loaded before this source.
22 * After loading this source, call launch() to create and start the gewgaw.
33 */
4
5 function makeDiv(container, innerHTML) {
6 var div = document.createElement('div');
7 div.innerHTML = innerHTML || '';
8 container.appendChild(div);
9 return div;
10 }
11
12 function makeSpan(container, innerHTML) {
13 var span = document.createElement('span');
14 span.innerHTML = innerHTML || '';
15 container.appendChild(span);
16 return span;
17 }
18
19 function makeButton(container, labelText, fun) {
20 var button = document.createElement('button');
21 button.innerHTML = labelText;
22 container.appendChild(button);
23 button.onclick = fun;
24 return button;
25 }
26
27 function makeSelect(container, labelText, optionsArray, fun) {
28 var label = document.createElement('label');
29 label.innerHTML = labelText;
30 container.appendChild(label);
31 var select = document.createElement("select");
32 for (var i = 0; i < optionsArray.length; i++) {
33 var op = document.createElement("option");
34 op.value = optionsArray[i].value;
35 op.text = optionsArray[i].text;
36 select.options.add(op);
37 }
38 select.onchange = function(e) {
39 fun(optionsArray[select.selectedIndex]);
40 };
41 select.selectedIndex = 0;
42 label.appendChild(select);
43 return select;
44 };
454
465 function removeVisuals(cyclobots) {
476 cyclobots.forEachBot(function(bot) {
13493
13594 setClassicVisuals(cyclobots, viewport);
13695
137 var controlPanel = makeDiv(config.container);
96 var div=DAM.maker('div'), button=DAM.maker('button'), span=DAM.maker('span');
13897
13998 /*----- renderer panel -----*/
140 var rendererPanel = makeDiv(controlPanel);
141 var rendererSpan = makeSpan(rendererPanel);
14299 var renderer = getRenderer(app);
143 rendererSpan.innerHTML = "Renderer: " + renderer + ".";
100 var rendererSpan = span("Renderer: " + renderer + ".");
101 var forceRendererButton = null;
144102 if (renderer !== "Canvas") {
145 var forceCanvasButton;
146 forceCanvasButton = makeButton(rendererPanel, "Force Canvas renderer", function(e) {
147 removeVisuals(cyclobots);
148 app.destroy(true, true);
149 config.forceCanvas = true;
150 r = setUpPixiApp(config, cyclobots);
151 app = r.app;
152 viewport = r.viewport;
153 setClassicVisuals(cyclobots, viewport);
154 forceCanvasButton.remove();
155 rendererSpan.innerHTML = "Renderer: Canvas.";
156 });
103 forceRendererButton = button(
104 "Force Canvas renderer",
105 {
106 onclick: function(e) {
107 removeVisuals(cyclobots);
108 app.destroy(true, true);
109 config.forceCanvas = true;
110 r = setUpPixiApp(config, cyclobots);
111 app = r.app;
112 viewport = r.viewport;
113 setClassicVisuals(cyclobots, app.stage);
114 forceRendererButton.remove();
115 rendererSpan.innerHTML = "Renderer: Canvas.";
116 }
117 }
118 );
157119 }
120 var rendererPanel = div(
121 rendererSpan,
122 forceRendererButton
123 );
158124
159125 /*----- visuals panel -----*/
160 var visualsPanel = makeDiv(controlPanel);
161 makeSelect(visualsPanel, "Visuals:", [
162 { text: "Classic", value: "1", setVisuals: setClassicVisuals },
163 { text: "Blurred", value: "2", setVisuals: setBlurredVisuals }
164 ], function(selection) {
165 removeVisuals(cyclobots);
166 selection.setVisuals(cyclobots, viewport);
167 });
126 var visualsPanel = div(
127 DAM.makeSelect(
128 {
129 title: "Visuals:",
130 options: [
131 { text: "Classic", value: "1", setVisuals: setClassicVisuals },
132 { text: "Blurred", value: "2", setVisuals: setBlurredVisuals }
133 ],
134 onchange: function(option) {
135 removeVisuals(cyclobots);
136 option.setVisuals(cyclobots, viewport);
137 }
138 }
139 )
140 );
168141
169 makeButton(controlPanel, "Mass confusion!", function(e) { cyclobots.massConfusion(); });
170 makeButton(controlPanel, "Revolution!", function(e) { cyclobots.shuffle(); });
142 var actionsPanel = div(
143 button("Mass confusion!", { onclick: function(e) { cyclobots.massConfusion(); } }),
144 button("Revolution!", { onclick: function(e) { cyclobots.shuffle(); } })
145 );
146
147 config.container.appendChild(div(rendererPanel, visualsPanel, actionsPanel));
171148 }
3030 <script src="https://catseye.tc/contrib/pixi-viewport.js-3.4.1/pixi-viewport.min.js"></script>
3131
3232 <script src="../src/cyclobots.js"></script>
33 <script src="dam.js"></script>
34 <script src="dam-widgets.js"></script>
3335 <script src="cyclobots-pixi-launcher.js"></script>
3436 <script>
3537 launch({
0 /* dam-widgets.js version 0.0. This file is in the public domain. */
1
2 /* dam.js should be included before this source. */
3
4 /*
5 * A labelled checkbox, where the checkbox appears to the left of the label.
6 * Arguments after the first (config) argument will be applied to the label element.
7 */
8 DAM.makeCheckbox = function(config) {
9 if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
10 var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
11
12 var onchange = config.onchange || function(b) {};
13
14 // config label: make copy of arguments, replace first with a bespoke config
15 var args = new Array(arguments.length);
16 for(var i = 0; i < args.length; ++i) {
17 args[i] = arguments[i];
18 }
19 args[0] = { 'for': checkboxId }
20
21 return DAM.makeElem('span', [
22 DAM.makeElem('input', [
23 {
24 type: 'checkbox',
25 id: checkboxId,
26 onchange: function(e) {
27 onchange(e.target.checked);
28 }
29 },
30 config.checkboxAttrs || {}
31 ]),
32 DAM.makeElem('label', args)
33 ]);
34 };
35
36 /*
37 * A collapsible panel.
38 * Arguments after the first (config) argument will be applied to the inner container div element.
39 */
40 DAM.makePanel = function(config) {
41 var isOpen = !!(config.isOpen);
42 var title = config.title || "";
43
44 function getLabel() {
45 return (isOpen ? "∇" : "⊳") + " " + title;
46 }
47
48 // config inner container
49 var args = new Array(arguments.length);
50 for(var i = 0; i < args.length; ++i) {
51 args[i] = arguments[i];
52 }
53 args[0] = {}
54
55 var innerContainer = DAM.makeElem('div', args);
56 innerContainer.style.display = isOpen ? "block" : "none";
57
58 var button = DAM.makeElem('button', [
59 getLabel(),
60 {
61 onclick: function(e) {
62 isOpen = !isOpen;
63 button.innerHTML = getLabel();
64 innerContainer.style.display = isOpen ? "block" : "none";
65 }
66 }
67 ]);
68
69 return DAM.makeElem("div", [
70 button,
71 innerContainer
72 ]);
73 };
74
75 /*
76 * A select dropdown.
77 */
78 DAM.makeSelect = function(config) {
79 var title = config.title || "";
80 var options = config.options || [];
81 var onchange = config.onchange || function(v) {};
82
83 var select = DAM.makeElem('select');
84 for (var i = 0; i < options.length; i++) {
85 var op = DAM.makeElem('option');
86 op.value = options[i].value;
87 op.text = options[i].text;
88 op.selected = !!(options[i].selected);
89 select.options.add(op);
90 }
91 select.addEventListener('change', function(e) {
92 onchange(options[select.selectedIndex]);
93 });
94 return DAM.makeElem('label', [title, select]);
95 };
96
97 /*
98 * A range control.
99 */
100 DAM.makeRange = function(config) {
101 var title = config.title || "";
102 var min_ = config['min'];
103 var max_ = config['max'];
104 var value = config.value || min_;
105 var onchange = config.onchange || function(v) {};
106 var textInputSize = config.textInputSize || 5;
107
108 var textInput; var slider;
109
110 slider = DAM.makeElem('input', [
111 {
112 type: "range", min: min_, max: max_, value: value,
113 onchange: function(e) {
114 var v = parseInt(slider.value, 10);
115 if (!isNaN(v)) {
116 textInput.value = "" + v;
117 onchange(v);
118 }
119 }
120 }
121 ]);
122
123 textInput = DAM.makeElem('input', [
124 {
125 size: "" + textInputSize,
126 value: "" + value,
127 onchange: function(e) {
128 var v = parseInt(textInput.value, 10);
129 if (!isNaN(v) && v >= min_ && v <= max_) {
130 slider.value = "" + v;
131 onchange(v);
132 }
133 }
134 }
135 ]);
136
137 var incButton = DAM.makeElem('button', ['+',
138 {
139 onclick: function(e) {
140 var v = parseInt(textInput.value, 10);
141 if ((!isNaN(v)) && v < max_) {
142 v++;
143 textInput.value = "" + v;
144 slider.value = "" + v;
145 onchange(v);
146 }
147 }
148 }
149 ]);
150
151 var decButton = DAM.makeElem('button', ['-',
152 {
153 onclick: function(e) {
154 var v = parseInt(textInput.value, 10);
155 if ((!isNaN(v)) && v > min_) {
156 v--;
157 textInput.value = "" + v;
158 slider.value = "" + v;
159 onchange(v);
160 }
161 }
162 }
163 ]);
164
165 return DAM.makeElem('span', [DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
166 };
0 /* dam.js version 0.0. This file is in the public domain. */
1
2 if (typeof window === 'undefined' || window.DAM === undefined) DAM = {};
3
4 DAM.makeElem = function(tag, args) {
5 args = args || [];
6 var elem = document.createElement(tag);
7 for (var i = 0; i < args.length; i++) {
8 var arg = args[i];
9 if (arg instanceof Element) {
10 elem.appendChild(arg);
11 } else if (typeof arg === 'string' || arg instanceof String) {
12 elem.appendChild(document.createTextNode(arg));
13 } else if (typeof arg === 'object' && arg !== null) {
14 Object.keys(arg).forEach(function(key) {
15 if (key.substring(0, 2) === 'on') {
16 elem.addEventListener(key.substring(2), arg[key]);
17 } else if (arg[key] === null) {
18 elem.removeAttribute(key);
19 } else {
20 elem.setAttribute(key, arg[key]);
21 }
22 });
23 } else {
24 console.log(arg);
25 }
26 }
27 return elem;
28 };
29 DAM.maker = function(tag) {
30 return function() {
31 return DAM.makeElem(tag, arguments);
32 };
33 };