coroutines

_pack.js

@@ -7,14 +7,15 @@ export default async function pack() {
 
   let sprites = []
 
-  await ase_files('./content/sprites')
-  .then(_ => _.map(({name, ase}) => {
+  await Promise.all(['./content/sprites', './content/fx'].map(_ =>
+    ase_files(_)
+    .then(_ => _.map(({name, ase}) => {
 
-    let packs = ase.frames.map(frame => packer.add(frame.image))
-    let { tags } = ase
+      let packs = ase.frames.map(frame => packer.add(frame.image))
+      let { tags } = ase
 
-    sprites.push({ name, packs, tags })
-  }))
+      sprites.push({ name, packs, tags })
+    }))))
 
 
 

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":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":"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}}]}]}

src/anim.ts

@@ -110,7 +110,7 @@ export class Anim extends Play {
       return
     }
 
-    batch.push_matrix(Mat3x2.create_transform(this.position, this.origin, Vec2.one, this.rotation))
+    batch.push_matrix(Mat3x2.create_transform(this.position, this.origin, this.scale, this.rotation))
     this.g_position = Vec2.transform(Vec2.zero, batch.m_matrix)
     batch.stex(this.subtexture, Vec2.zero, Color.white)
     batch.pop_matrix()

src/game.ts

@@ -17,6 +17,8 @@ import { Anim } from './anim'
 
 import { SolitairePlay } from './solitaire'
 
+import { CardShowcase } from './showcase'
+
 type RectData = {
   w: number,
   h: number,
@@ -1266,7 +1268,8 @@ class SceneTransition extends Play {
     this.target = Target.create(Game.width, Game.height)
     this.mask_target = Target.create(Game.width, Game.height)
 
-    this.current = this._make(SolitairePlay, Vec2.zero, {})
+    this.current = this._make(CardShowcase, Vec2.zero, {})
+    // this.current = this._make(SolitairePlay, Vec2.zero, {})
     // this.current = this._make(MainMenu, Vec2.zero, {})
     //this.current = this._make(Statistics, Vec2.zero, {})
 

src/play.ts

@@ -27,6 +27,23 @@ export abstract class Play {
   position!: Vec2
   rotation!: number
   origin: Vec2 = Vec2.zero
+  scale: Vec2 = Vec2.one
+
+
+  coroutines: Array<Coroutine> = []
+
+  routine(coroutine: Coroutine) {
+    this.coroutines.push(coroutine)
+  }
+
+  *wait_for(ms: number) {
+    let n = 0
+    while(n < ms) {
+      n+= Time.delta
+      yield
+    }
+  }
+
 
   get input_priority() {
     return this._render_order
@@ -130,6 +147,12 @@ export abstract class Play {
   }
 
   update() {
+
+    this.coroutines = this.coroutines.filter(_ => {
+      let res = _.next()
+      return !res.done
+    })
+
     this.objects.forEach(_ => _.update())
 
     this._tweens = this._tweens.filter(([t, f, on_complete]) => {
@@ -171,7 +194,7 @@ export abstract class Play {
   _init() {}
   _update() {}
   _draw(batch: Batch) {
-    batch.push_matrix(Mat3x2.create_transform(this.position, this.origin, Vec2.one, this.rotation))
+    batch.push_matrix(Mat3x2.create_transform(this.position, this.origin, this.scale, this.rotation))
     this.g_position = Vec2.transform(Vec2.zero, batch.m_matrix)
     this._draw_children(batch)
     batch.pop_matrix()
@@ -181,3 +204,5 @@ export abstract class Play {
 
 
 export type PlayType<T extends Play> = { new(...args: any[]): T}
+
+export type Coroutine = Generator<void>

src/showcase.ts

@@ -0,0 +1,111 @@
+import { TextureFilter, TextureSampler } from 'blah'
+import { Color } from 'blah'
+import { Rect, Vec2, Mat3x2 } from 'blah'
+import { Time, App, batch, Batch, Target } from 'blah'
+
+import Content from './content'
+import Input, { Hooks, EventPosition, DragEvent } from './input'
+import { howtos } from './howtos'
+import { Transition, transition } from './transition'
+
+import { rmap, ease, lerp, appr } from './lerp'
+import { InfiniteScrollableList } from './scrollable'
+
+import { bg1, link_color, Play, PlayType} from './play'
+
+import { ticks } from './shared'
+import { Anim } from './anim'
+
+import { Text, RectView, Clickable, Background, MainMenu } from './game'
+
+export class Card extends Play {
+
+
+  anim!: Anim
+  fx!: Array<Anim>
+
+  _init() {
+
+    this.anim = this.make(Anim, Vec2.make(0, 0), { name: 'card' })
+    this.anim.origin = Vec2.make(88, 120)
+  }
+
+  hover() {
+    this.anim.play('hover')
+  }
+
+  hover_end() {
+    this.anim.play('idle')
+  }
+
+
+  click() {
+    this.routine(this._click())
+  }
+
+  *_click() {
+    this.anim.play('click')
+    yield * this.wait_for(ticks.half)
+    this.anim.play('idle')
+  }
+
+}
+
+
+export class CardShowcase extends Play {
+
+  hovering!: Card
+  clicking!: Card
+
+  i_clicking = 0
+
+  _init() {
+
+    this.make(Background, Vec2.zero, undefined)
+
+    let _
+
+    let c_off = Vec2.make(100, 200)
+    let w = 300
+    this.make(Text, Vec2.make(200, 200), {
+      text: 'idle'
+    })
+    _ = this.make(Card, Vec2.make(200, 200).add(c_off), {})
+
+    this.make(Text, Vec2.make(200 + w, 200), {
+      text: 'hover'
+    })
+    this.hovering = this.make(Card, Vec2.make(200 + w, 200).add(c_off), {})
+    this.routine(this._hover())
+
+    this.make(Text, Vec2.make(200 + w * 2, 200), {
+      text: 'click'
+    })
+    this.clicking = this.make(Card, Vec2.make(200 + w * 2, 200).add(c_off), {})
+    this.routine(this._click())
+
+  }
+
+  *_hover(): Generator<void> {
+    this.hovering.hover()
+    yield * this.wait_for(ticks.half)
+    this.hovering.hover_end()
+    yield * this.wait_for(ticks.seconds)
+    yield * this._hover()
+  }
+
+  *_click(): Generator<void> {
+    this.clicking.hover()
+    yield * this.wait_for(ticks.sixth)
+    this.clicking.click()
+    yield * this.wait_for(ticks.seconds)
+    yield *  this._click()
+  }
+
+  _update() {
+
+
+  }
+
+
+}

src/solitaire_game.ts

@@ -111,8 +111,12 @@ class Card extends Play {
     this.make(Clickable, Vec2.make(16, 16).sub(this.anim.origin), {
       rect: Rect.make(0, 0, 170, 200),
       on_hover() {
+        if (self._on_drag) {
+          self.anim.play('hover')
+        }
       },
       on_hover_end() {
+        self.anim.play(self._back ? 'back' : 'idle')
       },
       on_click() {
       },