Add syncOn and syncOff

README.md

@@ -25,3 +25,4 @@ https://en.wikipedia.org/wiki/Web_colors
 -     4315 / 13312
 -     4313 / 13312
 -     4311 / 13312
+-     4271 / 13312

game/js/canvas/2d.js

@@ -2,7 +2,9 @@ import css from '../css.js';
 css`body{margin:0;padding:0;overflow:hidden;}canvas{display:block;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}`;
 
 import events from '../events.js';
-let {on, off, once, emit, last} = events();
+
+let obj = events({}, ['color']);
+let {on, emit, last} = obj;
 
 let canvas = document.createElement('canvas');
 let ctx = canvas.getContext('2d');
@@ -73,4 +75,4 @@ let onF = time => {
 };
 requestAnimationFrame(onF);
 
-export default { on, off, once, emit, last };
+export default obj;

game/js/events.js

@@ -63,5 +63,14 @@ export default (obj = {}, eTypes = []) => {
         };
     });
 
+    obj.syncOn = other => {
+        eTypes.forEach(
+        eType => other.on(eType, obj[eType]));
+    };
+
+    obj.syncOff = other => eTypes.forEach(
+        eType => other.off(eType, obj[eType])
+    );
+
     return obj;
 };

game/js/statemachine/machine.js

@@ -1,9 +1,6 @@
 import canvas from '../canvas/2d.js';
 import createState from './state.js';
 
-let eTypes = ['tap', 'resize', 'step', 'draw'];
-let oTypes = ['color'];
-
 let states = {};
 
 let add = (name, state) => {
@@ -13,16 +10,6 @@ let add = (name, state) => {
     if (!state) {
         state = createState();
     }
-    eTypes.forEach(eType => {
-        state[eType] = e => {
-            state.emit(eType, e);
-        };
-    });
-    oTypes.forEach(oType => {
-        canvas[oType] = e => {
-            canvas.emit(oType, e);
-        };
-    });
     states[name] = state;
     if (Object.keys(states).length === 1) {
         start(name);
@@ -38,22 +25,14 @@ let start = (name) => {
     Object.values(states).forEach((s) => {
         if (s.active) {
             s.active = false;
-            eTypes.forEach(eType => {
-                canvas.off(eType, s[eType]);
-            });
-            oTypes.forEach(oType => {
-                s.off(oType, canvas[oType]);
-            });
+            s.syncOff(canvas);
+            canvas.syncOff(s);
         }
     });
     let n = states[name];
-    eTypes.forEach(eType => {
-        canvas.on(eType, n[eType]);
-    });
-    oTypes.forEach(oType => {
-        n.on(oType, canvas[oType]);
-    });
-    n['resize'](canvas.last('resize'));
+    n.syncOn(canvas);
+    canvas.syncOn(n);
+    n.resize(canvas.last('resize'));
     n.active = true;
 };
 

game/js/statemachine/state.js

@@ -14,6 +14,6 @@ export default () => {
             }
         }
     };
-    events(state, ['start', 'stop']);
+    events(state, ['start', 'stop','tap', 'resize', 'step', 'draw']);
     return state;
 };