nine slice settings tabs

content/out_0.json

@@ -1 +1 @@
-{"sprites":[{"name":"button_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"},{"from":2,"to":2,"name":"click"},{"from":3,"to":3,"name":"disabled"}],"packs":[{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":0,"y":2403,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":374,"y":2403,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":748,"y":2403,"w":374,"h":208},"meta":{"duration":300}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":1122,"y":2403,"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":1780,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1992,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2204,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2416,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":788,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1000,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1212,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1424,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1636,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1848,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2060,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2272,"y":2143,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1956,"y":1088,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2168,"y":1088,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2380,"y":1088,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1956,"y":1341,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2168,"y":1341,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2380,"y":1341,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1578,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1790,"y":747,"w":212,"h":253},"meta":{"duration":100}}]},{"name":"dropdown_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":510,"h":172},"packed":{"x":1496,"y":2403,"w":518,"h":180},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":510,"h":172},"packed":{"x":2014,"y":2403,"w":518,"h":180},"meta":{"duration":100}}]},{"name":"main_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":1570,"h":1080},"packed":{"x":0,"y":0,"w":1578,"h":1088},"meta":{"duration":100}}]},{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"solitaire"},{"from":1,"to":1,"name":"solitaire_hover"},{"from":2,"to":2,"name":"fourtimes"},{"from":3,"to":3,"name":"fourtimes_hover"},{"from":4,"to":4,"name":"octopus"},{"from":5,"to":5,"name":"octopus_hover"}],"packs":[{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":1578,"y":0,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":2067,"y":0,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":0,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":489,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":978,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":1467,"y":1088,"w":489,"h":747},"meta":{"duration":100}}]},{"name":"main_settings_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":652,"h":223},"packed":{"x":2002,"y":747,"w":660,"h":231},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":652,"h":223},"packed":{"x":1956,"y":1594,"w":660,"h":231},"meta":{"duration":100}}]},{"name":"main_title_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":780,"h":560},"packed":{"x":0,"y":1835,"w":788,"h":568},"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":0,"y":2611,"w":248,"h":168},"meta":{"duration":100}}]},{"name":"navigation_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":593,"h":157},"packed":{"x":248,"y":2611,"w":601,"h":165},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":593,"h":157},"packed":{"x":849,"y":2611,"w":601,"h":165},"meta":{"duration":100}}]},{"name":"rank","tags":[],"packs":[{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1450,"y":2611,"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":788,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":1036,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":1284,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":1532,"y":1835,"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":1522,"y":2611,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1594,"y":2611,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1666,"y":2611,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":1738,"y":2611,"w":72,"h":72},"meta":{"duration":100}}]}]}
+{"sprites":[{"name":"button_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"},{"from":2,"to":2,"name":"click"},{"from":3,"to":3,"name":"disabled"}],"packs":[{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":660,"y":2496,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":1034,"y":2496,"w":374,"h":208},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":1408,"y":2496,"w":374,"h":208},"meta":{"duration":300}},{"frame":{"x":4,"y":4,"w":366,"h":200},"packed":{"x":1782,"y":2496,"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":1400,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1612,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1824,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2036,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2248,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2460,"y":1835,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1578,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1790,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2002,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2214,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":2426,"y":747,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":0,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":212,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":424,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":636,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":848,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1060,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1272,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1484,"y":2243,"w":212,"h":253},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":204,"h":245},"packed":{"x":1696,"y":2243,"w":212,"h":253},"meta":{"duration":100}}]},{"name":"dropdown_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":510,"h":172},"packed":{"x":2156,"y":2496,"w":518,"h":180},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":510,"h":172},"packed":{"x":0,"y":2727,"w":518,"h":180},"meta":{"duration":100}}]},{"name":"main_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":1570,"h":1080},"packed":{"x":0,"y":0,"w":1578,"h":1088},"meta":{"duration":100}}]},{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"solitaire"},{"from":1,"to":1,"name":"solitaire_hover"},{"from":2,"to":2,"name":"fourtimes"},{"from":3,"to":3,"name":"fourtimes_hover"},{"from":4,"to":4,"name":"octopus"},{"from":5,"to":5,"name":"octopus_hover"}],"packs":[{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":1578,"y":0,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":2067,"y":0,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":0,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":489,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":978,"y":1088,"w":489,"h":747},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":481,"h":739},"packed":{"x":1467,"y":1088,"w":489,"h":747},"meta":{"duration":100}}]},{"name":"main_settings_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":652,"h":223},"packed":{"x":1908,"y":2243,"w":660,"h":231},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":652,"h":223},"packed":{"x":0,"y":2496,"w":660,"h":231},"meta":{"duration":100}}]},{"name":"main_title_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":780,"h":560},"packed":{"x":1956,"y":1088,"w":788,"h":568},"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":518,"y":2727,"w":248,"h":168},"meta":{"duration":100}}]},{"name":"navigation_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"}],"packs":[{"frame":{"x":4,"y":4,"w":593,"h":157},"packed":{"x":766,"y":2727,"w":601,"h":165},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":593,"h":157},"packed":{"x":1367,"y":2727,"w":601,"h":165},"meta":{"duration":100}}]},{"name":"panel_bg_nine_slice","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":4,"y":4,"w":400,"h":400},"packed":{"x":0,"y":1835,"w":408,"h":408},"meta":{"duration":100}}]},{"name":"rank","tags":[],"packs":[{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":448,"y":2907,"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":408,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":656,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":904,"y":1835,"w":248,"h":308},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":240,"h":300},"packed":{"x":1152,"y":1835,"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":520,"y":2907,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":592,"y":2907,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":664,"y":2907,"w":72,"h":72},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":64,"h":64},"packed":{"x":736,"y":2907,"w":72,"h":72},"meta":{"duration":100}}]},{"name":"tab3_bg","tags":[{"from":0,"to":0,"name":"idle"},{"from":1,"to":1,"name":"hover"},{"from":2,"to":2,"name":"active"}],"packs":[{"frame":{"x":4,"y":4,"w":440,"h":150},"packed":{"x":1968,"y":2727,"w":448,"h":158},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":440,"h":150},"packed":{"x":1956,"y":1656,"w":448,"h":158},"meta":{"duration":100}},{"frame":{"x":4,"y":4,"w":440,"h":150},"packed":{"x":0,"y":2907,"w":448,"h":158},"meta":{"duration":100}}]}]}

content/trans/en.trans

@@ -11,3 +11,7 @@ blue=blue
 orange=orange
 on=on
 off=off
+undo=undo
+score=score
+main_menu=main menu
+new_game=new game

src/assets/nine.ts

@@ -0,0 +1,9 @@
+import { Frame } from './sprite'
+
+export class NineSlice {
+
+  constructor(readonly name: string, 
+              readonly frames: Array<Frame>) {
+  }
+
+}

src/content.ts

@@ -4,6 +4,7 @@ import { Texture, Subtexture } from 'blah'
 import { SpriteFont} from 'blah'
 
 import { Frame, Animation, Sprite } from './assets/sprite'
+import { NineSlice } from './assets/nine'
 
 import content_page0 from '../content/out_0.png'
 import content_page0_json from '../content/out_0.json'
@@ -24,6 +25,28 @@ function load_image(path: string): Promise<HTMLImageElement> {
 
 class Content {
 
+
+  static make_nine_slice = (texture: Texture, _sprite: any) => {
+    let { name, packs, _tags } = _sprite
+
+    let frames = []
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        let _ = packs[0]
+        let duration = 1
+        let x = i * _.frame.w / 3
+        let y = j * _.frame.h / 3
+        let framerect = Rect.make(_.frame.x, _.frame.y, _.frame.w/3, _.frame.h/3)
+        let subrect = Rect.make(x + _.packed.x, y + _.packed.y, 4 + 400/3, 4 +400/3)
+
+        let frame = new Frame(Subtexture.make(texture, subrect, framerect), duration)
+        frames.push(frame)
+      }
+    }
+
+    return new NineSlice(name, frames)
+  }
+
   load = async () => {
 
     let [image,
@@ -36,10 +59,16 @@ class Content {
 
     this.sprites = []
 
+    this.nine_slice = []
+
 
     content_page0_json.sprites.forEach(_sprite => {
       let { name, packs, tags } = _sprite
 
+      if (name.match(/nine_slice/)) {
+        this.nine_slice.push(Content.make_nine_slice(texture, _sprite))
+        return
+      }
 
       let origin = Vec2.zero
 
@@ -85,9 +114,15 @@ class Content {
   sp_font!: SpriteFont
   sprites!: Array<Sprite>
 
+  nine_slice!: Array<NineSlice>
+
   find_sprite(name: string) {
     return this.sprites.find(_ => _.name === name)!
   }
+
+  find_nine(name: string) {
+    return this.nine_slice.find(_ => _.name === name)!
+  }
 }