import * as PIXI from 'pixi.js' ; import { EditorMode } from '../containers/BlueprintContainer' ; import G from '../common/globals' ; import { Panel } from './controls/Panel' ; import { Slot } from './controls/Slot' ; import F from './controls/functions' ; import { colors } from './style' ; class QuickbarSlot extends Slot { public get itemName ( ) : string { return this . data as string ; } public assignItem ( itemName ) { if ( itemName === 'blueprint' ) return ; this . data = itemName ; this . content = F . CreateIcon ( itemName ) ; } public unassignItem ( ) { this . data = undefined ; this . content = undefined ; } } export class QuickbarPanel extends Panel { private iWidth = 442 ; private iHeight : number ; private rows : number ; private slots : QuickbarSlot [ ] ; private slotsContainer : PIXI . Container ; public constructor ( rows = 1 , itemNames ? ) { super ( 442 , 24 + rows * 38 , colors . quickbar . background . color , colors . quickbar . background . alpha , colors . quickbar . background . border ) ; this . rows = rows ; this . iHeight = 24 + rows * 38 ; this . slots = new Array < QuickbarSlot > ( rows * 10 ) ; this . slotsContainer = new PIXI . Container ( ) ; this . slotsContainer . position . set ( 12 , 12 ) ; this . addChild ( this . slotsContainer ) ; this . generateSlots ( itemNames ) ; const t = QuickbarPanel . createTriangleButton ( 15 , 14 ) ; t . position . set ( ( this . iWidth - t . width ) / 2 , ( this . iHeight - t . height ) / 2 ) ; t . on ( 'pointerdown' , this . changeActiveQuickbar , this ) ; this . addChild ( t ) ; } private static createTriangleButton ( width , height ) { const button = new PIXI . Graphics ( ) ; button . beginFill ( colors . controls . button . background . color ) . moveTo ( 0 , height ) . lineTo ( width / 2 , 0 ) . lineTo ( width , height ) . lineTo ( 0 , height ) . endFill ( ) ; button . interactive = true ; button . on ( 'pointerover' , ( ) => { button . alpha = 0.8 ; } ) ; button . on ( 'pointerout' , ( ) => { button . alpha = 1 ; } ) ; return button ; } public generateSlots ( itemNames ? ) { for ( let r = 0 ; r < this . rows ; r ++ ) { for ( let i = 0 ; i < 10 ; i ++ ) { const quickbarSlot = new QuickbarSlot ( ) ; quickbarSlot . position . set ( ( 36 + 2 ) * i + ( i > 4 ? 38 : 0 ) , 38 * r ) ; if ( itemNames && itemNames [ r * 10 + i ] ) { quickbarSlot . assignItem ( itemNames [ r * 10 + i ] ) ; } quickbarSlot . on ( 'pointerdown' , ( e ) => { if ( e . data . button === 0 ) { if ( G . BPC . mode === EditorMode . PAINT ) { if ( quickbarSlot . itemName ) { if ( quickbarSlot . itemName === G . BPC . paintContainer . getItemName ( ) ) { G . BPC . paintContainer . destroy ( ) ; } else { G . BPC . spawnPaintContainer ( quickbarSlot . itemName ) ; } } else { quickbarSlot . assignItem ( G . BPC . paintContainer . getItemName ( ) ) ; } } else if ( quickbarSlot . itemName ) { G . BPC . spawnPaintContainer ( quickbarSlot . itemName ) ; } else { G . UI . createInventory ( 'Inventory' , undefined , item => quickbarSlot . assignItem ( item ) ) ; } } else if ( e . data . button === 2 ) { quickbarSlot . unassignItem ( ) ; } } ) ; this . slots [ r * 10 + i ] = quickbarSlot ; this . slotsContainer . addChild ( quickbarSlot ) ; } } } public bindKeyToSlot ( slot ) { const itemName = this . slots [ slot ] . itemName ; if ( ! itemName ) return ; if ( G . BPC . mode === EditorMode . PAINT && G . BPC . paintContainer . getItemName ( ) === itemName ) { G . BPC . paintContainer . destroy ( ) ; return ; } G . BPC . spawnPaintContainer ( itemName ) ; } public changeActiveQuickbar ( ) { this . slotsContainer . removeChildren ( ) ; let itemNames = this . serialize ( ) ; itemNames = itemNames . concat ( itemNames . splice ( 0 , 10 ) ) ; this . generateSlots ( itemNames ) ; } public serialize ( ) { return this . slots . map ( s => s . itemName ) ; } protected setPosition ( ) { this . position . set ( G . app . screen . width / 2 - this . width / 2 , G . app . screen . height - this . height + 1 ) ; } }