From ce9c2de751c1a523dac6bf74c3f9454cdb4ea144 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 28 Aug 2024 22:36:12 -0600 Subject: [PATCH] Get the base Actor sheet working w/ collaboration --- .styles/root.css | 38 +++++++++++++++++++ .styles/v1/components/common.css | 5 +++ .styles/v1/components/icon.css | 24 ++++++++++++ .styles/v1/components/incrementer.css | 53 +++++++++++++++++++++++++++ .styles/v1/index.css | 38 +++++++++++++++++++ .styles/v1/player/root.css | 38 +++++++++++++++++++ .styles/v1/v1/player/root.css | 12 ++++++ .vscode/settings.json | 2 +- package-lock.json | 2 +- src/documents/Actor/Player/Model.mjs | 8 +++- src/main.mjs | 5 +++ src/sheets/Player/v1.mjs | 16 +++++++- styles/root.scss | 1 + styles/v1/components/incrementer.scss | 10 ----- styles/v1/index.scss | 4 +- styles/v1/player/root.scss | 42 +++++++++++++++++++++ system.json | 12 ++++-- templates/Player/v1/main.hbs | 32 ++++++++++++++-- 18 files changed, 320 insertions(+), 22 deletions(-) create mode 100644 .styles/root.css create mode 100644 .styles/v1/components/common.css create mode 100644 .styles/v1/components/icon.css create mode 100644 .styles/v1/components/incrementer.css create mode 100644 .styles/v1/index.css create mode 100644 .styles/v1/player/root.css create mode 100644 .styles/v1/v1/player/root.css create mode 100644 styles/v1/player/root.scss diff --git a/.styles/root.css b/.styles/root.css new file mode 100644 index 0000000..2d91537 --- /dev/null +++ b/.styles/root.css @@ -0,0 +1,38 @@ +.actor--player.style-v1 { + --header-size: 75px; +} +.actor--player.style-v1 form { + display: flex; + flex-direction: column; + gap: 8px; +} +.actor--player.style-v1 .header-row { + display: flex; + flex-direction: row; + border-radius: 4px; + border: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .avatar { + --size: var(--header-size); + width: var(--size); + height: var(--size); + border: none; + border-right: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .actor-name { + height: var(--header-size); + padding: 8px 1rem; + font-size: clamp(1rem, 2rem, var(--header-size) - 16px); + border: none; +} +.actor--player.style-v1 prose-mirror { + --menu-background: rgba(0, 0, 0, 0.1); + flex-grow: 1; + border: 1px solid var(--color-underline-header); + border-radius: 4px; +} +.actor--player.style-v1 prose-mirror .editor-container { + height: auto; +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/v1/player/root.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACC;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC%22,%22file%22:%22root.css%22%7D */ diff --git a/.styles/v1/components/common.css b/.styles/v1/components/common.css new file mode 100644 index 0000000..110ccc3 --- /dev/null +++ b/.styles/v1/components/common.css @@ -0,0 +1,5 @@ +:host { + display: inline-block; +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/v1/components/common.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIA;EACC%22,%22file%22:%22common.css%22%7D */ diff --git a/.styles/v1/components/icon.css b/.styles/v1/components/icon.css new file mode 100644 index 0000000..6f7f93f --- /dev/null +++ b/.styles/v1/components/icon.css @@ -0,0 +1,24 @@ +/* +Disclaimer: This CSS is used by a custom web component and is scoped to JUST +the corresponding web component. Importing this into other files is forbidden +*/ +:host { + display: inline-block; +} + +div { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +svg { + width: var(--size, 1rem); + height: var(--size, 1rem); + fill: var(--fill); + stroke: var(--stroke); +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/v1/components/icon.scss%22,%22../../../styles/v1/components/common.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;AAAA;AAAA;AAAA;ACIA;EACC;;;ADID;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA%22,%22file%22:%22icon.css%22%7D */ diff --git a/.styles/v1/components/incrementer.css b/.styles/v1/components/incrementer.css new file mode 100644 index 0000000..f58fb64 --- /dev/null +++ b/.styles/v1/components/incrementer.css @@ -0,0 +1,53 @@ +/* +Disclaimer: This CSS is used by a custom web component and is scoped to JUST +the corresponding web component. Importing this into other files is forbidden +*/ +:host { + display: inline-block; +} + +div { + display: grid; + grid-template-columns: var(--height, 1.5rem) var(--width, 50px) var(--height, 1.5rem); + grid-template-rows: var(--height, 1fr); + border-radius: var(--border-radius, 4px); +} + +span, input { + border: none; + outline: none; + background: none; + color: inherit; +} + +input { + font-family: var(--font-family, inherit); + text-align: center; + font-size: var(--font-size, inherit); + padding: 2px 4px; +} +input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; +} + +.increment, .decrement { + aspect-ratio: 1/1; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.increment { + border-radius: 0 var(--border-radius, 4px) var(--border-radius, 4px) 0; +} + +.decrement { + border-radius: var(--border-radius, 4px) 0 0 var(--border-radius, 4px); +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/v1/components/incrementer.scss%22,%22../../../styles/v1/components/common.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;AAAA;AAAA;AAAA;ACIA;EACC;;;ADKD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC%22,%22file%22:%22incrementer.css%22%7D */ diff --git a/.styles/v1/index.css b/.styles/v1/index.css new file mode 100644 index 0000000..2a85465 --- /dev/null +++ b/.styles/v1/index.css @@ -0,0 +1,38 @@ +.actor--player.style-v1 { + --header-size: 75px; +} +.actor--player.style-v1 form { + display: flex; + flex-direction: column; + gap: 8px; +} +.actor--player.style-v1 .header-row { + display: flex; + flex-direction: row; + border-radius: 4px; + border: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .avatar { + --size: var(--header-size); + width: var(--size); + height: var(--size); + border: none; + border-right: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .actor-name { + height: var(--header-size); + padding: 8px 1rem; + font-size: clamp(1rem, 2rem, var(--header-size) - 16px); + border: none; +} +.actor--player.style-v1 prose-mirror { + --menu-background: rgba(0, 0, 0, 0.1); + flex-grow: 1; + border: 1px solid var(--color-underline-header); + border-radius: 4px; +} +.actor--player.style-v1 prose-mirror .editor-container { + height: auto; +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../styles/v1/player/root.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACC;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC%22,%22file%22:%22index.css%22%7D */ diff --git a/.styles/v1/player/root.css b/.styles/v1/player/root.css new file mode 100644 index 0000000..2b7a6c3 --- /dev/null +++ b/.styles/v1/player/root.css @@ -0,0 +1,38 @@ +.actor--player.style-v1 { + --header-size: 75px; +} +.actor--player.style-v1 form { + display: flex; + flex-direction: column; + gap: 8px; +} +.actor--player.style-v1 .header-row { + display: flex; + flex-direction: row; + border-radius: 4px; + border: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .avatar { + --size: var(--header-size); + width: var(--size); + height: var(--size); + border: none; + border-right: 1px solid var(--color-underline-header); +} +.actor--player.style-v1 .actor-name { + height: var(--header-size); + padding: 8px 1rem; + font-size: clamp(1rem, 2rem, var(--header-size) - 16px); + border: none; +} +.actor--player.style-v1 prose-mirror { + --menu-background: rgba(0, 0, 0, 0.1); + flex-grow: 1; + border: 1px solid var(--color-underline-header); + border-radius: 4px; +} +.actor--player.style-v1 prose-mirror .editor-container { + height: auto; +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/v1/player/root.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACC;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC%22,%22file%22:%22root.css%22%7D */ diff --git a/.styles/v1/v1/player/root.css b/.styles/v1/v1/player/root.css new file mode 100644 index 0000000..bbbbc35 --- /dev/null +++ b/.styles/v1/v1/player/root.css @@ -0,0 +1,12 @@ +.actor--player.style-v1 .header-row { + display: flex; + flex-direction: row; + gap: 8px; +} +.actor--player.style-v1 .avatar { + --size: 75px; + width: var(--size); + height: var(--size); +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../../styles/v1/v1/player/root.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AACC;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA%22,%22file%22:%22root.css%22%7D */ diff --git a/.vscode/settings.json b/.vscode/settings.json index 9fce672..3f6e97a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,7 +8,7 @@ "git.branchProtection": [], "files.exclude": { "*.lock": true, - ".styles": true, + ".styles": false, "node_modules": true, "packs": true, }, diff --git a/package-lock.json b/package-lock.json index a159d80..961d542 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "foundry-system-template", + "name": "Text-Actors-Foundry", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/src/documents/Actor/Player/Model.mjs b/src/documents/Actor/Player/Model.mjs index b850ff3..b141450 100644 --- a/src/documents/Actor/Player/Model.mjs +++ b/src/documents/Actor/Player/Model.mjs @@ -1,6 +1,12 @@ export class PlayerData extends foundry.abstract.TypeDataModel { static defineSchema() { const fields = foundry.data.fields; - return {}; + return { + content: new fields.HTMLField({ + blank: true, + trim: true, + initial: ``, + }), + }; }; }; diff --git a/src/main.mjs b/src/main.mjs index 3e833ff..53eb4f2 100644 --- a/src/main.mjs +++ b/src/main.mjs @@ -4,6 +4,8 @@ import { ActorProxy } from "./documents/Actor/_proxy.mjs"; import { ChatMessageProxy } from "./documents/ChatMessage/_proxy.mjs"; import { ItemProxy } from "./documents/Item/_proxy.mjs"; +// DataModel Imports +import { PlayerData } from "./documents/Actor/Player/Model.mjs"; // Misc Imports import "./utils/logger.mjs"; @@ -19,6 +21,9 @@ Hooks.once(`init`, () => { registerSettings(); + // Data Models + CONFIG.Actor.dataModels.player = PlayerData; + // Update document classes CONFIG.Actor.documentClass = ActorProxy; CONFIG.Item.documentClass = ItemProxy; diff --git a/src/sheets/Player/v1.mjs b/src/sheets/Player/v1.mjs index 5f48032..162af4d 100644 --- a/src/sheets/Player/v1.mjs +++ b/src/sheets/Player/v1.mjs @@ -4,9 +4,23 @@ export class PlayerSheetv1 extends ActorSheet { super.defaultOptions, { template: `systems/${game.system.id}/templates/Player/v1/main.hbs`, + classes: [], }, ); - opts.classes.push(`style-v1`); + opts.classes = [`actor--player`, `style-v1`]; return opts; }; + + async getData() { + const ctx = {}; + + ctx.editable = this.isEditable; + + const actor = ctx.actor = this.actor; + ctx.system = actor.system; + ctx.enriched = { system: {} }; + ctx.enriched.system.content = await TextEditor.enrichHTML(actor.system.content); + + return ctx; + }; } diff --git a/styles/root.scss b/styles/root.scss index e69de29..423849d 100644 --- a/styles/root.scss +++ b/styles/root.scss @@ -0,0 +1 @@ +@use "./v1/index.scss"; \ No newline at end of file diff --git a/styles/v1/components/incrementer.scss b/styles/v1/components/incrementer.scss index abe9478..fee073a 100644 --- a/styles/v1/components/incrementer.scss +++ b/styles/v1/components/incrementer.scss @@ -6,7 +6,6 @@ the corresponding web component. Importing this into other files is forbidden $default-border-radius: 4px; $default-height: 1.5rem; -@use "../mixins/material"; @use "./common.scss"; div { @@ -14,15 +13,6 @@ div { grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height); grid-template-rows: var(--height, 1fr); border-radius: var(--border-radius, $default-border-radius); - @include material.elevate(2); - - &:hover { - @include material.elevate(4); - } - - &:focus-within { - @include material.elevate(6); - } } span, input { diff --git a/styles/v1/index.scss b/styles/v1/index.scss index 97cd162..96a8ce1 100644 --- a/styles/v1/index.scss +++ b/styles/v1/index.scss @@ -1 +1,3 @@ -// Styling version 1 \ No newline at end of file +// Styling version 1 + +@use "./player/root.scss"; \ No newline at end of file diff --git a/styles/v1/player/root.scss b/styles/v1/player/root.scss new file mode 100644 index 0000000..d2df5d9 --- /dev/null +++ b/styles/v1/player/root.scss @@ -0,0 +1,42 @@ +.actor--player.style-v1 { + --header-size: 75px; + + form { + display: flex; + flex-direction: column; + gap: 8px; + } + + .header-row { + display: flex; + flex-direction: row; + border-radius: 4px; + border: 1px solid var(--color-underline-header); + } + + .avatar { + --size: var(--header-size); + width: var(--size); + height: var(--size); + border: none; + border-right: 1px solid var(--color-underline-header); + } + + .actor-name { + height: var(--header-size); + padding: 8px 1rem; + font-size: clamp(1rem, 2rem, calc(var(--header-size) - 16px)); + border: none; + } + + prose-mirror { + --menu-background: rgba(0, 0, 0, 0.1); + flex-grow: 1; + border: 1px solid var(--color-underline-header); + border-radius: 4px; + + .editor-container { + height: auto; + } + } +} \ No newline at end of file diff --git a/system.json b/system.json index 9b6affe..962dcee 100644 --- a/system.json +++ b/system.json @@ -1,6 +1,6 @@ { - "id": "fst", - "title": "Foundry System Template", + "id": "taf", + "title": "Text-Based Actors", "description": "", "version": "0.0.0", "download": "", @@ -15,12 +15,16 @@ "esmodules": [ "src/main.mjs" ], - "styles": [], + "styles": [ + ".styles/root.css" + ], "packs": [], "documentTypes": { "Actor": { "player": { - "htmlFields": [], + "htmlFields": [ + "content" + ], "filePathFields": {} } }, diff --git a/templates/Player/v1/main.hbs b/templates/Player/v1/main.hbs index 5720ba4..64e24d8 100644 --- a/templates/Player/v1/main.hbs +++ b/templates/Player/v1/main.hbs @@ -1,3 +1,29 @@ -
- Hello Foundry -
\ No newline at end of file +
+
+ + +
+ {{#if editable}} + + {{{enriched.system.content}}} + + {{else}} + {{{enriched.system.content}}} + {{/if}} +