feat: Added slot names to the Spine Sprite viewer

bscotch · Aug 15, 2024 · 9b52efa · 9b52efa
1 parent 2409b24
commit 9b52efa
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/packages/parser/src/spine.ts b/packages/parser/src/spine.ts
@@ -8,6 +8,7 @@ export interface SpineSummary<
 > {
   skinNames: string[];
   eventNames: EventName[];
+  slotNames: string[];
   animations: {
     name: AnimationName;
     duration: number;
@@ -51,6 +52,7 @@ export class Spine<
     return {
       skinNames: content.skins?.map((skin) => skin.name) || [],
       eventNames: Object.keys(content.events || {}) as EventName[],
+      slotNames: content.slots?.map((slot) => slot.name) || [],
       animations: Object.keys(content.animations || {}).map((animationName) => {
         const animation: SpineAnimation =
           content.animations![animationName as AnimationName];

diff --git a/packages/vscode/webviews-legacy/spine-editor.html b/packages/vscode/webviews-legacy/spine-editor.html
@@ -118,6 +118,7 @@
           'sfx_sluggabun_look_sniff',
           'sfx_sluggabun_mortar_mouth',
         ],
+        slotNames: ['body', 'eyes', 'mouth', 'teeth'],
         animations: [
           {
             name: 'attack_bite',
@@ -308,6 +309,10 @@ <h1 class="name">???</h1>
       <h2>Animations Events</h2>
       <ul class="animations"></ul>
     </section>
+    <section>
+      <h2>Slots</h2>
+      <ul class="slots"></ul>
+    </section>
   </body>
   <!-- The global data from VSCode will need to be injected before loading the main script -->
   <!-- VSCODE-INJECT-DATA -->

diff --git a/packages/vscode/webviews-legacy/spine-editor.js b/packages/vscode/webviews-legacy/spine-editor.js
@@ -40,6 +40,9 @@ const elements = {
   animationsList: /** @type {HTMLUListElement} */ (
     document.querySelector('ul.animations')
   ),
+  slotsList: /** @type {HTMLUListElement} */ (
+    document.querySelector('ul.slots')
+  ),
 };
 
 // Initial & static data
@@ -75,6 +78,16 @@ for (const animation of sprite.summary.animations) {
 
   // Add an inner list of events and their timings
 }
+// Add the list of slots
+for (const slotName of sprite.summary.slotNames.sort((a, b) =>
+  a.toLowerCase().localeCompare(b.toLowerCase()),
+)) {
+  const li = document.createElement('li');
+  li.classList.add('slot');
+  li.innerHTML = `<span class="name">${slotName}</span>`;
+  elements.slotsList.appendChild(li);
+  // Add an inner list of events and their timings
+}
 
 /**
  * @param {any} condition