1 files changed, 30 insertions, 8 deletions

diff --git a/internal/admin/static/mobeditor.js b/internal/admin/static/mobeditor.js
index 2c8db21..3934fcd 100644
--- a/internal/admin/static/mobeditor.js
+++ b/internal/admin/static/mobeditor.js
@@ -46,7 +46,7 @@ var MOB_SECTIONS = [
       ['stats.defenses.crush_defense', 'Crush Def', 'number', '0', 'narrow'],
       ['stats.defenses.science_defense', 'Sci Def', 'number', '0', 'narrow'],
       ['stats.defenses.ranged_defense', 'Rng Def', 'number', '0', 'narrow'],
-      ['stats.defenses.weakness', 'Weakness', 'text', 'e.g. crush'],
+      ['stats.defenses.weakness', 'Weakness', 'select', '|bio|eco|hydro|solar|chaos'],
       ['stats.defenses.weakness_percent', 'Weakness %', 'number', '50', 'narrow'],
       ['assassin_level', 'Assassin Lvl', 'number', '1', 'narrow'],
       ['finishing_blow', 'Finishing Blow', 'search', 'e.g. stake', '', null, 'items'],
@@ -314,19 +314,22 @@ function normalizeAttackTypes(v) {
 }
 
 // renderMobAttackTypeWidget renders the Atk Type selector: one required melee
-// type (radio: stab/slash/crush) plus optional ranged/science (checkboxes).
+// type (pill: stab/slash/crush) plus optional ranged/science (checkboxes).
 function renderMobAttackTypeWidget(data) {
   var combat = data.combat || {};
   var types = normalizeAttackTypes(combat.attack_types);
   var melee = types.filter(function(t) { return t === 'stab' || t === 'slash' || t === 'crush'; })[0] || 'crush';
   var hasRanged = types.indexOf('ranged') >= 0;
   var hasScience = types.indexOf('science') >= 0;
+  var meleeOpts = ['stab','slash','crush'];
+  var activeIdx = meleeOpts.indexOf(melee);
+  if (activeIdx < 0) activeIdx = 2;
 
   var h = '<div class="obj-inline-group">';
   h += '<span class="obj-inline-label">Atk Type</span>';
-  h += '<div class="obj-card-grid" style="margin-top:4px">';
-  ['stab','slash','crush'].forEach(function(m) {
-    h += '<label class="obj-field obj-check obj-narrow"><input type="radio" name="mob_atktype_melee" value="' + m + '"' + (melee === m ? ' checked' : '') + '> <span>' + m + '</span></label>';
+  h += '<div class="seg-pill seg-pill-3 seg-idx-' + activeIdx + '" id="mob_atktype_pill" style="margin-top:4px">';
+  meleeOpts.forEach(function(t, i) {
+    h += '<button type="button" class="seg-opt' + (i === activeIdx ? ' seg-active' : '') + '" data-v="' + t + '" onclick="mobAtkPillSelect(\'' + t + '\',this)">' + t + '</button>';
   });
   h += '</div>';
   h += '<div class="obj-card-grid" style="margin-top:4px">';
@@ -337,12 +340,31 @@ function renderMobAttackTypeWidget(data) {
   return h;
 }
 
+function mobAtkPillSelect(val, btn) {
+  var pill = document.getElementById('mob_atktype_pill');
+  if (!pill) return;
+  var opts = pill.querySelectorAll('.seg-opt');
+  var idx = -1;
+  opts.forEach(function(o, i) {
+    if (o.getAttribute('data-v') === val) {
+      o.classList.add('seg-active');
+      idx = i;
+    } else {
+      o.classList.remove('seg-active');
+    }
+  });
+  pill.className = pill.className.replace(/seg-idx-\d/g, 'seg-idx-' + idx);
+}
+
 // collectMobAttackType reads the Atk Type widget into an array: the selected
 // melee type first, then any optional ranged/science types.
 function collectMobAttackType() {
   var melee = 'crush';
-  var r = document.querySelector('input[name="mob_atktype_melee"]:checked');
-  if (r) melee = r.value;
+  var pill = document.getElementById('mob_atktype_pill');
+  if (pill) {
+    var active = pill.querySelector('.seg-opt.seg-active');
+    if (active) melee = active.getAttribute('data-v');
+  }
   var out = [melee];
   var rng = document.getElementById('mob_atktype_ranged');
   var sci = document.getElementById('mob_atktype_science');
@@ -852,7 +874,7 @@ function saveMob() {
       hasValues = ced_saveSectionFields(sec, sectionObj, cardPath, fieldID) || hasValues;
     }
 
-    if (sec.id === 'combat' && document.querySelector('input[name="mob_atktype_melee"]')) {
+    if (sec.id === 'combat' && document.getElementById('mob_atktype_pill')) {
       sectionObj['attack_types'] = collectMobAttackType();
       hasValues = true;
     }