moved game to containers

Author: Neil Brown

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-yarn.lock
+yarn.lock
+containers/dist

containers/.babelrc

@@ -0,0 +1 @@
+{ "presets": [ "es2015" ] }

containers/npm-shrinkwrap.json

@@ -0,0 +1,31 @@
+{
+  "name": "playground",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-loader": "^7.1.0",
+    "babel-preset-es2015": "^6.22.0",
+    "copy-webpack-plugin": "2.1.6",
+    "gsap": "^1.20.2",
+    "html-webpack-plugin": "^2.28.0",
+    "keyboardjs": "^2.3.3",
+    "pixi-particles": "^2.1.1",
+    "pixi.js": "^4.5.3",
+    "standard": "^10.0.2",
+    "standard-loader": "^6.0.1",
+    "webpack": "^3.0.0",
+    "webpack-dev-server": "^2.4.1"
+  },
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch",
+    "start": "webpack-dev-server --inline",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

containers/package.json

@@ -0,0 +1,23 @@
+<font>
+  <info face="font" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
+  <common lineHeight="80" base="52" scaleW="75" scaleH="438" pages="1" packed="0"/>
+  <pages>
+    <page id="0" file="font.png"/>
+  </pages>
+  <chars count="10">
+    <char id="48" x="2" y="2" width="34" height="53" xoffset="3" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="49" x="2" y="57" width="19" height="52" xoffset="8" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="50" x="2" y="111" width="34" height="52" xoffset="2" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="51" x="2" y="165" width="34" height="53" xoffset="3" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="52" x="23" y="57" width="36" height="52" xoffset="1" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="53" x="38" y="2" width="35" height="52" xoffset="3" yoffset="1" xadvance="40" page="0" chnl="15"/>
+    <char id="54" x="2" y="220" width="34" height="53" xoffset="3" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="55" x="2" y="275" width="34" height="51" xoffset="3" yoffset="1" xadvance="40" page="0" chnl="15"/>
+    <char id="56" x="2" y="328" width="34" height="53" xoffset="3" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="57" x="2" y="383" width="34" height="53" xoffset="3" yoffset="0" xadvance="40" page="0" chnl="15"/>
+    <char id="32" x="0" y="0" width="0" height="0" xoffset="3" yoffset="0" xadvance="20" page="0" chnl="15"/>
+  </chars>
+  <kernings count="1">
+    <kerning first="49" second="49" amount="-5"/>
+  </kernings>
+</font>

containers/src/fonts/font.fnt

@@ -0,0 +1,63 @@
+{
+  "frames": {
+    "container": {
+      "frame": {
+        "x": 1,
+        "y": 1,
+        "w": 126,
+        "h": 53
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 126,
+        "h": 53
+      },
+      "sourceSize": {
+        "w": 126,
+        "h": 53
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "ship": {
+      "frame": {
+        "x": 1,
+        "y": 56,
+        "w": 570,
+        "h": 137
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 0,
+        "w": 570,
+        "h": 137
+      },
+      "sourceSize": {
+        "w": 572,
+        "h": 140
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    }
+  },
+  "meta": {
+    "app": "http://free-tex-packer.com/",
+    "version": "0.2.4",
+    "image": "data.png",
+    "format": "RGBA8888",
+    "size": {
+      "w": 1024,
+      "h": 1024
+    },
+    "scale": 1
+  }
+}

containers/src/fonts/font.png

@@ -0,0 +1,102 @@
+import * as PIXI from 'pixi.js'
+import TimelineMax from 'gsap/TimelineMax'
+import keyboardJS from 'keyboardjs'
+import Ship from './vessel.js'
+import Container from './container.js'
+import Storage from './storage.js'
+import Test from './test.js'
+import Crane from './crane.js'
+import Fleet from './fleet.js'
+
+const app = new PIXI.Application({
+  width: window.innerWidth,
+  height: window.innerHeight
+})
+
+document.body.appendChild(app.view)
+
+
+const loader = app.loader
+loader.add('fonts/font.fnt')
+loader.add('images/data.json').load(setup)
+
+let ship = undefined
+let graphics = undefined
+let id = undefined
+let tl = undefined
+let target = undefined
+let storage = undefined
+let crane = undefined
+let fleet = undefined
+let platform = undefined
+let container = undefined
+
+function setup () {
+  console.log('application setup')
+  
+  fleet = new Fleet(app, loader)
+  fleet.on('container-selected', onContainerSelected)
+
+  createPlatforms()
+  createCrane()
+  addKeyboard()
+}
+
+function createPlatforms () {
+  storage = new Storage(app)
+  storage.on('platform-selected', onPlatformSelected)
+  app.stage.addChild(storage)
+}
+
+function createCrane() {
+  crane = new Crane()
+  app.stage.addChild(crane)
+}
+
+function onPlatformSelected(value) {
+  crane.platform = value
+}
+
+function onContainerSelected(value) {
+  crane.container = value
+}
+
+app.ticker.add(animate)
+
+function animate (delta) {
+
+}
+
+function addKeyboard () {
+  const keys = [
+      { key:'a', press: aPress, release: aRelease }, 
+      { key:'b', press: bPress, release: bRelease } 
+    ]
+
+  keys.forEach((map) => {
+    keyboardJS.bind(map.key, (e) => {
+      console.log(map.key + ' is pressed')
+      map.press()
+      e.preventRepeat()
+    }, (e) => {
+      console.log(map.key + ' is released')
+      map.release()
+    })
+  })
+}
+
+function aPress () {
+  console.log('called aPress function')
+}
+
+function aRelease () {
+  console.log('called aRelease function')
+}
+
+function bPress () {
+  console.log('called bPress function')
+}
+
+function bRelease () {
+  console.log('called bRelease function')
+}

containers/src/images/4e3fcfc9ef4f5c8126337339abd3a54f--shipping-container-dimensions-shipping-containers.jpg

@@ -0,0 +1,49 @@
+import * as PIXI from 'pixi.js'
+import consts from './matterConsts.js'
+import PlayerBullet from './playerBullet.js'
+
+class BulletPool {
+  constructor (engine, container) {
+    this.engine = engine
+    this.container = container
+    this.size = 8
+    this.pool = []
+    this._bullet = undefined
+    this.texture = PIXI.loader.resources['images/data.json'].textures['player_bullet.png']
+  }
+
+  init (id, category) {
+    for (var i = 0; i < this.size; i++) {
+      const bullet = new PlayerBullet('bullet_' + i, this.engine, category)
+      bullet.init(0, 0, 16, 32, this.texture)
+      this.pool[i] = bullet
+      consts.World.addBody(this.engine.world, bullet.body)
+      this.container.addChild(bullet.sprite)
+    }
+  }
+
+  getBullet (position) {
+    if (!this.pool[this.size - 1].alive) {
+      this.pool[this.size - 1].spawn(position)
+      this.pool.unshift(this.pool.pop())
+    }
+  }
+
+  remove (id) {
+    this.pool.forEach((bullet) => {
+      if (bullet.alive && bullet.id === id) {
+        bullet.alive = false
+        bullet.update()
+      }
+    })
+  }
+
+  update () {
+    this.pool.forEach((bullet, i) => {
+      if (bullet.alive === true) {
+        bullet.update()
+      }
+    })
+  }
+}
+export default BulletPool

containers/src/images/container.png

@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js'
+
+export default class Container extends PIXI.Sprite {
+	constructor(texture) {
+		super(texture)
+	}
+
+	init (ticker) {
+		ticker.add(this.update, this)
+	}
+
+	get id () {
+		return this._id
+	}
+
+	set id (value) {
+		this._id = value
+	}
+
+	update (delta) {
+
+	}
+}

containers/src/images/data.json

@@ -0,0 +1,72 @@
+import * as PIXI from 'pixi.js'
+import TimelineMax from 'gsap/TimelineMax'
+
+export default class Crane extends PIXI.Sprite {
+	constructor () {
+		super()
+
+		this._platform = undefined
+		this._container = undefined
+
+		this._graphics = new PIXI.Graphics()
+	  this._graphics.lineStyle(2, 0x0000FF, 1);
+	  this._graphics.drawRect(0, 0, 126, 53);
+	  this.addChild(this._graphics)
+
+	}
+
+	move() {
+		if(this._container === undefined || this._platform === undefined) {
+			console.log('error')
+			return
+		}
+
+	  let pos = this._container.parent.toGlobal(this._container)
+	  
+	  this._tl = new TimelineMax({onComplete: this.collect.bind(this)})
+	   
+	  this._tl.fromTo(this._graphics.position, 0.5, {x: this._graphics.position.x}, {x: pos.x})
+	  this._tl.fromTo(this._graphics.position, 0.5, {y: this._graphics.position.y}, {y: pos.y})
+	}
+
+	collect () {
+	  this._container.x = 0
+	  this._container.y = 0
+	  this._graphics.addChildAt(this._container, 0)
+	  this.drop()
+	}
+
+	drop() {
+	  this._tl = new TimelineMax({onComplete: () => {
+	  	this._platform.addChild(this._container)
+	  	this.reset()	
+	  }})
+	  let pos = {x: (window.innerWidth - this._graphics.width) * 0.5, y: 0}
+	   
+	  this._tl.to(this._graphics.position, 0.5, {y: pos.y})
+	  this._tl.to(this._graphics.position, 0.5, {x: this._platform.x})
+	  this._tl.to(this._graphics.position, 0.5, {y: this._platform.y})
+	}
+
+	reset () {
+		this._container = this._platform = undefined
+	}
+
+	get platform () {
+		return this._platform
+	}
+
+	set platform (value) {
+		this._platform = value
+		this.move()
+	}
+
+	get container () {
+		return this._container
+	}
+
+	set container (value) {
+		this._container = value
+		this.move()
+	}
+}