feat: Add thanks for playing screen

johnedvard · Sep 12, 2022 · f77b0ff · f77b0ff
1 parent 752cd9b
commit f77b0ff
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/Level.js b/src/Level.js
@@ -5,6 +5,7 @@ import { initGameHints } from './gameHints';
 import { Goal } from './Goal';
 import { Heart } from './Heart';
 import { on } from './kontra';
+import { showOverlay } from './menu';
 import { Player } from './Player';
 import { Saw } from './Saw';
 import { playDead } from './sound';
@@ -36,6 +37,7 @@ export class Level {
           this.init(levelData);
         })
         .catch(() => {
+          showOverlay('thanks');
           // TODO (johnedvard) improve error handling, not always assume last level
         });
     }

diff --git a/src/index.html b/src/index.html
@@ -56,6 +56,13 @@
         <button id="nextBtn">Play next level</button>
         <button id="replayBtn">Replay level</button>
       </div>
+      <div id="thanks" class="overlay hide">
+        Rest in peace my soul
+        <br />
+        <br />
+        <br />
+        More levels for NEAR users
+      </div>
       <div id="hint"></div>
     </div>
   </body>

diff --git a/src/menu.js b/src/menu.js
@@ -19,7 +19,14 @@ import { doesOwnNft, getNearLevel } from './utils';
 import { initGameHints } from './gameHints';
 import { getIsPlaying } from './sound';
 
-const overlayIds = ['main', 'bonus', 'levels', 'level-dialog', 'near-levels'];
+const overlayIds = [
+  'main',
+  'bonus',
+  'levels',
+  'level-dialog',
+  'near-levels',
+  'thanks',
+];
 const levels = 5;
 
 let hasRemovedDisableOnBonusEls = false;
@@ -205,7 +212,7 @@ const onNearLevelClick = (btn) => {
   }
 };
 
-const showOverlay = (id) => {
+export const showOverlay = (id) => {
   initGameHints(null);
   overlayIds.forEach((o) => {
     const overlayEl = document.getElementById(o);

diff --git a/src/styles.css b/src/styles.css
@@ -127,6 +127,11 @@ button:hover img {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  text-align: center;
+}
+#thanks {
+  width: 80%;
+  height: 80%;
 }
 
 .level-item {