yutorize · ViVi-shark · Jan 17, 2025
diff --git a/_core/lib/sw2.0/edit-chara.pl b/_core/lib/sw2.0/edit-chara.pl
@@ -1347,6 +1347,33 @@ sub classInputBox {
           </div>
         </div>
         <div id="area-items-R">
+          <details class="box" id="mana-gems" @{[ (grep { my $key = $_ < 10 ? ('0' . $_) : $_; $pc{"manaGem${key}Quantity"} || $pc{"manaGem${key}Offset"} } (1 .. 20)) ? 'open' : '' ]}>
+            <summary class="in-toc">魔晶石</summary>
+            <table class="edit-table no-border-cells">
+              <thead>
+                <th class="point">点数
+                <th class="quantity">所持数
+                <th class="offset">一時的増減
+                <th class="total">
+              </thead>
+              <tbody>
+HTML
+foreach my $point (1 .. 20) {
+  my $key = $point < 10 ? ('0' . $point) : $point;
+  print <<"HTML";
+                <tr data-point="${point}">
+                  <th class="point">${point}点
+                  <td class="quantity">@{[input "manaGem${key}Quantity",'number',"calcManaGem(${point})",'min="0"']}
+                  <td class="offset">@{[input "manaGem${key}Offset",'number',"calcManaGem(${point})"]}
+                  <td class="total">=<span class="value"></span><i class="unit">個</i>
+                </tr>
+HTML
+}
+print <<"HTML";
+              </tbody>
+            </table>
+            <button type="button" id="clearing-off-mana-gems-offset" onclick="clearOffManaGemsOffset();" disabled>一時的増減を清算する</button>
+          </details>
           <div class="box" id="material-cards"@{[ display $pc{lvAlc} ]}>
             <h2 class="in-toc">マテリアルカード</h2>
             <table class="edit-table no-border-cells" >

diff --git a/_core/lib/sw2/edit-chara.js b/_core/lib/sw2/edit-chara.js
@@ -89,6 +89,7 @@ window.onload = function() {
   calcHonor();
   calcDishonor();
   calcCommonClass();
+  calcManaGems();
   checkEffectAll();
   setupBracketInputCompletion();
 
@@ -2503,6 +2504,85 @@ function delPart(){
   delRow('partNum', '#parts tbody tr:last-of-type');
   calcParts();
 }
+// 魔晶石 ----------------------------------------
+function calcManaGems() {
+  for (let point = 1; point <= 20; point++) {
+    calcManaGem(point);
+  }
+}
+/**
+ * @param {int} point
+ */
+function calcManaGem(point) {
+  const tr = document.querySelector(`#mana-gems table tr[data-point="${point}"]`);
+
+  const quantity = parseInt(tr.querySelector('.quantity input').value);
+  const offset = parseInt(tr.querySelector('.offset input').value);
+
+  const total = (isNaN(quantity) ? 0 : quantity) + (isNaN(offset) ? 0 : offset);
+
+  const valueElement = tr.querySelector('.total .value');
+  valueElement.textContent = commify(total);
+  valueElement.classList.toggle('zero', total === 0);
+  valueElement.classList.toggle('minus', total < 0);
+
+  switchManaGemClearingOffButton();
+}
+function switchManaGemClearingOffButton() {
+  let hasOffset = false;
+
+  for (let point = 1; point <= 20; point++) {
+    const offset = parseInt(document.querySelector(`#mana-gems table tr[data-point="${point}"] .offset input`).value);
+
+    if (!isNaN(offset) && offset !== 0) {
+      hasOffset = true;
+      break;
+    }
+  }
+
+  document.getElementById('clearing-off-mana-gems-offset').disabled = !hasOffset;
+}
+function clearOffManaGemsOffset() {
+  /** @var {Array<Function>} */
+  const clearingFunctions = [];
+
+  for (let point = 1; point <= 20; point++) {
+    const tr = document.querySelector(`#mana-gems table tr[data-point="${point}"]`);
+
+    const quantityInput = tr.querySelector('.quantity input');
+    const offsetInput = tr.querySelector('.offset input');
+
+    const offset = parseInt(offsetInput.value);
+
+    if (isNaN(offset) || offset === 0) {
+      continue;
+    }
+
+    const quantity = quantityInput.value !== '' ? parseInt(quantityInput.value) : 0;
+    const clearedQuantity = quantity + offset;
+
+    if (clearedQuantity < 0) {
+      alert(`魔晶石（${point}点）の減少量が元の所持数より大きいため清算できません。`);
+      return;
+    }
+
+    clearingFunctions.push(((quantityInput, offsetInput, clearedQuantity) => {
+      return () => {
+        quantityInput.value = clearedQuantity.toString();
+        offsetInput.value = '';
+
+        for (const input of [quantityInput, quantityInput]) {
+          input.dispatchEvent(new Event('input'));
+          input.dispatchEvent(new Event('change'));
+        }
+      };
+    })(quantityInput, offsetInput, clearedQuantity));
+  }
+
+  clearingFunctions.forEach(x => x.call());
+
+  switchManaGemClearingOffButton();
+}
 // 名誉アイテム欄 ----------------------------------------
 // 追加
 function addHonorItems(){

diff --git a/_core/lib/sw2/edit-chara.pl b/_core/lib/sw2/edit-chara.pl
@@ -1348,6 +1348,33 @@ sub classInputBox {
           </div>
         </div>
         <div id="area-items-R">
+          <details class="box" id="mana-gems" @{[ (grep { my $key = $_ < 10 ? ('0' . $_) : $_; $pc{"manaGem${key}Quantity"} || $pc{"manaGem${key}Offset"} } (1 .. 20)) ? 'open' : '' ]}>
+            <summary class="in-toc">魔晶石</summary>
+            <table class="edit-table no-border-cells">
+              <thead>
+                <th class="point">点数
+                <th class="quantity">所持数
+                <th class="offset">一時的増減
+                <th class="total">
+              </thead>
+              <tbody>
+HTML
+foreach my $point (1 .. 20) {
+  my $key = $point < 10 ? ('0' . $point) : $point;
+  print <<"HTML";
+                <tr data-point="${point}">
+                  <th class="point">${point}点
+                  <td class="quantity">@{[input "manaGem${key}Quantity",'number',"calcManaGem(${point})",'min="0"']}
+                  <td class="offset">@{[input "manaGem${key}Offset",'number',"calcManaGem(${point})"]}
+                  <td class="total">=<span class="value"></span><i class="unit">個</i>
+                </tr>
+HTML
+}
+print <<"HTML";
+              </tbody>
+            </table>
+            <button type="button" id="clearing-off-mana-gems-offset" onclick="clearOffManaGemsOffset();" disabled>一時的増減を清算する</button>
+          </details>
           <div class="box" id="material-cards"@{[ display $pc{lvAlc} ]}>
             <h2 class="in-toc">マテリアルカード</h2>
             <table class="edit-table no-border-cells" >

diff --git a/_core/lib/sw2/subroutine-sw2.pl b/_core/lib/sw2/subroutine-sw2.pl
@@ -87,6 +87,19 @@ sub createUnitStatus {
       }
       push(@unitStatus, { '陣気' => '0' }) if $pc{lvWar};
     }
+
+    foreach my $point (1 .. 20) {
+      my $key = $point < 10 ? ('0' . $point) : $point;
+      my $quantity = $pc{"manaGem${key}Quantity"} // 0;
+      next if $quantity == 0;
+
+      sub encloseNumeric {
+        my $num = shift;
+        return ('①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳')[$num - 1];
+      }
+
+      push(@unitStatus, { '魔晶石' . encloseNumeric($point) => $quantity });
+    }
   }
 
   foreach my $key (split ',', $pc{unitStatusNotOutput}){

diff --git a/_core/lib/sw2/view-chara.pl b/_core/lib/sw2/view-chara.pl
@@ -979,6 +979,45 @@ sub replaceModificationNotation {
   $SHEET->param(Parts => \@row);
 }
 
+### 魔晶石 --------------------------------------------------
+my @manaGems = ();
+{
+  my $lastColumn = 0;
+  my $row;
+
+  foreach my $point (1 .. 20) {
+    my $key = $point < 10 ? ('0' . $point) : $point;
+
+    my $quantity = $pc{"manaGem${key}Quantity"} // 0;
+    my $offset = $pc{"manaGem${key}Offset"} // 0;
+
+    my $total = $quantity + $offset;
+    next if $total == 0;
+
+    my $startColumn = $point < 10 ? 1 : 4;
+
+    if ($startColumn > $lastColumn) {
+      $row = 1;
+      $lastColumn = $startColumn;
+    }
+    else {
+      $row++;
+    }
+
+    push(
+        @manaGems,
+        {
+            POINT        => $point,
+            TOTAL        => commify($total),
+            ROW          => $row,
+            POINT_COLUMN => $startColumn,
+            TOTAL_COLUMN => $startColumn + 1,
+        }
+    );
+  }
+}
+$SHEET->param(ManaGems => \@manaGems);
+
 ### 履歴 --------------------------------------------------
 
 $pc{history0Grow} .= '器用'.$pc{sttPreGrowA} if $pc{sttPreGrowA};

diff --git a/_core/skin/sw2.0/sheet-chara.html b/_core/skin/sw2.0/sheet-chara.html
@@ -523,6 +523,17 @@ <h2><TMPL_IF head_items><TMPL_VAR head_items><TMPL_ELSE>所持品</TMPL_IF></h2>
           </section>
         </div>
         <div id="area-items-R">
+          <section class="box" id="mana-gems">
+            <h2>魔晶石</h2>
+            <dl>
+              <TMPL_LOOP ManaGems>
+                <dt class="point" style="grid-column-start: <TMPL_VAR POINT_COLUMN>; grid-row-start: <TMPL_VAR ROW>;">
+                  <TMPL_VAR POINT>点
+                <dd class="total" style="grid-column-start: <TMPL_VAR TOTAL_COLUMN>; grid-row-start: <TMPL_VAR ROW>;">
+                  <i class="mark">×</i><span class="value"><TMPL_VAR TOTAL></span><i class="unit">個</i>
+              </TMPL_LOOP>
+            </dl>
+          </section>
           <TMPL_IF lvAlc><section class="box" id="material-cards">
             <h2>マテリアルカード</h2>
             <table class="data-table">

diff --git a/_core/skin/sw2/css/chara.css b/_core/skin/sw2/css/chara.css
@@ -1023,6 +1023,90 @@ dl#level {
   }
 }
 
+/* 魔晶石 */
+#mana-gems {
+  table {
+    .point {
+      width: 3em;
+    }
+
+    td.total {
+      display: grid;
+      grid-template-columns: max-content 1fr max-content;
+      padding: 0 0.25em;
+      text-wrap: nowrap;
+      word-break: keep-all;
+      white-space: nowrap;
+
+      &:has(.value.zero) {
+        color: gray;
+        opacity: 0.8;
+      }
+
+      &:has(.value.minus) {
+        color: #e70;
+      }
+
+      .value {
+        display: inline-block;
+        text-wrap: nowrap;
+        word-break: keep-all;
+        white-space: nowrap;
+        text-align: right;
+      }
+
+      .unit {
+        display: flex;
+        flex-flow: row;
+        align-items: flex-end;
+        font-size: smaller;
+        font-style: normal;
+      }
+    }
+  }
+
+  #clearing-off-mana-gems-offset {
+    margin: 0.25em;
+
+    &[disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: repeat(2, max-content max-content 1fr);
+    padding: 0 0.5em;
+
+    .point {
+      text-align: right;
+    }
+
+    .total {
+      i {
+        font-style: normal;
+      }
+
+      text-align: right;
+      padding-left: 0.5em;
+
+      .mark {
+        float: left;
+      }
+
+      .value {
+        display: inline-block;
+        text-align: right;
+      }
+
+      .unit {
+        font-size: smaller;
+      }
+    }
+  }
+}
+
 /* MaterialCard */
 #material-cards table {
   & tr > * {

diff --git a/_core/skin/sw2/sheet-chara.html b/_core/skin/sw2/sheet-chara.html
@@ -522,6 +522,19 @@ <h2><TMPL_IF head_items><TMPL_VAR head_items><TMPL_ELSE>所持品</TMPL_IF></h2>
           </section>
         </div>
         <div id="area-items-R">
+          <TMPL_IF ManaGems>
+          <section class="box" id="mana-gems">
+            <h2>魔晶石</h2>
+            <dl>
+              <TMPL_LOOP ManaGems>
+                <dt class="point" style="grid-column-start: <TMPL_VAR POINT_COLUMN>; grid-row-start: <TMPL_VAR ROW>;">
+                  <TMPL_VAR POINT>点
+                <dd class="total" style="grid-column-start: <TMPL_VAR TOTAL_COLUMN>; grid-row-start: <TMPL_VAR ROW>;">
+                  <i class="mark">×</i><span class="value"><TMPL_VAR TOTAL></span><i class="unit">個</i>
+              </TMPL_LOOP>
+            </dl>
+          </section>
+          </TMPL_IF>
           <TMPL_IF lvAlc><section class="box" id="material-cards">
             <h2>マテリアルカード</h2>
             <table class="data-table">