feat: Add level dialog after level is complete

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 = () => {

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));
   }
 }

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';

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>

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');
+};

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;