diff --git a/css/controls.scss b/css/controls.scss index a2e77e7..7655e27 100644 --- a/css/controls.scss +++ b/css/controls.scss @@ -31,6 +31,10 @@ &:hover { background: #fff; } + + &:focus { + outline: 0; + } } .controls-bottom { diff --git a/css/style.css b/css/style.css index d59b64b..31f192c 100644 --- a/css/style.css +++ b/css/style.css @@ -113,6 +113,8 @@ body { padding: 10px; } .controls-button:hover { background: #fff; } + .controls-button:focus { + outline: 0; } .controls-bottom { margin-top: auto; } diff --git a/js/animation1.js b/js/animation1.js index 818b933..d0cacfa 100644 --- a/js/animation1.js +++ b/js/animation1.js @@ -5,7 +5,8 @@ import Controls from './controls'; function Animation1() { this.options = { - count: 1 + count: 1, + animating: false }; this.container = document.getElementById('animation1'); @@ -14,41 +15,28 @@ function Animation1() { const eventStack = this.controls.mount(); - eventStack.subscribe(this.subscriber); + eventStack.subscribe(this.subscriber.bind(this)); this.particles = []; this.updateCount(); + this.updateAnimating(true); - // this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds)); - // - // const stop$ = Rx.Observable.fromEvent(this.container, 'stop'); - // - // // Change animation speed - // // Change animal pic - // // Enable random radius changes - // // Enable random rotation changes - // // Show movement circle - // // Show vision grid (including touches!) - // // Start / stop - // // TODO add core UI - // - // console.error("Click container to stop."); - // const fps$ = Rx.Observable.interval(1000 / 32) - // .takeUntil(stop$) - // .finally(() => { console.error("Stopped."); }) - // - // const click$ = Rx.Observable.fromEvent(this.container, 'click'); - // click$.subscribe(() => { - // this.container.dispatchEvent(new CustomEvent('stop')); - // }); - // - // fps$.subscribe(this.nextFrame.bind(this)); + // TODO Change animal pic + // TODO show movement circle + // TODO add core UI + + // TODO ANIM2 Show vision grid (including touches!) }; Animation1.prototype.subscriber = function({ key, value }) { switch(key) { - case 'count': this.updateCount(); break; + case 'count': + this.updateCount(); + break; + case 'animating': + this.updateAnimating(!this.options.animating); + break; } } @@ -68,4 +56,17 @@ Animation1.prototype.updateCount = function() { } }; +Animation1.prototype.updateAnimating = function(animating) { + Object.assign(this.options, { animating }); + this.controls.updateOptions(this.options); + + if (animating) { + const fps$ = Rx.Observable.interval(1000 / 32) + .takeWhile(_ => this.options.animating) + .finally(() => { console.error("Stopped."); }) + + fps$.subscribe(this.nextFrame.bind(this)); + } +}; + export default Animation1; diff --git a/js/bundle.js b/js/bundle.js index 23a7e94..d5ebe52 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -3462,40 +3462,48 @@ var _rxjs2 = _interopRequireDefault(_rxjs); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function Controls(node, _ref) { - var speed = _ref.speed, - otherstuff = _ref.otherstuff; - +function Controls(node, options) { this.node = node; + this.options = options; + + this.countCtrl = createCountControl(); + this.speedCtrl = createSpeedControl(); + this.radiusCtrl = createRadiusControl(); + this.rotationCtrl = createRotationControl(); + this.animatingCtrl = createAnimatingControl(); + + this.updateOptions(options); } +Controls.prototype.updateOptions = function (_ref) { + var animating = _ref.animating, + count = _ref.count, + speed = _ref.speed; + + this.animatingCtrl.innerHTML = animating ? '◼ Stop' : '▶ Start'; +}; + Controls.prototype.mount = function (customNodes) { - var countCtrl = renderCountControl(); - var speedCtrl = renderSpeedControl(); - var radiusCtrl = renderRadiusControl(); - var rotationCtrl = renderRotationControl(); - var startStopCtrl = renderStartStopControl(); - - this.node.appendChild(countCtrl); - this.node.appendChild(speedCtrl); - this.node.appendChild(radiusCtrl); - this.node.appendChild(rotationCtrl); - this.node.appendChild(startStopCtrl); - - return _rxjs2.default.Observable.merge(_rxjs2.default.Observable.fromEvent(countCtrl, 'change').map(function (evt) { + this.node.appendChild(this.countCtrl); + this.node.appendChild(this.speedCtrl); + this.node.appendChild(this.radiusCtrl); + this.node.appendChild(this.rotationCtrl); + this.node.appendChild(this.animatingCtrl); + + return _rxjs2.default.Observable.merge(_rxjs2.default.Observable.fromEvent(this.countCtrl, 'change').map(function (evt) { return { key: 'count', value: evt.target.value * 1 }; - }), _rxjs2.default.Observable.fromEvent(speedCtrl, 'change').map(function (evt) { + }), _rxjs2.default.Observable.fromEvent(this.speedCtrl, 'change').map(function (evt) { return { key: 'speed', value: evt.target.value * 1 }; - }), _rxjs2.default.Observable.fromEvent(radiusCtrl, 'change').map(function (evt) { + }), _rxjs2.default.Observable.fromEvent(this.radiusCtrl, 'change').map(function (evt) { return { key: 'radius', value: evt.target.checked }; - }), _rxjs2.default.Observable.fromEvent(rotationCtrl, 'change').map(function (evt) { + }), _rxjs2.default.Observable.fromEvent(this.rotationCtrl, 'change').map(function (evt) { return { key: 'rotation', value: evt.target.checked }; - }), _rxjs2.default.Observable.fromEvent(startStopCtrl, 'click').map(function (evt) { - return { key: 'startstop', value: null }; + }), _rxjs2.default.Observable.fromEvent(this.animatingCtrl, 'click').map(function (evt) { + return { key: 'animating', value: null }; })); }; -var renderCountControl = function renderCountControl() { +var createCountControl = function createCountControl() { var label = document.createElement('label'); label.className = 'controls-label'; @@ -3515,7 +3523,7 @@ var renderCountControl = function renderCountControl() { return label; }; -var renderSpeedControl = function renderSpeedControl() { +var createSpeedControl = function createSpeedControl() { var label = document.createElement('label'); label.className = 'controls-label'; @@ -3535,7 +3543,7 @@ var renderSpeedControl = function renderSpeedControl() { return label; }; -var renderRadiusControl = function renderRadiusControl() { +var createRadiusControl = function createRadiusControl() { var label = document.createElement('label'); label.className = 'controls-label'; @@ -3553,7 +3561,7 @@ var renderRadiusControl = function renderRadiusControl() { return label; }; -var renderRotationControl = function renderRotationControl() { +var createRotationControl = function createRotationControl() { var label = document.createElement('label'); label.className = 'controls-label'; @@ -3571,12 +3579,9 @@ var renderRotationControl = function renderRotationControl() { return label; }; -var renderStartStopControl = function renderStartStopControl() { +var createAnimatingControl = function createAnimatingControl() { var button = document.createElement('button'); button.className = 'controls-button controls-bottom'; - button.innerHTML = '▶ Start'; - - // button.innerHTML = '◼ Stop'; return button; }; @@ -6207,7 +6212,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de function Animation1() { this.options = { - count: 1 + count: 1, + animating: false }; this.container = document.getElementById('animation1'); @@ -6216,36 +6222,18 @@ function Animation1() { var eventStack = this.controls.mount(); - eventStack.subscribe(this.subscriber); + eventStack.subscribe(this.subscriber.bind(this)); this.particles = []; this.updateCount(); + this.updateAnimating(true); + + // TODO Change animal pic + // TODO show movement circle + // TODO add core UI - // this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds)); - // - // const stop$ = Rx.Observable.fromEvent(this.container, 'stop'); - // - // // Change animation speed - // // Change animal pic - // // Enable random radius changes - // // Enable random rotation changes - // // Show movement circle - // // Show vision grid (including touches!) - // // Start / stop - // // TODO add core UI - // - // console.error("Click container to stop."); - // const fps$ = Rx.Observable.interval(1000 / 32) - // .takeUntil(stop$) - // .finally(() => { console.error("Stopped."); }) - // - // const click$ = Rx.Observable.fromEvent(this.container, 'click'); - // click$.subscribe(() => { - // this.container.dispatchEvent(new CustomEvent('stop')); - // }); - // - // fps$.subscribe(this.nextFrame.bind(this)); + // TODO ANIM2 Show vision grid (including touches!) }; Animation1.prototype.subscriber = function (_ref) { @@ -6254,7 +6242,11 @@ Animation1.prototype.subscriber = function (_ref) { switch (key) { case 'count': - this.updateCount();break; + this.updateCount(); + break; + case 'animating': + this.updateAnimating(!this.options.animating); + break; } }; @@ -6276,6 +6268,23 @@ Animation1.prototype.updateCount = function () { } }; +Animation1.prototype.updateAnimating = function (animating) { + var _this = this; + + Object.assign(this.options, { animating: animating }); + this.controls.updateOptions(this.options); + + if (animating) { + var fps$ = _rxjs2.default.Observable.interval(1000 / 32).takeWhile(function (_) { + return _this.options.animating; + }).finally(function () { + console.error("Stopped."); + }); + + fps$.subscribe(this.nextFrame.bind(this)); + } +}; + exports.default = Animation1; /***/ }), diff --git a/js/controls.js b/js/controls.js index 561d740..724b919 100644 --- a/js/controls.js +++ b/js/controls.js @@ -1,37 +1,44 @@ import Rx, { Observable } from 'rxjs'; -function Controls(node, { speed, otherstuff }) { +function Controls(node, options) { this.node = node; + this.options = options; + + this.countCtrl = createCountControl(); + this.speedCtrl = createSpeedControl(); + this.radiusCtrl = createRadiusControl(); + this.rotationCtrl = createRotationControl(); + this.animatingCtrl = createAnimatingControl(); + + this.updateOptions(options); +} + +Controls.prototype.updateOptions = function({ animating, count, speed }) { + this.animatingCtrl.innerHTML = (animating ? '◼ Stop' : '▶ Start'); } Controls.prototype.mount = function(customNodes) { - const countCtrl = renderCountControl(); - const speedCtrl = renderSpeedControl(); - const radiusCtrl = renderRadiusControl(); - const rotationCtrl = renderRotationControl(); - const startStopCtrl = renderStartStopControl(); - - this.node.appendChild(countCtrl); - this.node.appendChild(speedCtrl); - this.node.appendChild(radiusCtrl); - this.node.appendChild(rotationCtrl); - this.node.appendChild(startStopCtrl); + this.node.appendChild(this.countCtrl); + this.node.appendChild(this.speedCtrl); + this.node.appendChild(this.radiusCtrl); + this.node.appendChild(this.rotationCtrl); + this.node.appendChild(this.animatingCtrl); return Rx.Observable.merge( - Rx.Observable.fromEvent(countCtrl, 'change') + Rx.Observable.fromEvent(this.countCtrl, 'change') .map(evt => ({ key: 'count', value: evt.target.value * 1 })), - Rx.Observable.fromEvent(speedCtrl, 'change') + Rx.Observable.fromEvent(this.speedCtrl, 'change') .map(evt => ({ key: 'speed', value: evt.target.value * 1 })), - Rx.Observable.fromEvent(radiusCtrl, 'change') + Rx.Observable.fromEvent(this.radiusCtrl, 'change') .map(evt => ({ key: 'radius', value: evt.target.checked })), - Rx.Observable.fromEvent(rotationCtrl, 'change') + Rx.Observable.fromEvent(this.rotationCtrl, 'change') .map(evt => ({ key: 'rotation', value: evt.target.checked })), - Rx.Observable.fromEvent(startStopCtrl, 'click') - .map(evt => ({ key: 'startstop', value: null })), + Rx.Observable.fromEvent(this.animatingCtrl, 'click') + .map(evt => ({ key: 'animating', value: null })), ); } -const renderCountControl = function() { +const createCountControl = function() { const label = document.createElement('label'); label.className = 'controls-label'; @@ -51,7 +58,7 @@ const renderCountControl = function() { return label; } -const renderSpeedControl = function() { +const createSpeedControl = function() { const label = document.createElement('label'); label.className = 'controls-label'; @@ -71,7 +78,7 @@ const renderSpeedControl = function() { return label; } -const renderRadiusControl = function() { +const createRadiusControl = function() { const label = document.createElement('label'); label.className = 'controls-label'; @@ -89,7 +96,7 @@ const renderRadiusControl = function() { return label; } -const renderRotationControl = function() { +const createRotationControl = function() { const label = document.createElement('label'); label.className = 'controls-label'; @@ -107,12 +114,9 @@ const renderRotationControl = function() { return label; } -const renderStartStopControl = function() { +const createAnimatingControl = function() { const button = document.createElement('button'); button.className = 'controls-button controls-bottom'; - button.innerHTML = '▶ Start'; - - // button.innerHTML = '◼ Stop'; return button; }