ease showcase

TODO.md

@@ -79,6 +79,22 @@
     - Selected
     - Cant select
     - Stack Top view
+
+back
+  idle
+  hover
+  click
+  flip
+  drag
+
+front
+  idle
+  wait
+  hover
+  click
+  flip
+  drag
+
 
   - Stock
     - Deck Stack
@@ -99,3 +115,6 @@
   - card to foundation highlight anim
 
 ~ several design settings
+
+
+

_pack.js

@@ -3,7 +3,7 @@ import { ImageSave, Rect, Packer, aseprite } from 'aset'
 
 export default async function pack() {
 
-  let packer = new Packer()
+  let packer = new Packer(4)
 
   let sprites = []
 
@@ -48,10 +48,10 @@ function ase_files(folder) {
         .map(file => new Promise(_resolve => {
           fs.readFile([folder, file].join('/'), (err, data) => {
             if (err) {
-              console.error(err)
-              return
+              throw err
             }
             let name = file.split('.')[0]
+            console.log(name, data.length)
             _resolve({ name, ase: aseprite(data)})
           })
         }))).then(resolve)

content.js

@@ -11,7 +11,7 @@ const ase_content = () => {
 
 
 chokidar.watch(['./content/sprites/*.ase'
-], { ignoreInitial: true })
+], { ignoreInitial: true, awaitWriteFinish: { stabilityThreshold: 500 } })
   .on('all', (event, path) => ase_content())
 
 ase_content()

content/out_0.json

@@ -1 +1 @@
-{"sprites":[{"name":"click_card","tags":[{"from":0,"to":3,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":64,"h":64},"packed":{"x":444,"y":1065,"w":64,"h":64}},{"frame":{"x":0,"y":0,"w":64,"h":64},"packed":{"x":508,"y":1065,"w":64,"h":64}},{"frame":{"x":0,"y":0,"w":64,"h":64},"packed":{"x":572,"y":1065,"w":64,"h":64}},{"frame":{"x":0,"y":0,"w":64,"h":64},"packed":{"x":636,"y":1065,"w":64,"h":64}}]},{"name":"card","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"},{"from":2,"to":2,"name":"click"},{"from":3,"to":3,"name":"back"},{"from":4,"to":6,"name":"flip"}],"packs":[{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":480,"y":520,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":684,"y":520,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":0,"y":820,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":204,"y":820,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":408,"y":820,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":612,"y":820,"w":204,"h":245}},{"frame":{"x":0,"y":0,"w":204,"h":245},"packed":{"x":0,"y":1065,"w":204,"h":245}}]},{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":420,"h":520},"packed":{"x":0,"y":0,"w":420,"h":520}}]},{"name":"menu_bar","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":240,"h":160},"packed":{"x":204,"y":1065,"w":240,"h":160}}]},{"name":"recycle","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":3,"name":"hover"}],"packs":[{"frame":{"x":0,"y":0,"w":240,"h":300},"packed":{"x":420,"y":0,"w":240,"h":300}},{"frame":{"x":0,"y":0,"w":240,"h":300},"packed":{"x":660,"y":0,"w":240,"h":300}},{"frame":{"x":0,"y":0,"w":240,"h":300},"packed":{"x":0,"y":520,"w":240,"h":300}},{"frame":{"x":0,"y":0,"w":240,"h":300},"packed":{"x":240,"y":520,"w":240,"h":300}}]}]}
+{"sprites":[{"name":"card","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"},{"from":2,"to":4,"name":"click"},{"from":5,"to":7,"name":"flip"},{"from":8,"to":8,"name":"back_idle"},{"from":9,"to":9,"name":"back_hover"},{"from":10,"to":10,"name":"back_click"},{"from":11,"to":13,"name":"back_flip"},{"from":14,"to":15,"name":"drag"},{"from":16,"to":17,"name":"back_drag"},{"from":18,"to":18,"name":"wait"},{"from":19,"to":19,"name":"shadow"}],"packs":[{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":248,"y":528,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":460,"y":528,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":672,"y":528,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":884,"y":528,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1096,"y":528,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":836,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":1089,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":1342,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":1342,"w":212,"h":253}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":1342,"w":212,"h":253}}]},{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":420,"h":520},"packed":{"x":0,"y":0,"w":428,"h":528}}]},{"name":"menu_bar","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":240,"h":160},"packed":{"x":636,"y":1342,"w":248,"h":168}}]},{"name":"recycle","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":3,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":428,"y":0,"w":248,"h":308}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":676,"y":0,"w":248,"h":308}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":924,"y":0,"w":248,"h":308}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":0,"y":528,"w":248,"h":308}}]},{"name":"suit","tags":[{"from":0,"to":0,"name":"spades"},{"from":1,"to":1,"name":"hearts"},{"from":2,"to":2,"name":"diamonds"},{"from":3,"to":3,"name":"clubs"}],"packs":[{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":884,"y":1342,"w":72,"h":72}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":956,"y":1342,"w":72,"h":72}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1028,"y":1342,"w":72,"h":72}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1100,"y":1342,"w":72,"h":72}}]}]}

src/game.ts

@@ -80,8 +80,9 @@ class MainTitle extends Play {
 type ClickableData = {
   debug?: true,
   rect: Rect,
-  on_hover?: () => void,
+  on_hover?: () => boolean,
   on_hover_end?: () => void,
+  on_click_begin?: () => void,
   on_click?: () => void,
   on_drag_begin?: (e: Vec2) => void,
   on_drag_end?: (e: Vec2) => void,
@@ -109,6 +110,18 @@ export class Clickable extends Play {
     let _hovering = false
     let self = this
     this.unbindable_input({
+      on_click_begin(_e: EventPosition, right: boolean) {
+        if (right) {
+          return false
+        }
+        let e = _e.mul(Game.v_screen)
+        let point = Rect.make(e.x - 4, e.y - 4, 8, 8)
+        let rect = Rect.make(self.g_position.x, self.g_position.y, self.width, self.height)
+        if (rect.overlaps(point)) {
+          return self.data.on_click_begin?.() || false
+        }
+        return false
+      },
       on_drag(d: DragEvent, d0?: DragEvent) {
         if (d._right) {
           return false
@@ -166,15 +179,21 @@ export class Clickable extends Play {
         if (rect.overlaps(point)) {
           if (!_hovering) {
             _hovering = true
-            self.data.on_hover?.()
+             return self.data.on_hover?.() || false
           }
         } else {
           if (_hovering) {
             _hovering = false
             self.data.on_hover_end?.()
           }
         }
-        return false
+        return _hovering
+      },
+      on_hover_clear() {
+        if (_hovering) {
+          _hovering = false
+          self.data.on_hover_end?.()
+        }
       },
       on_click(_e: EventPosition, right: boolean) {
         let e = _e.mul(Game.v_screen)

src/input.ts

@@ -12,8 +12,10 @@ export type DragEvent = {
 export type Hooks = {
   priority?: number,
   on_hover?: (e: EventPosition) => boolean,
+  on_hover_clear?: () => void,
   on_up?: (e: EventPosition, right: boolean, m?: Vec2) => boolean,
   on_click?: (e: EventPosition, right: boolean) => boolean,
+  on_click_begin?: (e: EventPosition, right: boolean) => boolean,
   on_drag?: (d: DragEvent, d0?: DragEvent) => boolean,
   on_context?: () => boolean
 }
@@ -42,14 +44,24 @@ class Input {
   }
 
   _on_hover(e: EventPosition) {
-    this.hooks.find(_ => _.on_hover?.(e))
+    let hooks = this.hooks
+
+    let j = hooks.findIndex(_ => _.on_hover?.(e))
+    if (j !== -1) {
+      for (let i = j + 1; i < this.hooks.length; i++) {
+        hooks[i].on_hover_clear?.()
+      }
+    }
   }
   _on_up(e: EventPosition, right: boolean, m?: EventPosition) {
     this.hooks.find(_ => _.on_up?.(e, right, m))
   }
   _on_click(e: EventPosition, right: boolean) {
     this.hooks.find(_ => _.on_click?.(e, right))
   }
+  _on_click_begin(e: EventPosition, right: boolean) {
+    this.hooks.find(_ => _.on_click_begin?.(e, right))
+  }
   _on_drag(d: DragEvent, d0?: DragEvent) {
     this.hooks.find(_ => _.on_drag?.(d, d0))
   }
@@ -108,6 +120,8 @@ class Input {
             self._on_update = undefined
           }
         }
+
+        self._on_click_begin(e, _right)
       },
       _onDragMove(_e) {
         let e = map_e(_e)