Skip to content

Commit

Permalink
Fix Token Hud Extension for players with token config permission #67 (#…
Browse files Browse the repository at this point in the history 
…82)
  • Loading branch information
@Jagusti
Jagusti authored Jan 11, 2022
1 parent 5a46bb4 commit 4cc59fd
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 45 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. The format

## Unreleased
See [Issue Backlog](../../issues) and [Roadmap](../../milestones).
- *Fixed* missing Token Hud Extension options for players who don't have access to configure tokens. The layout of Token Hud Extensions has been reorganised as a result of this change. [[#67](https://github.com/Jagusti/fvtt-wfrp4e-gmtoolkit/issues/67)]

## Version 0.9.2
- *Fixed* duplicate results numbering in Dark Whispers table and localization omission [#79] (Thanks @Txus5012).
Expand Down
37 changes: 31 additions & 6 deletions css/gmtoolkit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,31 @@
/* 1. TOKEN HUD EXTENSIONS */
/***************************/

/* 1a. Extension Div */
/* 1a. Extension Container */

.tokenHudContainer {
display: flex;
align-items: self-end;
margin-right: 50px;
flex: 0 !important;
}

.col.tokenHudColumn {
flex-direction: column;
flex-basis: 70px;
height: unset!important;
margin-top: 24px;
}

#hudLeftInner {
align-items: flex-end;
left: -160px;
}

#hudLeftOuter {
left: -255px;
align-items: flex-start;
}

.tokenhudext {
display: flex;
Expand All @@ -35,11 +59,12 @@

.tokenhudext.left {
justify-content: flex-end;
display: inline-flex;
}

.tokenhudext.right {
/* .tokenhudext.right {
justify-content: flex-start;
}
} */

/* 1b. Hud Icons */

Expand All @@ -48,17 +73,17 @@
min-width: 42px;
flex-basis: auto;
padding: 0 8px;
margin: 8px 0px;
margin: 11px 0px;
}

.control-icon.tokenhudicon.left {
margin-right: 8px;
margin-top: auto; /* Override margin-top for first-child to maintain middle alignment */
}

.control-icon.tokenhudicon.right {
/* .control-icon.tokenhudicon.right {
margin-left: 8px;
}
} */

/* 1c. Override core hud styles to avoid misalignment */

Expand Down
72 changes: 33 additions & 39 deletions modules/token-hud-extension.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
import GMToolkit from "./gm-toolkit.mjs";
import GMToolkitSettings from "./gm-toolkit-settings.mjs";
import { hasSkill, adjustStatus } from "./utility.mjs";

export default class TokenHudExtension {

static async addTokenHudExtensions(app, html, data) {
// let actor = canvas.tokens.get(data.id).actor;
let actor = game.actors.get(canvas.tokens.controlled[0].actor.id)
if (actor === undefined) return;

const wfrp4eContent = {}
wfrp4eContent.core = game.modules.get("wfrp4e-core")?.active || false;
GMToolkit.log(false, wfrp4eContent.core)

this.addMovementTokenTip(app, html, data, actor)
this.addHudContainer(app,html,data)
this.addPlayerCharacterTokenTip(app, html, data, actor, wfrp4eContent)
this.addInitiativeTokenTip(app, html, data, actor)
this.addMovementTokenTip(app, html, data, actor)
}

static async addHudContainer(app,html,data) {
// Add Extension Container
let divTokenHudExt = '<div class="tokenHudContainer"></div>';
html.find(".col.left").before(divTokenHudExt);

// Add Extension columns
let hudExtensionColumnInner = $(`<div class="col tokenHudColumn" id="hudLeftInner"></div>`);
let hudExtensionColumnOuter = $(`<div class="col tokenHudColumn" id="hudLeftOuter"></div>`);

html.find(".tokenHudContainer").prepend(hudExtensionColumnOuter)
html.find(".tokenHudContainer").prepend(hudExtensionColumnInner)
}

static async addMovementTokenTip(app, html, data, actor) {
Expand All @@ -35,12 +47,8 @@ export default class TokenHudExtension {
TooltipMovement += `; ${game.i18n.localize("Walk")}: ${walk}; ${game.i18n.localize("Run")}: ${run}; ${game.i18n.localize("Swim")}: ${swim}`;
displayedMovement = run
}
let hudMovement = $(`<div class="control-icon tokenhudicon left" title="${TooltipMovement}"><i class="fas ${movementIcon}"></i> ${displayedMovement}</div>`);

// Create space for Hud Extensions next to elevation icon
let divTokenHudExt = '<div class="tokenhudext left">';
html.find(".attribute.elevation").wrap(divTokenHudExt);
html.find(".attribute.elevation").before(hudMovement);// Add Movement token tip
let hudMovement = $(`<div class="control-icon tokenhudicon left" id="movement" title="${TooltipMovement}"><i class="fas ${movementIcon}">&nbsp;${displayedMovement}</i></div>`);
html.find('[id = "hudLeftInner"]').prepend(hudMovement);// Add Movement token tip

// Add interactions for Movement
hudMovement.find("i").dblclick(async (ev) => {
Expand Down Expand Up @@ -119,22 +127,17 @@ export default class TokenHudExtension {
static async addInitiativeTokenTip(app, html, data, actor) {

// Do not show initiative token tip if vehicle
if (actor.type == "vehicle") return;
if (actor.type == "vehicle") return;

const actorCharacteristics = actor.data.data.characteristics;
const actorCharacteristics = actor.data.data.characteristics;

let initiative = actorCharacteristics.i.value;
let agility = actorCharacteristics.ag.value;
let initiative = actorCharacteristics.i.value;
let agility = actorCharacteristics.ag.value;

let TooltipInitiative = `${game.i18n.localize("CHAR.I")}: ${initiative}; ${game.i18n.localize("CHAR.Ag")}: ${agility}`
let TooltipInitiative = `${game.i18n.localize("CHAR.I")}: ${initiative}; ${game.i18n.localize("CHAR.Ag")}: ${agility}`

// Create space for Hud Extensions next to combat icon
let hudDataCombat = '[data-action="combat"]'
let divTokenHudExt = '<div class="tokenhudext right">';
html.find(`.control-icon${hudDataCombat}`).wrap(divTokenHudExt);

let hudInitiative = $(`<div class="control-icon tokenhudicon right" title="${TooltipInitiative}"><i class="fas fa-spinner"></i> ${initiative}</div>`);
html.find(`.control-icon${hudDataCombat}`).after(hudInitiative); // Add Initiative and Agility token tip
let hudInitiative = $(`<div class="control-icon tokenhudicon left" id="initiative" title="${TooltipInitiative}"><i class="fas fa-spinner">&nbsp;${initiative}</i></div>`);
html.find('[id = "hudLeftInner"]').prepend(hudInitiative);// Add Initiative and Agility token tip

// Add interactions for Initiative and Agility
hudInitiative.find("i").dblclick(async (ev) => {
Expand Down Expand Up @@ -188,14 +191,9 @@ export default class TokenHudExtension {

let divTokenHudExt = '<div class="tokenhudext left">';

// Create space for Hud Extensions next to config icon
// Resolve, Resilience, Fortune, Fate
let hudDataConfig = '[data-action="config"]'
html.find(`.control-icon${hudDataConfig}`).wrap(divTokenHudExt);

// Resolve and Resilience
let hudResolve = $(`<div class="control-icon tokenhudicon left" title="${TooltipResolve}"><i class="fas fa-hand-rock">&nbsp;${resolve}</i></div>`);
html.find(`.control-icon${hudDataConfig}`).before(hudResolve); // Add Resolve token tip
let hudResolve = $(`<div class="control-icon tokenhudicon left" id="resolve" title="${TooltipResolve}"><i class="fas fa-hand-rock">&nbsp;${resolve}</i></div>`);
html.find('[id = "hudLeftOuter"]').prepend(hudResolve);// Add Resolve token tip

// Add interactions for Resolve and Resilience
hudResolve.find("i").contextmenu(async (ev) => {
Expand Down Expand Up @@ -247,8 +245,8 @@ export default class TokenHudExtension {
})

// Fortune and Fate
let hudFortune = $(`<div class="control-icon tokenhudicon left" title="${TooltipFortune}"><i class="fas fa-dice">&nbsp;${fortune}</i></div>`);
html.find(`.control-icon${hudDataConfig}`).before(hudFortune); // Add Fortune token tip
let hudFortune = $(`<div class="control-icon tokenhudicon left" id="fortune" title="${TooltipFortune}"><i class="fas fa-dice">&nbsp;${fortune}</i></div>`);
html.find('[id = "hudLeftOuter"]').append(hudFortune);// Add Fortune token tip
// Add interactions for Fortune and Fate
hudFortune.find("i").contextmenu(async (ev) => {
GMToolkit.log(false, `Fortune hud extension right-clicked.`)
Expand Down Expand Up @@ -308,15 +306,11 @@ export default class TokenHudExtension {
})


// Create space for Hud Extensions next to target icon
// Corruption, Sin, Perception, Intuition
let hudDataTarget = '[data-action="target"]'
html.find(`.control-icon${hudDataTarget}`).wrap(divTokenHudExt);

// Corruption and Sin
let hudCorruption = $(`<div class="control-icon tokenhudicon left" title="${TooltipCorruption}"><i class="fas fa-bahai">&nbsp;${corruption}</i></div>`);
html.find(`.control-icon${hudDataTarget}`).before(hudCorruption); // Add Corruption token tip

let hudCorruption = $(`<div class="control-icon tokenhudicon left" id="corruption" title="${TooltipCorruption}"><i class="fas fa-bahai">&nbsp;${corruption}</i></div>`);
html.find('[id = "hudLeftOuter"]').prepend(hudCorruption);// Add Corruption token tip
// Add interactions for Corruption and Sin
hudCorruption.find("i").contextmenu(async (ev) => {
GMToolkit.log(false,`Corruption hud extension right-clicked.`)
Expand Down Expand Up @@ -400,8 +394,8 @@ export default class TokenHudExtension {
})

// Perception and Intuition
let hudPerception = $(`<div class="control-icon tokenhudicon left" title="${TooltipPerception}"><i class="fas fa-eye">&nbsp;${perception}</i></div>`);
html.find(`.control-icon${hudDataTarget}`).before(hudPerception); // Add Perception token tip
let hudPerception = $(`<div class="control-icon tokenhudicon left" id="perception" title="${TooltipPerception}"><i class="fas fa-eye">&nbsp;${perception}</i></div>`);
html.find('[id = "hudLeftInner"]').append(hudPerception);// Add Perceptiontoken tip

// Add interactions for Perception and Intuition
hudPerception.find("i").dblclick(async (ev) => {
Expand Down

0 comments on commit 4cc59fd

Please sign in to comment.