Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a button to disable the Drag & Drop feature on the Tracker #311

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add a button to disable the Drag & Drop feature on the Tracker #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a714ca2
fix: Issue 227 - Named Creatures of same type append 1
NDomergue Dec 29, 2024
c0db548
Add lock mechanism to the Drag Drop feature of the Tracker.
NDomergue Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 18 additions & 30 deletions src/tracker/stores/tracker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,25 +290,20 @@ function createTracker() {
trySave();
}

const setNumbers = (list: Creature[]) => {
for (let i = 0; i < list.length; i++) {
const creature = list[i];
if (
creature.player ||
list.filter((c) => c.name == creature.name).length == 1
) {
continue;
}
if (creature.number > 0) continue;
const prior = list
.filter((c) =>
c.display
? c.display == creature.display
: c.name == creature.name
)
.map((c) => c.number);

creature.number = prior?.length ? Math.max(...prior) + 1 : 1;
/**
* Re-Calculate the number attribute of each non-player Creature in the given list
* by counting them grouped by distinct name or display name.
* @param lstCreatures
*/
const setNumbers = (lstCreatures: Creature[]) => {
const filteredCreatures = lstCreatures.filter((c) => !c.player);
const distinctCreatures: Map<string, number> = new Map();
for (const creature of filteredCreatures) {
const pseudo = creature.display ?? creature.name;
let nb = distinctCreatures.get(pseudo);
nb = nb !== undefined ? nb + 1 : 0;
creature.number = nb;
distinctCreatures.set(pseudo, nb);
}
};

Expand Down Expand Up @@ -475,12 +470,8 @@ function createTracker() {
(entry.saved ? 0.5 : 1) *
(entry.resist ? 0.5 : 1) *
Number(entry.customMod);
const name = [creature.name];
if (creature.number > 0) {
name.push(`${creature.number}`);
}
const message: UpdateLogMessage = {
name: name.join(" "),
name: creature.getName(),
hp: null,
temp: false,
max: false,
Expand Down Expand Up @@ -917,7 +908,8 @@ function createTracker() {
thresholds: rpgSystem.getDifficultyThresholds(players),
labels: rpgSystem.systemDifficulties
};
})
}),
dragEnabled: writable<boolean>(true)
};
}

Expand Down Expand Up @@ -1240,12 +1232,8 @@ class Tracker {
(entry.saved ? 0.5 : 1) *
(entry.resist ? 0.5 : 1) *
Number(entry.customMod);
const name = [creature.name];
if (creature.number > 0) {
name.push(`${creature.number}`);
}
const message: UpdateLogMessage = {
name: name.join(" "),
name: creature.getName(),
hp: null,
temp: false,
max: false,
Expand Down
30 changes: 27 additions & 3 deletions src/tracker/ui/creatures/Table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import CreatureTemplate from "./Creature.svelte";

import { AC, DICE, HP, META_MODIFIER } from "src/utils";
import { AC, DICE, HP, LOCK, UNLOCK } from "src/utils";
import { Creature, getId } from "src/utils/creature";
import { createEventDispatcher } from "svelte";
import { dndzone } from "svelte-dnd-action";
Expand All @@ -14,7 +14,7 @@
import { getContext } from "svelte";

const plugin = getContext<InitiativeTracker>("plugin");
const { state, ordered } = tracker;
const { state, ordered, dragEnabled } = tracker;

$: items = [...$ordered].map((c) => {
return { creature: c, id: getId() };
Expand Down Expand Up @@ -60,11 +60,34 @@
const diceIcon = (node: HTMLElement) => {
new ExtraButtonComponent(node).setIcon(DICE);
};

const lockIcon = (node: HTMLElement) => {
new ExtraButtonComponent(node).setIcon(LOCK);
};

const unlockIcon = (node: HTMLElement) => {
new ExtraButtonComponent(node).setIcon(UNLOCK);
};
</script>

<table class="initiative-tracker-table">
{#if $ordered.length}
<thead class="tracker-table-header">
{#if $dragEnabled}
<td
style="width: 10%;"
use:unlockIcon
aria-label="Lock Drag & Drop"
on:click={() => ($dragEnabled = false)}
/>
{:else}
<td
style="width: 10%;"
use:lockIcon
aria-label="Unlock Drag & Drop"
on:click={() => ($dragEnabled = true)}
/>
{/if}
<td
style="width: 10%;"
use:diceIcon
Expand All @@ -81,7 +104,8 @@
items,
flipDurationMs,
dropTargetStyle: {},
morphDisabled: true
morphDisabled: true,
dragDisabled: !$dragEnabled
}}
on:consider={handleDndConsider}
on:finalize={handleDndFinalize}
Expand Down
8 changes: 8 additions & 0 deletions src/utils/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ export function registerIcons() {
SORT_STRING,
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-a-z"><path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="M20 8h-5"></path><path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10"></path><path d="M15 14h5l-5 6h5"></path></svg>`
);
addIcon(LOCK, LOCK_ICON);
addIcon(UNLOCK, UNLOCK_ICON);
}
export const EXPAND = "expand-creatures";
export const GROUP = "group-creatures";
Expand Down Expand Up @@ -162,3 +164,9 @@ const PLAYER_VIEW_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5

export const BUILDER_VIEW = "intiative-tracker-encounter-builder";
const BUILDER_ICON = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"/></svg>`;

export const LOCK = "initiative-tracker-lock";
const LOCK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>`;

export const UNLOCK = "initiative-tracker-unlock";
const UNLOCK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M144 144c0-44.2 35.8-80 80-80c31.9 0 59.4 18.6 72.3 45.7c7.6 16 26.7 22.8 42.6 15.2s22.8-26.7 15.2-42.6C331 33.7 281.5 0 224 0C144.5 0 80 64.5 80 144l0 48-16 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-240 0 0-48z"/></svg>`;