feat: Skill / Tool view toggle

[kgar]

thatlonelybugbear suggested looking into potentially a Skills/Tools toggle like Zhell demo'd on the main Foundry discord server.

The video says it all:

https://github.com/kgar/foundry-vtt-tidy-5e-sheets/assets/4632129/052e7c66-de79-480c-8d55-1a52b4bc7068

Reference

https://discord.com/channels/170995199584108546/1205721176358395967/1208188061452738590

Zhell — 02/16/2024 5:08 PM

Hooks.on("renderActorSheet5eCharacter2", function(sheet, [html]) {
  if (sheet._mode !== sheet.constructor.MODES.PLAY) return;
  const div = document.createElement("DIV");
  const abi = sheet._hiddenAbility ??= "tool";
  div.innerHTML = `<a class="swap hide-${abi}"><i class="fa-solid fa-right-left"></i></a>`;
  div.firstElementChild.addEventListener("click", swapAbilityBox.bind(sheet));
  html.querySelector(".dnd5e2.sheet.actor.character .sheet-body .tab-body .col-2 > .left").prepend(div.firstElementChild);
});

function swapAbilityBox(event) {
  const target = event.currentTarget;
  this._hiddenAbility = this._hiddenAbility === "skill" ? "tool" : "skill";
  target.classList.toggle("hide-skill", this._hiddenAbility === "skill");
  target.classList.toggle("hide-tool", this._hiddenAbility !== "skill");
}

.dnd5e2.sheet.actor.character .sheet-body .tab-body .col-2 > .left {
  position: relative;
}
.dnd5e2.sheet.actor.character .sheet-body .tab-body .col-2 > .left:has(.hide-skill) .skills,
.dnd5e2.sheet.actor.character .sheet-body .tab-body .col-2 > .left:has(.hide-tool) .tools {
  display: none;
}
.dnd5e2.sheet.actor.character .sheet-body .tab-body .col-2 .swap {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1;
}

Result: