Merge pull request #56 from valentine195/logs

Improves multi-creature HP and Status UX
javalent · Aug 10, 2022 · 8745aba · 8745aba
2 parents bfb4214 + e255d5d
commit 8745aba
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.4.5](https://github.com/valentine195/obsidian-initiative-tracker/compare/7.6.0...7.4.5) (2022-08-10)
+
+
+### Bug Fixes
+
+* improved multi-creature hp and status ux ([30de922](https://github.com/valentine195/obsidian-initiative-tracker/commit/30de9220ea4b5dc6c3f6b7afba2784ab860792af))
+
 ### [7.4.4](https://github.com/valentine195/obsidian-initiative-tracker/compare/7.4.3...7.4.4) (2022-06-09)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "initiative-tracker",
-    "version": "7.4.4",
+    "version": "7.6.0",
     "description": "TTRPG Initiative Tracker for Obsidian.md",
     "main": "main.js",
     "scripts": {
@@ -34,7 +34,7 @@
         "dotenv": "^10.0.0",
         "esbuild": "^0.14.2",
         "esbuild-svelte": "^0.6.0",
-        "obsidian": "^0.12.11",
+        "obsidian": "^0.15.9",
         "rollup": "^2.32.1",
         "rollup-plugin-css-only": "^3.1.0",
         "rollup-plugin-svelte": "^7.1.0",

diff --git a/src/svelte/App.svelte b/src/svelte/App.svelte
@@ -49,10 +49,16 @@
     const removeIcon = (node: HTMLElement) => {
         setIcon(node, REMOVE);
     };
+    const checkIcon = (node: HTMLElement) => {
+        setIcon(node, "check");
+    };
+    const cancelIcon = (node: HTMLElement) => {
+        setIcon(node, "cross-in-box");
+    };
 
     let damage: string = "";
     let status: Condition = null;
-    let updatingCreatures: { [key: string]: any }[] = [];
+    export let updatingCreatures: { [key: string]: any }[] = [];
     const updateCreatures = (toAddString: string, tag: Condition) => {
         const roundHalf = !toAddString.includes(".");
 
@@ -158,7 +164,7 @@
     <Table
         {creatures}
         {state}
-        on:hp={(evt) => {            
+        on:hp={(evt) => {
             let index = updatingCreatures.findIndex(
                 (entry) => entry.creature == evt.detail.creature
             );
@@ -242,10 +248,32 @@
                 }}
             />
         </div>
+        <div class="updating-buttons">
+            <span
+                use:checkIcon
+                on:click={() => updateCreatures(damage, status)}
+                style="cursor:pointer"
+                aria-label="Apply"
+            />
+            <span
+                use:cancelIcon
+                on:click={closeUpdateCreatures}
+                style="cursor:pointer"
+                aria-label="cancel"
+            />
+        </div>
+        <div>
+            <small>Multiple creatures can be selected at a time.</small>
+        </div>
         <div style="margin: 0.5rem">
             <table class="updating-creature-table">
                 <thead class="updating-creature-table-header">
-                    <th style="padding:0 0.2rem 0 0; cursor:pointer" class="left" use:removeIcon on:click={closeUpdateCreatures}/>
+                    <th
+                        style="padding:0 0.2rem 0 0; cursor:pointer"
+                        class="left"
+                        use:removeIcon
+                        on:click={closeUpdateCreatures}
+                    />
                     <th style="width:100%" class="left">Name</th>
                     <th style="padding:0 0.2rem" class="center">Saved</th>
                     <th style="padding:0 0.2rem" class="center">Resist</th>
@@ -254,7 +282,7 @@
                 <tbody>
                     {#each updatingCreatures as { creature, saved, resist, customMod }, i}
                         <tr class="updating-creature-table-row">
-                            <td 
+                            <td
                                 use:removeIcon
                                 on:click={function (evt) {
                                     updatingCreatures.splice(i, 1);
@@ -263,7 +291,12 @@
                                 style="cursor:pointer"
                             />
                             <td>
-                                <span>{creature.name + (creature.number ? (" " + creature.number) : "")}</span>
+                                <span
+                                    >{creature.name +
+                                        (creature.number
+                                            ? " " + creature.number
+                                            : "")}</span
+                                >
                             </td>
                             <td class="center">
                                 <input
@@ -437,4 +470,10 @@
     .initiative-tracker-name {
         margin: 0;
     }
+
+    .updating-buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 1rem;
+    }
 </style>
diff --git a/src/svelte/CreatureControls.svelte b/src/svelte/CreatureControls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { ExtraButtonComponent, Menu } from "obsidian";
     import type InitiativeTracker from "src/main";
-    import { DISABLE, ENABLE, MAPMARKER, REMOVE, TAG } from "src/utils";
+    import { DISABLE, ENABLE, HP, MAPMARKER, REMOVE, TAG } from "src/utils";
     import type { Creature } from "src/utils/creature";
     import type TrackerView from "src/view";
     import { createEventDispatcher } from "svelte";
@@ -19,6 +19,13 @@
         hamburger.extraSettingsEl.onclick = (evt) => {
             evt.stopPropagation();
             const menu = new Menu(view.plugin.app);
+            menu.addItem((item) => {
+                item.setIcon(HP)
+                    .setTitle("Set Health/Status")
+                    .onClick(() => {
+                        dispatch("hp", creature);
+                    });
+            });
             menu.addItem((item) => {
                 item.setIcon("pencil")
                     .setTitle("Edit")

diff --git a/src/svelte/Table.svelte b/src/svelte/Table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Menu, setIcon } from "obsidian";
+    import { Menu, Platform, setIcon } from "obsidian";
     import { AC, DISABLE, ENABLE, HP, MAPMARKER, REMOVE, TAG } from "src/utils";
 
     import { flip } from "svelte/animate";
@@ -13,6 +13,9 @@
     export let creatures: Creature[] = [];
     export let state: boolean;
 
+    const clickModifier =
+        Platform.isMacOS || Platform.isIosApp ? "Meta" : "Control";
+
     const dispatch = createEventDispatcher();
 
     const view = getContext<TrackerView>("view");
@@ -147,8 +150,20 @@
                         animate:flip={{ duration: flipDurationMs }}
                         data-hp={creature.hp}
                         data-hp-max={creature.max}
-                        data-hp-percent={Math.round((((creature.hp ?? 0) / creature.max) * 100) ?? 0)}
-                        on:click={() => openView(creature)}
+                        data-hp-percent={Math.round(
+                            ((creature.hp ?? 0) / creature.max) * 100 ?? 0
+                        )}
+                        on:click={(evt) => {
+                            console.log(
+                                clickModifier,
+                                evt.getModifierState(clickModifier)
+                            );
+                            if (evt.getModifierState(clickModifier)) {
+                                dispatch("hp", creature);
+                                return;
+                            }
+                            openView(creature);
+                        }}
                         on:contextmenu={(evt) => hamburgerIcon(evt, creature)}
                     >
                         <CreatureTemplate {creature} on:hp on:tag on:edit />