Add ranged attacks for monsters

templates/monster-combat.hbs

@@ -18,7 +18,16 @@
 
   <fieldset>
     <legend>{{localize "LETHALFANTASY.Label.attacks"}}</legend>
-    <div class="attacks">
+    <div class="attack-mode-selector">
+      <label>{{localize "LETHALFANTASY.Label.attackMode"}}</label>
+      <select name="system.attackMode">
+        <option value="melee" {{#if (eq system.attackMode "melee")}}selected{{/if}}>{{localize "LETHALFANTASY.Label.meleeModeLabel"}}</option>
+        <option value="ranged" {{#if (eq system.attackMode "ranged")}}selected{{/if}}>{{localize "LETHALFANTASY.Label.rangedModeLabel"}}</option>
+      </select>
+    </div>
+
+    {{#if (eq system.attackMode "melee")}}
+    <div class="attacks melee-attacks">
       {{#each system.attacks as |item key|}}
       <div class="attack" data-attack-key="{{key}}" >
         <div class="">
@@ -64,6 +73,54 @@
       </div>
       {{/each}}
     </div>
+    {{else}}
+    <div class="attacks ranged-attacks">
+      {{#each system.rangedAttacks as |item key|}}
+      <div class="attack" data-attack-key="{{key}}" >
+        <div class="">
+          <input type="checkbox" name="system.rangedAttacks.{{item.key}}.enabled" {{checked item.enabled}} data-tooltip="Attack enabled/disabled" />
+        </div>
+        <div class="name">
+          <input type="text" name="system.rangedAttacks.{{item.key}}.name" value="{{item.name}}" data-tooltip="Attack name" />
+        </div>
+        <div class="numeric">
+          <input type="number" name="system.rangedAttacks.{{item.key}}.attackScore" value="{{item.attackScore}}" data-tooltip="Progression number" />
+        </div>
+        <div class="numeric">
+          <input type="number" name="system.rangedAttacks.{{item.key}}.attackModifier" value="{{item.attackModifier}}" data-tooltip="Attack modifier" />
+        </div>
+        <div class="numeric">
+          <input type="number" name="system.rangedAttacks.{{item.key}}.defenseModifier" value="{{item.defenseModifier}}" data-tooltip="Defense modifier"/>
+        </div>
+        <div class="damage-dice">
+          <input type="text" name="system.rangedAttacks.{{item.key}}.damageDice" value="{{item.damageDice}}" data-tooltip="Damage dice"/>
+        </div>
+        <div class="numeric">
+          <input type="number" name="system.rangedAttacks.{{item.key}}.damageModifier" value="{{item.damageModifier}}" data-tooltip="Damage modifier"/>
+        </div>
+
+        <div class="attack-icons">
+
+          <a class="rollable" data-roll-type="monster-attack" data-roll-key="{{item.key}}" data-tooltip="Roll Attack">
+            <i class="lf-roll-small fa-solid fa-bow-arrow" data-roll-type="monster-attack" data-roll-key="{{item.key}}"></i>
+          </a>
+
+          <a class="rollable" data-roll-type="monster-defense" data-roll-key="{{item.key}}" data-tooltip="Roll Defense">
+            <i class="fa-solid fa-shield-halved" data-roll-type="monster-defense" data-roll-key="{{item.key}}"></i>
+          </a>
+
+          <a class="rollable" data-roll-type="monster-damage" data-roll-key="{{item.key}}"
+            data-tooltip="Roll Damage">
+            <i class="fa-regular fa-face-head-bandage" data-roll-type="monster-damage"
+              data-roll-key="{{item.key}}"></i>
+          </a>
+
+        </div>
+
+      </div>
+      {{/each}}
+    </div>
+    {{/if}}
   </fieldset>
 
   <fieldset>