NEXT-92 Optimize zsort function and fully destroy balls

kscc25 · Apr 1, 2016 · 3d0e2a2 · 3d0e2a2
1 parent 0d5b23f
commit 3d0e2a2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/client/js/ball-view.js b/client/js/ball-view.js
@@ -25,13 +25,15 @@ class BallView {
           this.y.follow(() => eater.y.get(), 100);
           setTimeout(() => {
             this.disappear();
-            delete this.main.balls[this.ball.id];
+            this.destroy();
           }, 50);
         } else {
           this.disappear();
+          this.destroy();
         }
       } else {
         this.disappear();
+        this.destroy();
       }
     });
     this.ball.on('disappear', () => this.disappear());
@@ -41,8 +43,20 @@ class BallView {
     });
     this.ball.on('resize', (oldSize, newSize) => {
       this.size.set(newSize, 120);
-      this.main.zSort(newSize);
+      this.container.zIndex = newSize;
+      this.main.reSort = true;
     });
+    this.container.zIndex = this.ball.size;
+    this.container.ballId = this.ball.id;
+  }
+
+  destroy() {
+    this.main.stage.removeChild(this.container);
+    this.graphic.destroy();
+    if (this.name) this.name.destroy();
+    if (this.mass) this.mass.destroy();
+    this.container.destroy();
+    delete this.main.balls[this.ball.id];
   }
 
   appear() {
@@ -53,8 +67,8 @@ class BallView {
     this.shape();
     this.setName();
     this.setMass();
-    this.main.zSort(this.ball.size);
     this.main.stage.addChild(this.container);
+    this.main.reSort = true;
   }
 
   disappear() {

diff --git a/client/js/viewer.js b/client/js/viewer.js
@@ -14,7 +14,7 @@ class Viewer extends EventEmitter {
     this.client = client;
 
     this.balls = {};
-
+    this.reSort = false;
     this.addRenderer();
     this.addStats();
     this.mapSize = MapSize.default();
@@ -92,6 +92,7 @@ class Viewer extends EventEmitter {
   updateBorders() {
     if (!this.borders) {
       this.borders = new PIXI.Graphics();
+      this.borders.zIndex = -1;
       this.stage.addChild(this.borders);
     }
     this.borders.clear();
@@ -109,18 +110,9 @@ class Viewer extends EventEmitter {
     document.body.appendChild(this.stats.domElement);
   }
 
-  zSort(at) {
-    if (!at) {
-      at = 0;
-    }
-    const keys = Object.keys(this.balls);
-    keys.sort((a, b) => this.balls[a].ball.size - this.balls[b].ball.size);
-    for (const keyOffset in keys) {
-      const ball = this.balls[keys[keyOffset]];
-      if (ball.ball.size >= at) {
-        ball.container.bringToFront();
-      }
-    }
+  zSort() {
+    this.stage.children.sort(
+      (a, b) => a.zIndex === b.zIndex ? a.ballId - b.ballId : a.zIndex - b.zIndex);
   }
 
   posCamera() {
@@ -161,6 +153,7 @@ class Viewer extends EventEmitter {
 
   animate() {
     this.stats.begin();
+    if (this.reSort) this.zSort();
     this.render();
     this.posCamera();
     this.stage.scale.x = this.stage.scale.y =