Nouvelles TMRs

changelog.md

@@ -1,4 +1,7 @@
 # v11.0
+## v11.0.24 - les couleurs de Khrachtchoum
+- nouvelle carte des TMRs
+
 ## v11.0.23 - la lumière de Khrachtchoum
 - ajustement automatique de la luminosité selon l'heure pour les scènes:
    - avec une vision des tokens (sinon: ce n'est pas une scène de carte pour tokens)

module/rdd-tmr-dialog.js

@@ -46,7 +46,7 @@ export class RdDTMRDialog extends Dialog {
 
     const dialogOptions = {
       classes: ["tmrdialog"],
-      width: 920, height: 980,
+      width: 920, maxheight: 1024, height: 'fit-content',
       'z-index': 40
     }
     super(dialogConf, dialogOptions);
@@ -62,7 +62,6 @@ export class RdDTMRDialog extends Dialog {
     this.allTokens = [];
     this.rencontreState = 'aucune';
     this.pixiApp = new PIXI.Application({ width: 720, height: 860 });
-
     this.pixiTMR = new PixiTMR(this, this.pixiApp);
 
     this.callbacksOnAnimate = [];
@@ -906,15 +905,12 @@ export class RdDTMRDialog extends Dialog {
     if (this.viewOnly) {
       return;
     }
-    let clickOddq = RdDTMRDialog._computeEventOddq(event.nativeEvent);
+    let clickOddq = TMRUtility.computeEventOddq(event);
-    await this._onClickTMRPos(clickOddq); // Vérifier l'état des compteurs reve/fatigue/vie
-  }
-
-  /* -------------------------------------------- */
-  async _onClickTMRPos(clickOddq) {
     let currentOddq = TMRUtility.coordTMRToOddq(this._getActorCoord());
+
     let targetCoord = TMRUtility.oddqToCoordTMR(clickOddq);
     let currentCoord = TMRUtility.oddqToCoordTMR(currentOddq);
+
     // Validation de la case de destination (gestion du cas des rencontres qui peuvent téléporter)
     let deplacementType = this._calculDeplacement(targetCoord, currentCoord, currentOddq, clickOddq);
 
@@ -946,7 +942,7 @@ export class RdDTMRDialog extends Dialog {
         await this._messagerDemiReve(targetCoord);
         break;
       default:
-        ui.notifications.error("Vous ne pouvez pas vous déplacer que sur des cases adjacentes à votre position ou valides dans le cas d'une rencontre");
+        ui.notifications.error("Vous ne pouvez vous déplacer que sur des cases adjacentes à votre position ou valides dans le cas d'une rencontre");
         console.log("STATUS :", this.rencontreState, this.currentRencontre);
     }
 
@@ -1049,19 +1045,6 @@ export class RdDTMRDialog extends Dialog {
     await this.postRencontre(tmr);
     return tmr;
   }
-
-  /* -------------------------------------------- */
-  static _computeEventOddq(origEvent) {
-    console.log("EVENT", origEvent)
-    let canvasRect = origEvent.target.getBoundingClientRect();
-    let x = origEvent.clientX - canvasRect.left;
-    let y = origEvent.clientY - canvasRect.top;
-    let col = Math.floor(x / tmrConstants.cellw); //  [From 0 -> 12]
-    y -= col % 2 == 0 ? tmrConstants.col1_y : tmrConstants.col2_y;
-    let row = Math.floor(y / tmrConstants.cellh); //  [From 0 -> 14]
-    return { col: col, row: row };
-  }
-
   /* -------------------------------------------- */
   /** Retourne les coordonnées x, h, w, h du rectangle d'une case donnée */
   _getCaseRectangleCoord(coord) {

module/tmr-utility.js

@@ -1,6 +1,7 @@
 import { Misc } from "./misc.js";
 import { Grammar } from "./grammar.js";
 import { RdDDice } from "./rdd-dice.js";
+import { tmrConstants } from "./tmr-constants.js";
 
 /* -------------------------------------------- */
 const TMRMapping = {
@@ -375,6 +376,33 @@ export class TMRUtility {
     return caseList;
   }
 
+  // /* -------------------------------------------- */
+  static computeEventPosition(event) {
+    const canvasRect = event.nativeEvent.target.getBoundingClientRect();
+    return {
+      x: event.nativeEvent.clientX - canvasRect.left,
+      y: event.nativeEvent.clientY - canvasRect.top
+    };
+  }
+
+  /* -------------------------------------------- */
+  static computeEventOddq(event) {
+    var { x, y } = TMRUtility.computeEventPosition(event);
+    return TMRUtility.computeOddq(x, y);
+  }  
+
+  static computeOddq(x, y) {
+    const col = Math.floor(x / tmrConstants.cellw); //  [From 0 -> 12]
+    const decallageColonne = col % 2 == 0 ? tmrConstants.col1_y : tmrConstants.col2_y;
+    const row = Math.floor((y - decallageColonne) / tmrConstants.cellh); //  [From 0 -> 14]
+    return { col, row };
+  }
+
+  static computeEventCoord(event) {
+    const oddq = TMRUtility.computeEventOddq(event);
+    return TMRUtility.oddqToCoordTMR(oddq);
+  }
+
   /* -------------------------------------------- */
   // https://www.redblobgames.com/grids/hexagons/#distances
   // TMR Letter-row correspond to "odd-q" grid (letter => col, numeric => row )

module/tmr/carte-tmr.js

@@ -4,7 +4,6 @@ import { PixiTMR } from "./pixi-tmr.js";
 export class CarteTmr extends Draconique {
 
   constructor() {
-    console.log("Sprite create 1!!!!")
     super();
   }
 
@@ -14,9 +13,25 @@ export class CarteTmr extends Draconique {
   async onActorCreateOwned(actor, item) { }
 
   code() { return 'tmr' }
-  img() { return 'systems/foundryvtt-reve-de-dragon/styles/img/ui/tmp_main_r1.webp' }
+  img() { return 'systems/foundryvtt-reve-de-dragon/styles/img/ui/tmr.webp' }
 
   createSprite(pixiTMR) {
-    return pixiTMR.carteTmr(this.code());
+
+    const img = PixiTMR.getImgFromCode(this.code())
+    const sprite = new PIXI.Sprite(PIXI.utils.TextureCache[img]);
+    // Setup the position of the TMR
+    sprite.x = 0;
+    sprite.y = 0;
+    sprite.width = 722;
+    sprite.height = 860;
+    // Rotate around the center
+    sprite.anchor.set(0);
+    sprite.buttonMode = true;
+    sprite.tmrObject = pixiTMR;
+
+    pixiTMR.addTooltip(sprite, (e,s) => this.computeTooltip(e,s));
+    pixiTMR.pixiApp.stage.addChild(sprite);
+    return sprite;
   }
+
 }

module/tmr/draconique.js

@@ -82,7 +82,7 @@ export class Draconique {
   img() { return undefined }
 
   /**
-   * factory d'élément graphique PIXI correpsondant à l'objet draconique
+   * factory d'élément graphique PIXI correspondant à l'objet draconique
    * @param {*} pixiTMR instance de PixiTMR qui gère les tooltips, les méthodes de création de sprite standard, les clicks.
   */
   token(pixiTMR, linkData, coordTMR, type = undefined) {
@@ -91,12 +91,32 @@ export class Draconique {
       coordTMR: coordTMR
     };
     token[type ?? this.code()] = linkData;
-    console.log("SPRITE: ", token.sprite)
+    this.linkData = linkData;
-    //PixiTMR.getImgFromCode()
+    if (this.tooltip(linkData)) {
-    pixiTMR.addTooltip(token.sprite, this.tooltip(linkData));
+      pixiTMR.addTooltip(token.sprite, (e, s) => this.computeTooltip(e, s));
+    }
     return token;
   }
 
+  /**
+   * methode en charge de recalculer le tooltip lorsque la souris bouge
+   * @param {*} event evenement contenant les coordonnées
+   * @param {*} sprite sprite pour laquelle calculer le tooltip
+   */
+  computeTooltip(event, sprite) {
+    if (sprite.isOver) {
+      const oddq = TMRUtility.computeEventOddq(event);
+      const coord = TMRUtility.oddqToCoordTMR(oddq);
+      const tmr = TMRUtility.getTMR(coord)
+      if (tmr){
+        const label = TMRUtility.getTMRLabel(coord);
+        const text = this.tooltip(this.linkData);
+        return text ? `${coord}: ${label}\n${text}` : `${coord}: ${label}`
+      }
+    }
+    return '';
+  }
+
   /**
    * factory d'élément graphique PIXI correpsondant à l'objet draconique
    * @param {*} pixiTMR instance de PixiTMR qui gère les tooltips, les méthodes de création de sprite standard, les clicks.

module/tmr/pixi-tmr.js

@@ -1,6 +1,8 @@
+import { RdDTMRDialog } from "../rdd-tmr-dialog.js";
 import { tmrConstants, tmrTokenZIndex } from "../tmr-constants.js";
+import { TMRUtility } from "../tmr-utility.js";
 
-const tooltipStyle = new PIXI.TextStyle({
+export const tooltipStyle = new PIXI.TextStyle({
   fontFamily: 'CaslonAntique',
   fontSize: 18,
   fill: '#FFFFFF',
@@ -40,33 +42,10 @@ export class PixiTMR {
     PixiTMR.textures[name] = img;
   }
 
-  animate(animation = pixiApp=>{})
+  animate(animation = pixiApp => { }) {
-  {
     this.callbacksOnAnimate.push(() => animation(this.pixiApp));
   }
 
-  carteTmr(code) {
-    let img = PixiTMR.getImgFromCode(code)
-    const carteTmr = new PIXI.Sprite(PIXI.utils.TextureCache[img]);
-    console.log(code, carteTmr)
-    // Setup the position of the TMR
-    carteTmr.x = 0;
-    carteTmr.y = 0;
-    carteTmr.width = 720;
-    carteTmr.height = 860;
-    // Rotate around the center
-    carteTmr.anchor.set(0);
-    carteTmr.eventMode = 'dynamic'; // PIXI 7 : Not sure ..
-    // This one is deprecated ; carteTmr.interactive = true;
-    carteTmr.buttonMode = true;
-    carteTmr.tmrObject = this;
-    if (!this.tmrObject.viewOnly) {
-      carteTmr.on('pointerdown', event => this.onClickBackground(event));
-    }
-    this.pixiApp.stage.addChild(carteTmr);
-    return carteTmr;
-  }
-
   sprite(code, options = {}) {
     let img = PixiTMR.getImgFromCode(code)
     const texture = PIXI.utils.TextureCache[img];
@@ -98,27 +77,37 @@ export class PixiTMR {
     return sprite;
   }
 
-  addTooltip(sprite, text) {
+  addTooltip(sprite, computeTooltip) {
-    if (text) {
+    sprite.tooltip = new PIXI.Text('', tooltipStyle);
-      sprite.tooltip = new PIXI.Text(text, tooltipStyle);
     sprite.tooltip.zIndex = tmrTokenZIndex.tooltip;
     sprite.isOver = false;
-      // Deprecated : sprite.interactive = true; 
     sprite.eventMode = 'dynamic'; // PIXI 7 To be checked
-      sprite.on('pointerdown', event => this.onClickBackground(event))
+    sprite
-        .on('pointerover', () => this.onShowTooltip(sprite))
+      .on('pointermove', event => this.onPointerMove(event, sprite, computeTooltip))
-        .on('pointerout', () => this.onHideTooltip(sprite));
+      .on('pointerdown', event => this.onClickBackground(event))
+      .on('pointerover', event => this.onShowTooltip(event, sprite))
+      .on('pointerout', event => this.onHideTooltip(event, sprite));
   }
-  }
-  
 
   onClickBackground(event) {
+    if (!this.viewOnly) {
       this.tmrObject.onClickTMR(event)
     }
+  }
 
-  onShowTooltip(sprite) {
+  onPointerMove(event, sprite, computeTooltip) {
+    if (sprite.isOver && sprite.tooltip) {
+      var { x, y } = TMRUtility.computeEventPosition(event);
+      const oddq = TMRUtility.computeOddq(x, y);
+
+      sprite.tooltip.x = x + (oddq.col > 8 ? - 3 * tmrConstants.full : tmrConstants.half)
+      sprite.tooltip.y = y + (oddq.row > 10 ? - tmrConstants.half : tmrConstants.half)
+      sprite.tooltip.text = computeTooltip(event, sprite);
+    }
+  }
+
+  onShowTooltip(event, sprite) {
     if (sprite.tooltip) {
-
       if (!sprite.isOver) {
         sprite.tooltip.x = sprite.x;
         sprite.tooltip.y = sprite.y;
@@ -128,7 +117,7 @@ export class PixiTMR {
     }
   }
 
-  onHideTooltip(sprite) {
+  onHideTooltip(event, sprite) {
     if (sprite.tooltip) {
       if (sprite.isOver) {
         this.pixiApp.stage.removeChild(sprite.tooltip);

styles/simple.css

@@ -171,6 +171,9 @@ i:is(.fas, .far) {
   width: fit-content;
 }
 
+.tmr-dialog table {
+  border: none;
+}
 .system-foundryvtt-reve-de-dragon .sheet-header div.tmr-buttons {
   padding: 0;
   margin: 0;

templates/dialog-tmr.html

@@ -1,7 +1,5 @@
 <form class="tmr-dialog">
-<h2 class="comptmrdialog" id="tmrDialogTitle"></h2>
+<table>
-
-<table id="tmrsheet">
   <tr id="tmrrow1">
     <td>
       {{#if (eq mode "visu")}}