animator cards

_pack.js

@@ -32,8 +32,8 @@ export default async function pack() {
     sprites
   }
 
-  fs.writeFileSync('./content/out_0.json', JSON.stringify(res))
   fs.writeFileSync('./content/out_0.png', packer.pages[0].png_buffer)
+  fs.writeFileSync('./content/out_0.json', JSON.stringify(res))
 
   console.log('content written.')
 

content/out_0.json

@@ -1 +1 @@
-{"sprites":[{"name":"palette","tags":[{"from":0,"to":0,"name":"1"},{"from":1,"to":1,"name":"2"},{"from":2,"to":2,"name":"3"},{"from":3,"to":3,"name":"4"},{"from":4,"to":4,"name":"5"}],"packs":[{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":8,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":8,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":16,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":16,"w":8,"h":8}}]}]}
+{"sprites":[{"name":"card_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":-2,"y":-22,"w":140,"h":250},"packed":{"x":0,"y":0,"w":136,"h":226}}]},{"name":"card_underline","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":3,"name":"open"}],"packs":[{"frame":{"x":-13,"y":0,"w":20,"h":200},"packed":{"x":392,"y":0,"w":3,"h":80}},{"frame":{"x":-13,"y":0,"w":20,"h":200},"packed":{"x":389,"y":0,"w":3,"h":92}},{"frame":{"x":-11,"y":0,"w":20,"h":200},"packed":{"x":0,"y":226,"w":5,"h":163}},{"frame":{"x":-11,"y":0,"w":20,"h":200},"packed":{"x":384,"y":0,"w":5,"h":183}}]},{"name":"palette","tags":[{"from":0,"to":0,"name":"1"},{"from":1,"to":1,"name":"2"},{"from":2,"to":2,"name":"3"},{"from":3,"to":3,"name":"4"},{"from":4,"to":4,"name":"5"}],"packs":[{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":395,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":389,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":403,"y":0,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":0,"y":397,"w":8,"h":8}},{"frame":{"x":0,"y":0,"w":8,"h":8},"packed":{"x":411,"y":0,"w":8,"h":8}}]},{"name":"title_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":248,"h":40},"packed":{"x":136,"y":0,"w":248,"h":40}}]}]}

src/components/animator.ts

@@ -21,6 +21,8 @@ export class Animator extends Component {
   _frame_index: number
   _frame_counter: number
 
+  _loop: boolean = true
+
 
   scale = Vec2.one
   offset = Vec2.zero
@@ -38,7 +40,8 @@ export class Animator extends Component {
   }
 
 
-  play(animation: string, restart: boolean = false) {
+  play(animation: string, loop: boolean, restart: boolean = false) {
+    this._loop = loop
     for (let i = 0; i < this._sprite.animations.length; i++) {
       if (this._sprite.animations[i].name === animation) {
         if (this._animation_index !== i || restart) {
@@ -65,7 +68,11 @@ export class Animator extends Component {
         this._frame_index++;
 
           if (this._frame_index >= anim.frames.length) {
-            this._frame_index = 0
+            if (this._loop) {
+              this._frame_index = 0
+            } else {
+              this._frame_index = anim.frames.length - 1
+            }
           }
       }
     }

src/components/main_menu.ts

@@ -2,6 +2,71 @@ import { World, Component } from '../world'
 import { Vec2, Mat3x2 } from 'blah'
 
 import { Background } from './background'
+import { Animator } from './animator'
+import Game from '../game'
+
+class Title extends Component {
+  static make = (world: World, position: Vec2) => {
+
+    let offset = Vec2.make(1, 1)
+    let en = world.add_entity(position.add(offset))
+
+    let anim = en.add(Animator.make('title_bg'))
+    anim.play('idle')
+
+    en.add(new Background())
+
+    return en
+
+  }
+}
+
+class Card extends Component {
+
+  static make = (world: World, position: Vec2) => {
+    let en = world.add_entity(position)
+
+    let anim = en.add(Animator.make('card_bg'))
+    anim.play('idle')
+
+
+    let underline = world.add_entity(position.add(Vec2.make(0, 40)))
+    let under_anim = underline.add(Animator.make('card_underline'))
+    under_anim.play('idle')
+
+
+
+    return en
+  }
+}
+
+class Cards extends Component {
+  static make = (world: World, position: Vec2) => {
+    let en = world.add_entity(position)
+
+
+    let solitaire = Card.make(world, position),
+      freecell = Card.make(world, position.add(Vec2.make(Game.card_width, 0))),
+      spider = Card.make(world, position.add(Vec2.make(Game.card_width * 2, 0)))
+
+
+    en.add(new Cards())
+
+    return en
+  }
+
+}
+
+class TextButtons extends Component {
+  static make = (world: World, position: Vec2) => {
+    let en = world.add_entity(position)
+
+    en.add(new TextButtons())
+
+    return en
+  }
+
+}
 
 export class MainMenu extends Component {
 
@@ -12,6 +77,11 @@ export class MainMenu extends Component {
     en.add(new MainMenu())
 
     Background.make(world, position)
+    Title.make(world, position)
+
+    Cards.make(world, position.add(Vec2.make(Game.width * 0.05, Game.height * 0.2)))
+    TextButtons.make(world, position)
+
 
     return en
 

src/game.ts

@@ -23,6 +23,9 @@ export default class Game {
   static width = 640
   static height = 360
 
+
+  static card_width = 140
+
   buffer!: Target
 
   world!: World

src/world.ts

@@ -91,7 +91,7 @@ export class World {
     for (let components of this.components.values()) {
       components.forEach(component => {
         if (component.active && component.entity.active) {
-          component.update
+          component.update()
         }
       })
     }