Merge pull request #84 from diabeatz96/SinImprovements2

Add sinMarkDescription field and enhance player overview UI
diabeatz96 · Oct 12, 2024 · 5c5fc02 · 5c5fc02
2 parents 0bb7a17 + b5253c5
commit 5c5fc02
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 35 deletions.
diff --git a/css/cain.css b/css/cain.css
@@ -247,7 +247,9 @@ img {
   flex: 0 0 100px;
   height: 100px;
   margin-right: 10px;
+  object-fit: cover; /* Ensure the image covers the height without stretching */
 }
+
 /* .cain .sheet-header .header-fields {
   flex: 1;
 } */
@@ -721,6 +723,9 @@ img {
   transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
   position: relative; /* For pseudo-element positioning */
+  object-fit: cover; /* Ensure the image covers the container without stretching */
+  width: 100px; /* Set a fixed width */
+  height: 100px; /* Set a fixed height */
 }
 
 .mob-psycho-img::before {
@@ -1439,7 +1444,7 @@ img {
   position: relative;
 }
 
-.talisman-button, .risk-roll-button, .fate-roll-button, .player-overview-button {
+.talisman-button, .risk-roll-button, .fate-roll-button, .player-overview-button, .homebrew-button {
   background: none;
   border: none;
   padding: 0;
@@ -1451,18 +1456,18 @@ img {
   vertical-align: middle;
 }
 
-.talisman-button img, .risk-roll-button img, .fate-roll-button img, .player-overview-button img {
+.talisman-button img, .risk-roll-button img, .fate-roll-button img, .player-overview-button img, .homebrew-button img {
   border: none;
   width: 100%;
   height: auto;
   transition: filter 0.3s ease;
 }
 
-.talisman-button img:hover, .risk-roll-button img:hover, .fate-roll-button img:hover, .player-overview-button img:hover {
+.talisman-button img:hover, .risk-roll-button img:hover, .fate-roll-button img:hover, .player-overview-button img:hover, .homebrew-button img:hover {
   filter: brightness(1.2); /* Adjust the brightness to highlight the icon */
 }
 
-.talisman-button.clicked img, .risk-roll-button.clicked img, .fate-roll-button.clicked img, .player-overview-button.clicked img {
+.talisman-button.clicked img, .risk-roll-button.clicked img, .fate-roll-button.clicked img, .player-overview-button.clicked img, .homebrew-button.clicked img {
   filter: brightness(0.8); /* Adjust the brightness to indicate the button has been clicked */
 }
 

diff --git a/module/cain.mjs b/module/cain.mjs
@@ -152,6 +152,83 @@ Hooks.once('init', async function () {
     }
   });
 
+  function registerHotkeySetting(settingName, settingLabel, settingHint) {
+    game.settings.register('cain', settingName, {
+      name: settingLabel,
+      hint: settingHint,
+      scope: 'client',
+      config: true,
+      type: String,
+      default: '',
+      onChange: value => {
+        document.getElementById(`${settingName}-display`).innerText = value || 'Not Set';
+      }
+    });
+
+    Hooks.on('renderSettingsConfig', (app, html, data) => {
+      const settingElement = html.find(`[name="cain.${settingName}"]`).parent();
+      settingElement.find('input').remove(); // Remove the text input field
+
+      const button = $(`
+        <button type="button" id="${settingName}-button" style="
+          background-color: #4CAF50; 
+          border: none; 
+          color: white; 
+          padding: 10px 24px; 
+          text-align: center; 
+          text-decoration: none; 
+          display: inline-block; 
+          font-size: 16px; 
+          margin: 4px 2px; 
+          cursor: pointer; 
+          border-radius: 12px; 
+          transition: background-color 0.3s ease;
+        ">Set Hotkey</button>
+      `);
+
+      const display = $(`
+        <span id="${settingName}-display" style="
+          font-size: 16px; 
+          margin-left: 10px; 
+          padding: 10px; 
+          background-color: #f1f1f1; 
+          border: 1px solid #ccc; 
+          border-radius: 12px; 
+          display: inline-block;
+        ">${game.settings.get('cain', settingName) || 'Not Set'}</span>
+      `);
+
+      button.on('click', () => {
+        button.css('background-color', '#45a049'); // Change background color slightly
+        function handler(event) {
+          event.preventDefault(); // Prevent other keys from triggering
+          game.settings.set('cain', settingName, event.key);
+          button.css('background-color', '#4CAF50'); // Revert background color
+          window.removeEventListener('keydown', handler, true);
+        }
+        window.addEventListener('keydown', handler, true);
+      });
+
+      settingElement.append(button);
+      settingElement.append(display);
+    });
+  }
+
+  game.settings.register('cain', 'enableHotkeys', {
+    name: 'Enable Hotkeys',
+    hint: 'Toggle to enable or disable hotkeys.',
+    scope: 'client',
+    config: true,
+    type: Boolean,
+    default: false,
+  });
+
+  registerHotkeySetting('hotkeyTalisman', 'Hotkey for Talisman Button', 'Set a hotkey to trigger the Talisman button.');
+  registerHotkeySetting('hotkeyPlayerOverview', 'Hotkey for Player Overview Button', 'Set a hotkey to trigger the Player Overview button.');
+  registerHotkeySetting('hotkeyRiskRoll', 'Hotkey for Risk Roll Button', 'Set a hotkey to trigger the Risk Roll button.');
+  registerHotkeySetting('hotkeyFateRoll', 'Hotkey for Fate Roll Button', 'Set a hotkey to trigger the Fate Roll button.');
+  registerHotkeySetting('hotkeyHomebrew', 'Hotkey for Homebrew Button', 'Set a hotkey to trigger the Homebrew button.');
+
   applyAccessibilityMode(game.settings.get('cain', 'accessibilityMode'));
 
 
@@ -363,17 +440,6 @@ Handlebars.registerHelper('CainOffset', function(value, offset, options) {
 
 Hooks.once('ready', function () {
   // Function to create and insert the Talisman button
-
-  const accessibilityModeChosen = game.settings.get('cain', 'accessibilityModeChosen');
-  if (!accessibilityModeChosen) {
-    showAccessibilityChoiceDialog();
-  }
-
-  const GMtutorialFinished = game.settings.get('cain', 'GMTutorialFinished');
-  if (!GMtutorialFinished && game.user.isGM) {
-    showGMTutorialDialog();
-  }
-
   function addPlayerOverviewButton() {
     const showPlayerOverview = game.settings.get('cain', 'showPlayerOverview');
     const isGM = game.user.isGM;
@@ -421,9 +487,9 @@ Hooks.once('ready', function () {
   function addHomebrewButton() {
     // Create the button element with the talisman icon
     if (!game.user.isGM) return;
-    const button = $('<button title="Homebrew" class="talisman-button"><img src="systems/cain/assets/homebrew.png" alt="Homebrew Icon"></button>');
+    const button = $('<button title="Homebrew" class="homebrew-button"><img src="systems/cain/assets/homebrew.png" alt="Homebrew Icon"></button>');
 
-    // Add click event to open the TalismanWindow
+    // Add click event to open the HomebrewWindow
     button.on('click', () => {
       new HomebrewWindow().render(true);
     });
@@ -441,7 +507,6 @@ Hooks.once('ready', function () {
     }
   }
 
-
   // Function to create and insert the Risk Roll button
   function addRiskRollButton() {
     if (!game.user.isGM) return;
@@ -476,8 +541,6 @@ Hooks.once('ready', function () {
     }
   }
 
-
-
   // Add the Talisman button when the action bar is first ready
   addTalismanButton();
   addPlayerOverviewButton();
@@ -496,6 +559,34 @@ Hooks.once('ready', function () {
 
   // Register hotbar drop hook
   Hooks.on('hotbarDrop', (bar, data, slot) => createItemMacro(data, slot));
+
+  // Add event listeners for hotkeys
+  document.addEventListener('keydown', (event) => {
+    // Ignore key events when typing in input fields or ProseMirror editors
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.classList.contains('ProseMirror')) return;
+
+    // Check if hotkeys are enabled
+    if (!game.settings.get('cain', 'enableHotkeys')) return;
+
+    const talismanHotkey = game.settings.get('cain', 'hotkeyTalisman');
+    const playerOverviewHotkey = game.settings.get('cain', 'hotkeyPlayerOverview');
+    const riskRollHotkey = game.settings.get('cain', 'hotkeyRiskRoll');
+    const fateRollHotkey = game.settings.get('cain', 'hotkeyFateRoll');
+    const homebrewHotkey = game.settings.get('cain', 'hotkeyHomebrew');
+
+    if (event.key === talismanHotkey) {
+      $('.talisman-button').click();
+    } else if (event.key === playerOverviewHotkey) {
+      $('.player-overview-button').click();
+    } else if (event.key === riskRollHotkey) {
+      $('.risk-roll-button').click();
+    } else if (event.key === fateRollHotkey) {
+      $('.fate-roll-button').click();
+    } else if (event.key === homebrewHotkey) {
+      $('.homebrew-button').click();
+    }
+  });
+
   const [brokenBlasphemies, brokenSinMarks, brokenAgendas] = testForProperLinkage();
   if (brokenBlasphemies || brokenSinMarks || brokenAgendas) {
     const dialogContent = `

diff --git a/module/data/actor-character.mjs b/module/data/actor-character.mjs
@@ -111,6 +111,7 @@ export default class CainCharacter extends CainActorBase {
 
     schema.sinMarks = new fields.ArrayField(new fields.StringField(), { required: true, initial: [] });
     schema.sinMarkAbilities = new fields.ArrayField(new fields.StringField(), { required: true, initial: [] });
+    schema.sinMarkDescription = new fields.StringField({ required: true, initial: "" });
 
     return schema;
   }

diff --git a/module/documents/player-overview.mjs b/module/documents/player-overview.mjs
@@ -23,6 +23,8 @@ export class PlayerOverview extends Application {
                 agendaAbilities: actor ? this._getItemsFromIDs(actor.system.currentAgendaAbilities) : [],
                 blasphemies: actor ? this._getItemsFromIDs(actor.system.currentBlasphemies) : [],
                 blasphemyPowers: actor ? this._getItemsFromIDs(actor.system.currentBlasphemyPowers) : [],
+                sinMarks: actor ? this._getItemsFromIDs(actor.system.sinMarks) : [],
+                sinMarkAbilities : actor ? this._getItemsFromIDs(actor.system.sinMarkAbilities) : [],
                 afflictions: actor ? this._getItemsFromIDs(actor.system.afflictions) : [],
                 message: actor ? null : "No actor assigned. Please assign an actor for player overview."
             };

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

diff --git a/templates/actor/parts/actor-sin.hbs b/templates/actor/parts/actor-sin.hbs
@@ -44,6 +44,7 @@
 
 <div class="sin-marks sin-page-drop-target">
   <h3>Sin Marks</h3>
+  <textarea class="sin-mark-description-input" name="system.sinMarkDescription" placeholder="Add a description of what your marks look like...">{{system.sinMarkDescription}}</textarea>
   {{#if currentSinMarkData.length}}
     <ul>
       {{#each currentSinMarkData}}
@@ -53,17 +54,18 @@
             {{#each this.abilities}}
               <li class="flexrow sin-mark sin-mark-body-part">
                 <div class="flexcol sin-mark-content" style="flex: 1 1 0;">
-                <h3>{{this.name}}</h3><p class="sin-mark-description">{{this.description}}</p> 
+                  <h3>{{this.name}}</h3>
+                  <p class="sin-mark-description">{{this.description}}</p>
                 </div>
                 <div class="flexcol remove-sin-mark-div">
-                <button data-markindex="{{@../index}}" data-abilityindex="{{@index}}" class="{{#unless (and @first @last)}}remove-sin-mark-ability-button{{else}}delete-sin-mark{{/unless}} remove-sin-mark-button"> 
-                  <i class="fas fa-trash"></i>
-                </button>
+                  <button data-markindex="{{@../index}}" data-abilityindex="{{@index}}" class="{{#unless (and @first @last)}}remove-sin-mark-ability-button{{else}}delete-sin-mark{{/unless}} remove-sin-mark-button"> 
+                    <i class="fas fa-trash"></i>
+                  </button>
                 </div>
               </li>
             {{/each}}
           </ul>
-          <button class="evolve-mark-button" data-markindex="{{@index}}"><h2 style="position: relative; background: inherit; border: none;"><span class="glitch" data-text="SUCCOMB"> EVOLVE </span></h2></button>
+          <button class="evolve-mark-button" data-markindex="{{@index}}"><h2 style="position: relative; background: inherit; border: none;"><span class="glitch" data-text="SUCCUMB"> EVOLVE </span></h2></button>
         </li>
       {{/each}}
     </ul>
@@ -212,4 +214,16 @@
   transform: scale(0.9);
 }
 
+.sin-mark-description-input {
+  width: 100%;
+  height: 50px;
+  margin-top: 5px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #FFF;
+  font-size: 14px;
+  resize: vertical;
+}
+
 </style>
diff --git a/templates/player-overview/xp.hbs b/templates/player-overview/xp.hbs
@@ -8,16 +8,18 @@
         <h3>{{actor.name}}</h3>
         <p>Level: {{actor.system.attributes.level.value}}</p>
         <div class="additional-info">
-          <h4>Sin Marks</h4>
-          <ul class="sin-marks-list">
-            {{#if actor.system.currentSinMarks.length}}
-              {{#each actor.system.currentSinMarks}}
-              <li>{{this}}</li>
+            <h4>Sin Mark Abilities</h4>
+            <ul class="sin-abilities-list">
+              {{#each sinMarkAbilities}}
+                <li class="sin-ability-item">
+                  <strong class="sin-body-part">{{this.system.bodyPartName}}</strong>
+                  <p>{{this.system.abilityDescription}}</p>
+                </li>
               {{/each}}
-            {{else}}
-              <li>No Sin Marks</li>
-            {{/if}}
-          </ul>
+              {{#unless sinMarkAbilities.length}}
+                <li>No Sin Mark Abilities</li>
+              {{/unless}}
+            </ul>
           <div class="bars-container">
             <h4>Sin Overflow</h4>
             <div class="bar">
@@ -151,4 +153,17 @@
     border: 1px solid #333;
     border-radius: 5px;
   }
+  .sin-abilities-list {
+  list-style-type: none;
+  padding: 0;
+  text-align: center;
+}
+
+  .sin-ability-item {
+    margin: 10px 0;
+  }
+
+  .sin-body-part {
+    text-decoration: underline;
+  }
 </style>