From 6ad0e00fa6f4a59664e9c1af37f7aa1ed15becfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Garreau=20-=20Binomed?=
 <jean.francois.garreau@gmail.com>
Date: Tue, 16 Oct 2018 22:53:20 +0200
Subject: [PATCH] Fix some performances issues #20

---
 public/computePositionsWorker.js    | 50 +++++++++++++++++------------
 src/components/Galaxy.vue           | 18 ++++++-----
 src/utils/canvas/ExplosionHelper.js |  8 ++---
 src/views/Countdown.vue             | 21 ++++++------
 4 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/public/computePositionsWorker.js b/public/computePositionsWorker.js
index a46ed4f..7564f2d 100644
--- a/public/computePositionsWorker.js
+++ b/public/computePositionsWorker.js
@@ -4,28 +4,38 @@ const MINIMUM_DISTANCE = 100;
 const MAXIMUM_DISTANCE = 500;
 const SUN_RADIUS = 200;
 const planets = [];
-/*
 // Generate randoms planets for tests
-const numPlanets = 50;
-for (let i = 0; i < numPlanets; i++){
-    planets.push({
-    id: `id${i}`,
-    name: `name${i}`,
-    url: "https://pbs.twimg.com/profile_images/973550404456861696/3GMoz0SV_400x400.jpg",
-    radius: 30 + ((i % 2) === 0 ? -1 * Math.random() * 10 : Math.random() * 10),
-    distance: 10 + Math.random() * 350,
-    collision: false,
-    iterations: 0,
-    speed: (300 + Math.random() * 100),
-    init: true,
-    // Change datas
-    angle: 0,
-    score: 0,
-    x : 0,
-    y : 0
-    });
+/*
+const numPlanets = 800;
+let countPlanets = 0;
+//for (let i = 0; i < numPlanets; i++){
+    const arrowCreate = ()=>{
+        const i = countPlanets;
+        if (countPlanets >= numPlanets){
+            return;
+        }
+        planets.push({
+            id: `id${i}`,
+            name: `name${i}`,
+            url: "https://pbs.twimg.com/profile_images/973550404456861696/3GMoz0SV_400x400.jpg",
+            radius: 30 + ((i % 2) === 0 ? -1 * Math.random() * 10 : Math.random() * 10),
+            distance: 10 + Math.random() * 350,
+            collision: false,
+            iterations: 0,
+            speed: (300 + Math.random() * 100),
+            init: true,
+            // Change datas
+            angle: 0,
+            score: 0,
+            x : 0,
+            y : 0
+        });
+        countPlanets++;
+        setTimeout(arrowCreate,100)
+    }
+    setTimeout(arrowCreate,100)
 
-}
+//}
 */
 let continueLoop = true;
 let time = 0;
diff --git a/src/components/Galaxy.vue b/src/components/Galaxy.vue
index 8dab09a..692241a 100644
--- a/src/components/Galaxy.vue
+++ b/src/components/Galaxy.vue
@@ -14,9 +14,6 @@ import ExplosionHelper from '../utils/canvas/ExplosionHelper.js';
 
 export default {
 	name: 'Galaxy',
-	props: {
-		planets: Array
-	},
 	data() {
 		return {
 			// This is the CanvasRenderingContext that children will draw to.
@@ -78,19 +75,24 @@ export default {
 			this.drawSun();
 
 			// We take a copy to show planets
-			const planets = this.planets.slice();
-			for (let planet of planets){
-				if (!planet.collision){
-					this.planetHelper.drawPlanet(planet);
+			if (this.planets) {
+				const planets = this.planets.slice();
+				for (let planet of planets){
+					if (!planet.collision){
+						this.planetHelper.drawPlanet(planet);
+					}
 				}
+				this.explosionHelper.renderExplosions();
 			}
-			this.explosionHelper.renderExplosions();
 			this.context.restore();
 			window.requestAnimationFrame(this.animate.bind(this));
 		},
 		explodedPlanet(planet){
 			this.explosionHelper.explose(planet);
 		},
+		setPlanets(planets){
+			this.planets = planets;
+		}
 	},
 
 
diff --git a/src/utils/canvas/ExplosionHelper.js b/src/utils/canvas/ExplosionHelper.js
index 746510e..cc69a29 100644
--- a/src/utils/canvas/ExplosionHelper.js
+++ b/src/utils/canvas/ExplosionHelper.js
@@ -75,10 +75,10 @@ class Explosion {
 
 	update() {
 	  for (var i = 0; i < this.particles.length; i++) {
-		this.particles[i].update();
-		if (this.particles[i].r < .5) {
-		  this.particles.splice(i, 1)
-		}
+			this.particles[i].update();
+			if (this.particles[i].r < .5) {
+				this.particles.splice(i, 1)
+			}
 	  }
 	}
 
diff --git a/src/views/Countdown.vue b/src/views/Countdown.vue
index 68af2ef..4ed2bee 100644
--- a/src/views/Countdown.vue
+++ b/src/views/Countdown.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="countdown-container">
-		<Galaxy ref="galaxy" v-bind:planets="planets"></Galaxy>
+		<Galaxy ref="galaxy"></Galaxy>
 		<section id="animation-galaxy"
 			v-if="countDownStart"
 		>
@@ -39,7 +39,6 @@ export default {
 	data() {
 		return {
 			scores : [],
-			planets: [],
 			worker: null,
 			audioPlayer: null,
 			countDownFinish: false,
@@ -92,13 +91,13 @@ export default {
 				});
 			}, 1000);
 
-			this.worker.onmessage = function(e) {
+			this.worker.onmessage = function workerMessage(e) {
 				const data = e.data;
 				switch(data.type){
 					case 'planets':
-					this.planets.length = 0;
-					this.planets.push(...data.data);
-					data.data.forEach(planet => {
+
+					const firebaseBatch = firestore.batch();
+					data.data.forEach((planet) => {
 						if (planet.init && planet.collision){
 							this.$refs['galaxy'].explodedPlanet(planet);
 							// console.debug('Will Notify destruction of planet : ', planet);
@@ -111,10 +110,14 @@ export default {
 								x: 0,
 								y: 0
 							}};
-							firestore.collection("planets").doc(`${planet.id}`).set(planet);
+							const planetUpdateRef = firestore.collection("planets").doc(`${planet.id}`);
+							firebaseBatch.set(planetUpdateRef, planet);
 						}
-					})
-					this.scores = this.planets.slice(0,5);
+					});
+					firebaseBatch.commit();
+					// Hack Vue databinding because it cause issue of performance else (change detection mencanism)
+					this.$refs['galaxy'].setPlanets(data.data);
+					this.scores = data.data.slice(0,5);
 					break;
 				}
 			}.bind(this);