283/291 - add left panel (#293)

291 - add left panel

CHANGELOG.md

@@ -5,6 +5,8 @@
 ### **Features:**
 
 - [#211](https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/211) - Move macros to System macros folder in compendium.
+- [#283](https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/283) - Added new actor sheet with left hand Sidebar RFC
+- [#291](https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/291) - Moving Luck button from three dots to left hand panel
 
 ## Version 1.6.3 - 2025-12-12
 

css/deltagreen.css

@@ -90,6 +90,7 @@
 .old-paper-background {
   background: url("../assets/img/StainedPlainPaper10.webp") !important;
 }
+
 .default-parchment-background {
   background: url("/ui/parchment.jpg") repeat !important;
 }
@@ -209,7 +210,7 @@ input.breaking-point-hit {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-/* If the user wishes to sort skills by column, we need to 
+/* If the user wishes to sort skills by column, we need to
 explicitly define a number of rows, rather than columns. */
 .grid-13row {
   grid-template-rows: repeat(13, minmax(0, auto)) !important;
@@ -352,6 +353,7 @@ explicitly define a number of rows, rather than columns. */
   border-bottom: transparent !important;
   border-top: transparent !important;
 }
+
 .deltagreen .tabs {
   height: 1.5rem;
   line-height: 1.5rem;
@@ -367,7 +369,7 @@ explicitly define a number of rows, rather than columns. */
   vertical-align: middle !important;
   height: inherit;
   line-height: inherit;
-  padding-inline: 10px;
+  padding-inline: 5px;
   border-radius: 5px 5px 0px 0px;
   border-color: #000;
   border: gray;
@@ -1091,7 +1093,7 @@ input.item-sheet-short-input {
   padding-right: 5px;
 }
 
-/* 
+/*
   Tome Item Sheet
 */
 
@@ -1306,3 +1308,74 @@ body:not(.no-theme) #interface:not(.theme-light) #action-bar .slot.full:hover {
 .strike {
   text-decoration: line-through;
 }
+
+.actor-sheet-v2 {
+  .window-content {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    grid-template-rows: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  .left-bar {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    padding: 10px;
+  }
+
+  .window-content > :not(.left-bar) {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 0;
+    margin-right: 0;
+  }
+
+  .profile-img {
+    width: 100%;
+    height: auto;
+  }
+
+  .physical-stats-outer-grid-3col {
+    display: contents;
+  }
+
+  .physical-stats-outer-grid-3col,
+  .resources {
+    font-size: 12px;
+  }
+
+  .resource-inner-grid-3col input {
+    padding: 1px;
+  }
+
+  .tab.active {
+    padding-top: 20px;
+  }
+
+  .breaking-point {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+
+    input {
+      width: 40px;
+    }
+  }
+
+  .stats {
+    input {
+      margin: 1px;
+    }
+  }
+
+  .luck {
+    margin-top: 5px;
+  }
+
+  .horizontal-bar-section-divider.skills-header {
+    display: flex;
+  }
+}

module/deltagreen.js

@@ -20,6 +20,7 @@ import { handleInlineActions } from "./other/inline.js";
 import DGNPCSheet from "./sheets/npc-sheet.js";
 import DGUnnaturalSheet from "./sheets/unnatural-sheet.js";
 import DGVehicleSheet from "./sheets/vehicle-sheet.js";
+import DGAgentSheetV2 from "./sheets/agent-sheet-v2.js";
 import AgentData from "./data/actor/agent.js";
 import UnnaturalData from "./data/actor/unnatural.js";
 import NPCData from "./data/actor/npc.js";
@@ -85,6 +86,13 @@ Hooks.once("init", async () => {
     });
   });
 
+  Actors.registerSheet(DG.ID, DGAgentSheetV2, {
+    makeDefault: false,
+    themes: null,
+    label: `Agent Sheet V2`,
+    types: ["agent"],
+  });
+
   // Register item sheet.
   Items.registerSheet(DG.ID, DeltaGreenItemSheet, {
     makeDefault: true,

module/sheets/agent-sheet-v2.js

@@ -0,0 +1,32 @@
+import DGAgentSheet from "./agent-sheet.js";
+
+/** @extends {DGAgentSheet} */
+export default class DGAgentSheetV2 extends DGAgentSheet {
+  static DEFAULT_OPTIONS = /** @type {const} */ ({
+    classes: ["actor-sheet-v2"],
+    position: { width: 950, height: 665 },
+  });
+
+  /** @override */
+  static PARTS = /** @type {const} */ ({
+    leftBar: {
+      template: `${this.TEMPLATE_PATH}/parts/left-bar.html`,
+      templates: [`${this.TEMPLATE_PATH}/partials/sanity-partial.html`],
+    },
+    rightBar: {
+      template: `${this.TEMPLATE_PATH}/parts/right-bar.html`,
+      templates: [
+        `${this.TEMPLATE_PATH}/parts/skills-tab.html`,
+        `${this.TEMPLATE_PATH}/parts/physical-tab-v2.html`,
+        `${this.TEMPLATE_PATH}/parts/motivations-tab-v2.html`,
+        `${this.TEMPLATE_PATH}/parts/gear-tab.html`,
+        `${this.TEMPLATE_PATH}/parts/bio-tab-v2.html`,
+        `${this.TEMPLATE_PATH}/parts/bonds-tab.html`,
+        `${this.TEMPLATE_PATH}/parts/about-tab.html`,
+        `${this.TEMPLATE_PATH}/partials/custom-skills-partial.html`,
+        `${this.TEMPLATE_PATH}/partials/notes-partial.html`,
+      ],
+    },
+    tabs: this.BASE_PARTS.tabs,
+  });
+}

templates/actor/parts/bio-tab-v2.html

@@ -0,0 +1,91 @@
+{{!-- djlint:off H020 --}}
+
+{{!-- PERSONAL (Biography) Tab --}}
+<div class="tab bio {{tabs.bio.cssClass}}"
+     data-group="primary"
+     data-tab="bio">
+    <div class="horizontal-bar-section-divider">
+        <span>{{localize "DG.Sheet.BlockHeaders.PersonalInfoCV"}}</span>
+    </div>
+    <div class="bio-grid-5col bio-grid-top-border">
+        <span>{{localize 'DG.CV.Sex'}}</span>
+        <input class="fill-remaining-space"
+               type="text"
+               name="system.biography.sex"
+               value="{{actor.system.biography.sex}}"
+               data-dtype="String"
+               placeholder="{{localize 'DG.CV.SexPlaceholder'}}" />
+        <span></span>
+    </div>
+
+    <div class="bio-grid-2col">
+
+        <span>{{localize 'DG.CV.Employer'}}</span>
+        <input class="fill-remaining-space"
+               type="text"
+               name="system.biography.employer"
+               value="{{actor.system.biography.employer}}"
+               data-dtype="String"
+               placeholder="{{localize 'DG.CV.EmployerPlaceholder'}}" />
+
+        <span>{{localize 'DG.CV.Nationality'}}</span>
+        <input class="fill-remaining-space"
+               type="text"
+               name="system.biography.nationality"
+               value="{{actor.system.biography.nationality}}"
+               data-dtype="String"
+               placeholder="{{localize 'DG.CV.NationalityPlaceholder'}}" />
+
+    </div>
+
+    <div class="bio-grid-2col">
+        <span>{{localize 'DG.CV.Education'}}</span>
+        <input class="fill-remaining-space"
+               type="text"
+               name="system.biography.education"
+               value="{{actor.system.biography.education}}"
+               data-dtype="String"
+               placeholder="{{localize 'DG.CV.EducationPlaceholder'}}" />
+    </div>
+
+    {{#if (showImpossibleLandscapesContent) }}
+
+        <div class="yellow-king yellow-king-grid-9col">
+            <span class="yellow-king yellow-king-rotate2">{{localize 'DG.ImpossibleLanscapes.IHaveSeenThe'}}</span>
+            <span></span>
+            <span class="yellow-king yellow-sign">{{localize 'DG.ImpossibleLanscapes.YellowSign'}}</span>
+            <input type="checkbox"
+                   name="system.corruption.haveSeenTheYellowSign"
+                   {{checked actor.system.corruption.haveSeenTheYellowSign}}
+                   data-dtype="Boolean" />
+            <span></span>
+            <span class="yellow-king yellow-king-rotate1">{{localize 'DG.ImpossibleLanscapes.CorruptionFirstHalf'}}</span>
+            <span class="yellow-king yellow-king-rotate4">{{localize 'DG.ImpossibleLanscapes.CorruptionSecondHalf'}}</span>
+            <span></span>
+            <input class="yellow-king"
+                   type="number"
+                   placeholder="0"
+                   name="system.corruption.value"
+                   value="{{actor.system.corruption.value}}" />
+        </div>
+
+        <div class="yellow-king yellow-king-grid-5col">
+            <span class="yellow-king-label">{{localize 'DG.ImpossibleLanscapes.Gift'}}</span>
+            <input class="fill-remaining-space"
+                   type="text"
+                   name="system.corruption.gift"
+                   value="{{actor.system.corruption.gift}}"
+                   data-dtype="String" />
+            <span></span>
+            <span class="yellow-king-label">{{localize 'DG.ImpossibleLanscapes.Insight'}}</span>
+            <input class="fill-remaining-space"
+                   type="text"
+                   name="system.corruption.insight"
+                   value="{{actor.system.corruption.insight}}"
+                   data-dtype="String" />
+        </div>
+
+    {{/if}}
+
+    {{> "systems/deltagreen/templates/actor/partials/notes-partial.html"}}
+</div>

templates/actor/parts/left-bar.html

@@ -0,0 +1,128 @@
+<div class="left-bar">
+    <div class="header-top flexcol">
+        <img class="profile-img"
+             src="{{actor.img}}"
+             data-action="editImage"
+             data-edit="img"
+             data-tooltip="{{actor.name}}"
+             height="150"
+             width="100" />
+        <div>
+            <input class="fill-remaining-space"
+                   name="name"
+                   type="text"
+                   value="{{actor.name}}"
+                   data-tooltip="{{localize 'DG.AgentNameFieldTooltip' }}" />
+            <input class="fill-remaining-space"
+                   name="system.biography.profession"
+                   type="text"
+                   value="{{actor.system.biography.profession}}"
+                   placeholder="{{subnameInfoPlaceholder}}" />
+            <input class="fill-remaining-space"
+                   type="text"
+                   name="system.biography.age"
+                   value="{{actor.system.biography.age}}"
+                   data-dtype="String"
+                   placeholder="{{localize 'DG.CV.AgeAndDoBPlaceholder'}}" />
+        </div>
+    </div>
+
+    <div class="grid grid-3col stats">
+        {{#each actor.system.statistics as |statistic key| }}
+        <div class="flex-group-center flex-mid-border">
+            <div>
+                <div class="physical-stats-outer-grid-3col">
+                    <label class="rollable resource-label"
+                           data-action="roll"
+                           data-rolltype="stat"
+                           data-key="{{key}}"
+                           data-tooltip="{{localize (concat 'DG.Attributes.Tooltip.' key)}}"
+                           for="system.statistics.{{key}}.value">
+                        {{localize (concat 'DG.Attributes.' key)}}
+                    </label>
+                    <input class="centered"
+                           type="text"
+                           name="system.statistics.{{key}}.value"
+                           value="{{statistic.value}}"
+                           data-dtype="Number" />
+                </div>
+                <div>
+                    <input type="text"
+                           name="system.statistics.{{key}}.distinguishing_feature"
+                           value="{{statistic.distinguishing_feature}}"
+                           data-dtype="String"
+                           title="{{localize 'DG.Tooltip.DistinguishingFeature'}}" />
+                </div>
+            </div>
+        </div>
+        {{/each}}
+    </div>
+
+    <br/>
+
+    <div class="resources grid grid-3col">
+        {{!-- HP --}}
+        <div class="resource-outer-grid-1col">
+            <label for="actor.system.health.value"
+                   class="resource-label"
+                   data-tooltip="{{localize 'DG.Attributes.Tooltip.HP'}}">
+                {{localize 'DG.Attributes.HP' }} (<span>{{actor.system.health.protection}} <i class="fas fa-shield-alt"></i></span>)
+            </label>
+            <div class="resource-inner-grid-3col">
+                <input class="centered"
+                       type="text"
+                       name="system.health.value"
+                       value="{{actor.system.health.value}}"
+                       data-dtype="Number" />
+                <span>/</span>
+                <div class="max-resource-value"
+                     data-tooltip="{{localize 'DG.Tooltip.MaximumHP'}}">
+                    <div>{{numberFormat actor.system.health.max decimals=0 sign=false}}</div>
+                </div>
+            </div>
+        </div>
+        {{#if (ne actor.type "vehicle") }}
+        {{!-- WP --}}
+        <div class="resource-outer-grid-1col">
+            <label for="system.wp.value"
+                   class="resource-label"
+                   data-tooltip="{{localize 'DG.Attributes.Tooltip.WP'}}">
+                {{localize 'DG.Attributes.WP' }}
+            </label>
+            <div class="resource-inner-grid-3col">
+                <input class="centered"
+                       type="text"
+                       name="system.wp.value"
+                       value="{{actor.system.wp.value}}"
+                       data-dtype="Number" />
+                <span>/</span>
+                <div class="max-resource-value"
+                     data-tooltip="{{localize 'DG.Tooltip.MaximumWP'}}">
+                    <div>{{numberFormat actor.system.wp.max decimals=0 sign=false}}</div>
+                </div>
+            </div>
+        </div>
+        {{!-- Sanity --}}
+        {{> "systems/deltagreen/templates/actor/partials/sanity-partial.html" }}
+        {{/if}}
+    </div>
+
+    <br/>
+
+    <div class="breaking-point">
+        <label class="bolded-label">{{localize 'DG.Mental.BreakingPoint'}}</label>
+        <input class="centered"
+               title="{{localize 'DG.Tooltip.BreakPoint'}}"
+               type="text"
+               name="system.sanity.currentBreakingPoint"
+               value="{{actor.system.sanity.currentBreakingPoint}}"
+               data-dtype="Number" />
+        <a class="fa fa-refresh" data-action="resetBreakingPoint" title="Reset breaking point to be current SAN - WP."></a>
+    </div>
+
+    <div class="luck">
+        <label class="bolded-label">{{localize 'DG.RollLuck'}}</label>
+        <a class="fas fa-dice" data-action="rollLuck"></a>
+    </div>
+
+</div>

templates/actor/parts/motivations-tab-v2.html

@@ -0,0 +1,122 @@
+{{!-- Psychological Tab (formerly 'Mental', formerly 'Motivations') --}}
+<div class="tab motivations {{tabs.motivations.cssClass}}"
+     data-group="primary"
+     data-tab="motivations">
+    <div class="horizontal-bar-section-divider">
+        <span>{{localize "DG.Sheet.BlockHeaders.BreakingPointAndAdaptations"}}</span>
+    </div>
+    <div>
+        <div>
+            <label class="bolded-label">{{localize 'DG.Mental.SanityLossIncidentsLabel'}}</label>
+            <div class="adaptation-grid-5col">
+
+                <label>{{localize 'DG.Mental.Violence'}}</label>
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.violence.incident1"
+                       {{checked actor.system.sanity.adaptations.violence.incident1}}
+                       data-dtype="Boolean" />
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.violence.incident2"
+                       {{checked actor.system.sanity.adaptations.violence.incident2}}
+                       data-dtype="Boolean" />
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.violence.incident3"
+                       {{checked actor.system.sanity.adaptations.violence.incident3}}
+                       data-dtype="Boolean" />
+
+                <label class="adapted-label"
+                       data-tooltip="{{localize 'DG.Tooltip.AdaptedToViolence'}}">
+                    {{#if actor.system.sanity.adaptations.violence.isAdapted }}
+                        {{localize 'DG.Mental.AdaptedToViolence'}}
+                    {{/if}}
+                </label>
+
+                <label>{{localize 'DG.Mental.Helplessness'}}</label>
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.helplessness.incident1"
+                       {{checked actor.system.sanity.adaptations.helplessness.incident1}}
+                       data-dtype="Boolean" />
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.helplessness.incident2"
+                       {{checked actor.system.sanity.adaptations.helplessness.incident2}}
+                       data-dtype="Boolean" />
+                <input class="labeled-resource-checkbox"
+                       type="checkbox"
+                       name="system.sanity.adaptations.helplessness.incident3"
+                       {{checked actor.system.sanity.adaptations.helplessness.incident3}}
+                       data-dtype="Boolean" />
+
+                <label class="adapted-label"
+                       data-tooltip="{{localize 'DG.Tooltip.AdaptedToHelplessness'}}">
+                    {{#if actor.system.sanity.adaptations.helplessness.isAdapted }}
+                        {{localize 'DG.Mental.AdaptedToHelplessness'}}
+                    {{/if}}
+                </label>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="horizontal-bar-section-divider">
+        <span>{{localize "DG.Sheet.BlockHeaders.MotivationsAndDisorders"}}</span>
+    </div>
+
+    <div>
+        <ol class="items-list">
+
+            <li class="item flexrow item-header">
+                <div class="item-name">{{localize 'DG.Mental.Motivations'}}</div>
+                <div class="item-name">{{localize 'DG.Mental.Disorders'}}</div>
+                <div class="item-controls">
+                    <a class="item-control action-pill"
+                       data-action="itemAction"
+                       data-action-type="create"
+                       data-item-type="motivation"
+                       title="Create item">
+                        <i class="fas fa-plus"></i>
+                        {{localize 'DG.Generic.AddButtonLabel'}}
+                    </a>
+                </div>
+            </li>
+
+            {{#each actor.items as |item id| }}
+                {{#if_eq item.type 'motivation' }}
+
+                    <li class="item flexrow" data-item-id="{{item.id}}">
+                        <span class="item-name"
+                              {{#if item.system.crossedOut }}
+                              style="text-decoration: line-through"
+                              {{/if }}>
+                            {{item.name}}
+                        </span>
+
+                        {{#if item.system.crossedOut }}
+                            <span class="item-name">{{item.system.disorder}}</span>
+                        {{/if}}
+
+                        <div class="item-controls">
+                            <a class="item-control"
+                               data-action="itemAction"
+                               data-action-type="edit"
+                               title="Edit Item">
+                                <i class="fas fa-edit"></i>
+                            </a>
+                            <a class="item-control"
+                               data-action="itemAction"
+                               data-action-type="delete"
+                               title="Delete Item">
+                                <i class="fas fa-trash"></i>
+                            </a>
+                        </div>
+                    </li>
+
+                {{/if_eq}}
+            {{/each}}
+        </ol>
+    </div>
+</div>

templates/actor/parts/physical-tab-v2.html

@@ -0,0 +1,59 @@
+{{!-- Physical Statistics like STR, CON, etc. --}}
+<div class="tab physical {{tabs.physical.cssClass}}"
+     data-group="primary"
+     data-tab="physical">
+
+    <div class="horizontal-bar-section-divider">
+        <span>{{localize "DG.Sheet.BlockHeaders.Injuries"}}</span>
+    </div>
+
+    <div>
+        <div class="first-aid-received-section resource">
+            <label class="bolded-label first-aid-label"
+                   title="{{localize 'DG.Tooltip.FirstAidAttempted'}}">
+                {{localize 'DG.Physical.FirstAidLabel'}}
+            </label>
+            <input class="labeled-resource-checkbox"
+                   type="checkbox"
+                   name="system.physical.firstAidAttempted"
+                   {{checked actor.system.physical.firstAidAttempted}}
+                   data-dtype="Boolean"
+                   title="{{localize 'DG.Tooltip.FirstAidAttempted'}}" />
+        </div>
+        <div class="exhausted-section resource">
+
+            <label class="bolded-label exhaustion-label"
+                   title="{{localize 'DG.Tooltip.Exhaustion'}}">
+                {{localize 'DG.Physical.Exhausted'}}
+            </label>
+            <input class="labeled-resource-checkbox"
+                   type="checkbox"
+                   name="system.physical.exhausted"
+                   {{checked actor.system.physical.exhausted}}
+                   data-dtype="Boolean"
+                   title="{{localize 'DG.Tooltip.Exhaustion'}}" />
+
+            {{#if actor.system.physical.exhausted }}
+
+                <label class="bolded-label exhaustion-label"
+                       title="{{localize 'DG.Tooltip.Exhaustion'}}">
+                    {{localize 'DG.Physical.ExhaustionPenalty'}}
+                </label>
+                <input type="number"
+                       name="system.physical.exhaustedPenalty"
+                       value="{{actor.system.physical.exhaustedPenalty}}"
+                       data-dtype="Number"
+                       title="{{localize 'DG.Tooltip.Exhaustion'}}"
+                       min="-99"
+                       max="0" />
+
+            {{/if}}
+        </div>
+        <div>
+            <label class="bolded-label">{{localize 'DG.Physical.Wounds'}}</label>
+
+            <!-- This seems to save values, but not retrieve them... -->
+            <textarea class="wounds" name="system.physical.wounds">{{actor.system.physical.wounds}}</textarea>
+        </div>
+    </div>
+</div>

templates/actor/parts/right-bar.html

@@ -0,0 +1,9 @@
+<div class="right-bar">
+    {{> "systems/deltagreen/templates/actor/parts/skills-tab.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/physical-tab-v2.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/motivations-tab-v2.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/gear-tab.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/bio-tab-v2.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/bonds-tab.html" }}
+    {{> "systems/deltagreen/templates/actor/parts/about-tab.html" }}
+</div>