Merge pull request #27 from livewires/events

Events: on('foo') -> onFoo()

docs/2-animation.html

@@ -133,7 +133,7 @@ <h2 id="events">Events</h2>
 <p></s></p>
 </li>
 <li><p>Use <code>on(&#39;tap&#39;)</code> to detect when the screen is tapped.</p>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     alert(&quot;dont touch this&quot;)
 })
 </code></pre>
@@ -147,7 +147,7 @@ <h2 id="events">Events</h2>
 <pre><code class="lang-js">    alert(&quot;dont touch this&quot;)
 </code></pre>
 <p></s></p>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     var bullet = new Sprite
     bullet.costume = &#39;👾&#39;
     bullet.x = e.fingerX
@@ -156,14 +156,14 @@ <h2 id="events">Events</h2>
     // TODO: move the bullet ...
 })
 </code></pre>
-<p><em>Add this <strong>inside</strong> the <code>world.on(&#39;tap&#39;...</code> block.</em></p>
+<p><em>Add this <strong>inside</strong> the <code>world.onTap</code> block.</em></p>
 </li>
 </ul>
 <p>What’s going on here? <code>e</code> is an <strong>event</strong> object, telling us the details of the <strong>tap</strong> event. The <code>e.fingerX</code> and <code>e.fingerY</code> attributes tell us the coordinates of the tap.</p>
 <p>Now let’s try moving our projectile!</p>
 <ul>
 <li><p>Add a <code>forever</code> block to move the Sprite we created after the tap.</p>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     // ... [make the bullet] ...
 
     forever(() =&gt; {
@@ -194,7 +194,7 @@ <h2 id="trig">Trig</h2>
 <p><em>Hint: you want to set their <code>angle</code> to a random number between <code>1</code> and <code>360</code>.</em></p>
 </li>
 <li><p>Now move them at that angle by replacing your <code>forever</code> block.</p>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     // ... [make the bullet, with random angle] ...
 
     forever(() =&gt; {
@@ -210,7 +210,7 @@ <h2 id="trig">Trig</h2>
 <p>Now to work out the correct angle! We need to use <code>atan2</code> for this. This is a special version of inverse <em>tan()</em> which takes two numbers–a difference in <code>x</code> and a difference in <code>y</code>–and returns the correct angle.</p>
 <ul>
 <li><p>Use <code>atan2</code> to get the correct angle.</p>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     var bullet = new Sprite
     // ... [go to face] ...
     bullet.angle = UW.atan2(e.fingerX - face.x, e.fingerY - face.y)
@@ -312,7 +312,7 @@ <h2 id="fin">Fin</h2>
 <li><strong>Change attributes</strong> using <code>+=</code></li>
 <li><em>Move</em> things over time (<strong>animation</strong>!)</li>
 <li>React to the <strong>orientation</strong> of the phone</li>
-<li>How to <strong>detect taps</strong> using <code>.on(&#39;tap&#39;, e =&gt; { ... })</code></li>
+<li>How to <strong>detect taps</strong> using <code>.onTap</code></li>
 <li>How to move things at an <strong>angle</strong></li>
 <li>Using <code>if</code> for <strong>conditions</strong></li>
 <li><code>destroy</code>-ing Sprites when you’re finished with them</li>

docs/reference.html

@@ -319,17 +319,16 @@ <h2 id="events">Events</h2>
 <p>An <strong>event</strong> tells you that something has happened. Both Worlds and Sprites will emit events when they are tapped or dragged.</p>
 <p>If a tap overlaps more than one sprite (because the sprites are overlapping), then the sprites are told about the events in order. The front-most one sees the event first.</p>
 <p>If a sprite wants to handle an event, it should <code>return true</code>. From then on, no other sprites (nor the <code>world</code>!) will see the event.</p>
-<p>There are two types of event:</p>
+<p>There are a few kinds of event:</p>
 <ul>
-<li><p><strong><code>world.on(&#39;tap&#39;, e =&gt; { ... })</code></strong> / <strong><code>sprite.on(&#39;tap&#39;, e =&gt; { ... })</code></strong></p>
+<li><p><strong><code>world.onTap(e =&gt; { ... })</code></strong> / <strong><code>sprite.onTap(e =&gt; { ... })</code></strong></p>
 <p>A <code>tap</code> event happens when a finger is pressed against the screen and let go without moving.</p>
 <p>The event object <code>e</code> has the following attributes:</p>
 <ul>
 <li><strong><code>e.fingerX</code></strong> / <strong><code>e.fingerY</code></strong>: the coordinates of the tap.</li>
 </ul>
 </li>
-<li><p><strong><code>world.on(&#39;drag&#39;, e =&gt; { ... })</code></strong> / <strong><code>sprite.on(&#39;drag&#39;, e =&gt; { ... })</code></strong></p>
-<p>A <code>tap</code> event happens when a finger is pressed against the screen and let go without moving.</p>
+<li><p><strong><code>world.onDrag(e =&gt; { ... })</code></strong> / <strong><code>sprite.onDrag(e =&gt; { ... })</code></strong></p>
 <p>The event object <code>e</code> has the following attributes:</p>
 <ul>
 <li><strong><code>e.startX</code></strong> / <strong><code>e.startY</code></strong>: the coordinate the drag started from.</li>
@@ -338,17 +337,19 @@ <h2 id="events">Events</h2>
 </ul>
 <p>If the Sprite doesn’t want to hear about the event anymore, it can <code>return false</code>.</p>
 </li>
+<li><p><strong><code>world.onDrop(e =&gt; { ... })</code></strong> / <strong><code>sprite.onDrop(e =&gt; { ... })</code></strong></p>
+</li>
 </ul>
 <p>If you’re testing your game on a computer, mouse clicks and drags will work to simulate touches – but remember that unlike fingers, a mouse pointer can only be in one place at a time!</p>
 <h3 id="detecting-taps">Detecting taps</h3>
-<pre><code class="lang-js">world.on(&#39;tap&#39;, e =&gt; {
+<pre><code class="lang-js">world.onTap(e =&gt; {
     // make a ball where you clicked
     var ball = new Sprite
     ball.costume = &#39;beachball&#39;
     ball.x = e.fingerX
     ball.y = e.fingerY
 
-    ball.on(&#39;tap&#39;, e =&gt; {
+    ball.onTap(e =&gt; {
         // flip
         ball.flipped = !ball.flipped
 
@@ -361,7 +362,7 @@ <h3 id="detecting-taps">Detecting taps</h3>
 <h3 id="dragging-sprites-around">Dragging sprites around</h3>
 <pre><code class="lang-js">var ball = new Sprite
 ball.costume = &#39;beachball&#39;
-ball.on(&#39;drag&#39;, e =&gt; {
+ball.onDrag(e =&gt; {
     // move when dragged
     ball.x += e.deltaX
     ball.y += e.deltaY

docs/sheets/2-animation.md

@@ -134,7 +134,7 @@ Let's have our face shoot out a projectile toward our finger when we tap.
   * Use `on('tap')` to detect when the screen is tapped.
 
     ```js
-    world.on('tap', e => {
+    world.onTap(e => {
         alert("dont touch this")
     })
     ```
@@ -152,7 +152,7 @@ That gets boring quickly, so let's make a projectile.
     </s>
 
     ```js
-    world.on('tap', e => {
+    world.onTap(e => {
         var bullet = new Sprite
         bullet.costume = '👾'
         bullet.x = e.fingerX
@@ -161,7 +161,7 @@ That gets boring quickly, so let's make a projectile.
         // TODO: move the bullet ...
     })
     ```
-    _Add this **inside** the `world.on('tap'...` block._
+    _Add this **inside** the `world.onTap` block._
 
 What's going on here? `e` is an **event** object, telling us the details of the **tap** event. The `e.fingerX` and `e.fingerY` attributes tell us the coordinates of the tap.
 
@@ -170,7 +170,7 @@ Now let's try moving our projectile!
   * Add a `forever` block to move the Sprite we created after the tap.
 
     ```js
-    world.on('tap', e => {
+    world.onTap(e => {
         // ... [make the bullet] ...
 
         forever(() => {
@@ -207,7 +207,7 @@ Currently, our bullets all go at 45°, which is dull. Let's fire them out at a r
   * Now move them at that angle by replacing your `forever` block.
 
     ```js
-    world.on('tap', e => {
+    world.onTap(e => {
         // ... [make the bullet, with random angle] ...
 
         forever(() => {
@@ -226,7 +226,7 @@ Now to work out the correct angle! We need to use `atan2` for this. This is a sp
   * Use `atan2` to get the correct angle.
 
     ```js
-    world.on('tap', e => {
+    world.onTap(e => {
         var bullet = new Sprite
         // ... [go to face] ...
         bullet.angle = UW.atan2(e.fingerX - face.x, e.fingerY - face.y)
@@ -345,7 +345,7 @@ Excellent work! You've learnt how to:
   * **Change attributes** using `+=`
   * _Move_ things over time (**animation**!)
   * React to the **orientation** of the phone
-  * How to **detect taps** using `.on('tap', e => { ... })`
+  * How to **detect taps** using `.onTap`
   * How to move things at an **angle**
   * Using `if` for **conditions**
   * `destroy`-ing Sprites when you're finished with them

docs/sheets/reference.md

@@ -399,15 +399,15 @@ If a sprite wants to handle an event, it should `return true`. From then on, no
 
 There are a few kinds of event:
 
-  * **`world.on('tap', e => { ... })`** / **`sprite.on('tap', e => { ... })`**
+  * **`world.onTap(e => { ... })`** / **`sprite.onTap(e => { ... })`**
 
     A `tap` event happens when a finger is pressed against the screen and let go without moving.
 
     The event object `e` has the following attributes:
 
       * **`e.fingerX`** / **`e.fingerY`**: the coordinates of the tap.
 
-  * **`world.on('drag', e => { ... })`** / **`sprite.on('drag', e => { ... })`**
+  * **`world.onDrag(e => { ... })`** / **`sprite.onDrag(e => { ... })`**
 
     The event object `e` has the following attributes:
 
@@ -417,23 +417,22 @@ There are a few kinds of event:
 
     If the Sprite doesn't want to hear about the event anymore, it can `return false`.
 
-  * **`world.on('drop', e => { ... })`** / **`sprite.on('drop', e => { ... })`**
-
+  * **`world.onDrop(e => { ... })`** / **`sprite.onDrop(e => { ... })`**
 
 If you're testing your game on a computer, mouse clicks and drags will work to simulate touches -- but remember that unlike fingers, a mouse pointer can only be in one place at a time!
 
 
 ### Detecting taps
 
 ```js
-world.on('tap', e => {
+world.onTap(e => {
     // make a ball where you clicked
     var ball = new Sprite
     ball.costume = 'beachball'
     ball.x = e.fingerX
     ball.y = e.fingerY
 
-    ball.on('tap', e => {
+    ball.onTap(e => {
         // flip
         ball.flipped = !ball.flipped
 
@@ -450,7 +449,7 @@ world.on('tap', e => {
 ```js
 var ball = new Sprite
 ball.costume = 'beachball'
-ball.on('drag', e => {
+ball.onDrag(e => {
     // move when dragged
     ball.x += e.deltaX
     ball.y += e.deltaY

uw/assets.js

@@ -5,32 +5,32 @@ const emitter = require('./emitter')
 
 const Request = function(def) {
     if (def) {
-        def(result => this.emit('load', result), error => this.emit('error', result))
+        def(result => this.emitLoad(result), error => this.emitError(result))
     }
     this.loaded = 0
     this.total = null
     this.lengthComputable = false
-    this.on('progress', e => {
+    this.onProgress(e => {
         this.loaded = e.loaded
         this.total = e.total
         this.lengthComputable = e.lengthComputable
     })
 }
-emitter(Request.prototype)
+emitter(Request.prototype, ['progress', 'load', 'error'])
 
 Request.prototype.then = function(cb) {
     var f = new Request
-    this.on('load', result => {
+    this.onLoad(result => {
         const next = cb(result)
         if (next instanceof Request) {
-            next.on('load', next => f.emit('load', next))
+            next.onLoad(next => f.emitLoad(next))
         } else {
             // TODO catch ?
-            f.emit('load', next)
+            f.emitLoad(next)
         }
     })
-    this.on('error', e => f.emit('error', e))
-    this.on('progress', e => f.emit('progress', e))
+    this.onError(e => f.emitError(e))
+    this.onProgress(e => f.emitProgress(e))
     return f
 }
 
@@ -39,15 +39,15 @@ Request.getURL = function(path, type) {
     const xhr = new XMLHttpRequest
     xhr.open('GET', path)
     xhr.responseType = type || 'arraybuffer'
-    xhr.addEventListener('load', e => req.emit('load', xhr.response))
+    xhr.addEventListener('load', e => req.emitLoad(xhr.response))
     xhr.addEventListener('progress', e => {
-        req.emit('progress', {
+        req.emitProgress({
             loaded: e.loaded,
             total: e.total,
             lengthComputable: e.lengthComputable,
         })
     })
-    xhr.addEventListener('error', e => req.emit('error', err))
+    xhr.addEventListener('error', e => req.emitError(err))
     xhr.send()
     return req
 }
@@ -69,10 +69,10 @@ Asset.loadAll = function(promiseMap, defaultFactory) {
             count -= 1
             results[key] = value
             if (count === 0) {
-                comp.emit('load', results)
+                comp.emitLoad(results)
             }
         })
-        promise.on('progress', updateProgress)
+        promise.onProgress(updateProgress)
         promises.push(promise)
     }
     var count = promises.length
@@ -88,7 +88,7 @@ Asset.loadAll = function(promiseMap, defaultFactory) {
                 total += req.total
             }
         }
-        comp.emit('progress', {
+        comp.emitProgress({
             loaded: loaded,
             total: computable ? (total / computable * promises.length)|0 : promises.length,
         })

uw/emitter.js

@@ -34,10 +34,6 @@ function unlisten(e, fn) {
     if (i !== -1) l.splice(i, 1)
     return this
 }
-function toggleListener(e, fn, value) {
-    if (value) this.on(e, fn)
-    else this.unlisten(e, fn)
-}
 function listeners(e) {
     const m = this._listeners
     return m ? m.get(e) || [] : []
@@ -59,12 +55,24 @@ const PROPERTIES = {
     on: {value: on},
     once: {value: once},
     unlisten: {value: unlisten},
-    toggleListener: {value: toggleListener},
     listeners: {value: listeners},
     emit: {value: emit},
 }
 
-module.exports = function emitter(o) {
-    Object.defineProperties(o, PROPERTIES)
+module.exports = function emitter(o, names) {
+  const props = Object.assign({}, PROPERTIES)
+  for (let name of names) {
+    const capital = name[0].toUpperCase() + name.substr(1)
+    props['on' + capital] = {
+      value: function(fn) { return this.on(name, fn) },
+    }
+    props['onNext' + capital] = {
+      value: function(fn) { return this.once(name, fn) }
+    }
+    props['emit' + capital] = {
+      value: function(arg) { return this.emit(name, arg) }
+    }
+  }
+  Object.defineProperties(o, props)
 }