Quick toggle to sheet image

lang/en.json

@@ -224,6 +224,9 @@
 		"ProfBonus": "Proficiency Bonus",
 
 		"EditHint": "Right-click to edit",
+		"ProfileImageHintAlt": "Alt key to switch image",
+		"ProfileImageHintShift": "Shift key to show current image to players",
+		"ProfileImageHintCtrl": "Control key to show alternate image to players",
 		"EditButtonHint": "Click the + button above to add features",
 
 		"AddFeat": "Feature",

lang/fr.json

@@ -224,6 +224,9 @@
 		"ProfBonus": "Bonus de compétence",
 
 		"EditHint": "Clic-droit pour éditer",
+		"ProfileImageHintAlt": "Touche Alt pour changer d'image",
+		"ProfileImageHintShift": "Touche Maj pour afficher l'image actuelle aux joueurs",
+		"ProfileImageHintCtrl": "Touche de contrôle pour montrer une autre image aux joueurs",
 		"EditButtonHint": "Cliquez sur le bouton + ci-dessus pour ajouter des fonctionnalités",
 
 		"AddFeat": "Capacité",

lang/ja.json

@@ -224,6 +224,9 @@
 		"ProfBonus": "習熟度ボーナス",
 
 		"EditHint": "右クリックして編集",
+		"ProfileImageHintAlt": "画像を切り替えるAltキー",
+		"ProfileImageHintShift": "Shiftキーを押して、現在の画像をプレーヤーに表示します",
+		"ProfileImageHintCtrl": "プレーヤーに代替画像を表示するためのコントロールキー",
 		"EditButtonHint": "機能を追加するには、上の[+]ボタンをクリックしてください",
 
 		"AddFeat": "特徴",

lang/pt-BR.json

@@ -224,6 +224,9 @@
 		"ProfBonus": "Bônus de proficiência",
 
 		"EditHint": "Clique com o botão direito para editar",
+		"ProfileImageHintAlt": "Tecla Alt para alternar a imagem",
+		"ProfileImageHintShift": "Tecla Shift para mostrar a imagem atual aos jogadores",
+		"ProfileImageHintCtrl": "Tecla de controle para mostrar imagem alternativa aos jogadores",
 		"EditButtonHint": "Clique no botão + acima para adicionar recursos",
 
 		"AddFeat": "Característica",

scripts/Flags.js

@@ -101,4 +101,8 @@ export default class Flags {
 			yield { name, ...details, value: this.flags[name] }
 		}
 	}
+
+	toggle(name) {
+		this.flags[name] = !this.flags[name];
+	}
 }

scripts/dnd5e/MonsterBlock5e.js

@@ -671,20 +671,15 @@ export default class MonsterBlock5e extends ActorSheet5eNPC {
 		});
 		html.find(".switch").click((event) => {							// Switches are the primary way that settings are applied per-actor.
 			event.preventDefault();
-			let control = event.currentTarget.dataset.control;			// A data attribute is used on an element with the class .switch, and it contains the name of the switch to toggle.
-
-			let state = !this.flagManager.flags[control];	            // Get the current setting of this flag, and reverse it.
-			if (debug.enabled) console.debug(`Monster Block | %cSwitching: ${control} to: ${state}`, "color: orange")
-
-			this.flagManager.flags[control] = state;                    // Set the flag to the new state.
+			this.flagManager.toggle(event.currentTarget.dataset.control);
 		});
-		html.find(".trigger").click((event) => {							
+		html.find(".trigger").click((event) => {
 			event.preventDefault();
 			let control = event.currentTarget.dataset.control;
-			
+
 			this[control](event);
 		});
-		html.find(".switch-input").keydown((event) => {							
+		html.find(".switch-input").keydown((event) => {
 			if (event.key !== "Enter") return;
 			event.preventDefault();
 			let target = event.currentTarget;
@@ -696,11 +691,26 @@ export default class MonsterBlock5e extends ActorSheet5eNPC {
 		html.find(".profile-image").click((event) => {
 			event.preventDefault();
 
-			new ImagePopout(event.target.currentSrc, {
+			// toggle the profile image - alt for alternate
+			if (event.altKey) {
+				this.flagManager.toggle("use-token-image");
+				return;
+			}
+
+			let image = event.target.currentSrc;
+
+			if (event.ctrlKey) image = event.target.dataset.edit.startsWith("token.") ? this.actor.data.img : this.actor.data.token.img;
+
+			console.log(image);
+
+			// open the profile image
+			const popout = new ImagePopout(image, {
 				title: this.actor.name,
 				shareable: true,
 				uuid: this.actor.uuid
 			}).render(true);
+
+			if (event.ctrlKey || event.shiftKey) popout.shareImage();
 		});
 
 		html.find("[data-roll-formula]").click(async (event) => {			// Universal way to add an element that provides a roll, just add the data attribute "data-roll-formula" with a formula in it, and this applies.

templates/dnd5e/parts/header/identity.hbs

@@ -30,6 +30,10 @@
 			{{else}}
 				src="{{actor.img}}" data-edit="img"
 			{{/if}}
-			title="{{actor.name}}{{#if flags.editing}} - {{localize "MOBLOKS5E.EditHint"}}{{/if}}">
+			title="{{actor.name~}}
+			{{#if flags.editing}}
- {{localize "MOBLOKS5E.EditHint"}}{{/if~}}
+			
- {{localize "MOBLOKS5E.ProfileImageHintAlt"~}}
+			
- {{localize "MOBLOKS5E.ProfileImageHintShift"~}}
+			
- {{localize "MOBLOKS5E.ProfileImageHintCtrl"}}">
 	</figure>
 {{/unless}}