From 1fdaaa40f3b00bac9dfe2a55f0d5f1ea1432911f Mon Sep 17 00:00:00 2001 From: Stas Tserkovny Date: Fri, 3 Jul 2020 15:47:00 -0600 Subject: [PATCH] Add styling to equipment section Styles equipmen section with colour coded items. sorts items based on item type and item name. --- module/character-sheet.ts | 31 ++++++++++--- module/constants.ts | 10 +++- module/items/armor.ts | 8 +++- module/items/item.ts | 37 +++++++++------ module/items/meleeWeapon.ts | 4 +- module/items/posession.ts | 19 ++++++++ module/items/property.ts | 18 ++++++++ module/items/rangedWeapon.ts | 7 ++- styles/burningwheel.scss | 3 ++ styles/character/bits.scss | 45 ++++++++++++++++++ styles/character/character.scss | 72 ----------------------------- styles/character/equipment.scss | 27 +++++++++++ styles/character/relationships.scss | 26 +++++++++++ styles/mixins.scss | 12 +++++ templates/character-sheet.html | 2 +- templates/items/posession.html | 2 +- templates/items/property.html | 2 +- 17 files changed, 224 insertions(+), 101 deletions(-) create mode 100644 module/items/posession.ts create mode 100644 module/items/property.ts create mode 100644 styles/character/bits.scss create mode 100644 styles/character/equipment.scss create mode 100644 styles/character/relationships.scss diff --git a/module/character-sheet.ts b/module/character-sheet.ts index f9a9df6d..c1fc11a6 100644 --- a/module/character-sheet.ts +++ b/module/character-sheet.ts @@ -69,13 +69,13 @@ export class BWCharacterSheet extends BWActorSheet { data.beliefs = beliefs; data.instincts = instincts; - data.skills = skills; - data.training = training; - data.relationships = relationships; - data.equipment = equipment; - data.melee = melee; + data.skills = skills.sort(byName); + data.training = training.sort(byName); + data.relationships = relationships.sort(byName); + data.equipment = equipment.sort(equipmentCompare); + data.melee = melee.sort(weaponCompare); data.armor = this.getArmorDictionary(armor); - data.ranged = ranged; + data.ranged = ranged.sort(weaponCompare); const traitLists = { character: [], die: [], callon: [] } as CharacterSheetTraits; @@ -243,6 +243,25 @@ async function rollCallback( }); } +function equipmentCompare(a: Item, b: Item): number { + if (constants.equipmentSheetOrder[a.type] !== constants.equipmentSheetOrder[b.type]) { + return constants.equipmentSheetOrder[a.type] > constants.equipmentSheetOrder[b.type] ? 1 : -1; + } + return a.name.localeCompare(b.name); +} + +function weaponCompare(a: Item, b: Item): number { + if (a.name === "Bare Fist") { + return -1; + } + if (b.name === "Bare Fist") { + return 1; + } + return a.name.localeCompare(b.name); +} + +const byName = (a: Item, b: Item) => a.name.localeCompare(b.name); + interface CharacterSheetData extends ActorSheetData { equipment: Item[]; melee: MeleeWeapon[]; diff --git a/module/constants.ts b/module/constants.ts index 98ca929c..2a2043e7 100644 --- a/module/constants.ts +++ b/module/constants.ts @@ -79,4 +79,12 @@ export const armorLocations = [ "left leg", "shield" ]; -export const armorLocationSelect = toDictionary(armorLocations); \ No newline at end of file +export const armorLocationSelect = toDictionary(armorLocations); + +export const equipmentSheetOrder = { + "melee weapon": 1, + "ranged weapon": 1, + "armor": 2, + "posession": 3, + "property": 4 +} \ No newline at end of file diff --git a/module/items/armor.ts b/module/items/armor.ts index a829642f..bfb4196d 100644 --- a/module/items/armor.ts +++ b/module/items/armor.ts @@ -1,4 +1,10 @@ +import { DisplayClass } from "./item.js"; + export class Armor extends Item { + prepareData() { + this.data.data.cssClass = "equipment-armor"; + } + data: ArmorRootData; } @@ -6,7 +12,7 @@ export interface ArmorRootData extends BaseEntityData { data: ArmorData } -export interface ArmorData { +export interface ArmorData extends DisplayClass { quality: string; location: string; dice: string; // as number diff --git a/module/items/item.ts b/module/items/item.ts index d9c2a354..39f951a4 100644 --- a/module/items/item.ts +++ b/module/items/item.ts @@ -1,4 +1,7 @@ +import { Armor } from "./armor.js"; import { MeleeWeapon } from "./meleeWeapon.js"; +import { Possession } from "./posession.js"; +import { Property } from "./property.js"; import { RangedWeapon } from "./rangedWeapon.js"; import { Relationship } from "./relationship.js"; import { ArmorSheet } from "./sheets/armor-sheet.js"; @@ -17,6 +20,8 @@ export * from "./armor.js"; export * from "./belief.js"; export * from "./instinct.js"; export * from "./meleeWeapon.js"; +export * from "./posession.js"; +export * from "./property.js"; export * from "./rangedWeapon.js"; export * from "./relationship.js"; export * from "./sheets/armor-sheet.js"; @@ -34,21 +39,8 @@ export * from "./trait.js"; export class BWItem extends Item { prepareData() { super.prepareData(); - switch (this.type) { - case "trait": - Trait.prototype.prepareData.bind(this)(); - break; - case "skill": - Skill.prototype.prepareData.bind(this)(); - break; - case "relationship": - Relationship.prototype.prepareData.bind(this)(); - break; - case "melee weapon": - MeleeWeapon.prototype.prepareData.bind(this)(); - break; - case "ranged weapon": - RangedWeapon.prototype.prepareData.bind(this)(); + if (prototypeList[this.type]) { + prototypeList[this.type].prototype.prepareData.bind(this)(); } } } @@ -59,6 +51,10 @@ export interface ArthaEarner { deeds: boolean; } +export interface DisplayClass { + cssClass?: string; +} + export function RegisterItemSheets() { Items.unregisterSheet("core", ItemSheet); Items.registerSheet("burningwheel", BeliefSheet, { @@ -105,3 +101,14 @@ export function RegisterItemSheets() { makeDefault: true }); } + +const prototypeList: { [i: string]: typeof Item} = { + "trait": Trait, + "skill": Skill, + "relationship": Relationship, + "melee weapon": MeleeWeapon, + "ranged weapon": RangedWeapon, + "armor": Armor, + "posession": Possession, + "property": Property +} diff --git a/module/items/meleeWeapon.ts b/module/items/meleeWeapon.ts index bc0e2beb..5403b397 100644 --- a/module/items/meleeWeapon.ts +++ b/module/items/meleeWeapon.ts @@ -1,4 +1,5 @@ import { CharacterData } from "../actor.js"; +import { DisplayClass } from "./item.js"; export class MeleeWeapon extends Item { prepareData() { @@ -9,6 +10,7 @@ export class MeleeWeapon extends Item { this.data.data.mark = baseDmg; this.data.data.superb = Math.floor(baseDmg * 1.5); } + this.data.data.cssClass = "equipment-weapon"; } data: MeleeWeaponRootData; @@ -18,7 +20,7 @@ export interface MeleeWeaponRootData extends BaseEntityData { data: MeleeWeaponData } -export interface MeleeWeaponData { +export interface MeleeWeaponData extends DisplayClass { quality: string; baseOb: string; // as number power: string; // as number diff --git a/module/items/posession.ts b/module/items/posession.ts new file mode 100644 index 00000000..bf1d5d33 --- /dev/null +++ b/module/items/posession.ts @@ -0,0 +1,19 @@ +import { DisplayClass } from "./item.js"; + +export class Possession extends Item { + prepareData() { + this.data.data.cssClass = "equipment-possession"; + } + + data: PossessionRootData; +} + +export interface PossessionRootData extends BaseEntityData { + data: PossessionData; +} + +export interface PossessionData extends DisplayClass { + isToolkit: boolean; + isExpended: boolean; + description: string; +} diff --git a/module/items/property.ts b/module/items/property.ts new file mode 100644 index 00000000..17a50b5e --- /dev/null +++ b/module/items/property.ts @@ -0,0 +1,18 @@ +import { DisplayClass } from "./item.js"; + +export class Property extends Item { + prepareData() { + this.data.data.cssClass = "equipment-property"; + } + + data: PropertyRootData; +} + +export interface PropertyRootData extends BaseEntityData { + data: PropertyData; +} + +export interface PropertyData extends DisplayClass { + isWorkshop: boolean; + description: string; +} diff --git a/module/items/rangedWeapon.ts b/module/items/rangedWeapon.ts index 9ab33cd5..66aeb37c 100644 --- a/module/items/rangedWeapon.ts +++ b/module/items/rangedWeapon.ts @@ -1,4 +1,5 @@ -import { CharacterData } from "module/actor"; +import { CharacterData } from "../actor.js"; +import { DisplayClass } from "./item.js"; export class RangedWeapon extends Item { prepareData() { @@ -15,6 +16,8 @@ export class RangedWeapon extends Item { this.data.data.incidentalLabel = `1-${incidentalRange}`; this.data.data.markLabel = (markRange - 1 === incidentalRange) ? `${markRange}` : `${incidentalRange + 1}-${markRange}`; this.data.data.superbLabel = (markRange === 5 ) ? `6` : `${markRange + 1}-6`; + + this.data.data.cssClass = "equipment-weapon"; } data: RangedWeaponRootData; @@ -24,7 +27,7 @@ export interface RangedWeaponRootData extends BaseEntityData{ data: RangedWeaponData } -export interface RangedWeaponData { +export interface RangedWeaponData extends DisplayClass { quality: string; hasGunpowder: boolean; usePower: boolean; diff --git a/styles/burningwheel.scss b/styles/burningwheel.scss index e788baf0..182ad14f 100644 --- a/styles/burningwheel.scss +++ b/styles/burningwheel.scss @@ -1,6 +1,9 @@ +@import "./character/bits.scss"; @import "./character/character.scss"; +@import "./character/equipment.scss"; @import "./character/learning.scss"; @import "./character/ptgs.scss"; +@import "./character/relationships.scss"; @import "./character/weapons.scss"; @import "./items/relationship.scss"; @import "./items/skill.scss"; diff --git a/styles/character/bits.scss b/styles/character/bits.scss new file mode 100644 index 00000000..97e7f6ca --- /dev/null +++ b/styles/character/bits.scss @@ -0,0 +1,45 @@ +.beliefs, .instincts { + .bits-item { + & > div { + width: 13%; + border-right: 1px solid black; + margin-bottom: 2px; + + .bits-item-name { + width: 100%; + } + + input[type="checkbox"] { + width: 1em; + height: 1em; + margin: 0; + } + } + & > textarea { + width: 87%; + resize: vertical; + border: 0; + min-height: 3em; + height: 3em; + } + } +} + +.traits { + .trait-category { + width: calc(33% - 10px); + margin: 5px; + + i { + float: right; + font-size: 12px; + margin-top: 6px; + margin-left: 5px; + color: transparentize($color: black, $amount: 0.25) + } + + i:hover { + color: #FF0000; + } + } +} diff --git a/styles/character/character.scss b/styles/character/character.scss index ad4a272a..1d3aeb6c 100644 --- a/styles/character/character.scss +++ b/styles/character/character.scss @@ -53,53 +53,6 @@ } } } - - .beliefs, .instincts { - .bits-item { - & > div { - width: 13%; - border-right: 1px solid black; - margin-bottom: 2px; - - .bits-item-name { - width: 100%; - } - - input[type="checkbox"] { - width: 1em; - height: 1em; - margin: 0; - } - } - & > textarea { - width: 87%; - resize: vertical; - border: 0; - min-height: 3em; - height: 3em; - } - } - } - - .traits { - .trait-category { - width: calc(33% - 10px); - margin: 5px; - - i { - float: right; - font-size: 12px; - margin-top: 6px; - margin-left: 5px; - color: transparentize($color: black, $amount: 0.25) - } - - i:hover { - color: #FF0000; - } - } - } - .stats, .attributes, .skills { display: grid; @@ -199,29 +152,4 @@ } } } - - .relationship-section { - .relationships { - width: 40%; - - .item-title { - width: calc(95% - 36px); - } - - .relationship > i { - width: 18px; - - &:hover { - color: red; - } - } - } - .reputations, .affiliations { - width: 30%; - } - - .relationship-progress { - @include progress-ticks; - } - } } \ No newline at end of file diff --git a/styles/character/equipment.scss b/styles/character/equipment.scss new file mode 100644 index 00000000..072b49d1 --- /dev/null +++ b/styles/character/equipment.scss @@ -0,0 +1,27 @@ +@import "../mixins.scss"; + +.character { + .gear { + column-gap: 1px; + row-gap: 1px; + & > div { + padding: 1px 3px; + + & i { + margin-bottom: 3px; + } + } + .equipment-armor { + @include colored-item(blue); + } + .equipment-weapon { + @include colored-item(red); + } + .equipment-possession { + @include colored-item(orange); + } + .equipment-property { + @include colored-item(green); + } + } +} diff --git a/styles/character/relationships.scss b/styles/character/relationships.scss new file mode 100644 index 00000000..6e54317c --- /dev/null +++ b/styles/character/relationships.scss @@ -0,0 +1,26 @@ +@import "../mixins.scss"; + +.relationship-section { + .relationships { + width: 40%; + + .item-title { + width: calc(95% - 36px); + } + + .relationship > i { + width: 18px; + + &:hover { + color: red; + } + } + } + .reputations, .affiliations { + width: 30%; + } + + .relationship-progress { + @include progress-ticks; + } +} diff --git a/styles/mixins.scss b/styles/mixins.scss index dce0d987..3d3daf58 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -66,4 +66,16 @@ $hover-color: rgba(0,0,0,0.1); border-radius: 0; border: 0; border-bottom: 1px solid black; +} + +@mixin colored-item($color) { + border-radius: 4px; + border: 2px solid rgba($color, .15); + + transition: background-color .25s; + background-color: rgba($color, 0.075); + + &:hover { + background-color: rgba($color, 0.15); + } } \ No newline at end of file diff --git a/templates/character-sheet.html b/templates/character-sheet.html index 2fb26c79..7469dc8c 100644 --- a/templates/character-sheet.html +++ b/templates/character-sheet.html @@ -220,7 +220,7 @@

Gear, Posessions,
{{#each equipment as |e|}} -
+
{{e.name}} diff --git a/templates/items/posession.html b/templates/items/posession.html index 105f0d9a..9d27a15b 100644 --- a/templates/items/posession.html +++ b/templates/items/posession.html @@ -1,5 +1,5 @@
- +
diff --git a/templates/items/property.html b/templates/items/property.html index 4a54f496..2806c49e 100644 --- a/templates/items/property.html +++ b/templates/items/property.html @@ -1,5 +1,5 @@ - +