import { Misc } from "../misc.js"; import { RdDTMRDialog } from "../rdd-tmr-dialog.js"; import { tmrConstants, tmrTokenZIndex } from "../tmr-constants.js"; import { TMRUtility } from "../tmr-utility.js"; import { EffetsDraconiques } from "./effets-draconiques.js"; export const tooltipStyle = new PIXI.TextStyle({ fontFamily: 'CaslonAntique', fontSize: 18, fill: '#FFFFFF', stroke: '#000000', strokeThickness: 3 }); export class PixiTMR { static textures = [] constructor(tmrDialog) { this.tmrDialog = tmrDialog; this.callbacksOnAnimate = []; this.pixiApp = new PIXI.Application({ width: 720, height: 860 }); this.pixiApp.eventMode = 'static'; this.pixiApp.stage.sortableChildren = true; this.tooltip = new PIXI.Text('', tooltipStyle); this.tooltip.zIndex = 1000 this.pixiApp.stage.addChild(this.tooltip); } get view() { return this.pixiApp.view } setup() { this.carteTMR = EffetsDraconiques.carteTmr.createSprite(this); this.pixiApp.stage.addChild(this.carteTMR); this.carteTMR.isOver = false; this.carteTMR.eventMode = 'static'; this.carteTMR .on('pointermove', event => this.onPointerMove(event)) .on('pointerdown', event => this.onClickBackground(event)) .on('pointerover', event => this.onShowTooltip(event)) .on('pointerout', event => this.onHideTooltip(event)); } async load(onLoad = (loader, resources) => { }) { // WIP - Deprecated since v7 : let loader = new PIXI.Loader(); for (const [name, img] of Object.entries(PixiTMR.textures)) { const texture = await PIXI.Assets.load(img); let image = PIXI.Sprite.from(texture); } onLoad(); for (let onAnimate of this.callbacksOnAnimate) { onAnimate(); } } static getImgFromCode(code) { return PixiTMR.textures[code] } static register(name, img) { PixiTMR.textures[name] = img; } animate(animation = pixiApp => { }) { this.callbacksOnAnimate.push(() => animation(this.pixiApp)); } addMarkTMR(coordTMR) { const rect = this.getCaseRectangle(TMRUtility.coordTMRToOddq(coordTMR)) const markTMR = new PIXI.Graphics(); markTMR.beginFill(0xffff00, 0.3); // set the line style to have a width of 5 and set the color to red markTMR.lineStyle(5, 0xff0000); // draw a rectangle markTMR.drawRect(rect.x, rect.y, rect.w, rect.h); this.pixiApp.stage.addChild(markTMR); return markTMR } removeGraphic(graphic) { this.pixiApp.stage.removeChild(graphic); } sprite(code, options = {}) { let img = PixiTMR.getImgFromCode(code) const texture = PIXI.utils.TextureCache[img]; if (!texture) { console.error("Texture manquante", code, PIXI.utils.TextureCache) return; } let sprite = new PIXI.Sprite(texture); sprite.width = options.taille ?? tmrConstants.half; sprite.height = options.taille ?? tmrConstants.half; sprite.anchor.set(0.5); if (options.color) { sprite.tint = options.color; } sprite.zIndex = options.zIndex ?? tmrTokenZIndex.casehumide + 1; sprite.alpha = options.alpha ?? 0.75; sprite.decallage = options.decallage ?? tmrConstants.center; this.pixiApp.stage.addChild(sprite); return sprite; } circle(code, options = {}) { let sprite = new PIXI.Graphics(); sprite.beginFill(options.color, options.opacity); sprite.drawCircle(0, 0, (options.taille ?? 12) / 2); sprite.endFill(); sprite.decallage = options.decallage ?? tmrConstants.topLeft; this.pixiApp.stage.addChild(sprite); return sprite; } onClickBackground(event) { if (!this.viewOnly) { this.tmrDialog.onClickTMR(event) } } onPointerMove(event) { if (this.carteTMR.isOver) { this.setTooltipPosition(event); this.tooltip.text = this.computeTooltip(event); } } onShowTooltip(event) { if (!this.carteTMR.isOver) { this.setTooltipPosition(event); this.pixiApp.stage.addChild(this.tooltip); this.tooltip.text = this.computeTooltip(event); } this.carteTMR.isOver = true; } onHideTooltip(event) { if (this.carteTMR.isOver) { this.pixiApp.stage.removeChild(this.tooltip); } this.carteTMR.isOver = false; } computeTooltip(event) { const oddq = TMRUtility.computeEventOddq(event); const coordTMR = TMRUtility.oddqToCoordTMR(oddq); const tmr = TMRUtility.getTMR(coordTMR) if (tmr) { const labelTMR = TMRUtility.getTMRLabel(coordTMR); const tokenTooltips = this.tmrDialog.allTokens .filter(token => token.coordTMR() == coordTMR) .map(token => token.tooltip); const tmrTooltip = `${coordTMR}: ${labelTMR}`; return [tmrTooltip, ...tokenTooltips].reduce(Misc.joining('\n')) } } setTooltipPosition(event) { var { x, y } = TMRUtility.computeEventPosition(event); const oddq = TMRUtility.computeOddq(x, y); this.tooltip.x = x + (oddq.col > 8 ? -3 * tmrConstants.full : tmrConstants.half); this.tooltip.y = y + (oddq.row > 10 ? -tmrConstants.half : tmrConstants.half); } positionToken(token) { if (token.sprite) { const sprite = token.sprite; const oddq = TMRUtility.coordTMRToOddq(token.coordTMR()); const decallagePairImpair = (oddq.col % 2 == 0) ? tmrConstants.col1_y : tmrConstants.col2_y; const dx = (sprite.decallage == undefined) ? 0 : sprite.decallage.x; const dy = (sprite.decallage == undefined) ? 0 : sprite.decallage.y; sprite.x = tmrConstants.gridx + (oddq.col * tmrConstants.cellw) + dx; sprite.y = tmrConstants.gridy + (oddq.row * tmrConstants.cellh) + dy + decallagePairImpair; } } removeToken(token) { if (token.sprite) { this.pixiApp.stage.removeChild(token.sprite) } } getCaseRectangle(oddq) { let decallagePairImpair = (oddq.col % 2 == 0) ? tmrConstants.col1_y : tmrConstants.col2_y; let x = tmrConstants.gridx + (oddq.col * tmrConstants.cellw) - (tmrConstants.cellw / 2); let y = tmrConstants.gridy + (oddq.row * tmrConstants.cellh) - (tmrConstants.cellh / 2) + decallagePairImpair; return { x: x, y: y, w: tmrConstants.cellw, h: tmrConstants.cellh }; } }