working on scrolling frame

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;
 

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);
+    }
+}

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;
+    }
+}

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);