fix: glass pen filter, element targeting in skill, rename to board

Author: nicholaswmin

README.md

@@ -111,7 +111,7 @@ event stream and dispatches it to the passed `element`:
 > "swipe across an element using 1 finger, and draw a square":
 
 ```js
-await new DragMotion(document.querySelector('#whiteboard'), [
+await new DragMotion(document.querySelector('#board'), [
   [30, 50, 0],
   [60, 80, 16],
   [120, 140, 32],
@@ -122,24 +122,26 @@ await new DragMotion(document.querySelector('#whiteboard'), [
 > then lift up":
 
 ```js
-await new TwistMotion(document.querySelector('#whiteboard'), 45, {
+await new TwistMotion(document.querySelector('#board'), 45, {
   x: 100, y: 100
 }).perform()
 ```
 
 ### Element targeting
 
 The passed element should be the **container** of the  
-actual element you're targeting:
+actual element you're targeting.
+
+For example:
 
 ```html
-<div id="whiteboard">
+<div id="board">
   <canvas></canvas>
 </div>
 ```
 
 ```js
-await new DragMotion(document.querySelector('#whiteboard'), [
+await new DragMotion(document.querySelector('#board'), [
   [30, 50, 0],
   [60, 80, 16],
 ]).perform()

bin/skill.md

@@ -51,6 +51,26 @@ await new DragMotion(el, [
 - `ms` is relative to motion start and must be non-decreasing.  
 - Use `getBoundingClientRect()` to keep points inside the element.   
 
+## Element targeting
+
+The passed element should be the **container** of the
+actual element you're targeting:
+
+For example:
+
+```html
+<div id="board">
+  <canvas></canvas>
+</div>
+```
+
+```js
+await new DragMotion(document.querySelector('#board'), [
+  [30, 50, 0],
+  [60, 80, 16],
+]).perform()
+```
+
 ## Glass
 
 Glass is an overlay that visualizes dispatched events

src/glass/index.js

@@ -128,6 +128,9 @@ const js = `;(() => {
     const f = lookup.get(e.type)
     if (!f) return
 
+    if (f.name === 'pointer' && e.pointerType !== 'pen')
+      return
+
     const x = e.changedTouches?.[0]?.clientX ?? e.clientX
     const y = e.changedTouches?.[0]?.clientY ?? e.clientY