Extending PIXI

Room.js

import { Camera, Avatar } from '../../lib'

import RoomTile from './RoomTile'

import Game from '../../Game'

export default new class Room {

	view: Object
	camera: Object

	tiles: Object = {}
	users: Object = {}

	init() {
		this.camera = new Camera()
		this.tiles = []
		this.avatars = new PIXI.Container()
		//this.avatar = new Avatar({  })

		this.view = new PIXI.Container()
		//this.createFloor()
	}

	leave() {
		this.camera.remove()

		this.floor.destroy(false)
	}

	join(roomId: Number) {
		return new Promise(resolve => {
			if (this.data) this.leave()

			Game.socket.emit('rooms/join', roomId, (res) => {
				this.data = res
				resolve(res)

				// determine if locked or password protected ??
				switch (res) {
					case 'locked': {
						// locked
					}

					case 'password': {
						// password
					}

					case 'full': {
						// room full
					}

					case 'banned': {
						// banned
					}

					default:
						return this.addToCamera()
				}
			})
		})
	}

	setupHandlers() {
		const { socket } = Game

		socket.on('rooms/join', this.addAvatar.bind(this))
		socket.on('rooms/leave', this.removeAvatar.bind(this))

		socket.on('rooms/user/move', (target: Object, x: Number, y: Number) => {
			this.users[target.id].move(x, y)
		})
	}

	removeAvatar(target: Object) {
		this.avatars.removeChild(this.users[target.id].view)

		delete this.users[target.id]
	}

	async addAvatar(target: Object) {
		const avatar = await new Avatar({ target })

		this.users[target.id] = avatar
		this.avatars.addChild(avatar.view)
	}

	addAvatars() {
		this.users[Game.user.id] = Game.avatar
		this.avatars.addChild(Game.avatar.view)

		this.data.users.forEach(this.addAvatar.bind(this))

		this.view.addChild(this.avatars)
	}

	addToCamera() {
		this.createFloor()

	//	this.addAvatars()
		this.setupHandlers()

		Game.renderer.backgroundColor = '#000000'

		this.camera.render(this.view)
		//Game.socket.on('rooms/leave', this.leave.bind(this))
	}

	createFloor() {
		const { floorThick, floor } = this.data

		this.floor = new PIXI.Container()

		const tileOutline = new PIXI.Sprite(Game.resources['room.tile.outline'].texture)
		tileOutline.anchor.set(0.5)
		tileOutline.visible = false

		floor.sort().forEach(tile => {
			const width = 64
			const height = 32

			const startY = (tile[1] * 16) + (tile[0] * 16) - (tile[2] * 16 || 0)
		  const startX = (tile[1] * 32) - (tile[0] * 32)// * (tile[2] || 1)

			const points = []

		  points.push({ x: startX, y: startY })
		  points.push({ x: startX - width / 2, y: startY + height / 2 })
		  points.push({ x: startX, y: startY + height })
		  points.push({ x: startX + width / 2, y: startY + height / 2 })

			const tileData = { points, x: tile[0], y: tile[1], z: tile[2] }
		  this.tiles.push(tileData)

			const roomTile = new RoomTile(this.data, tileData)
			this.floor.addChild(roomTile)

			this.floor.position.set(Game.renderer.width / 2, Game.renderer.height / 2)
		})

		this.floor.addChild(tileOutline)
		this.view.addChild(this.floor)
	}

}

RoomTile.js

export default class RoomTile extends PIXI.Graphics {

  buttonMode = true
  interactive = true

  constructor(room, { points, x, y, z }) {
    super()

    this.room = room
    this.points = points
    this.pos = { x, y, z }

    this.beginFill(0x989865)
    this.lineStyle(1.5, 0x8E8E5E) //2, 0x8E8E5E
    this.moveTo(this.points[0].x, this.points[0].y)
    this.lineTo(this.points[1].x, this.points[1].y)
    this.lineTo(this.points[2].x, this.points[2].y)
    this.lineTo(this.points[3].x, this.points[3].y)
    this.lineTo(this.points[0].x, this.points[0].y)

    this.endFill()

    if (room.floorThick) {
      this.beginFill(0x838357)
      this.lineStyle(1, 0x7A7A51)
      this.moveTo(this.points[1].x - 0.5, this.points[1].y)
      this.lineTo(this.points[1].x - 0.5, this.points[1].y + room.floorThick)
      this.lineTo(this.points[2].x - 0.5, this.points[2].y + room.floorThick)
      this.lineTo(this.points[2].x - 0.5, this.points[2].y)
      this.endFill()

      this.beginFill(0x6F6F49)
      this.lineStyle(1, 0x676744)
      this.moveTo(this.points[3].x + 0.5, this.points[3].y)
      this.lineTo(this.points[3].x + 0.5, this.points[3].y + room.floorThick)
      this.lineTo(this.points[2].x + 0.5, this.points[2].y + room.floorThick)
      this.lineTo(this.points[2].x + 0.5, this.points[2].y)
      this.endFill()
    }
  }

  click = () => {
    console.warn(this.pos)
  }

}