Start work on a custom chat message implementation

module/documents/chatMessage/CryptRollMessage.mjs

@@ -0,0 +1,11 @@
+import { filePath } from "../../consts.mjs";
+
+export class CryptRollMessage extends ChatMessage {
+	static get template() {
+		switch (this.type) {
+			case `roll`:
+				return filePath(`templates/chat/roll.hbs`);
+		}
+		return super.template;
+	};
+};

templates/chat/frame.hbs

@@ -0,0 +1,7 @@
+<li
+	class="chat-message message ripcrypt {{cssClass}}"
+	data-message-id="{{message._id}}"
+	{{#if borderColor}}style="border-color: {{borderColor}}"{{/if}}
+>
+	<span class="author">{{ alias }}</span>
+</li>

templates/css/chatmessage.css

@@ -0,0 +1,15 @@
+.ripcrypt.chat-message {
+	position: relative;
+	background: var(--base-background);
+	color: var(--base-text);
+
+	.author {
+		position: absolute;
+		text-align: center;
+		top: 0;
+		left: 50%;
+		transform: translateY(-50%) translateX(-50%);
+		background: var(--title-background);
+		color: var(--title-text);
+	}
+}

templates/css/common.css

@@ -23,4 +23,6 @@
 	label, input, select {
 		cursor: pointer;
 	}
-}
+}
+
+@import url("./chatmessage.css");

templates/css/themes/dark.css

@@ -7,6 +7,9 @@
 	--base-text: white;
 	--base-background: black;
 
+	--title-text: white;
+	--title-background: var(--accent-3);
+
 	--section-header-text: white;
 	--section-header-background: var(--accent-1);