feat: Added layouts for Daggerheart Adversaries, Cards and Environments (#490)

* feat: Adds new Daggerheart layouts for adversaries, cards, and environments

* chore: added documentation, layouts, screenshots for Daggerheart

* feat: updated daggerheart card layout

* feat: improved readability for daggerheart adversary layout css

* docs: added example codeblocks for daggerheart cards and environments

* chore: fixed two linting errors in daggerheart.ts

* feat: added qty property and added checkbox health/stress tracking

Author: gotsanity

README.md

@@ -46,3 +46,10 @@ Fantasy Statblocks uses trademarks and/or copyrights owned by Paizo Inc., used u
 We are expressly prohibited from charging you to use or access this content.
 Fantasy Statblocks is not published, endorsed, or specifically approved by Paizo.
 For more information about Paizo Inc. and Paizo products, visit paizo.com.
+
+### Daggerheart and Darrington Press License Disclosure
+Fantasy Statblocks uses materials from the Daggerheart System Reference Document 1.0, © Critical Role, LLC. under the terms of the Darrington Press Community Gaming (DPCGL) License. More information can be found at https://www.daggerheart.com/. There are minor modifications to format and structure. No previous modifications by others.
+
+Daggerheart and all related marks are trademarks of Critical Role, LLC and used with permission. This project is not affiliated with, endorsed, or sponsored by Critical Role or Darrington Press.
+
+For full license terms, see: https://www.daggerheart.com/

src/layouts/daggerheart/callbacks/create-card-ribbon.js

@@ -0,0 +1,23 @@
+const ribbonBlock = document.createElement("div");
+ribbonBlock.classList.add("daggerheart-card-ribbon");
+
+const levelBlock = document.createElement("div");
+levelBlock.classList.add("card-level");
+
+const levelText = document.createElement("span");
+levelText.innerHTML = monster.level;
+
+levelBlock.append(levelText);
+
+const domainBlock = document.createElement("div");
+domainBlock.classList.add("card-domain");
+domainBlock.classList.add(monster.domain);
+
+const domainText = document.createElement("span");
+domainText.innerText = monster.domain;
+domainBlock.append(domainText)
+
+ribbonBlock.append(levelBlock);
+ribbonBlock.append(domainBlock);
+
+return ribbonBlock;

src/layouts/daggerheart/callbacks/create-card-type-heading.js

@@ -0,0 +1,14 @@
+const headingBlock = document.createElement("div");
+headingBlock.classList.add("daggerheart-heading");
+
+const typeBlock = document.createElement("div");
+typeBlock.classList.add("card-type");
+typeBlock.classList.add(monster.domain);
+
+const typeText = document.createElement("span");
+typeText.innerText = monster.type;
+typeBlock.append(typeText)
+
+headingBlock.append(typeBlock);
+
+return headingBlock;

src/layouts/daggerheart/callbacks/create-healthStress-block.js

@@ -0,0 +1,71 @@
+const getStatLine = () => {
+    const statLine = document.createElement("div");
+    const statClass = `${monster.name.replace(/[^a-zA-Z0-9]/g,'-').toLowerCase()}-block`;
+    statLine.classList.add("adversary-block");
+    statLine.classList.add(statClass);
+
+    let numBlocks = monster.qty ? monster.qty : 1;
+
+    for (let i = 1; i <= numBlocks; i++) {
+        let adversaryBlock = document.createElement("div");
+        let adversaryClass = `${monster.name.replace(/[^a-zA-Z0-9]/g,'-').toLowerCase()}-block`;
+        adversaryBlock.classList.add("stat-line");
+        adversaryBlock.classList.add(adversaryClass);
+
+        // add adversary name/number
+        adversaryBlock.append(getAdversaryNameBlock(monster.name, i));
+        
+        // add hp title
+        adversaryBlock.append(document.createElement("br"));
+        adversaryBlock.append(getStatNameBlock("HP"));
+
+        // for each hp make checkbox
+        for (let h = 0; h < monster.hp; h++) {
+            adversaryBlock.append(getCheckboxValueBlock("hp", h));
+        }
+        
+        // add stress title
+        adversaryBlock.append(document.createElement("br"));
+        adversaryBlock.append(getStatNameBlock("stress"));
+
+        // for each stress make checkbox
+        for (let s = 0; s < monster.stress; s++) {
+            adversaryBlock.append(getCheckboxValueBlock("stress", s));
+        }
+
+        statLine.append(adversaryBlock);
+    }
+    
+    return statLine;
+}
+
+const getCheckboxValueBlock = (type, val) => {
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.classList.add(`${type}-${val}`);
+    checkbox.classList.add("stat-value");
+    checkbox.onclick = () => {
+        console.log(tp);
+    };
+    return checkbox;
+}
+
+const getStatNameBlock = (statName) => {
+    const statNameBlock = document.createElement("span");
+    statNameBlock.classList.add("stat-name");
+    statNameBlock.innerText = `${statName.toUpperCase()}: `;
+    return statNameBlock;
+}
+
+const getAdversaryNameBlock = (adversaryName, num) => {
+    const adversaryNameBlock = document.createElement("span");
+    adversaryNameBlock.classList.add("adversary-name");
+    adversaryNameBlock.innerText = `${adversaryName.toUpperCase()} #${num}: `;
+    return adversaryNameBlock;
+}
+
+const statFullBlock = document.createElement("div");
+statFullBlock.classList.add("stat-block");
+statFullBlock.append(getStatLine());
+
+return statFullBlock;