feat: Add game hints, tweak levels

Author: johnedvard

src/Level.js

@@ -1,5 +1,6 @@
 import { BounceBoard } from './BounceBoard';
 import { Brick } from './Brick';
+import { initGameHints } from './gameHints';
 import { Goal } from './Goal';
 import { Heart } from './Heart';
 import { Player } from './Player';
@@ -40,6 +41,7 @@ export class Level {
     this.createBricks(levelData);
     this.createBounceBoards(levelData);
     this.isLevelLoaded = true;
+    initGameHints(this.levelId);
   }
 
   loadLevel(levelId) {

src/PlayerControls.js

@@ -28,7 +28,7 @@ export class PlayerControls {
   }
 
   initControls() {
-    onInput(['c'], () => this.player.rope.cutRope(0));
+    onInput(['s'], () => this.player.rope.cutRope(0));
     onInput(['z'], () => emit(RESTART_LEVEL));
   }
 }

src/Rope.js

@@ -130,7 +130,7 @@ export class Rope {
       return;
     }
 
-    const factor = 0.1;
+    const factor = 0.3;
     const lastLink = this.links[this.links.length - 1];
     lastLink.restingDistance -= RESTING_DISTANCE * factor;
     if (lastLink.restingDistance <= 0) {

src/gameHints.js

@@ -0,0 +1,17 @@
+export const initGameHints = (levelId) => {
+  const hintEl = document.getElementById('hint');
+  hintEl.textContent = '';
+  switch (levelId) {
+    case 1:
+      hintEl.textContent =
+        'Reach the goal below.\nUse the arrow keys (⬅️ ➡️) to move.\nCut the rope with "S".';
+      break;
+    case 2:
+      hintEl.textContent = 'Use "Up Arrow" to shorten the rope';
+      break;
+    case 3:
+      hintEl.textContent =
+        'Use "Space" to give you a boost upwards.\n Cut the rope with "S".';
+      break;
+  }
+};

src/index.html

@@ -20,6 +20,7 @@
         <button id="nearLevelBtn" disabled>NEAR Levels</button>
         <button id="levelBtn">Select Level</button>
         <button id="bonusBtn">Bonus Content</button>
+        <button id="goodiesBtn" disabled>Coil Goodies</button>
       </div>
       <div id="bonus" class="overlay hide">
         <div id="coil-subscriber" class="hide">
@@ -55,6 +56,7 @@
         <button id="nextBtn">Play next level</button>
         <button id="replayBtn">Replay level</button>
       </div>
+      <div id="hint"></div>
     </div>
   </body>
 </html>

src/level/level2.json

@@ -1,20 +1,17 @@
 {
   "p": { "x": 400, "y": 255 },
   "r": 30,
-  "s": [
-    { "x": 464, "y": 350 },
-    { "x": 304, "y": 350 }
-  ],
+  "s": [],
   "b": [
-    { "x": 272, "y": 220 },
-    { "x": 304, "y": 220 },
-    { "x": 336, "y": 220 },
-    { "x": 368, "y": 220 },
     { "x": 400, "y": 220 },
-    { "x": 432, "y": 220 },
-    { "x": 464, "y": 220 },
-    { "x": 496, "y": 220 }
+    { "x": 272, "y": 380 },
+    { "x": 304, "y": 380 },
+    { "x": 336, "y": 380 },
+    { "x": 368, "y": 380 },
+    { "x": 432, "y": 380 },
+    { "x": 464, "y": 380 },
+    { "x": 496, "y": 380 }
   ],
-  "g": [{ "x": 368, "y": 700 }],
+  "g": [{ "x": 368, "y": 250 }],
   "h": [{ "x": 550, "y": 290 }]
 }

src/level/level3.json

@@ -4,8 +4,11 @@
   "s": [{ "x": 464, "y": 350, "b": "ew", "d": 100 }],
   "b": [{ "x": 260, "y": 220 }],
   "g": [
-    { "x": 368, "y": 700 },
-    { "x": 600, "y": 700 }
+    { "x": 400, "y": 600 },
+    { "x": 600, "y": 50 }
   ],
-  "h": [{ "x": 550, "y": 400 }]
+  "h": [
+    { "x": 260, "y": 50 },
+    { "x": 580, "y": 100 }
+  ]
 }

src/level/level5.json

@@ -1,12 +1,18 @@
 {
   "p": { "x": 272, "y": 255, "b": "ew", "d": 100 },
   "r": 30,
-  "s": [{ "x": 100, "y": 450, "b": "ew", "d": 100 }],
+  "s": [
+    { "x": 100, "y": 450, "b": "ew", "d": 100 },
+    { "x": 400, "y": 200, "b": "ew", "d": -200 }
+  ],
   "b": [
     { "x": 260, "y": 220, "b": "ew", "d": 100 },
-    { "x": 460, "y": 320, "b": "ew", "d": 170 },
+
     { "x": 600, "y": 520, "b": "ew", "d": 80 }
   ],
   "g": [{ "x": 600, "y": 700 }],
-  "h": [{ "x": 200, "y": 400 }]
+  "h": [
+    { "x": 200, "y": 400 },
+    { "x": 600, "y": 50 }
+  ]
 }

src/menu.js

@@ -19,6 +19,7 @@ import {
 } from './store';
 import { IPFS_BASE_PATH } from './near/nearConnection';
 import { doesOwnNft, getNearLevel } from './utils';
+import { initGameHints } from './gameHints';
 
 const overlayIds = ['main', 'bonus', 'levels', 'level-dialog', 'near-levels'];
 const levels = 20;
@@ -188,6 +189,7 @@ const onNearLevelClick = (btn) => {
 };
 
 const showOverlay = (id) => {
+  initGameHints(null);
   overlayIds.forEach((o) => {
     const overlayEl = document.getElementById(o);
     if (!overlayEl.classList.contains('hide')) {

src/styles.css

@@ -50,6 +50,13 @@ canvas {
   cursor: pointer;
 }
 
+#hint {
+  bottom: 250px;
+  position: absolute;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
 #hamburger,
 #hamburger::after,
 #hamburger::before {
@@ -58,7 +65,6 @@ canvas {
 #hamburger:hover {
   filter: drop-shadow(0 0 12px var(--acc));
 }
-
 button,
 .btn {
   width: 240px;