Commit 5ba20bba5b158e57aecc690beb7af2a380a47f7b - Circute

Try to improve the UI in the web demo using new yoob.Controller. catseye 12 years ago

2 changed file(s) with 55 addition(s) and 17 deletion(s). Raw diff Collapse all Expand all

+23

-9

demo/circute.html less more

1	1	<head>
2	2	<meta charset="utf-8">
3	3	<title>Circute Demo</title>
	4	<style>
	5	#input {
	6	display: none;
	7	}
	8	#output {
	9	border: 1px solid blue;
	10	}
	11	#load {
	12	display: none;
	13	}
	14	</style>
4	15	</head>
5	16	<body>
6	17
7	18	<h1>Circute Demo</h1>
	19
	20	<button id="load">Load</button>
	21	<button id="edit">Edit</button>
	22	<button id="start">Start</button>
	23	<button id="stop">Stop</button>
	24	<button id="step">Step</button>
	25	Speed: <input id="speed" type="range" min="0" max="200" value="0" />
8	26
9	27	<textarea id="input" rows="10">
10	28	=========

16	34	=========
17	35	</textarea>
18	36
19		<pre id="output" style="border: 1px solid blue">
20		</pre>
21
22		<button id="start">Start</button>
23		<button id="stop">Stop</button>
24		<button id="step">Step</button>
25		<button id="load">Load</button>
26		Speed: <input id="speed" type="range" min="0" max="200" value="0" />
	37	<pre id="output"></pre>
27	38
28	39	</body>
29	40	<script src="yoob/controller.js"></script>

46	57	newPf.setDefault('Space');
47	58	evolve_playfield(pf, newPf);
48	59	pf = newPf;
49		var output = document.getElementById('output');
50	60	output.innerHTML = pf.dump(dumpMapper);
51	61	};
52	62

55	65	'stop': 'stop',
56	66	'step': 'step',
57	67	'load': 'load',
	68	'edit': 'edit',
58	69	'source': 'input',
	70	'display': 'output',
59	71	'speed': 'speed'
60	72	});
	73
	74	c.click_load();
61	75	</script>

+32

-8

demo/yoob/controller.js less more

0	0	/*
1		* This file is part of yoob.js version 0.2-PRE
	1	* This file is part of yoob.js version 0.3-PRE
2	2	* This file is in the public domain. See http://unlicense.org/ for details.
3	3	*/
4	4	if (window.yoob === undefined) yoob = {};

19	19	this.delay = 100;
20	20	this.source = undefined;
21	21	this.speed = undefined;
	22	this.controls = {};
22	23
23	24	var makeOnClick = function(controller, key) {
24	25	if (controller['click_' + key] !== undefined)

34	35	*/
35	36	this.connect = function(dict) {
36	37	var self = this;
37		var keys = ["start", "stop", "step", "load"];
	38	var keys = ["start", "stop", "step", "load", "edit"];
38	39	for (var i in keys) {
39	40	var key = keys[i];
40	41	var value = dict[key];

43	44	}
44	45	if (value !== undefined) {
45	46	value.onclick = makeOnClick(this, key);
	47	this.controls[key] = value;
46	48	}
47	49	}
48	50
49		var source = dict.source;
50		if (typeof source === 'string') {
51		source = document.getElementById(source);
52		}
53		if (source !== undefined) {
54		this.source = source;
	51	var keys = ["source", "display"];
	52	for (var i in keys) {
	53	var key = keys[i];
	54	var value = dict[key];
	55	if (typeof value === 'string') {
	56	value = document.getElementById(value);
	57	}
	58	if (value !== undefined) {
	59	this[key] = value;
	60	}
55	61	}
56	62
57	63	var speed = dict.speed;

83	89	this.click_load = function(e) {
84	90	this.stop();
85	91	this.load(this.source.value);
	92	if (this.controls.edit) this.controls.edit.style.display = "inline";
	93	if (this.controls.load) this.controls.load.style.display = "none";
	94	if (this.controls.start) this.controls.start.disabled = false;
	95	if (this.controls.step) this.controls.step.disabled = false;
	96	if (this.controls.stop) this.controls.stop.disabled = false;
	97	if (this.display) this.display.style.display = "block";
	98	if (this.source) this.source.style.display = "none";
86	99	};
87	100
88	101	this.load = function(text) {
89	102	alert("load() NotImplementedError");
	103	};
	104
	105	this.click_edit = function(e) {
	106	this.stop();
	107	if (this.controls.edit) this.controls.edit.style.display = "none";
	108	if (this.controls.load) this.controls.load.style.display = "inline";
	109	if (this.controls.start) this.controls.start.disabled = true;
	110	if (this.controls.step) this.controls.step.disabled = true;
	111	if (this.controls.stop) this.controls.stop.disabled = true;
	112	if (this.display) this.display.style.display = "none";
	113	if (this.source) this.source.style.display = "block";
90	114	};
91	115
92	116	this.start = function() {