best performance

Author: carl32crc

src/App.js

@@ -29,24 +29,24 @@ function App() {
     return () => subject.detach(onBoardUpdated);
   },[])
 
-  useEffect(() => {
-    if(state === STATE.IN_GAME) {
-      const interval = setInterval(() => {
-        gameController.reorderMoles();
-      }, 1000);
-      return () => clearInterval(interval);
-    }
-  }, [state]);
+  // useEffect(() => {
+  //   if(state === STATE.IN_GAME) {
+  //     const interval = setInterval(() => {
+  //       gameController.reorderMoles();
+  //     }, 1000);
+  //     return () => clearInterval(interval);
+  //   }
+  // }, [state]);
 
-  useEffect(() => {
-    if(state === STATE.IN_GAME) {
-      const randomTimer = randomIntFromInterval(400, 1200);
-      const interval = setInterval(() => {
-        gameController.showRandomMole();
-      }, randomTimer);
-      return () => clearInterval(interval);
-    }
-  }, [state]);
+  // useEffect(() => {
+  //   if(state === STATE.IN_GAME) {
+  //     const randomTimer = randomIntFromInterval(400, 1200);
+  //     const interval = setInterval(() => {
+  //       gameController.showRandomMole();
+  //     }, randomTimer);
+  //     return () => clearInterval(interval);
+  //   }
+  // }, [state]);
 
   return (
     <div className="App">

src/components/Mole/index.js

@@ -4,25 +4,30 @@ import { gameController } from './../../controllers/GameController';
 import { randomIntFromInterval } from './../../utils/randomIntFromInterval';
 import { Logo } from './../Logo'
 
+const useForceRerender = () => React.useReducer(x => x + 1, 0)[1]
+
 export const Mole = ({mole}) => {
-  
-  useEffect(() => {
-    if(mole.isVisible) {
-      const randomTime = randomIntFromInterval(mole.peepOutMin, mole.peepOutMax);
-      const interval = setInterval(() => {
-        gameController.hideMole(mole);
-      }, randomTime);
-      return () => clearInterval(interval);
-    } 
-  }, [mole])
+  const forceRenderer = useForceRerender();
+
+  // useEffect(() => {
+  //   if(mole.isVisible) {
+  //     const randomTime = randomIntFromInterval(mole.peepOutMin, mole.peepOutMax);
+  //     const interval = setInterval(() => {
+  //       gameController.hideMole(mole);
+  //     }, randomTime);
+  //     return () => clearInterval(interval);
+  //   } 
+  // }, [mole])
 
   return(
-  mole.live > 0 && mole.isVisible &&
+  mole.live > 0 && 
+  //mole.isVisible &&
     <Logo 
       onClick={() => {
         scoreController.updateScore(mole);
         gameController.kickedMole(mole);
         gameController.continueInGame();
+        forceRenderer();
       }}
       mole={mole}
     />

src/models/Game.js

@@ -39,15 +39,17 @@ export class Game {
   }
 
   hideMole(moleToHide) {
-    this.board = this.board.map(({ id, mole }) => {
-      return { id, mole: { ...mole.id === moleToHide.id ? {...mole, isVisible: false } : mole  } }
-    })
+    moleToHide.hide();
+    // this.board = this.board.map(({ id, mole }) => {
+    //   return { id, mole: { ...mole.id === moleToHide.id ? {...mole, isVisible: false } : mole  } }
+    // })
   }
 
   kickedMole(moleKicked) {
-    this.board = this.board.map(({ id, mole }) => {
-      return { id, mole: { ...mole.id === moleKicked.id ? {...mole, live: mole.live - 1 } : mole  } }
-    })
+    moleKicked.decrementLive();
+    // this.board = this.board.map(({ id, mole }) => {
+    //   return { id, mole: { ...mole.id === moleKicked.id ? {...mole, live: mole.live - 1 } : mole  } }
+    // })
   }
 
   continueInGame(scoreController) {

src/models/Hole.js

@@ -1,9 +1,9 @@
 import { GenerateUUID } from './GenerateUUID';
 
 
-export class Hole extends GenerateUUID {
+export class Hole {
   constructor(GoldenMole, Mole, index, randomNumber) {
-    super()
+    this.id = new GenerateUUID().id
     this.mole = index === randomNumber ? new GoldenMole() : new Mole();
   }
 }

src/models/Mole.js

@@ -1,16 +1,26 @@
 import { GenerateUUID } from './GenerateUUID';
 
-export class Mole extends GenerateUUID {
+export class Mole {
 
   constructor() {
-    super()
+    this.id = new GenerateUUID().id;
     this.isVisible = false;
     this.live = LIVE.MOLE;
     this.name =`Mole ${this.id}`;
     this.peepOutMax = 1200;
     this.peepOutMin = 200;
     this.points = 10;
     this.type = 'normal';
+    this.hide = this.hide;
+    this.decrementLive = this.decrementLive;
+  }
+
+  hide() {
+    this.isVisible = false;
+  }
+
+  decrementLive() {
+    this.live--;
   }
 }