From c61b002801ebc53bb6396cc4f3a27614c875158d Mon Sep 17 00:00:00 2001
From: John Edvard Reiten <johnedvard89@gmail.com>
Date: Sun, 28 Aug 2022 23:00:40 +0900
Subject: [PATCH] feat: Add level dialog after level is complete

---
 src/Game.js           | 14 +++++++++++---
 src/PlayerControls.js |  2 +-
 src/gameEvents.js     |  1 +
 src/index.html        |  4 ++++
 src/menu.js           | 27 ++++++++++++++++++++++++---
 src/styles.css        |  8 +++++++-
 6 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/Game.js b/src/Game.js
index 158ba5e..8b50b0b 100644
--- a/src/Game.js
+++ b/src/Game.js
@@ -1,5 +1,10 @@
 import { init, initPointer, initInput, GameLoop, onPointer, on } from 'kontra';
-import { LEVEL_COMPLETE, RESTART_LEVEL, START_LEVEL } from './gameEvents';
+import {
+  LEVEL_COMPLETE,
+  RESTART_LEVEL,
+  START_LEVEL,
+  START_NEXT_LEVEL,
+} from './gameEvents';
 import { Level } from './Level';
 import { playSong } from './sound';
 import { setGameHeight, setGameWidth } from './store';
@@ -54,15 +59,18 @@ export class Game {
   }
 
   listenForGameEvents() {
-    on(LEVEL_COMPLETE, this.onLevelComplete);
+    on(START_NEXT_LEVEL, this.onStartNextLevel);
     on(START_LEVEL, this.onStartLevel);
     on(RESTART_LEVEL, this.onReStartLevel);
   }
-  onLevelComplete = () => {
+  onStartNextLevel = () => {
     this.level.destroy();
     this.loadLevel(this.level.levelId + 1);
   };
   onStartLevel = ({ levelId }) => {
+    if (this.level) {
+      this.level.destroy();
+    }
     this.loadLevel(levelId);
   };
   onReStartLevel = () => {
diff --git a/src/PlayerControls.js b/src/PlayerControls.js
index a6bf495..b8b9cfe 100644
--- a/src/PlayerControls.js
+++ b/src/PlayerControls.js
@@ -29,6 +29,6 @@ export class PlayerControls {
 
   initControls() {
     onInput(['c'], () => this.player.rope.cutRope(0));
-    onInput(['r'], () => emit(RESTART_LEVEL));
+    onInput(['z'], () => emit(RESTART_LEVEL));
   }
 }
diff --git a/src/gameEvents.js b/src/gameEvents.js
index 4901b4a..b85e038 100644
--- a/src/gameEvents.js
+++ b/src/gameEvents.js
@@ -5,4 +5,5 @@ export const HEART_PICKUP = 'hp';
 export const CUT_ROPE = 'cr';
 export const START_LEVEL = 'sl';
 export const RESTART_LEVEL = 'r';
+export const START_NEXT_LEVEL = 'snl';
 export const ARCADIAN_HEAD_SELECTED = 'ahs';
diff --git a/src/index.html b/src/index.html
index 19b698e..cb95614 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,6 +25,10 @@
         <img class="close-icon" width="40px" />
         <div id="levels-grid"></div>
       </div>
+      <div id="level-dialog" class="overlay hide">
+        <button id="replayBtn">Replay level</button>
+        <button id="nextBtn">Play next level</button>
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/menu.js b/src/menu.js
index 46b7e5c..99225d2 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -1,15 +1,21 @@
 import closeIcon from 'data-url:./assets/img/close icon.svg';
 import skull from 'data-url:./assets/img/skull.png';
 
-import { emit } from 'kontra';
-import { START_LEVEL } from './gameEvents';
+import { emit, on } from 'kontra';
+import {
+  LEVEL_COMPLETE,
+  RESTART_LEVEL,
+  START_LEVEL,
+  START_NEXT_LEVEL,
+} from './gameEvents';
 import { fetchArcadianHeads } from './arcadianApi';
 import { setSelectedArcadian } from './store';
 
-const overlayIds = ['main', 'bonus', 'levels'];
+const overlayIds = ['main', 'bonus', 'levels', 'level-dialog'];
 const levels = 20;
 export const initMenu = () => {
   addButtonListeners();
+  listenForGameEvents();
   addCloseIcon();
   initLevels();
   initBonusContent();
@@ -86,6 +92,14 @@ const onContainerClick = (e) => {
       break;
     case 'hamburger':
       showOverlay('main');
+    case 'nextBtn':
+      showOverlay();
+      emit(START_NEXT_LEVEL);
+      break;
+    case 'replayBtn':
+      showOverlay();
+      emit(RESTART_LEVEL);
+      break;
     default:
       break;
   }
@@ -110,3 +124,10 @@ const showOverlay = (id) => {
     }
   });
 };
+
+const listenForGameEvents = () => {
+  on(LEVEL_COMPLETE, onLevelComplete);
+};
+const onLevelComplete = () => {
+  showOverlay('level-dialog');
+};
diff --git a/src/styles.css b/src/styles.css
index 6c58ecc..cd9fcab 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -124,7 +124,13 @@ button:disabled {
 #bonus-grid > canvas {
   margin-bottom: -60px;
 }
-
+#level-dialog {
+  width: 50%;
+  height: 50%;
+  border-radius: 4px;
+  border: 1px solid white;
+  background-color: #121212ee;
+}
 .bonus-item {
   cursor: pointer;
   background: none;