dropdown

README.md

@@ -1,5 +1,7 @@
 # Solitaire, Freecell, Spider
 
+
+
 ## Navigation
 
 - Side navigation

_pack.js

@@ -12,7 +12,7 @@ export default async function pack() {
     .then(_ => _.map(({name, ase}) => {
 
       let frames = ase.frames.map(frame => ({duration: frame.duration}))
-      let packs = ase.frames.map(frame => packer.add(frame.image))
+      let packs =  ase.frames.map(frame => packer.add(frame.image))
       let { tags } = ase
 
       sprites.push({ name, packs, tags, frames })

content.js

@@ -5,7 +5,7 @@ import pack from './_pack.js'
 
 const ase_content = () => {
   pack().catch(e => {
-    console.warn('failed to pack.')
+    console.warn('failed to pack.', e)
   })
 }
 

content/out_0.json

@@ -1 +1 @@
-{"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}}]}]}
+{"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}}]}]}