diff --git a/langs/en-ca.json b/langs/en-ca.json index 5103805..abb3e88 100644 --- a/langs/en-ca.json +++ b/langs/en-ca.json @@ -74,7 +74,10 @@ "guts-value-edit": "The current amount of guts the character has", "guts-value-readonly": "The current amount of guts the character has", "guts-max-readonly": "The maximum amount of guts the character can have" - } + }, + "traits-placeholder": "New Trait...", + "short-range": "Short @RipCrypt.common.range", + "long-range": "Long @RipCrypt.common.range" } } } diff --git a/module/data/Item/Weapon.mjs b/module/data/Item/Weapon.mjs index dd23042..f269961 100644 --- a/module/data/Item/Weapon.mjs +++ b/module/data/Item/Weapon.mjs @@ -62,14 +62,33 @@ export class WeaponData extends foundry.abstract.TypeDataModel { { type: `string-set`, label: `RipCrypt.common.traits`, + placeholder: `RipCrypt.Apps.traits-placeholder`, path: `system.traits`, - value: this.traitString, + value: ctx.meta.limited ? `???` : this.traitString, }, - { type: `integer`, label: `Short Range` }, - { type: `integer`, label: `Long Range` }, - { type: `integer`, label: `Damage` }, - { type: `bar`, label: `Wear` }, - { type: `dropdown`, label: `Access` }, + { + type: `integer`, + label: `RipCrypt.Apps.short-range`, + path: `system.range.short`, + value: ctx.meta.limited ? `???` : (this.range.short ?? ``), + min: 0, + }, + { + type: `integer`, + label: `RipCrypt.Apps.long-range`, + path: `system.range.long`, + value: ctx.meta.limited ? `???` : (this.range.long ?? ``), + min: 0, + }, + { + type: `integer`, + label: `RipCrypt.common.damage`, + path: `system.damage`, + value: ctx.meta.limited ? `???` : this.damage, + min: 0, + }, + // { type: `bar`, label: `Wear` }, + // { type: `dropdown`, label: `Access` }, ]; if (this.parent.isEmbedded) { diff --git a/module/handlebarHelpers/inputs/formFields.mjs b/module/handlebarHelpers/inputs/formFields.mjs index 3d13129..cd081f0 100644 --- a/module/handlebarHelpers/inputs/formFields.mjs +++ b/module/handlebarHelpers/inputs/formFields.mjs @@ -1,8 +1,9 @@ +import { numberInput } from "./numberInput.mjs"; import { stringSet } from "./stringSet.mjs"; const inputTypes = { "string-set": stringSet, - integer: displayOnly, + integer: numberInput, bar: displayOnly, dropdown: displayOnly, boolean: displayOnly, @@ -13,10 +14,10 @@ function displayOnly(input) { }; export function formFields(inputs, opts) { - let htmlString = ``; + const fields = []; for (const input of inputs) { if (inputTypes[input.type] == null) { continue }; - htmlString += inputTypes[input.type](input, opts.data.root); + fields.push(inputTypes[input.type](input, opts.data.root)); }; - return htmlString; + return fields.join(opts.hash?.joiner ?? `
`); }; diff --git a/module/handlebarHelpers/inputs/numberInput.mjs b/module/handlebarHelpers/inputs/numberInput.mjs new file mode 100644 index 0000000..3cc15eb --- /dev/null +++ b/module/handlebarHelpers/inputs/numberInput.mjs @@ -0,0 +1,35 @@ +import { localizer } from "../../utils/Localizer.mjs"; + +const { randomID } = foundry.utils; + +export function numberInput(input, data) { + const label = localizer(input.label); + const id = `${data.meta.idp}-${randomID(10)}`; + + if (!data.meta.editable) { + return `
+ ${label} + ${data.meta.limited ? `???` : input.value} +
`; + }; + + let attrs = ``; + if (input.min) { attrs += ` min="${input.min}"` }; + if (input.max) { attrs += ` max="${input.max}"` }; + if (input.step) { attrs += `step="${input.step}"` }; + + return `
+ + +
`; +}; diff --git a/module/handlebarHelpers/inputs/stringSet.mjs b/module/handlebarHelpers/inputs/stringSet.mjs index 3932a1b..3b4a604 100644 --- a/module/handlebarHelpers/inputs/stringSet.mjs +++ b/module/handlebarHelpers/inputs/stringSet.mjs @@ -4,12 +4,34 @@ const { randomID } = foundry.utils; export function stringSet(input, data) { const label = localizer(input.label); + const placeholder = localizer(input.placeholder ?? ``); const id = `${data.meta.idp}-${randomID(10)}`; if (!data.meta.editable) { + const tagList = input.value + .split(/,\s*/) + .filter(t => t.length > 0) + .map(t => { + return `
${t.trim()}
`; + }); + let tags = tagList.join(``); + + if (tagList.length === 0) { + tags = `---`; + }; + + if (data.meta.limited) { + tags = `???`; + }; + return `
${label} - ${input.value} +
+ ${tags} +
`; }; @@ -21,6 +43,7 @@ export function stringSet(input, data) { diff --git a/templates/Apps/AllItemSheetV1/content.hbs b/templates/Apps/AllItemSheetV1/content.hbs index 3490868..0fb9599 100644 --- a/templates/Apps/AllItemSheetV1/content.hbs +++ b/templates/Apps/AllItemSheetV1/content.hbs @@ -1,17 +1,17 @@
-
- {{#if meta.editable}} - - - {{else}} - Name - {{item.name}} - {{/if}} -
+ {{#if meta.editable}} + + + {{else}} + Name + {{item.name}} + {{/if}} +
{{{ rc-formFields formFields }}}
diff --git a/templates/Apps/AllItemSheetV1/style.css b/templates/Apps/AllItemSheetV1/style.css index 8e73f7b..549fdcd 100644 --- a/templates/Apps/AllItemSheetV1/style.css +++ b/templates/Apps/AllItemSheetV1/style.css @@ -1,32 +1,42 @@ .ripcrypt .AllItemSheetV1 { --input-height: 1rem; + --input-underline: none; --col-gap: 8px; + --row-gap: 8px; --string-tags-tag-text: var(--header-text); --string-tags-tag-background: var(--header-background); --string-tags-add-text: white; --string-tags-add-background: var(--accent-1); + --string-tags-input-text: white; + --string-tags-input-background: var(--accent-1); display: grid; - grid-template-rows: minmax(0, 1fr); - grid-auto-rows: minmax(0, 1fr); + grid-template-columns: auto minmax(0, 1fr); column-gap: var(--col-gap); + row-gap: var(--row-gap); + padding: 8px; background: var(--base-background); color: var(--base-text); - > :nth-child(odd) { - background: var(--alt-row-background); - color: var(--alt-row-text); + > [data-input-type] { + display: contents; + } - --string-tags-tag-text: var(--header-text); - --string-tags-tag-background: var(--header-background); - --string-tags-add-text: var(--button-text); - --string-tags-add-background: var(--button-background); + hr { + background: var(--accent-1); + grid-column: 1 / -1; + height: 1px; + width: 90%; + margin: 0 auto; } label, .label { + display: flex; + align-items: center; box-sizing: border-box; + padding: 2px 4px; text-transform: uppercase; font-size: var(--font-size-14); @@ -35,15 +45,17 @@ font-weight: bold; } - [data-input-type="string-set"] { + input, .value, [data-tag-count] { + border-radius: 4px; padding: 2px 4px; - display: flex; - flex-direction: row; - column-gap: var(--col-gap); - grid-row: span 2; - - label, .label { - padding: 0; - } + } + input { + background: var(--accent-2); + } + .value, [data-tag-count="0"] { + border: 2px solid var(--accent-2); + } + [data-tag-count="0"] { + justify-content: start; } } diff --git a/templates/css/elements/input.css b/templates/css/elements/input.css index 0ab1fa0..c800d7c 100644 --- a/templates/css/elements/input.css +++ b/templates/css/elements/input.css @@ -15,5 +15,9 @@ &[type="number"] { border-bottom: var(--input-underline); } + + &::placeholder { + color: var(--input-placeholder-text); + } } } diff --git a/templates/css/elements/span.css b/templates/css/elements/span.css index ac5b330..65a1858 100644 --- a/templates/css/elements/span.css +++ b/templates/css/elements/span.css @@ -2,4 +2,8 @@ &.small { font-size: var(--font-size-10) } + + &:empty::before { + content: "\200b"; + } } diff --git a/templates/css/elements/string-tags.css b/templates/css/elements/string-tags.css index bd1bc31..1998c00 100644 --- a/templates/css/elements/string-tags.css +++ b/templates/css/elements/string-tags.css @@ -5,16 +5,14 @@ grid-template-columns: 1fr min-content; grid-template-rows: repeat(2, minmax(0, 1fr)); - padding: 2px; border: var(--string-tags-border); .tags { grid-column: 1 / -1; } - .tag { - background: var(--tag-background, var(--header-background)); - color: var(--tag-text, var(--header-text)); + input[type="text"] { + border-radius: 4px; padding: 2px 4px; } @@ -25,4 +23,14 @@ width: 30px; border-radius: 4px; } + + &:has(.tags.input-element-tags:empty) { + grid-template-rows: auto; + } +} + +.ripcrypt .tag { + background: var(--tag-background, var(--header-background)); + color: var(--tag-text, var(--header-text)); + padding: 2px 4px; } diff --git a/templates/css/themes/dark.css b/templates/css/themes/dark.css index 1f92f66..7fea063 100644 --- a/templates/css/themes/dark.css +++ b/templates/css/themes/dark.css @@ -19,10 +19,14 @@ --input-underline: 2px dashed var(--accent-3); --input-background: inherit; --input-text: white; + --input-placeholder-text: rgba(255,255,255, 0.5); --button-background: black; --button-text: var(--accent-3); + --col-gap: 2px; + --row-gap: 0px; + /* Additional Variables */ --string-tags-border: inherit; --string-tags-tag-background: inherit;