Merge branch '014_track_talents' into 'master'

Add Talents to Char Sheet

See merge request dungeonslayers/ds4!25

src/ds4.scss

@@ -16,6 +16,7 @@
     @import "scss/components/basic_property";
     @import "scss/components/tabs";
     @import "scss/components/items";
+    @import "scss/components/talents";
     @import "scss/components/description";
     @import "scss/components/character_values";
     @import "scss/components/attributes_traits";

src/lang/en.json

@@ -1,12 +1,12 @@
 {
     "DS4.UserInteractionAddItem": "Add item",
     "DS4.NotOwned": "No owner",
-    "DS4.Description": "Description",
+    "DS4.HeadingDescription": "Description",
-    "DS4.DescriptionAbbr": "Desc",
+    "DS4.HeadingDetails": "Details",
-    "DS4.Details": "Details",
+    "DS4.HeadingEffects": "Effects",
-    "DS4.Effects": "Effects",
+    "DS4.HeadingItems": "Items",
-    "DS4.Profile": "Profile",
+    "DS4.HeadingProfile": "Profile",
-    "DS4.Items": "Items",
+    "DS4.HeadingTalents": "Talents & Abilities",
     "DS4.AttackType": "Attack Type",
     "DS4.AttackTypeAbbr": "AT",
     "DS4.WeaponBonus": "Weapon Bonus",
@@ -35,6 +35,7 @@
     "DS4.ItemTypeShield": "Shield",
     "DS4.ItemTypeTrinket": "Trinket",
     "DS4.ItemTypeEquipment": "Equipment",
+    "DS4.ItemTypeTalent": "Talent",
     "DS4.ArmorType": "Armor Type",
     "DS4.ArmorTypeAbbr": "AT",
     "DS4.ArmorMaterialType": "Material Type",
@@ -85,6 +86,11 @@
     "DS4.ProgressionExperiencePoints": "Experience Points",
     "DS4.ProgressionTalentPoints": "Talent Points",
     "DS4.ProgressionProgressPoints": "Progress Points",
+    "DS4.TalentRank": "Rank",
+    "DS4.TalentRankBase": "Acquired Ranks",
+    "DS4.TalentRankMax": "Maximum Ranks",
+    "DS4.TalentRankMod": "Additional Ranks",
+    "DS4.TalentRankTotal": "Total Ranks",
     "DS4.LanguageLanguages": "Languages",
     "DS4.LanguageAlphabets": "Alphabets",
     "DS4.ProfileGender": "Gender",

src/module/config.ts

@@ -48,6 +48,7 @@ export const DS4 = {
         shield: "DS4.ItemTypeShield",
         trinket: "DS4.ItemTypeTrinket",
         equipment: "DS4.ItemTypeEquipment",
+        talent: "DS4.ItemTypeTalent",
     },
 
     /**

src/module/ds4.ts

@@ -37,6 +37,9 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/effects.hbs",
         "systems/ds4/templates/item/partials/body.hbs",
         "systems/ds4/templates/actor/partials/items-overview.hbs",
+        "systems/ds4/templates/actor/partials/talents-overview.hbs",
+        "systems/ds4/templates/actor/partials/overview-add-button.hbs",
+        "systems/ds4/templates/actor/partials/overview-control-buttons.hbs",
         "systems/ds4/templates/actor/partials/attributes-traits.hbs",
         "systems/ds4/templates/actor/partials/combat-values.hbs",
         "systems/ds4/templates/actor/partials/profile.hbs",

src/module/item/item-data.ts

@@ -1,5 +1,6 @@
-// TODO: Actually add a type for data
+import { ModifiableData } from "../actor/actor-data";
-export type DS4ItemDataType = DS4Weapon | DS4Armor | DS4Shield | DS4Trinket | DS4Equipment;
+
+export type DS4ItemDataType = DS4Weapon | DS4Armor | DS4Shield | DS4Trinket | DS4Equipment | DS4Talent;
 
 // types
 
@@ -14,6 +15,14 @@ interface DS4Armor extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable, DS4It
     armorType: "body" | "helmet" | "vambrace" | "greaves" | "vambraceGreaves";
 }
 
+export interface DS4Talent extends DS4ItemBase {
+    rank: DS4TalentRank;
+}
+
+interface DS4TalentRank extends ModifiableData<number> {
+    max: number;
+}
+
 interface DS4Shield extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable, DS4ItemProtective {}
 interface DS4Trinket extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable {}
 interface DS4Equipment extends DS4ItemBase, DS4ItemPhysical {}
@@ -30,6 +39,10 @@ interface DS4ItemPhysical {
     storageLocation: string;
 }
 
+export function isDS4ItemDataTypePhysical(input: DS4ItemDataType): boolean {
+    return "quantity" in input && "price" in input && "availability" in input && "storageLocation" in input;
+}
+
 interface DS4ItemEquipable {
     equipped: boolean;
 }

src/module/item/item-sheet.ts

@@ -1,5 +1,5 @@
 import { DS4Item } from "./item";
-import { DS4ItemDataType } from "./item-data";
+import { DS4ItemDataType, isDS4ItemDataTypePhysical } from "./item-data";
 
 /**
  * Extend the basic ItemSheet with some very simple modifications
@@ -26,7 +26,13 @@ export class DS4ItemSheet extends ItemSheet<DS4ItemDataType, DS4Item> {
 
     /** @override */
     getData(): ItemSheetData<DS4ItemDataType, DS4Item> {
-        const data = { ...super.getData(), config: CONFIG.DS4, isOwned: this.item.isOwned, actor: this.item.actor };
+        const data = {
+            ...super.getData(),
+            config: CONFIG.DS4,
+            isOwned: this.item.isOwned,
+            actor: this.item.actor,
+            isPhysical: isDS4ItemDataTypePhysical(this.item.data.data),
+        };
         console.log(data);
         return data;
     }

src/module/item/item.ts

@@ -1,6 +1,6 @@
 import { DS4Actor } from "../actor/actor";
 import { DS4ActorDataType } from "../actor/actor-data";
-import { DS4ItemDataType } from "./item-data";
+import { DS4ItemDataType, DS4Talent } from "./item-data";
 
 /**
  * Extend the basic Item with some very simple modifications.
@@ -12,10 +12,18 @@ export class DS4Item extends Item<DS4ItemDataType, DS4ActorDataType, DS4Actor> {
      */
     prepareData(): void {
         super.prepareData();
+        this.prepareDerivedData();
 
         // Get the Item's data
         // const itemData = this.data;
         // const actorData = this.actor ? this.actor.data : {};
         // const data = itemData.data;
     }
+
+    prepareDerivedData(): void {
+        if (this.type === "talent") {
+            const data = this.data.data as DS4Talent;
+            data.rank.total = data.rank.base + data.rank.mod;
+        }
+    }
 }

src/scss/components/_basic_property.scss

@@ -2,18 +2,24 @@
     flex: 0 0 100%;
     gap: 2px;
     .basic-property {
+        display: grid;
+        align-content: end;
         padding-left: 1px;
         padding-right: 1px;
-        .basic-property-label {
+
+        & > label {
             font-weight: bold;
         }
 
-        .basic-property-select {
+        & > select {
             display: block;
             width: 100%;
         }
+
         .input-divider {
             text-align: center;
         }
+
+        @include mark-invalid-or-disabled-input;
     }
 }

src/scss/components/_description.scss

@@ -9,7 +9,7 @@
     .side-property {
         margin: 2px 0;
         display: grid;
-        grid-template-columns: 40% auto;
+        grid-template-columns: minmax(30%, auto) auto;
         justify-content: left;
 
         label {
@@ -23,6 +23,8 @@
             width: calc(100% - 2px);
         }
 
+        @include mark-invalid-or-disabled-input;
+
         input[type="checkbox"] {
             width: auto;
             height: 100%;

src/scss/components/_items.scss

@@ -31,6 +31,7 @@
         input {
             border: 0;
             padding: 0;
+            background-color: transparent;
         }
 
         input[type="checkbox"] {
@@ -38,6 +39,8 @@
             height: 100%;
             margin: 0px;
         }
+
+        @include mark-invalid-or-disabled-input;
     }
 
     .item-name {
@@ -54,9 +57,6 @@
         width: 2.5em;
         padding: 0;
     }
-    .item-num-val:invalid {
-        background-color: color.mix(lightcoral, $c-light-grey, 25%);
-    }
 
     .item-description {
         font-size: 75%;

src/scss/components/_talents.scss

@@ -0,0 +1,3 @@
+.talent-ranks-equation {
+    text-align: center;
+}

src/scss/utils/_colors.scss

@@ -2,3 +2,4 @@ $c-white: #fff;
 $c-black: #000;
 $c-light-grey: #777;
 $c-border-groove: #eeede0;
+$c-invalid-input: rgba(lightcoral, 50%);

src/scss/utils/_mixins.scss

@@ -19,3 +19,12 @@
     display: grid;
     place-items: center;
 }
+
+@mixin mark-invalid-or-disabled-input {
+    input:invalid {
+        background-color: $c-invalid-input;
+    }
+    input:disabled {
+        background-color: transparent;
+    }
+}

src/template.json

@@ -116,7 +116,7 @@
         }
     },
     "Item": {
-        "types": ["weapon", "armor", "shield", "trinket", "equipment"],
+        "types": ["weapon", "armor", "shield", "trinket", "equipment", "talent"],
         "templates": {
             "base": {
                 "description": ""
@@ -153,6 +153,14 @@
         },
         "equipment": {
             "templates": ["base", "physical"]
+        },
+        "talent": {
+            "templates": ["base"],
+            "rank": {
+                "base": 0,
+                "max": 0,
+                "mod": 0
+            }
         }
     }
 }

src/templates/actor/actor-sheet.hbs

@@ -58,9 +58,10 @@
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="sheet-tabs tabs" data-group="primary">
-        <a class="item" data-tab="description">{{localize "DS4.Description"}}</a>
+        <a class="item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
-        <a class="item" data-tab="profile">{{localize "DS4.Profile"}}</a>
+        <a class="item" data-tab="talents">{{localize 'DS4.HeadingTalents'}}</a>
-        <a class="item" data-tab="items">{{localize "DS4.Items"}}</a>
+        <a class="item" data-tab="profile">{{localize "DS4.HeadingProfile"}}</a>
+        <a class="item" data-tab="items">{{localize 'DS4.HeadingItems'}}</a>
     </nav>
 
     {{!-- Sheet Body --}}
@@ -73,6 +74,9 @@
         {{! Profile Tab --}}
         {{> systems/ds4/templates/actor/partials/profile.hbs}}
 
+        {{!-- Talents Tab --}}
+        {{> systems/ds4/templates/actor/partials/talents-overview.hbs}}
+
         {{!-- Items Tab --}}
         {{> systems/ds4/templates/actor/partials/items-overview.hbs}}
     </section>

src/templates/actor/partials/items-overview.hbs

@@ -5,29 +5,6 @@
 {{!-- INLINE PARTIAL DEFINITIONS --}}
 {{!-- ======================================================================== --}}
 
-{{!--
-!-- Render an "add" button for a given data type.
-!--
-!-- @param datType: hand over the dataType to the partial as hash parameter
---}}
-{{#*inline "addItemButton"}}
-    <div class="item-controls">
-        <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
-            <i class="fas fa-plus"></i>
-            {{localize 'DS4.UserInteractionAddItem'}}</a>
-    </div>
-{{/inline}}
-{{!--
-!-- Render a group of an "edit" and a "delete" button for the current item.
-!-- The current item is defined by the data-item-id HTML property of the parent li element.
---}}
-{{#*inline "itemControlButtons"}}
-    <div class="item-controls">
-        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
-        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
-    </div>
-{{/inline}}
-
 
 {{!--
 !-- Render a header row for a given data type.
@@ -55,9 +32,9 @@
         {{!-- item type specifics --}}
         {{> @partial-block }}
         {{!-- description --}}
-        <div class="flex4">{{localize 'DS4.Description'}}</div>
+        <div class="flex4">{{localize 'DS4.HeadingDescription'}}</div>
         {{!-- add button --}}
-        {{> addItemButton dataType=dataType }}
+        {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType=dataType }}
     </li>
 {{/inline}}
 
@@ -94,7 +71,7 @@
         {{!-- description --}}
         <div class="flex4 item-description">{{{item.data.data.description}}}</div>
         {{!-- control buttons --}}
-        {{> itemControlButtons}}
+        {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
     </li>
 {{/inline}}
 

src/templates/actor/partials/overview-add-button.hbs

@@ -0,0 +1,11 @@
+{{!
+!-- Render an "add" button for adding an item of given data type.
+!--
+!-- @param datType: hand over the dataType to the partial as hash parameter
+}}
+<div class="item-controls">
+    <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
+        <i class="fas fa-plus"></i>
+        {{localize "DS4.UserInteractionAddItem"}}
+    </a>
+</div>

src/templates/actor/partials/overview-control-buttons.hbs

@@ -0,0 +1,8 @@
+{{!--
+!-- Render a group of an "edit" and a "delete" button for the current item.
+!-- The current item is defined by the data-item-id HTML property of the parent li element.
+--}}
+<div class="item-controls">
+    <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
+    <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+</div>

src/templates/actor/partials/talents-overview.hbs

@@ -0,0 +1,83 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+{{!-- TODO: remove duplicate add and delete button definition --}}
+
+
+{{!-- 
+!-- Render an input element for a rank value property of an item.
+!--
+!-- @param item: the item
+!-- @param property: the key of the property in item.data.data (if 'base', the max value is set automatically)
+!-- @param disabled: if given, is placed plainly into the input as HTML property;
+!--     meant to be set to "disabled" to disable the input element
+--}}
+{{#*inline "talentRankValue"}}
+    <input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1"
+        {{#if (eq property 'base') }}max="{{item.data.data.rank.max}}"{{/if}}
+        {{disabled}}
+        data-property="data.rank.{{property}}" value="{{lookup item.data.data.rank property}}"
+        title="{{localize localizeString}}" />
+{{/inline}}
+
+
+{{!--
+!-- Render a talent list row from a given item.
+!-- It is a flexbox with a child for each item value of interest.
+!-- The partial assumes a variable item to be given in the context.
+!--
+!-- @param item: hand over the item to the partial as hash parameter
+!-- @param partial-block: hand over custom children of the flexbox in the partial block.
+--}}
+{{#*inline "talentListEntry"}}
+    <li class="item flexrow" data-item-id="{{item._id}}">
+        {{!-- image --}}
+        <div class="flex05 item-image">
+            <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+        </div>
+        {{!-- name --}}
+        <input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+            data-property="name" title="{{localize 'DS4.ItemName'}}">
+        <div class="flex3 flexrow talent-ranks-equation">
+            {{!-- acquired rank --}}
+            {{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
+            <span> ( of </span>
+            {{!-- maximum acquirable rank --}}
+            {{> talentRankValue item=item property='max' localizeString='DS4.TalentRankMax'}}
+            <span>) + </span>
+            {{!-- additional ranks --}}
+            {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
+            <span> = </span>
+            {{!-- derived total rank --}}
+            {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
+        </div>
+        {{!-- description --}}
+        <div class="flex4 item-description">{{{item.data.data.description}}}</div>
+        {{!-- control buttons --}}
+        {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
+    </li>
+{{/inline}}
+
+
+{{!-- ======================================================================== --}}
+
+
+<div class="tab items" data-group="primary" data-tab="talents">
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            {{!-- image --}}
+            <div class="flex05 item-image"></div>
+            {{!-- name --}}
+            <div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
+            {{!-- rank info --}}
+            <div class="flex3">{{localize 'DS4.TalentRank'}}</div>
+            {{!-- description --}}
+            <div class="flex4">{{localize 'DS4.HeadingDescription'}}</div>
+            {{!-- add button --}}
+            {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='talent' }}
+        </li>
+        {{#each itemsByType.talent as |item id|}}
+            {{> talentListEntry item=item}}
+        {{/each}}
+    </ol>
+</div>

src/templates/item/armor-sheet.hbs

@@ -6,8 +6,8 @@
             <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
             <div class="grid grid-3col basic-properties">
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.ArmorType"}}</label>
+                    <label>{{localize "DS4.ArmorType"}}</label>
-                    <select class="basic-property-select" name="data.armorType" data-type="String">
+                    <select name="data.armorType" data-type="String">
                         {{#select data.armorType}}
                         {{#each config.armorTypes as |value key|}}
                         <option value="{{key}}">{{value}}</option>
@@ -16,8 +16,8 @@
                     </select>
                 </div>
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.ArmorMaterialType"}}</label>
+                    <label>{{localize "DS4.ArmorMaterialType"}}</label>
-                    <select class="basic-property-select" name="data.armorMaterialType" data-type="String">
+                    <select name="data.armorMaterialType" data-type="String">
                         {{#select data.armorMaterialType}}
                         {{#each config.armorMaterialTypes as |value key|}}
                         <option value="{{key}}">{{value}}</option>
@@ -26,8 +26,8 @@
                     </select>
                 </div>
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.ArmorValue"}}</label>
+                    <label>{{localize "DS4.ArmorValue"}}</label>
-                    <input class="basic-property-input" type="text" name="data.armorValue" value="{{data.armorValue}}"
+                    <input type="text" name="data.armorValue" value="{{data.armorValue}}"
                         placeholder="0" data-dtype="Number" />
                 </div>
             </div>

src/templates/item/partials/body.hbs

@@ -2,9 +2,11 @@
 
 {{!-- Sheet Tab Navigation --}}
 <nav class="sheet-tabs tabs" data-group="primary">
-    <a class="item" data-tab="description">{{localize "DS4.Description"}}</a>
+    <a class="item" data-tab="description">{{localize "DS4.HeadingDescription"}}</a>
-    <a class="item" data-tab="effects">{{localize "DS4.Effects"}}</a>
+    <a class="item" data-tab="effects">{{localize "DS4.HeadingEffects"}}</a>
-    <a class="item" data-tab="details">{{localize "DS4.Details"}}</a>
+    {{#if isPhysical}}
+    <a class="item" data-tab="details">{{localize "DS4.HeadingDetails"}}</a>
+    {{/if}}
 </nav>
 
 {{!-- Sheet Body --}}
@@ -13,10 +15,12 @@
     {{!-- Description Tab --}}
     {{> systems/ds4/templates/item/partials/description.hbs}}
 
-    {{!-- Details Tab --}}
-    {{> systems/ds4/templates/item/partials/details.hbs}}
-
     {{!-- Effects Tab --}}
     {{> systems/ds4/templates/item/partials/effects.hbs}}
     
+    {{#if isPhysical}}
+    {{!-- Details Tab --}}
+    {{> systems/ds4/templates/item/partials/details.hbs}}
+    {{/if}}
+    
 </section>

src/templates/item/partials/description.hbs

@@ -11,6 +11,7 @@
             <a class="entity-link" draggable="true" data-entity="Actor" data-id="{{actor._id}}"><i
                     class="fas fa-user"></i>{{actor.name}}</a>
         </div>
+        {{#if isPhysical}}
             <div class="side-property">
                 <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
                 <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
@@ -19,11 +20,12 @@
                 <label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>
                 <input type="text" data-dtype="String" name="data.storageLocation" value="{{data.storageLocation}}" />
             </div>
+        {{/if}}
         {{else}}
-        {{localize "DS4.NotOwned"}}
+        <span>{{localize "DS4.NotOwned"}}</span>
         {{/if}}
     </div>
-    <div class="description">
+    <div class="description" title="{{localize 'DS4.HeadingDescription'}}">
         {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
     </div>
 </div>

src/templates/item/shield-sheet.hbs

@@ -6,8 +6,8 @@
             <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
             <div class="grid grid-1col basic-properties">
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.ArmorValue"}}</label>
+                    <label>{{localize "DS4.ArmorValue"}}</label>
-                    <input class="basic-property-input" type="text" name="data.armorValue" value="{{data.armorValue}}"
+                    <input type="text" name="data.armorValue" value="{{data.armorValue}}"
                         placeholder="0" data-dtype="Number" />
                 </div>
             </div>

src/templates/item/talent-sheet.hbs

@@ -0,0 +1,37 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
+
+{{#*inline "talentRankBasicProperty" }}
+<div class="basic-property">
+    <label for="data.rank.{{property}}">{{localize localizeString}}</label>
+    <input type="number" min="0" step="1" data-dtype="Number" {{disabled}}
+        {{#if (eq property 'base') }}max="{{data.rank.max}}"{{/if}}
+        name="data.rank.{{property}}" value="{{lookup data.rank property}}" />
+</div>
+{{/inline}}
+
+
+{{!-- ======================================================================== --}}
+
+
+<form class="{{cssClass}}" autocomplete="off">
+    <header class="sheet-header">
+        <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
+        <div class="header-fields flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
+            <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+            <div class="grid grid-4col basic-properties">
+                {{> talentRankBasicProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
+                {{> talentRankBasicProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
+                {{> talentRankBasicProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
+                {{> talentRankBasicProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
+            </div>
+        </div>
+    </header>
+    
+    {{!-- Common Item body --}}
+    {{> systems/ds4/templates/item/partials/body.hbs}}
+
+</form>

src/templates/item/weapon-sheet.hbs

@@ -6,8 +6,8 @@
             <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
             <div class="grid grid-3col basic-properties">
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.AttackType"}}</label>
+                    <label>{{localize "DS4.AttackType"}}</label>
-                    <select class="basic-property-select" name="data.attackType" data-type="String">
+                    <select name="data.attackType" data-type="String">
                         {{#select data.attackType}}
                         {{#each config.attackTypes as |value key|}}
                         <option value="{{key}}">{{value}}</option>
@@ -16,13 +16,13 @@
                     </select>
                 </div>
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.WeaponBonus"}}</label>
+                    <label>{{localize "DS4.WeaponBonus"}}</label>
-                    <input class="basic-property-input" type="number" name="data.weaponBonus" value="{{data.weaponBonus}}"
+                    <input type="number" name="data.weaponBonus" value="{{data.weaponBonus}}"
                         placeholder="0" data-dtype="Number" />
                 </div>
                 <div class="basic-property">
-                    <label class="basic-property-label">{{localize "DS4.OpponentDefense"}}</label>
+                    <label>{{localize "DS4.OpponentDefense"}}</label>
-                    <input class="basic-property-input" type="number" name="data.opponentDefense"
+                    <input type="number" name="data.opponentDefense"
                         value="{{data.opponentDefense}}" placeholder="0" data-dtype="Number" />
                 </div>
             </div>