|  |  | 
 |  |  |  | 
 |  |  | export default class Player { | 
 |  |  |  | 
 |  |  |     constructor(dom, dark, didClickSprite) { | 
 |  |  |     constructor(dom, dark) { | 
 |  |  |         // not dynamic | 
 |  |  |         this.darkModel = dark; | 
 |  |  |         this.didClickSprite = didClickSprite; | 
 |  |  |         // init | 
 |  |  |         this.app = generatePixiApp(dark); | 
 |  |  |         dom.appendChild(this.app.view); | 
 |  |  | 
 |  |  |         this.mapContainer = generatePixiContainer('mapContainer'); | 
 |  |  |         this.app.stage.addChild(this.mapContainer); | 
 |  |  |  | 
 |  |  |         // this.activateMapEvent(null); | 
 |  |  |         this.activateMapScale(); | 
 |  |  |         this.activateMapPan(); | 
 |  |  |         this.showCoordinates(); | 
 |  |  |         this.getStartedTicker(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     activateMapEvent = (leftEvent, rightEvent) => { | 
 |  |  |     activateMapEvent = (eventType, fn) => { | 
 |  |  |         if (this.mapEvent) { | 
 |  |  |             this.mapContainer.parent.off('mousedown'); | 
 |  |  |             this.mapEvent = null; | 
 |  |  |             if (this.selectedSprites && this.selectedSprites.length > 0) { | 
 |  |  |                 this.selectedSprites.forEach(child => { | 
 |  |  |                     Utils.unMarkSprite(child); | 
 |  |  |                 }) | 
 |  |  |             } | 
 |  |  |             // if (this.selectedSprites && this.selectedSprites.length > 0) { | 
 |  |  |             //     this.selectedSprites.forEach(child => { | 
 |  |  |             //         Utils.unMarkSprite(child); | 
 |  |  |             //     }) | 
 |  |  |             // } | 
 |  |  |         } | 
 |  |  |         this.mapEvent = (event) => { | 
 |  |  |             if (leftEvent && event.button === 0) { | 
 |  |  |                 switch (leftEvent) { | 
 |  |  |             if (eventType && event.button === 0) { | 
 |  |  |                 switch (eventType) { | 
 |  |  |                     case Utils.MapEvent.SELECTION_BOX: | 
 |  |  |                         this.mapSelect(event); | 
 |  |  |                         this.mapSelect(event, fn); | 
 |  |  |                         break | 
 |  |  |                     default: | 
 |  |  |                         break | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |             if (rightEvent && event.button === 2) { | 
 |  |  |                 switch (rightEvent) { | 
 |  |  |                     default: | 
 |  |  |                         break | 
 |  |  |                 } | 
 |  |  | 
 |  |  |         this.mapContainer.parent.on('mousedown', this.mapEvent) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     mapSelect = (event) => { | 
 |  |  |     mapSelect = (event, fn) => { | 
 |  |  |         let isSelecting = false; | 
 |  |  |         if (!this.selectionBox) { | 
 |  |  |             this.selectionBox = new PIXI.Graphics(); | 
 |  |  | 
 |  |  |         this.app.renderer.events.mapPositionToPoint(startPoint, event.clientX, event.clientY); | 
 |  |  |         let selectionStart = { x: startPoint.x, y: startPoint.y }; | 
 |  |  |  | 
 |  |  |         isSelecting = true; | 
 |  |  |         // avoid trigger sprite event | 
 |  |  |         let hasHitSprite = false; | 
 |  |  |         for (let child of this.mapContainer.children) { | 
 |  |  |             if (child.data?.uuid) { | 
 |  |  |                 if (child.getBounds().contains(selectionStart.x, selectionStart.y)) { | 
 |  |  |                     hasHitSprite = true; break; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         if (!hasHitSprite) { | 
 |  |  |             isSelecting = true; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         const handleMouseMove = (event) => { | 
 |  |  |             if (isSelecting && !this.didClickSprite) { | 
 |  |  |             if (isSelecting) { | 
 |  |  |                 // select end pos | 
 |  |  |                 const endPoint = new PIXI.Point(); | 
 |  |  |                 this.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY); | 
 |  |  | 
 |  |  |  | 
 |  |  |         this.mapContainer.parent.on('mouseup', (event) => { | 
 |  |  |             if (isSelecting) { | 
 |  |  |                 // sprite show style which be selected | 
 |  |  |                 if (this.selectedSprites && this.selectedSprites.length > 0) { | 
 |  |  |                     this.selectedSprites.forEach(child => { | 
 |  |  |                         Utils.unMarkSprite(child); | 
 |  |  |                     }) | 
 |  |  |                 } | 
 |  |  |                 this.selectedSprites = []; | 
 |  |  |                 this.clearSelectedSprites(); | 
 |  |  |  | 
 |  |  |                 // sprite show style which be selected | 
 |  |  |                 this.mapContainer.children.forEach(child => { | 
 |  |  |                     if (Utils.isSpriteInSelectionBox(child, this.selectionBox)) { | 
 |  |  |                         this.selectedSprites.push(child); | 
 |  |  | 
 |  |  |                 isSelecting = false; | 
 |  |  |                 this.selectionBox.clear(); | 
 |  |  |  | 
 |  |  |                 // sprites batch move | 
 |  |  |                 Utils.spriteListBeMovable(this.selectedSprites, this.scale, () => { | 
 |  |  |                     this.activateMapEvent(Utils.MapEvent.SELECTION_BOX); | 
 |  |  |                 }); | 
 |  |  |                 // after selectbox complete | 
 |  |  |                 if (fn) { | 
 |  |  |                     fn(this.selectedSprites, () => { | 
 |  |  |                         // trigger at end of selectionBox when fn happen mouseup | 
 |  |  |                         this.selectedSprites = []; | 
 |  |  |                         this.activateMapEvent(Utils.MapEvent.SELECTION_BOX, fn); | 
 |  |  |                     }); | 
 |  |  |                 } | 
 |  |  |  | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             this.mapContainer.parent.off('mousemove', handleMouseMove); | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     clearSelectedSprites = () => { | 
 |  |  |         if (this.selectedSprites && this.selectedSprites.length > 0) { | 
 |  |  |             this.selectedSprites.forEach(child => { | 
 |  |  |                 Utils.unMarkSprite(child); | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |         this.selectedSprites = []; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     activateMapPan = () => { | 
 |  |  | 
 |  |  |             }, 200).start(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     updateDidClickSprite = (value) => { | 
 |  |  |         this.didClickSprite = value; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     getStartedTicker = () => { | 
 |  |  |         this.app.ticker.add((delta) => { | 
 |  |  |             TWEEDLE.Group.shared.update(); | 
 |  |  | 
 |  |  |  | 
 |  |  | function generatePixiContainer(name) { | 
 |  |  |     const mapContainer = new PIXI.Container(); | 
 |  |  |     mapContainer.sortableChildren = true; | 
 |  |  |     mapContainer.name = name; | 
 |  |  |     mapContainer.data = {}; | 
 |  |  |     return mapContainer; |