ENH: Monster layout base done

src/lang/en.json

@@ -45,6 +45,8 @@
     "OSE.Thac0": "THAC0",
     "OSE.Initiative": "Initiative",
     "OSE.InitiativeShort": "INIT",
+    "OSE.Attacks": "Attacks Usable per Round",
+    "OSE.AttacksShort": "ATT",
 
     
     "OSE.category.attributes": "Attributes",
@@ -52,5 +54,6 @@
     "OSE.category.spells": "Spells",
     "OSE.category.notes": "Notes",
     
-    "OSE.panel.abilities": "Abilities"
+    "OSE.panel.abilities": "Abilities",
+    "OSE.panel.equipment": "Equipment"
 }

src/module/actor/monster-sheet.js

@@ -25,7 +25,7 @@ export class OseActorSheetMonster extends ActorSheet {
         {
           navSelector: ".tabs",
           contentSelector: ".sheet-body",
-          initial: "notes",
+          initial: "attributes",
         },
       ],
     });
@@ -39,10 +39,13 @@ export class OseActorSheetMonster extends ActorSheet {
    */
   getData() {
     const data = super.getData();
+    
     data.config = CONFIG.OSE;
 
     // Prepare owned items
     this._prepareItems(data);
+
+    // DEBUG
     return data;
   }
 
@@ -51,31 +54,40 @@ export class OseActorSheetMonster extends ActorSheet {
    * @private
    */
   _prepareItems(data) {
+    // Partition items by category
+    let [inventory, abilities, spells] = data.items.reduce(
+      (arr, item) => {
+        // Classify items into types
+        if (item.type === "item") arr[0].push(item);
+        if (item.type === "ability") arr[1].push(item);
+        else if (item.type === "spell") arr[2].push(item);
+        return arr;
+      },
+      [[], [], [], []]
+    );
+
+    // Assign and return
+    data.inventory = inventory;
+    data.spells = spells;
+    data.abilities = abilities;
   }
   
+
   _onItemSummary(event) {
     event.preventDefault();
-    let li = $(event.currentTarget).parents(".item-entry"),
+    let li = $(event.currentTarget).parents(".item"),
-      expanded = !li.children(".collapsible").hasClass("collapsed");
+        item = this.actor.getOwnedItem(li.data("item-id")),
-    li = $(li);
+        description = TextEditor.enrichHTML(item.data.data.description);
-    let ol = li.children(".collapsible");
+    // Toggle summary
-    let icon = li.find("i.fas");
+    if ( li.hasClass("expanded") ) {
-
+      let summary = li.parents('.item-entry').children(".item-summary");
-    // Collapse the Playlist
+      summary.slideUp(200, () => summary.remove());
-    if (expanded) {
+    } else {
-      ol.slideUp(200, () => {
+      let div = $(`<div class="item-summary">${description}</div>`);
-        ol.addClass("collapsed");
+      li.parents('.item-entry').append(div.hide());
-        icon.removeClass("fa-angle-up").addClass("fa-angle-down");
+      div.slideDown(200);
-      });
-    }
-
-    // Expand the Playlist
-    else {
-      ol.slideDown(200, () => {
-        ol.removeClass("collapsed");
-        icon.removeClass("fa-angle-down").addClass("fa-angle-up");
-      });
     }
+    li.toggleClass("expanded");
   }
 
   /* -------------------------------------------- */

src/scss/monster.scss

@@ -12,4 +12,10 @@
       overflow: auto;  
     }
   }
+  .attribute-row {
+      padding: 2px;
+      .abilities {
+          margin: 2px;
+      }
+  }
 }

src/template.json

@@ -125,6 +125,9 @@
         "value": 0,
         "mod": 0
       },
+      "attacks": {
+        "value": 1
+      },
       "movement": {
         "base": 0,
         "encounter": 0

src/templates/actors/partials/monster-attributes-tab.html

@@ -1,7 +1,7 @@
 <section class="flexrow">
     <ul class="attributes flexrow">
         <li class="attribute health">
-            <h4 class="attribute-name box-title">{{ localize "OSE.HealthShort" }}</h4>
+            <h4 class="attribute-name box-title" title="{{localize 'OSE.Health'}}">{{ localize "OSE.HealthShort" }}</h4>
             <div class="attribute-value multiple">
                 <input name="data.hp.value" type="text" value="{{data.hp.value}}" data-dtype="Number"
                     placeholder="10" />
@@ -10,28 +10,35 @@
             </div>
         </li>
         <li class="attribute">
-            <h4 class="attribute-name box-title">{{ localize "OSE.ArmorClassShort" }}</h4>
+            <h4 class="attribute-name box-title" title="{{localize 'OSE.ArmorClass'}}">{{ localize "OSE.ArmorClassShort" }}</h4>
             <div class="attribute-value">
                 <input name="data.ac.value" type="text" value="{{data.ac.value}}" data-dtype="Number" placeholder="10"
                     data-dtype="Number" />
             </div>
         </li>
         <li class="attribute">
-            <h4 class="attribute-name box-title">{{ localize "OSE.MovementShort" }}</h4>
+            <h4 class="attribute-name box-title" title="{{localize 'OSE.Thac0'}}">{{ localize "OSE.Thac0" }}</h4>
-            <div class="attribute-value">
-                <input name="data.movement.value" type="text" value="{{data.movement.value}}" placeholder="0"
-                    data-dtype="Number" />
-            </div>
-        </li>
-        <li class="attribute">
-            <h4 class="attribute-name box-title">{{ localize "OSE.Thac0" }}</h4>
             <div class="attribute-value">
                 <input name="data.thac0.value" type="text" value="{{data.thac0.value}}" placeholder="0"
                     data-dtype="Number" />
             </div>
         </li>
+        <li class="attribute">
+            <h4 class="attribute-name box-title" title="{{localize 'OSE.Attacks'}}">{{ localize "OSE.AttacksShort" }}</h4>
+            <div class="attribute-value">
+                <input name="data.att.value" type="text" value="{{data.att.value}}" placeholder="0"
+                    data-dtype="Number" />
+            </div>
+        </li>
+        <li class="attribute">
+            <h4 class="attribute-name box-title" title="{{localize 'OSE.Movement'}}">{{ localize "OSE.MovementShort" }}</h4>
+            <div class="attribute-value">
+                <input name="data.movement.value" type="text" value="{{data.movement.value}}" placeholder="0"
+                    data-dtype="Number" />
+            </div>
+        </li>
 </section>
-<section class="flexrow">
+<section class="flexrow attribute-row">
     {{!-- Skills and abilities --}}
     <div class="flex3 panel abilities">
         <h4 class="panel-title">{{localize 'OSE.panel.abilities'}}</h4>
@@ -60,6 +67,34 @@
             </div>
         </ul>
     </div>
+    {{!-- Equipment --}}
+    <div class="flex3 panel abilities">
+        <h4 class="panel-title">{{localize 'OSE.panel.equipment'}}</h4>
+        <ul class="panel-content inventory">
+            <div class="">
+                {{#each inventory as |item|}}
+                <li class="item-entry">
+                    <div class="item flexrow" data-item-id="{{item._id}}">
+                        <div class="item-name flexrow">
+                            <div class="item-image" style="background-image: url({{item.img}})"></div>
+                            <h4 title="{{item.name}}">
+                                {{item.name~}}
+                            </h4>
+                        </div>
+                        <div class="item-controls">
+                            {{#if ../owner}}
+                            <a class="item-control item-edit" title='{{localize "Ose.Edit"}}'><i
+                                    class="fas fa-edit"></i></a>
+                            <a class="item-control item-delete" title='{{localize "Ose.Delete"}}'><i
+                                    class="fas fa-trash"></i></a>
+                            {{/if}}
+                        </div>
+                    </div>
+                </li>
+                {{/each}}
+            </div>
+        </ul>
+    </div>
     {{!-- Saving throws --}}
     <div class="attribute-group">
         <ul class="attributes">