Merge pull request #78 from diabeatz96/FixesToSinOverflow

Enhance sinOverflow functionality and UI
diabeatz96 · Oct 6, 2024 · 0bb7a17 · 0bb7a17
2 parents 9c7f4a0 + 7c2fdfd
commit 0bb7a17
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 9 deletions.
diff --git a/module/data/actor-character.mjs b/module/data/actor-character.mjs
@@ -81,9 +81,9 @@ export default class CainCharacter extends CainActorBase {
     schema.currentSinMarks = new fields.ArrayField(new fields.StringField({ required: true, initial: " " }), { required: true, initial: [] });
 
     schema.sinOverflow = new fields.SchemaField({
-      value: new fields.NumberField({ required: true, initial: 0, min: 0, max: 10 }),
-      max: new fields.NumberField({ required: true, initial: 10, min: 0, max: 10 }),
-      min : new fields.NumberField({ required: true, initial: 0, min: 0, max: 10 }),
+      value: new fields.NumberField({ required: true, initial: 0, min: 0, max: 20 }),
+      max: new fields.NumberField({ required: true, initial: 10, min: 0, max: 20 }),
+      min : new fields.NumberField({ required: true, initial: 0, min: 0, max: 20 }),
     });
 
     schema.kitPoints = new fields.SchemaField({

diff --git a/module/sheets/actor-sheet.mjs b/module/sheets/actor-sheet.mjs
@@ -308,6 +308,29 @@ export class CainActorSheet extends ActorSheet {
         }
     });
 
+    // Event listener for increasing sinOverflow max
+    html.find('.sin-overflow-increase').click(ev => {
+      ev.preventDefault();
+      const actor = this.actor;
+      const newMax = Math.min(actor.system.sinOverflow.max + 1, 20);
+      actor.update({ 'system.sinOverflow.max': newMax });
+    });
+
+    // Event listener for decreasing sinOverflow max
+    html.find('.sin-overflow-decrease').click(ev => {
+      ev.preventDefault();
+      const actor = this.actor;
+      const newMax = actor.system.sinOverflow.max - 1;
+      if (newMax >= actor.system.sinOverflow.min) {
+          const updates = { 'system.sinOverflow.max': newMax };
+          if (newMax < actor.system.sinOverflow.value) {
+              updates['system.sinOverflow.value'] = newMax;
+          }
+          actor.update(updates);
+      }
+    });
+
+
 
     let scHtml = new HTMLShortcut(html);
     // Character sheet specific listeners
@@ -475,7 +498,7 @@ export class CainActorSheet extends ActorSheet {
     // Event listener for selectedAgenda
     html.find('#selectedAgenda').change(this._onAbilitySelect.bind(this));
 
-    html.find('.rollable[data-roll="1d3"]').click(async () => {
+    html.find('.roll-sin').click(async () => {
       const actor = this.actor;
       await this._rollSinOverflow(actor);
     });
@@ -487,6 +510,12 @@ export class CainActorSheet extends ActorSheet {
     const roll = await new Roll('1d3').roll();
     const rolledValue = roll.total;
 
+    // Send roll result to chat
+    roll.toMessage({
+      speaker: ChatMessage.getSpeaker({ actor: actor }),
+      flavor: "Sin Overflow Roll"
+    });
+
     // Get current sinOverflow value and max
     const currentSinOverflow = actor.system.sinOverflow.value;
     const maxSinOverflow = actor.system.sinOverflow.max;

diff --git a/system.json b/system.json
@@ -20,7 +20,7 @@
       "thumbnail": "systems/cain/assets/cain.png"
     }
   ],
-  "version": "1.1.6",
+  "version": "1.1.7",
   "compatibility": {
     "minimum": 11,
     "verified": "12"

diff --git a/templates/actor/parts/actor-sin.hbs b/templates/actor/parts/actor-sin.hbs
@@ -22,8 +22,7 @@
     </div>
     <h3 style="margin-bottom: 1rem;">{{system.sinOverflow.value}} / {{system.sinOverflow.max}}</h3>
     <div style="display: flex; justify-content: center; margin-top: 10px; margin-bottom: 20px">
-      <label class="resource-label rollable flexlarge align-left mob-psycho-label" 
-             data-roll="1d3" 
+      <label class="resource-label rollable roll-sin flexlarge align-left mob-psycho-label" 
              data-label="{{localize 'SHEET.SIN.ROLLSIN'}}" 
              style="text-align: center;">
         {{localize 'SHEET.SIN.ROLLSIN'}}
@@ -35,10 +34,13 @@
         {{localize 'SHEET.SIN.ROLLRESIST'}}
       </label>
     </div>
-    <label for="sinOverflow-max">{{localize 'SHEET.SIN.ADJUSTMAX'}}</label>
-    <input type="number" id="sinOverflow-max" data-tooltip="{{localize 'SHEET.TOOLTIPS.SINMAXADJUST'}}" name="system.sinOverflow.max" value="{{system.sinOverflow.max}}" min="{{system.sinOverflow.min}}" max="10" style="width: 100px; text-align: center;" />
+<label for="sinOverflow-max">{{localize 'SHEET.SIN.ADJUSTMAX'}}</label>
+  <div id="sin-overflow" style="display: flex; align-items: center;">
+    <button type="button" class="sin-overflow-decrease">-</button>
+    <button type="button" class="sin-overflow-increase">+</button>
   </div>
 </div>
+</div>
 
 <div class="sin-marks sin-page-drop-target">
   <h3>Sin Marks</h3>
@@ -163,4 +165,51 @@
   border-radius: 8px;
   padding: 15px;
 }
+
+.sin-overflow-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#sinOverflow-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.sinOverflow-icon {
+  margin: 2px;
+}
+
+.sin-overflow-decrease,
+.sin-overflow-increase {
+  background-color: #cc33ff;
+  border: 2px solid #660066;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 5px;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.sin-overflow-decrease:hover,
+.sin-overflow-increase:hover {
+  background-color: #a329cc;
+  transform: scale(1.1);
+}
+
+.sin-overflow-decrease:active,
+.sin-overflow-increase:active {
+  background-color: #801999;
+  transform: scale(0.9);
+}
+
 </style>