Collapse Arrow & Settings

src/features/adversaries/components/AdvList.ts → archive/AdvList.ts

@@ -1,3 +1,4 @@
+/*
 import { Editor, Notice } from "obsidian";
 import { ADVERSARIES } from "../../../data/index";
 import { filterByTier } from "../../../utils/index";
@@ -124,4 +125,4 @@ function buildCardHTML(
 </section>
 `;
 	return cardHTML.trim().replace(/\s+$/, "");
-}
+}*/

src/data/DataManager.ts

@@ -1,12 +1,14 @@
 import { Plugin } from 'obsidian';
-import { CardData ,EnvironmentData} from '../types/index';
+import { DaggerForgeSettings, DEFAULT } from '../settings';
+import { CardData ,EnvironmentData } from '../types/index';
 import { generateEnvUniqueId, generateAdvUniqueId } from '../utils/index';
 
 export interface StoredData {
 	version: string;
 	adversaries: CardData[];
 	environments: EnvironmentData[];
 	lastUpdated: number;
+	settings: DaggerForgeSettings;
 }
 
 /**
@@ -16,11 +18,13 @@ export interface StoredData {
  */
 export class DataManager {
 	private plugin: Plugin;
+	public settings: DaggerForgeSettings;
 	private data: StoredData = {
 		version: '2.0',
 		adversaries: [],
 		environments: [],
-		lastUpdated: Date.now()
+		lastUpdated: Date.now(),
+		settings: Object.assign({},DEFAULT)
 	};
 
 	constructor(plugin: Plugin) {
@@ -35,7 +39,8 @@ export class DataManager {
 			const saved = await this.plugin.loadData();
 			if (!saved) return;
 
-			this.data = { ...this.data, ...saved };
+			this.data.settings = (saved as any).settings;
+			this.settings = this.data.settings;
 
 			const allAdversaries: CardData[] = [];
 			const allEnvironments: EnvironmentData[] = [];
@@ -83,6 +88,16 @@ export class DataManager {
 		this.data.lastUpdated = Date.now();
 		await this.plugin.saveData(this.data);
 	}
+
+	// ==================== SETTINGS ====================
+
+	async changeSetting<key extends keyof DaggerForgeSettings>(
+		setting: key,
+		value: DaggerForgeSettings[key],
+	): Promise<void> {
+		this.data.settings[setting] = value;
+		await this.save();
+	}
 
 	// ==================== ADVERSARIES ====================
 
@@ -234,15 +249,6 @@ export class DataManager {
 		await this.save();
 	}
 
-	async clearAllData(): Promise<void> {
-		this.data = {
-			version: '2.0',
-			adversaries: [],
-			environments: [],
-			lastUpdated: Date.now()
-		};
-		await this.save();
-	}
 
 	/**
 	 * Delete the data.json file completely
@@ -254,7 +260,8 @@ export class DataManager {
 				version: '2.0',
 				adversaries: [],
 				environments: [],
-				lastUpdated: Date.now()
+				lastUpdated: Date.now(),
+				settings: Object.assign({},DEFAULT)
 			};
 
 			await this.plugin.saveData(null);

src/docs/API.md

@@ -16,7 +16,7 @@
 
 **TextInputModal** - Creates adversary cards with stats, weapons, features, and damage values.
 
-**DataManager** - Persistence layer. Methods: `addAdversary()`, `addEnvironment()`, `getAdversaries()`, `getEnvironments()`, `deleteAdversary()`, `deleteEnvironment()`.
+**DataManager** - Persistence layer. Methods: `changeSetting()`, `addAdversary()`, `addEnvironment()`, `getAdversaries()`, `getEnvironments()`, `deleteAdversary()`, `deleteEnvironment()`.
 
 ## Form Utilities
 
@@ -41,3 +41,5 @@
 **openEncounterCalculator** - Battle difficulty calculator.
 
 **onEditClick** - Routes edit operations for both card types.
+
+**onCollapseClick** - Routes card collapse operations for both card types.

src/features/adversaries/creator/CardBuilder.ts

@@ -77,7 +77,10 @@ export const buildCardHTML = (
     <div class="df-card-inner df-pseudo-cut-corners inner">
 		<button class="df-adv-edit-button" data-edit-mode-only="true" data-tooltip="duplicate & edit" aria-label="duplicate & edit">📝</button>
         ${hpStressRepeat}
+		<div class="df-name-container">
+		<button class="df-adv-collapse-button"></button>
         <h2>${name}</h2>
+		</div>
         <div class="df-subtitle">Tier ${tier} ${type} ${sourceBadge}</div>
         <div class="df-desc">${desc}</div>
         <div class="df-motives">Motives & Tactics:
@@ -93,7 +96,7 @@ export const buildCardHTML = (
             <div class="df-experience-line">Experience: <span class="df-stat">${xp}</span></div>
         </div>
         <div class="df-section">FEATURES</div>
-        ${featuresHTML}
+		${featuresHTML}
     </div>
 </section>
 `.trim();

src/features/adversaries/index.ts

@@ -1,8 +1,7 @@
-export * from './components/AdvList';
 export * from './components/AdvSearch';
 export * from './components/AdvCounter';
 export * from './creator/CardBuilder';
 export * from './creator/FeatureManager';
 export * from './creator/TextInputModal';
 export * from './editor/AdvEditorModal';
-export * from './editor/CardDataHelpers';
+export * from './editor/CardDataHelpers';

src/features/cardCollapse.ts

@@ -0,0 +1,47 @@
+import { Notice, App } from "obsidian";
+import type DaggerForgePlugin from "../main";
+import { getActiveCanvas } from "@/utils";
+
+export const onCollapseClick = (
+    evt: Event,
+    cardType: string,
+) => {
+    evt.stopPropagation();
+
+    const button = evt.target as HTMLElement;
+    let cardElement: HTMLElement | null = null;
+
+    if (cardType === "adv") {
+        cardElement = button.closest(".df-card-outer");
+    }
+
+    if (!cardElement) {
+        new Notice("Could not find card element!");
+        return;
+    }
+
+    const toggleElement = (element: HTMLElement | string): void => {
+        if (typeof element === 'string'){
+            new Notice(`Could not find ${element}!`);
+            return;
+        }
+        element.hidden = !element.hidden;
+        return;
+    }
+
+    let hiddenElementClasses: string[] = [];
+    //Temporary, meant to symbolize settings chosen.
+    hiddenElementClasses.push(".df-adv-edit-button",".df-subtitle",".df-desc",".df-motives", ".df-section", ".df-feature");
+    //
+    hiddenElementClasses.forEach(elementClass => {
+        if (elementClass === ".df-feature"){
+            Array.from(cardElement?.querySelectorAll<HTMLElement>(elementClass)).forEach(element => {
+                toggleElement(element ?? elementClass);
+            });
+        } else {
+            toggleElement(cardElement?.querySelector<HTMLElement>(elementClass) ?? elementClass);
+        }
+    });
+
+    button.style.rotate = (button.style.rotate === "-90deg" ? "0deg" : "-90deg");
+}

src/features/cardEditor.ts

@@ -1,6 +1,6 @@
 import { MarkdownView, Notice, App } from "obsidian";
 import type DaggerForgePlugin from "../main";
-import { EnvironmentEditorModal } from ".";
+import { EnvironmentEditorModal, onCollapseClick } from ".";
 import { extractCardData, TextInputModal } from "./adversaries/index";
 import type { EnvironmentData, EnvSavedFeatureState } from "../types/index";
 
@@ -300,21 +300,23 @@ export const onEditClick = (
 	}
 };
 
-export async function handleCardEditClick(evt: MouseEvent, app: App, plugin?: DaggerForgePlugin) {
+export async function handleCardClick(evt: MouseEvent, app: App, plugin?: DaggerForgePlugin) {
 	const target = evt.target as HTMLElement;
 	if (!target) return;
+
+	if (!plugin) {
+		new Notice("Plugin instance not available for editing.");
+		return;
+	}
 
 	let cardType: "env" | "adv" | null = null;
 	if (target.matches(".df-env-edit-button")) cardType = "env";
-	else if (target.closest(".df-adv-edit-button")) cardType = "adv";
+	else if (target.matches(".df-adv-edit-button")) cardType = "adv";
+	// With the way the clicks are currently handled, I am not aware of a better way to check than this.
+	else if (target.matches(".df-adv-collapse-button")) onCollapseClick(evt, "adv");
 
 	if (!cardType) return;
 
-	if (!plugin) {
-		new Notice("Plugin instance not available for editing.");
-		return;
-	}
-
 	// Check if we're on a canvas
 	const activeLeaf = app.workspace.activeLeaf;
 	const isCanvas = activeLeaf?.view?.getViewType?.() === "canvas";

src/features/index.ts

@@ -3,3 +3,4 @@ export * from './adversaries/index';
 export * from './environments/index';
 export * from './extra';
 export * from './cardEditor';
+export * from './cardCollapse'

src/main.ts

@@ -10,7 +10,7 @@ import {
 	environmentToHTML,
 	openDiceRoller,
 	openEncounterCalculator,
-	handleCardEditClick,
+	handleCardClick,
 } from "./features/index";
 
 import {
@@ -21,6 +21,7 @@ import {
 } from "./ui/index";
 
 import { DataManager } from "./data/index";
+import { DaggerForgeSettingTab } from "./settings";
 
 export default class DaggerForgePlugin extends Plugin {
 	updateCardData() {
@@ -34,7 +35,7 @@ export default class DaggerForgePlugin extends Plugin {
 		this.dataManager = new DataManager(this);
 		await this.dataManager.load();
 		this.addStatusBarItem().setText("DaggerForge Active");
-		this.registerDomEvent(document, "click", (evt) => handleCardEditClick(evt, this.app, this));
+		this.registerDomEvent(document, "click", (evt) => handleCardClick(evt, this.app, this));
 		this.registerView(
 			ADVERSARY_VIEW_TYPE,
 			(leaf) => new AdversaryView(leaf),
@@ -44,6 +45,8 @@ export default class DaggerForgePlugin extends Plugin {
 			(leaf) => new EnvironmentView(leaf),
 		);
 
+		this.addSettingTab(new DaggerForgeSettingTab(this.app, this));
+
 		this.addRibbonIcon(
 			"scroll-text",
 			"DaggerForge menu",

src/settings.ts

@@ -0,0 +1,40 @@
+import DaggerForgePlugin from '@/main';
+import { App, PluginSettingTab, Setting } from 'obsidian';
+
+export interface DaggerForgeSettings {
+    collapseButtonHidden: boolean;
+}
+
+export const DEFAULT: DaggerForgeSettings = {
+    collapseButtonHidden: true,
+}
+
+export function collapseButtonToggle(value: boolean) {
+    document.documentElement.style.setProperty('--df-collapse-button-display', (value ? 'none' : 'flex'));
+}
+
+export class DaggerForgeSettingTab extends PluginSettingTab {
+  plugin: DaggerForgePlugin;
+
+  constructor(app: App, plugin: DaggerForgePlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+
+    display(): void {
+    let { containerEl } = this;
+
+    containerEl.empty();
+
+    new Setting(containerEl)
+      .setName('Hide collapse arrow')
+      .setDesc('On cards, the collapse arrow will be hidden unless the name is hovered over.')
+      .addToggle(toggle => toggle 
+        .setValue(this.plugin.dataManager.settings.collapseButtonHidden)
+        .onChange(async (value) => { 
+            await this.plugin.dataManager.changeSetting('collapseButtonHidden', value);
+            collapseButtonToggle(value);
+        })
+      );
+  }
+}

styles.css

@@ -1,4 +1,5 @@
 :root {
+  --df-collapse-button-display: none;
   --df-corner: 10px;
   --df-font: "Myriad Pro";
   --df-color-primary: #000;
@@ -186,6 +187,26 @@
 	font-weight: 400;
 }
 
+.df-name-container {
+	display: flex;
+	justify-content: left;
+}
+
+.df-name-container:hover .df-adv-collapse-button {
+	display: flex;
+}
+
+.df-adv-collapse-button {
+	display: var(--df-collapse-button-display);
+	width: 1px; /*Without these the button crops weird, but the size does not actually do anything. I do not know enough CS to understand whats happening.*/
+	height: 1px;
+	padding-bottom: 20px;
+	margin-right: 5px;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
+	background-color: var(--df-color-bg-inner) !important;
+	box-shadow: none !important;
+}
+
 .df-stats .df-experience-line {
 	border-top: 1px dotted black;
 	margin-top: 1px;