Get the base Actor sheet working w/ collaboration

.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 */

.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 */

.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 */

.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 */

.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 */

.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 */

.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 */

.vscode/settings.json

@@ -8,7 +8,7 @@
 	"git.branchProtection": [],
 	"files.exclude": {
 		"*.lock": true,
-		".styles": true,
+		".styles": false,
 		"node_modules": true,
 		"packs": true,
 	},

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "foundry-system-template",
+  "name": "Text-Actors-Foundry",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

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: ``,
+			}),
+		};
 	};
 };

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;

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;
+	};
 }

styles/root.scss

@@ -0,0 +1 @@
+@use "./v1/index.scss";

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 {

styles/v1/index.scss

@@ -1 +1,3 @@
-// Styling version 1
+// Styling version 1
+
+@use "./player/root.scss";

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;
+		}
+	}
+}

system.json

@@ -1,6 +1,6 @@
 {
-	"id": "fst",
+	"id": "taf",
-	"title": "Foundry System Template",
+	"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": {}
 			}
 		},

templates/Player/v1/main.hbs

@@ -1,3 +1,29 @@
-<form autocomplete="off" class="actor--pc-v2">
+<form autocomplete="off">
-	Hello Foundry
+	<div class="header-row">
-</form>
+		<img
+			class="avatar"
+			src="{{actor.img}}"
+			data-edit="img"
+			title="{{actor.name}}"
+		/>
+		<input
+			type="text"
+			name="name"
+			value="{{actor.name}}"
+			class="actor-name"
+		>
+	</div>
+	{{#if editable}}
+		<prose-mirror
+			class="actor-text"
+			name="system.content"
+			value="{{system.content}}"
+			collaborate="true"
+			data-document-uuid="{{actor.uuid}}"
+		>
+			{{{enriched.system.content}}}
+		</prose-mirror>
+	{{else}}
+		{{{enriched.system.content}}}
+	{{/if}}
+</form>