diff --git a/public/assets/gui/frame_02.png b/public/assets/gui/frame_02.png new file mode 100755 index 0000000..d558c03 Binary files /dev/null and b/public/assets/gui/frame_02.png differ diff --git a/src/base/Assets.ts b/src/base/Assets.ts index 894f7a2..ba81556 100644 --- a/src/base/Assets.ts +++ b/src/base/Assets.ts @@ -10,6 +10,9 @@ export default class Assets { Assets.SidebarTexture = await PIXI.Assets.load({ src: '/assets/gui/frame.png', }); + Assets.Frame2Texture = await PIXI.Assets.load({ + src: '/assets/gui/frame_02.png', + }); Assets.HealthTexture = await PIXI.Assets.load({ src: '/assets/gui/heart.png', }); @@ -59,6 +62,7 @@ export default class Assets { public static ButtonTexture: PIXI.Texture; public static SidebarTexture: PIXI.Texture; + public static Frame2Texture: PIXI.Texture; public static HealthTexture: PIXI.Texture; public static GoldTexture: PIXI.Texture; diff --git a/src/base/ScrollingFrame.ts b/src/base/ScrollingFrame.ts new file mode 100644 index 0000000..69415f1 --- /dev/null +++ b/src/base/ScrollingFrame.ts @@ -0,0 +1,42 @@ +import GameObject from './GameObject'; +import Assets from './Assets'; +import * as PIXI from 'pixi.js'; + +export class Child extends GameObject { + protected draw() {} +} + +export class ScrollingFrame extends GameObject { + private canScroll: boolean = false; + private children: Child[]; + constructor(children: Child[], bounds?: PIXI.Rectangle) { + super(bounds); + this.children = children; + this.container.interactive = true; + document.addEventListener('wheel', (e) => this.scrollWheel(e)); + this.draw(); + } + private scrollWheel(e) { + let scrollBy = e.deltaY; + console.log(this.canScroll); + console.log(scrollBy); + } + + protected draw() { + this.container.removeChildren(); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + this.container.on('mouseentercapture', () => { + console.log('A'); + this.canScroll = true; + }); + this.container.on('mouseleavecapture', () => { + console.log('B'); + this.canScroll = false; + }); + } + public destroy() { + super.destroy(); + document.removeEventListener('wheel', this.scrollWheel); + } +} diff --git a/src/components/TowerPicker.ts b/src/components/TowerPicker.ts new file mode 100644 index 0000000..c6ce642 --- /dev/null +++ b/src/components/TowerPicker.ts @@ -0,0 +1,33 @@ +import * as PIXI from 'pixi.js'; +import GameObject from '../base/GameObject'; +import GameScene from '../scenes/GameScene'; +import Assets from '../base/Assets'; +import { ScrollingFrame } from '../base/ScrollingFrame'; + +export default class TowerPicker extends GameObject { + private gameScene: GameScene; + private scrollingFrame: ScrollingFrame; + constructor(gameScene: GameScene, bounds?: PIXI.Rectangle) { + super(bounds); + this.gameScene = gameScene; + this.scrollingFrame = new ScrollingFrame(null, this.bounds); + } + protected draw() { + this.container.removeChildren(); + const sprite = new PIXI.NineSliceSprite({ + texture: Assets.Frame2Texture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + + this.scrollingFrame.setBounds(this.bounds); + this.container.addChild(this.scrollingFrame.container); + sprite.width = this.bounds.width; + sprite.height = this.bounds.height; + this.container.addChild(sprite); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } +} diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index 6db7685..06be50a 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -4,6 +4,7 @@ import Creep, { CreepEvents } from '../components/Creep'; import { Grid } from '../components/Grid'; import MissionStats from '../components/MissionStats'; import Sidebar from '../components/Sidebar'; +import TowerPicker from '../components/TowerPicker'; import WaveManager, { WaveManagerEvents } from '../components/WaveManager'; import SceneBase from './SceneBase'; import * as PIXI from 'pixi.js'; @@ -19,6 +20,7 @@ export default class GameScene extends SceneBase { private stats: MissionStats; private waveManager: WaveManager; private sidebar: Sidebar; + private towerPicker: TowerPicker; private roundMode = RoundMode.Purchase; private changeRoundButton: Button; private currentRound: number = 0; @@ -39,6 +41,7 @@ export default class GameScene extends SceneBase { this.stats = new MissionStats(100, 200); this.grid = new Grid(mission.gameMap, this); this.sidebar = new Sidebar(this); + this.towerPicker = new TowerPicker(this); this.gridWidth = mission.mapImage.width; this.gridHeight = mission.mapImage.height; this.ticker = new PIXI.Ticker(); @@ -112,9 +115,11 @@ export default class GameScene extends SceneBase { this.stats.setBounds(this.getStatusBounds()); this.grid.setBounds(this.getGridBounds()); this.sidebar.setBounds(this.getSidebarBounds()); + this.towerPicker.setBounds(this.getTowerPickerBounds()); this.changeRoundButton.setBounds(this.getChangeRoundButtonBounds()); this.container.addChild(this.sidebar.container); this.container.addChild(this.stats.container); + this.container.addChild(this.towerPicker.container); this.container.addChild(this.grid.container); this.container.addChild(this.changeRoundButton.container); this.container.x = this.bounds.x; @@ -124,6 +129,9 @@ export default class GameScene extends SceneBase { private getSidebarBounds(): PIXI.Rectangle { return new PIXI.Rectangle(this.bounds.width - 350, 0, 350, this.bounds.height); } + private getTowerPickerBounds(): PIXI.Rectangle { + return new PIXI.Rectangle(this.bounds.width - 350, 100, 350, this.bounds.height - 250); + } private getStatusBounds(): PIXI.Rectangle { // Top / Center return new PIXI.Rectangle(0, 0, this.bounds.width, 100);