duration

_pack.js

@@ -11,21 +11,22 @@ export default async function pack() {
     ase_files(_)
     .then(_ => _.map(({name, ase}) => {
 
+      let frames = ase.frames.map(frame => ({duration: frame.duration}))
       let packs = ase.frames.map(frame => packer.add(frame.image))
       let { tags } = ase
 
-      sprites.push({ name, packs, tags })
+      sprites.push({ name, packs, tags, frames })
     }))))
 
 
 
 
   packer.pack()
 
-  sprites = sprites.map(({ name, packs, tags }) => ({
+  sprites = sprites.map(({ name, packs, tags, frames }) => ({
     name,
     tags,
-    packs: packs.map(_ => ({ frame: _.frame, packed: _.packed }))
+    packs: packs.map((_,i) => ({ frame: _.frame, packed: _.packed, meta: frames[i] }))
   }))
 
 
@@ -51,7 +52,6 @@ function ase_files(folder) {
               throw err
             }
             let name = file.split('.')[0]
-            console.log(name, data.length)
             _resolve({ name, ase: aseprite(data)})
           })
         }))).then(resolve)

content/out_0.json

@@ -1 +1 @@
-{"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":"rank","tags":[],"packs":[{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":884,"y":1342,"w":72,"h":72}}]},{"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":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}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1172,"y":1342,"w":72,"h":72}}]}]}
+{"sprites":[{"name":"button_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":3,"name":"hover"},{"from":4,"to":5,"name":"click"},{"from":6,"to":6,"name":"disabled"}],"packs":[{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":428,"y":308,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":802,"y":308,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":0,"y":1287,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":374,"y":1287,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":748,"y":1287,"w":374,"h":208},"meta":{"duration":500}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":1122,"y":1287,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":0,"y":1495,"w":374,"h":208},"meta":{"duration":100}}]},{"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":0,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1272,"y":528,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1272,"y":781,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":1034,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":1034,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":1034,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":1034,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":1034,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":1034,"w":212,"h":253},"meta":{"duration":100}}]},{"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},"meta":{"duration":100}}]},{"name":"menu_bar","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":240,"h":160},"packed":{"x":374,"y":1495,"w":248,"h":168},"meta":{"duration":100}}]},{"name":"rank","tags":[],"packs":[{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":622,"y":1495,"w":72,"h":72},"meta":{"duration":100}}]},{"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},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":676,"y":0,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":924,"y":0,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":1172,"y":0,"w":248,"h":308},"meta":{"duration":100}}]},{"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":694,"y":1495,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":766,"y":1495,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":838,"y":1495,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":910,"y":1495,"w":72,"h":72},"meta":{"duration":100}}]}]}

src/anim.ts

@@ -49,6 +49,7 @@ export class Anim extends Play {
     return this.frame?.duration
   }
 
+  _loop: boolean = false
   _reverse: boolean = false
   _on_complete?: () => void
   play_now(name: string, on_complete?: () => void, reverse: boolean = false) {
@@ -69,6 +70,11 @@ export class Anim extends Play {
     this.will_play = () => this.play_now(name, on_complete, reverse)
   }
 
+  play_o(name: string, options: { loop?: boolean }) {
+    this._loop = options.loop ?? false
+    this.play_now(name)
+  }
+
   _update() {
 
     const frames_length = this.animation?.frames.length
@@ -83,7 +89,11 @@ export class Anim extends Play {
         if (this._reverse) {
           this._frame--;
           if (this._frame < 0) {
-            this._frame = frames_length - 1
+            if (this._loop) {
+              this._frame = frames_length - 1
+            } else {
+              this._frame = 0
+            }
             if (this._on_complete) {
               this._on_complete()
             }
@@ -95,7 +105,11 @@ export class Anim extends Play {
         } else {
           this._frame++;
           if (this._frame >= frames_length) {
-            this._frame = 0
+            if (this._loop) {
+              this._frame = 0
+            } else {
+              this._frame = frames_length - 1
+            }
             if (this._on_complete) {
               this._on_complete()
             }

src/content.ts

@@ -47,11 +47,11 @@ class Content {
       let animations: Array<Animation> = []
 
       tags.forEach(tag => {
-        let duration = 100 / 1000
         let frames = []
         for (let i = tag.from; i <= tag.to; i++) {
 
           let _ = packs[i]
+          let duration = _.meta.duration/ 1000
           let framerect = Rect.make(_.frame.x, _.frame.y, _.frame.w, _.frame.h)
           let subrect = Rect.make(_.packed.x, _.packed.y, _.packed.w, _.packed.h)
 

src/solitaire.ts

@@ -28,6 +28,8 @@ import { Tween } from './tween'
 
 import { SolitaireGame } from './solitaire_game'
 
+import { Button } from './ui'
+
 type CardData = {
   card?: OCard,
   back?: true
@@ -634,6 +636,14 @@ export class SolitairePlay extends Play {
 
     let game = this.make(SolitaireGame, Vec2.make(0, 0), {})
 
+    this.make(Button, Vec2.make(160, 1000), {
+      text: 'undo',
+      on_click() {
+        console.log('undo')
+      }
+    })
+
+
     let overlay = this.make(RectView, Vec2.zero, {
       w: 1920,
       h: 1080,

src/ui.ts

@@ -20,8 +20,6 @@ import { Text, RectView, Clickable, Background, MainMenu } from './game'
 
 type ButtonData = {
   text: string,
-  w: number,
-  h: number,
   on_click: () => void
 }
 
@@ -33,20 +31,30 @@ export class Button extends Play {
 
   _init() {
 
-    let r = this.make(RectView, Vec2.make(0, 0), {
-      w: this.data.w,
-      h: this.data.h,
-      color: Color.black
+    let bg = this.make(Anim, Vec2.make(0, 0), {
+      name: 'button_bg'
     })
+    bg.origin = Vec2.make(366, 200).scale(1/2)
 
-    let _ = this.make(Text, Vec2.make(this.data.w / 2, 0), {
+    let _ = this.make(Text, Vec2.make(0, -32), {
       text: this.data.text,
       center: true
     })
 
     let self = this
-    this.make(Clickable, Vec2.make(4, 4), {
-      rect: Rect.make(0, 0, this.data.w - 8, this.data.h - 8),
+    this.make(Clickable, Vec2.make(-366 + 80, -200 + 80).scale(1/2), {
+      rect: Rect.make(0, 0, 366 - 80, 200 - 80),
+      on_hover() {
+        bg.play_o('hover', { loop: false })
+      },
+      on_hover_end() {
+        bg.play('hover', () => {
+          bg.play('idle')
+        }, true)
+      },
+      on_click_begin() {
+        bg.play_o('click', { loop: false })
+      },
       on_click() {
         self.data.on_click()
       }