Added definitive styling for groups and the group buttons

2026-07-22 05:44:15 +00:00 · 2026-01-14 22:01:07 -06:00 · 2026-01-14 22:01:07 -06:00 · 811baf9c88
commit 811baf9c88
parent b3c01e9a16
5 changed files with 58 additions and 24 deletions
--- a/lib/Models/Constants.ts
+++ b/lib/Models/Constants.ts
@ -9,5 +9,17 @@ export const centered = "Centered";
 export const heroes = "heroes";
 export const villains = "villains";
 export const group = "group";
+export const groupHeader = "groupHeader";
 export const trackerTableStyle = "trackerTableStyle";
-export const leftAlign = "leftAlign";
+export const trackerRowTableStyle = "trackerRowTableStyle";
+export const trackerGroupRowTableStyle = "trackerGroupRowTableStyle";
+export const leftAlign = "leftAlign";
+export const fullScreen = "fullScreen";
+export const paddingLeft5 = "p-left-5";
+export const max50Width = "max50Width";
+export const height25 = "height25";
+export const ninetyPercentWidth = "ninetyPercentWidth";
+export const eightyPercentWidth = "eightyPercentWidth";
+export const twentyPercentWidth = "twentyPercentWidth";
+export const tenPercentWidth = "tenPercentWidth";
+export const flex = "flex";
--- a/lib/Views/InitiativeTrackerView.ts
+++ b/lib/Views/InitiativeTrackerView.ts
@ -6,6 +6,7 @@ import { CreatureTypes } from 'lib/Models/CreatureTypes';
 import * as Behaviors from 'lib/Behaviors/TextInputBehaviors';

 export class InitiativeView extends ItemView {
+  app: App;
  gridEl: HTMLDivElement;
  formEl: HTMLDivElement;
  roundEl: HTMLDivElement;
@ -25,7 +26,6 @@ export class InitiativeView extends ItemView {
  buttons: ButtonComponent[] = [];
  round: number = 1;
  malice: number;
-  app: App;

  constructor(leaf: WorkspaceLeaf, app: App, villains?: Creature[], heroes?: Creature[]) {
    super(leaf);
@ -106,7 +106,6 @@ export class InitiativeView extends ItemView {

    this.setInputButtonComponent(new ButtonComponent(this.formEl), "Hero",() => this.createCreatureRow(undefined, true) );
    this.setInputButtonComponent(new ButtonComponent(this.formEl), "Villain",() => this.createCreatureRow(undefined, false) );
-    //this.setInputButtonComponent(new ButtonComponent(this.formEl), "Group", () => this.createGroupRow() );
    this.createRoundSection();
  }

@ -180,9 +179,13 @@ export class InitiativeView extends ItemView {
      this.villainsTableEl = this.gridEl.createEl('table', {cls: classes});
    }
    let header = isHero ? this.heroesTableEl.createEl('tr', {cls: 'tableHeaderHeight'}) : this.villainsTableEl.createEl('tr', {cls: 'tableHeaderHeight'});
-    let titleCell = header.createEl('th', { cls: 'ninetyPercentWidth leftAlign'});
+    let titleCell = header.createEl('th', { cls: `${cssConstants.eightyPercentWidth} leftAlign`});
    isHero ? titleCell.createEl("h4", {text: "Heroes", cls: "noPaddingNoMargin"}) : titleCell.createEl("h4", {text: "Villains", cls: "noPaddingNoMargin"});
-    let createButtonHeader = header.createEl('th', {cls: 'tenPercentWidth'});
+    let createButtonHeader = header.createEl('th', {cls: `${cssConstants.twentyPercentWidth} ${cssConstants.flex}`});
+    let createGroupButton = new ExtraButtonComponent(createButtonHeader)
+    createGroupButton.onClick(() => this.createGroupRow(isHero ? this.heroesTableEl : this.villainsTableEl));
+    createGroupButton.extraSettingsEl.setText("Group");
+    createGroupButton.extraSettingsEl.addClasses(["headerButtonRight", "fullFill", "interactiveColor"]);
    let resetButtonComp = new ExtraButtonComponent(createButtonHeader)
    resetButtonComp.extraSettingsEl.setText("Clear");
    resetButtonComp.extraSettingsEl.addClasses(["headerButtonRight", "fullFill", "interactiveColor"]);
@ -203,11 +206,10 @@ export class InitiativeView extends ItemView {
      else if (!isHero && this.villains.length > -1){
        this.villains.forEach((creature) => this.createCreatureRow(creature, isHero));
      }
-      //buttonHeader.createEl('button', { text: "Create"});
  }

-  createGroupRow(){
-    let groupRow = this.heroesTableEl.createEl('tr').createDiv();
+  createGroupRow(table: HTMLDivElement){
+    let groupRow = table.createEl('tr').createDiv();
    groupRow.ondragover = (e) =>{
      e.preventDefault();
    };
@ -216,10 +218,15 @@ export class InitiativeView extends ItemView {
      let data = e.dataTransfer?.getData("text");
      console.log("Drop: " +  data);
    };
-    groupRow.addClasses([cssConstants.group, cssConstants.trackerTableStyle]);
-    groupRow.addClasses([cssConstants.centered, cssConstants.leftAlign])
-    groupRow.createDiv().setText("Group 1");
    let groupTable = groupRow.createEl('table');
+    groupTable.addClasses([cssConstants.group, cssConstants.trackerRowTableStyle, cssConstants.centered, cssConstants.leftAlign, cssConstants.fullScreen]);
+    let groupHeader = groupTable.createEl('tr', {cls: `${cssConstants.groupHeader}`});
+    groupHeader.createEl('th', {text: 'Group', cls: `${cssConstants.paddingLeft5} ninetyPercentWidth`});
+    var actButton = new ExtraButtonComponent(groupHeader.createEl('th'));
+    actButton.extraSettingsEl.setText('ACT');
+    actButton.extraSettingsEl.addClasses(['.tenPercentWidth', 'headerButtonRight', cssConstants.height25])
+    groupTable.createEl('tr')
+
  }

  createCreatureObject(isHero: boolean){
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,9 @@
 			"name": "draw-steel-retainer",
 			"version": "1.0.18",
 			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.3"
+			},
 			"devDependencies": {
 				"@types/node": "^16.11.6",
 				"@typescript-eslint/eslint-plugin": "5.29.0",
@ -1029,10 +1032,10 @@
 			}
 		},
 		"node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
 			},
@ -1801,8 +1804,7 @@
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
 		},
 		"node_modules/natural-compare": {
 			"version": "1.4.0",
--- a/package.json
+++ b/package.json
@ -20,5 +20,8 @@
 		"obsidian": "latest",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"
+	},
+	"dependencies": {
+		"debug": "^4.4.3"
 	}
 }
--- a/styles.css
+++ b/styles.css
@ -17,12 +17,21 @@
 .ninetyPercentWidth{
    width: 90%;
 }
+.eightyPercentWidth{
+    width: 80%;
+}
+.twentyPercentWidth{
+    width: 20%;
+}
 .tenPercentWidth{
    width: 10%;
 }
 .maxThirdWidth{
    max-width: 33%;
 }
+.height25{
+    height: 25px;
+}

 .noPaddingNoMargin{
    padding: 0px;
@ -81,13 +90,6 @@
 .tableRowStyle{
    display: table-row;
 }
-.groupHeader{
-    margin-top: 11px;
-    margin-left: -13px;
-}
-.groupMinHeight{
-    min-height: 70px;
-}
 .flex {
    display: flex;
 }
@ -192,6 +194,14 @@
 }
 .group {
    border: 2px solid var(--color-base-100);
+    border-radius: 10px;
+    min-height: 100px;
+}
+.groupHeader {
+    height: 30px;
+}
+.p-left-5{
+    padding-left: 5px;
 }
 .villains {
    border: 2px solid var(--color-red);