cleaned up codebase from not needed experimental code and styles

scripts/game.js

@@ -48,10 +48,9 @@
     height: 40,
   };
 
-  const usePointer = true;
+  //const usePointer = true;
-  const useArrows = true;
+  //const useArrows = true;
   const touchOffsetY = -20; // move the center by this much
-  const scaleMobile = 4; // scale mobile screens by this much
   const scaleMonitor = 6; // scale computer screens by this much
   const turnLengthMS = 200; // shortest time between turns
 
@@ -515,6 +514,7 @@
       } else {
         const key = m._x + "," + m._y;
         removeMonster(m);
+        Game.player.stats.xp += 1;
         sfx["kill"].play();
         return true;
       }
@@ -605,7 +605,7 @@
       msg.push("You hit the monster");
       hitter.stats.hp -= 1;
       sfx["hit"].play();
-      Game.player.stats.xp += 1;
+      //Game.player.stats.xp += 1;
     } else {
       console.log(false);
       sfx["miss"].play();
@@ -616,6 +616,7 @@
       toast(battleMessage(msg));
     }
     checkDeath(hitter);
+    checkDeath(receiver);
     showScreen("game");
     renderStats(Game.player.stats);
     Game.playerAllowedToMove = true;
@@ -644,7 +645,6 @@
     const p = Game.player;
     p.character = "T";
     drawTile(Game, p._x + "," + p._y);
-    const ghost = createGhost([p._x, p._y]);
     removeListeners(Game);
     sfx["lose"].play();
     setTimeout(function () {
@@ -659,7 +659,7 @@
    *** graphics, UI & browser utils ***
    ************************************/
 
-  const clickevt = !!("ontouchstart" in window) ? "touchstart" : "click";
+  const clickevt = "click";
 
   const $ = document.querySelector.bind(document);
   const $$ = document.querySelectorAll.bind(document);
@@ -671,9 +671,6 @@
     $("#canvas").appendChild(el);
     window.onkeydown = keyHandler;
     window.onkeyup = arrowStop;
-    if (useArrows) {
-      document.ontouchend = arrowStop;
-    }
     showScreen("game");
   }
 
@@ -755,22 +752,6 @@
     }
   }
 
-  // creates the ghost sprite when the player dies
-  function createGhost(pos) {
-    const tw = tileOptions.tileWidth;
-    const th = tileOptions.tileHeight;
-    const left = "left:" + pos[0] * tw + "px;";
-    const top = "top:" + pos[1] * th + "px;";
-    const ghost = el("div", {
-      className: "sprite ghost free float-up",
-      style: left + top,
-    });
-    ghost.onanimationend = function () {
-      rmel(ghost);
-    };
-    return attach($("#canvas"), ghost);
-  }
-
   function battleMessage(messages) {
     const components = messages.reduce(function (msgs, m) {
       return msgs
@@ -860,10 +841,6 @@
       console.log("Full screen pressed.");
       return;
     }
-    if (code == 73) {
-      toggleInventory(ev, true);
-      return;
-    }
     if (code == 190) {
       Game.engine.unlock();
       return;

styles/game.css

@@ -271,34 +271,14 @@ a:hover {
   transform: none;
 }
 
-
 .tomb {
   background-position: -72px -56px;
 }
 
-.ghost {
-  background-position: -72px -8px;
-  margin: 0px;
-}
-
 .empty {
   background-position: -8px -48px;
 }
 
-.float-up {
-  animation: float-up 2s linear forwards;
-}
-
-@keyframes float-up {
-  from {
-    transform: scale(1) translate(0px, 0px);
-    opacity: 1;
-  }
-  to {
-    transform: scale(3) translate(0px, -20px);
-    opacity: 0;
-  }
-}
 
 .grow-fade {
   animation: grow-fade 2s linear;
@@ -351,33 +331,6 @@ a:hover {
   color: #FFB570;
 }
 
-#inventory {
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-}
-
-#inventory .sprite {
-  transform: scale(3);
-  display: inline-block;
-  margin: 1em 2em 1em 1em;
-  vertical-align: middle;
-}
-
-#inventory li {
-  margin: 1em 0px;
-}
-
-#inventory ul {
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-}
-
-#inventory > div {
-  display: none;
-}
-
 @media (max-width: 750px) {
   #inventory {
     bottom: 72px;
@@ -388,58 +341,6 @@ a:hover {
   }
 }
 
-#arrows {
-  display: none;
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-}
-
-#arrows > * {
-  float: left;
-  font-size: 16px;
-  bottom: 0px;
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#arrows > * > span {
-  pointer-events: none;
-}
-
-#btn-left {
-  position: absolute;
-  right: 7em;
-}
-
-#btn-right {
-  position: absolute;
-  right: 0em;
-}
-
-#btn-up {
-  transform: rotate(90deg);
-  position: absolute;
-  right: 3.5em;
-  margin-bottom: 3.75em;
-}
-
-#btn-down {
-  transform: rotate(90deg);
-  position: absolute;
-  right: 3.5em;
-}
-
-#btn-skip {
-  position: absolute;
-  right: 0em;
-  margin-bottom: 3.75em;
-  padding: 0px;
-}
-
 @media (max-width: 1024px) {
    #arrows > * {
      bottom: 72px;

views/game.view.php

@@ -142,13 +142,6 @@
       <div id="canvas"></div>
       <div id="message" class="nes-container is-rounded is-dark hide"></div>
       <div id="hud" class="nes-container is-rounded is-dark"></div>
-      <div id="arrows">
-        <div id="btn-left" class="nes-container is-rounded is-dark"><span>&lt;</span></div>
-        <div id="btn-up" class="nes-container is-rounded is-dark"><span>&lt;</span></div>
-        <div id="btn-down" class="nes-container is-rounded is-dark"><span>&gt;</span></div>
-        <div id="btn-right" class="nes-container is-rounded is-dark"><span>&gt;</span></div>
-        <div id="btn-skip" class="nes-container is-rounded is-dark"><span>.</span></div>
-      </div>
     </div>
 
   </body>