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

[#1] New Tidy compatibility update #2

Merged
merged 2 commits into from
Mar 29, 2024
Merged

[#1] New Tidy compatibility update #2

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1eb5d7
Added Tidy 5e API hook into the custom render lifecycle.
kgar Mar 29, 2024
20f27d2
Resolved linting issues.
kgar Mar 29, 2024
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
77 changes: 71 additions & 6 deletions src/module/so-inspired.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,75 @@
updateSheetForInspo(user);
//updatePlayerListInspo();
});

Hooks.on("tidy5e-sheet.renderActorSheet", (app, element, data) => {

Check failure on line 27 in src/module/so-inspired.js

View workflow job for this annotation

GitHub Actions / lint 

'data' is defined but never used
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I'm running things in svelte, I have to post up my own lifecycle hook.

if (app.actor.type !== "character") {
return;
}

const html = $(element);

const inspirationArea = html.find(".inspiration");
inspirationArea.hide();

let currentInspiration;
const actorOwner = game.users.find(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this PR, I just copied a lot of the functionality from the main logic. Please feel free to extract the common behaviors into functions if that works better for you.

(u) => u.character?.uuid === app.actor.uuid
);
if (actorOwner) {
currentInspiration = actorOwner.getFlag("so-inspired", "inspirationCount");

let newInspirationArea = `
<div
data-tidy-render-scheme="handlebars"
class="counter flexrow new-inspiration"
style="width: 200px; height: 25px; display: flex; margin: 10px 10px 10px 10px"
>
<h4>Inspiration</h4>
<div class="counter-value">
<button
type="button"
class="add-inspiration-btn"
style="height: 20px; width: 20px; line-height: 0px; padding-left: 2px"
>
<i
class="fa-solid fa-plus"
style="color: var(--t5e-primary-font-color)"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This CSS variable reference makes So Inspired! work with Tidy's light and dark modes 💪💅

></i>
</button>
<button
type="button"
class="remove-inspiration-btn"
style="height: 20px; width: 20px; line-height: 0px; padding-left: 2px"
>
<i
class="fa-solid fa-minus"
style="color: var(--t5e-primary-font-color)"
></i>
</button>
<span class="inspiration-span" style="margin-left: 10px">
${currentInspiration}
</span>
</div>
</div>`;

Check failure on line 77 in src/module/so-inspired.js

View workflow job for this annotation

GitHub Actions / lint 

Delete `······`
html.find(".tidy5e-sheet-header").after(newInspirationArea);

html
.find(".add-inspiration-btn")
.off("click")
.on("click", function () {
addInspiration(actorOwner, app);
});
html
.find(".remove-inspiration-btn")
.off("click")
.on("click", function () {
removeInspiration(actorOwner, app);
});
}
});

/*
async function updatePlayerListInspo() {
const playerList = $(document)
Expand Down Expand Up @@ -68,11 +137,7 @@
let counterArea;
let newInspirationArea;
console.log(maxInspiration);
if (_sheet.options.classes.includes("tidy5e")) {
counterArea = $(html).find(".tidy5e-header");
newInspirationArea = `<div class="counter flexrow new-inspiration" style="width: 200px; height:25px; display:flex; margin: 10px 10px 10px 10px;"><h4>Inspiration</h4><div class="counter-value"><button type="button" class="add-inspiration-btn" style="height:20px;width:20px;line-height:0px;padding-left:2px;"><i class="fa-solid fa-plus" style="color: #000000;"></i></button><button type="button" class="remove-inspiration-btn" style="height:20px;width:20px;line-height:0px;padding-left:2px;"><i class="fa-solid fa-minus" style="color: #000000;"></i></button><span class="inspiration-span" style="margin-left:10px;">${currentInspiration}</span></div></div>`;
counterArea.after(newInspirationArea);
} else if (_sheet.options.classes.includes("dnd5e2")) {
if (_sheet.options.classes.includes("dnd5e2")) {
counterArea = $(html).find(".card .stats").children().last();
newInspirationArea = `<div class="meter-group"><div class="label roboto-condensed-upper"><span>Inspiration</span></div><div class="meter hit-dice progress" role="meter" aria-valuemin="0" aria-valuenow="${currentInspiration}" aria-valuemax="${maxInspiration}" style="--bar-percentage: ${
(currentInspiration / maxInspiration) * 100
Expand Down Expand Up @@ -139,6 +204,6 @@

function updateSheetForInspo(user) {
if (user?.character.sheet.rendered) {
user.character.sheet.render(true);
user.character.sheet.render(false);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mysurvive this is mostly just a recommendation.
render(true) can have some surprising effects when it fires off for each user change.
Tidy and the new Default Sheets can frequently have user changes that do not relate to this module which can be triggered from actions within the sheet, such as changing the sort on various tabs.
I tested it and noted that the legacy sheet and Tidy were refreshing successfully with a render(false).

}
}
Loading