chat style updates

README.md

@@ -19,16 +19,20 @@ Image of the Character Sheet and roll messages in Foundry's chat:
   - Harm section
   - A place to track Anchors
   - A Notes section
+- Settings
+  - Show/Hide the "Special Skill" on character sheets
+  - Show/Hide the Exposure tracker
+- An Exposure Track that only the GM can update with right and left clicks
 - Clicking on the roll buttons on the character sheet creates dialogs (When appropriate) to choose which die to roll
 - The Dark Die roll automatically increases your Insight & or Stress when appropriate
 - All rolls print appropriate outputs into the chat
-- Tokens can be setup to show Insight & Stress state
+- Tokens can be setup to show Insight & Stress states
 - A simple NPC Sheet
 
 ## To Be Done
 
-- Add in a version of Lancer Clocks for the Exposure Track
 - Add roll tables to the module
+- UI for non-die roll "at home" actions
 
 ## How to Install
 

module/cthulhudeepgreen.mjs

@@ -67,66 +67,20 @@ Hooks.once("ready", () => {
   });
 });
 
-/* -------------------------------------------- */
-/*  Handlebars Helpers                          */
-/* -------------------------------------------- */
-
-// Multiboxes from Blades in the Dark system module.
-// https://github.com/megastruktur/foundryvtt-blades-in-the-dark
-Handlebars.registerHelper("multiboxes", function (selected, options) {
-  let html = options.fn(this);
-
-  // Fix for single non-array values.
-  if (!Array.isArray(selected)) {
-    selected = [selected];
-  }
-
-  if (typeof selected !== "undefined") {
-    selected.forEach((selected_value) => {
-      if (selected_value !== false) {
-        let escapedValue = RegExp.escape(
-          Handlebars.escapeExpression(selected_value)
-        );
-        let rgx = new RegExp(' value="' + escapedValue + '"');
-        let oldHtml = html;
-        html = html.replace(rgx, "$& checked");
-        while (oldHtml === html && escapedValue >= 0) {
-          escapedValue--;
-          rgx = new RegExp(' value="' + escapedValue + '"');
-          html = html.replace(rgx, "$& checked");
-        }
-      }
-    });
+Hooks.on('renderChatMessage', (chatMessage, [html], messageData) => {
+  const flag = chatMessage.getFlag('cthulhudeepgreen', 'chatID');
+  if (flag && flag == "cthulhudeepgreen") {
+    $(html).addClass("roll-chat");
   }
-  return html;
 });
+// flags: { cthulhudeepgreen: { chatID: "cthulhudeepgreen" }}
 
-// "N Times" loop for handlebars.
-//  Block is executed N times starting from n=1.
-//
-// Usage:
-// {{#times_from_1 10}}
-//   <span>{{this}}</span>
-// {{/times_from_1}}
-Handlebars.registerHelper("times_from_1", function (n, block) {
-  var accum = "";
-  for (var i = 1; i <= n; ++i) {
-    accum += block.fn(i);
-  }
-  return accum;
-});
+/* -------------------------------------------- */
+/*  Handlebars Helpers                          */
+/* -------------------------------------------- */
 
-// "N Times" loop for handlebars.
-//  Block is executed N times starting from n=0.
-//
-// Usage:
-// {{#times_from_0 10}}
-//   <span>{{this}}</span>
-// {{/times_from_0}}
-Handlebars.registerHelper("times_from_0", function (n, block) {
-  var accum = "";
-  for (var i = 0; i <= n; ++i) {
-    accum += block.fn(i);
-  }
-  return accum;
+// Checks whether a game setting is active
+Handlebars.registerHelper("getSetting", function(arg){
+  if (arg == "" || arg == "non" || arg == undefined) { return ; }
+  return game.settings.get('cthulhudeepgreen', arg);
 });

module/helpers/config.mjs

@@ -1,6 +1,6 @@
 export const CDG = {};
 
-CDG.DarkDieColor = "#A62424";
-CDG.StressColor = "#A62424";
-CDG.InsightColor = "#2ba624";
-CDG.BaseColor = "#000000";
+CDG.DarkDieColor = "#ad25b9";
+CDG.BaseColor = "#FFFFFF";
+// CDG.StressColor = "#A62424";
+// CDG.InsightColor = "#3ec337";

module/helpers/exposure-panel.mjs

@@ -21,7 +21,7 @@ export class ExposurePanel extends Application {
         return {
             ...data,
             currentExposure: savedCurrentExposure,
-            exposureTitle: game.i18n.localize("CDG.dialog.exposure.title"), // TODO
+            exposureTitle: game.i18n.localize("CDG.dialog.exposure.title"),
             max: 10,
             spokes: Array(10).keys(),
             isGM: game.user.isGM
@@ -34,7 +34,7 @@ export class ExposurePanel extends Application {
 
         html.find('.on-click').click(this._onExposureIncrease.bind(this));
         html.find('.on-click').contextmenu(this._onExposureDecrease.bind(this));
-        html.find('.on-click-clear').click(this._onClearHeat.bind(this));
+        html.find('.on-click-clear').click(this._onClearExposure.bind(this));
     }
 
     async _onExposureIncrease(event) {
@@ -77,7 +77,9 @@ export class ExposurePanel extends Application {
               css: "chat-message-exposure",
               exposureUpdate: true,
               exposure: newExposure
-            } } }
+            },
+            chatID: "cthulhudeepgreen"   
+            }}
         });                 
     }
 }

module/helpers/settings.mjs

@@ -1,6 +1,6 @@
 export const registerSettings = function() {
 
-  game.settings.register('cthulhudeepgreen', 'show-special', {
+  game.settings.register('cthulhudeepgreen', 'show_special', {
       name: "CDG.settings.special.name",
       hint: "CDG.settings.special.hint",
       scope: "world",
@@ -10,7 +10,7 @@ export const registerSettings = function() {
       onChange: _ => window.location.reload()
   });
 
-  game.settings.register('cthulhudeepgreen', 'show-exposure', {
+  game.settings.register('cthulhudeepgreen', 'show_exposure', {
     name: "CDG.settings.exposure.name",
     hint: "CDG.settings.exposure.hint",
     scope: "world",

module/sheets/actor-sheet.mjs

@@ -30,7 +30,7 @@ export class CthulhuDeepGreenActorSheet extends ActorSheet {
 
   /** @override */
   get template() {
-    return `systems/cthulhudeepgreen/templates/actor/actor-${this.actor.type}-sheet.html`;
+    return `systems/cthulhudeepgreen/templates/actor/actor-${this.actor.type}-sheet.hbs`;
   }
 
   /* -------------------------------------------- */
@@ -361,7 +361,8 @@ export class CthulhuDeepGreenActorSheet extends ActorSheet {
                   user: game.user_id,
                   speaker: ChatMessage.getSpeaker({ actor: this.actor }),
                   rollMode: game.settings.get("core", "rollMode"),
-                  content: rendered_html
+                  content: rendered_html,
+                  flags: { cthulhudeepgreen: { chatID: "cthulhudeepgreen" }}
                 });
 
                 // ----
@@ -480,7 +481,8 @@ export class CthulhuDeepGreenActorSheet extends ActorSheet {
                   user: game.user_id,
                   speaker: ChatMessage.getSpeaker({ actor: this.actor }),
                   rollMode: game.settings.get("core", "rollMode"),
-                  content: rendered_html
+                  content: rendered_html,
+                  flags: { cthulhudeepgreen: { chatID: "cthulhudeepgreen" }}
                 });
 
                 // ----
@@ -549,7 +551,8 @@ export class CthulhuDeepGreenActorSheet extends ActorSheet {
       user: game.user_id,
       speaker: ChatMessage.getSpeaker({ actor: this.actor }),
       rollMode: game.settings.get("core", "rollMode"),
-      content: chatContentMessage
+      content: chatContentMessage,
+      flags: { cthulhudeepgreen: { chatID: "cthulhudeepgreen" }}
     });
   }
 }

module/sheets/item-sheet.mjs

@@ -21,7 +21,7 @@ export class CthulhuDeepGreenItemSheet extends ItemSheet {
 
   /** @override */
   get template() {
-    return `systems/cthulhudeepgreen/templates/item/item-sheet.html`;
+    return `systems/cthulhudeepgreen/templates/item/item-sheet.hbs`;
   }
 
   /* -------------------------------------------- */

scss/components/_forms.scss

@@ -172,7 +172,7 @@
   }
 
   .insight {
-    color: #2ba624;
+    color: #3ec337;
     font-weight: bold;
 
     input[type="radio"]:checked {

scss/cthulhudeepgreen.scss

@@ -12,6 +12,7 @@
 @import "global/grid";
 @import "global/flex";
 @import "global/components";
+@import "global/chat";
 
 /* Styles limited to cthulhudeepgreen sheets */
 .cthulhudeepgreen {

scss/global/_components.scss

@@ -54,7 +54,7 @@
 .chat-message-exposure {
   background: none;
   background-color: #fff8e6;
-  border: 2px #e0a400 solid;
+  border: 2px #bd40c7 solid;
 }
 
 .exposure-panel {
@@ -75,15 +75,15 @@
 
     .name {
       padding: 0 10px 0 10px;
-      color: #eb7602;
+      color: #bd40c7;
       font-size: 2em;
       align-self: center;
       margin: 0;
     }
 
     .name-with {
       padding: 0 10px 0 10px;
-      color: #eb7602;
+      color: #bd40c7;
       font-size: 1.75em;
       align-self: center;
       margin: 0;
@@ -107,13 +107,7 @@
       aspect-ratio: 1 / 1;
 
       --filled-ratio: calc(var(--filled) / var(--areas) * 1turn);
-      background: conic-gradient(
-        #eb7602 var(--filled-ratio),
-        rgb(191 191 191) var(--filled-ratio) 0.4turn,
-        rgb(175 175 175) var(--filled-ratio) 0.7turn,
-        rgb(144 144 144) var(--filled-ratio) 0.9turn,
-        rgb(128 128 128) var(--filled-ratio) 1turn
-      );
+      background: conic-gradient(#bd40c7 var(--filled-ratio), rgb(175 175 175) var(--filled-ratio) 1turn);
       border-radius: 50%;
       border: rgb(97, 97, 97) var(--spoke-width) solid;
 

scss/global/_window.scss

@@ -14,17 +14,17 @@
 .stress-format {
   font-weight: bold;
   font-style: italic;
-  color: #A62424;
+  color: #ff2828;
 }
 
 .dark-die-format {
   font-weight: bold;
   font-style: italic;
-  color: #A62424;
+  color: #ad25b9;
 }
 
 .insight-format {
   font-weight: bold;
   font-style: italic;
-  color: #2ba624;
+  color: #3ec337;
 }

scss/global/chat.scss

@@ -0,0 +1,24 @@
+.roll-chat {
+  background-color: black;
+  background-image: url(../assets/ui/actor/actor-sheet-bg.webp);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: right;
+  color: white;
+  border: 1px solid #FFFFFF4D;
+  border-radius: 5px;
+
+  .message-header {
+    line-height: 20px;
+    color: rgb(190, 190, 190);
+  }
+
+  hr {
+    flex-grow: 0;
+    width: -webkit-fill-available;
+    padding: 0;
+    border: none;
+    border-top: 1px solid rgb(126, 126, 126);;
+    margin: 10px 0 10px 0;
+  }
+}

system.json

@@ -2,10 +2,10 @@
   "id": "cthulhudeepgreen",
   "title": "Cthulhu Deep Green",
   "description": "An Unofficial Cthulhu Deep Green system for Foundry VTT.",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "compatibility": {
     "minimum": 10,
-    "verified": "11.301",
+    "verified": "11.308",
     "maximum": 11
   },
   "authors": [

templates/actor/actor-character-sheet.html → templates/actor/actor-character-sheet.hbs

@@ -10,10 +10,12 @@ <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" place
         <h3 class="header-input"><input name="system.alias" type="text" value="{{system.alias}}" placeholder="{{localize "CDG.ActorAlias"}}"/></h3>
         <h3 class="header-input"><input name="system.occupation" type="text" value="{{system.occupation}}" placeholder="{{localize "CDG.ActorOccupation"}}"/></h3>
 
-        <div class="specialty grid-span-2">
-          <label for="specialty">{{localize "CDG.ActorSpecialty"}}</label>
-          <input name="system.specialty" id="specialty" type="text" value="{{system.specialty}}" placeholder="{{localize "CDG.ActorSpecialty"}}"/>
-        </div>
+        {{#if (getSetting "show_special")}}
+          <div class="specialty grid-span-2">
+            <label for="specialty">{{localize "CDG.ActorSpecialty"}}</label>
+            <input name="system.specialty" id="specialty" type="text" value="{{system.specialty}}" placeholder="{{localize "CDG.ActorSpecialty"}}"/>
+          </div>
+        {{/if}}
 
         <div class="insight resource-list">
           {{localize "CDG.ActorInsight"}}

templates/panel/exposure-panel.hbs

@@ -1,12 +1,14 @@
-<section class="exposure-panel {{#if isGM}}editable{{else}}disabled{{/if}}">
-    <div class="exposure">
-        <div class="clock on-click" style="--areas: {{max}}; --filled: {{currentExposure}}">
-            {{#each spokes}}
-                <div class="spoke" style="--index: {{ this }}"></div>
-            {{/each}}
+{{#if (getSetting "show_exposure")}}
+    <section class="exposure-panel {{#if isGM}}editable{{else}}disabled{{/if}}">
+        <div class="exposure">
+            <div class="clock on-click" style="--areas: {{max}}; --filled: {{currentExposure}}">
+                {{#each spokes}}
+                    <div class="spoke" style="--index: {{ this }}"></div>
+                {{/each}}
+            </div>
+            <div class="name flexcol">
+                <span class="on-click-clear">{{exposureTitle}}</span>
+            </div>
         </div>
-        <div class="name flexcol">
-            <span class="on-click-clear">{{exposureTitle}}</span>
-        </div>
-    </div>
-</section>
+    </section>
+{{/if}}