pause graphics upgrade

index.html

@@ -79,6 +79,12 @@
 ******************************************************************************* -->
 	<div id="choose-grid"></div>
 	<div id="build-grid"></div>
+	<div style="position: absolute; top:0;left:0;">
+		<div id="pause-grid-left" class="pause-grid"></div>
+	</div>
+	<div style="position: absolute; top:0;right:0;">
+		<div id="pause-grid-right" class="pause-grid"></div>
+	</div>
 	<svg class="SVG-button" id="build-button" width="110" height="40">
 		<title>Select 5 power ups and see how far you can progress.</title>
 		<g stroke='none' fill='#333' stroke-width="2" font-size="28px" font-family="Arial, sans-serif">

js/bullets.js

@@ -72,13 +72,13 @@ const b = {
       b.mods[i].count = 0
     }
   },
-  acidModSetCheck() {
+  modOnHealthChange() {
-    if (mech.health > 0.9) {
+    if (b.isModAcidDmg && mech.health > 0.9) {
       game.playerDmgColor = "rgba(0,80,80,0.9)"
-      b.isModAcidDmg = true;
+      b.modAcidDmg = 1.4
     } else {
       game.playerDmgColor = "rgba(0,0,0,0.7)"
-      b.isModAcidDmg = false;
+      b.modAcidDmg = 0
     }
   },
   mods: [{
@@ -96,8 +96,8 @@ const b = {
       maxCount: 1,
       count: 0,
       effect() {
-        b.modAcidDmg = 0.9
+        b.isModAcidDmg = true;
-        b.acidModSetCheck();
+        b.modOnHealthChange();
       }
     },
     {
@@ -320,7 +320,7 @@ const b = {
       maxCount: 1,
       count: 0,
       effect: () => {
-        b.isModMassEnergy = true // used in mech.usePowerUp
+        b.isModMassEnergy = true // used in mech.grabPowerUp
         mech.fieldMeter = mech.fieldEnergyMax
       }
     },

js/engine.js

@@ -175,7 +175,7 @@ function collisionChecks(event) {
           //mob + bullet collisions
           if (obj.classType === "bullet" && obj.speed > obj.minDmgSpeed) {
             // const dmg = b.dmgScale * (obj.dmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)));
-            let dmg = b.dmgScale * (obj.dmg + b.modAcidDmg * b.isModAcidDmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)))
+            let dmg = b.dmgScale * (obj.dmg + b.modAcidDmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)))
             if (b.isModCrit && !mob[k].seePlayer.recall && !mob[k].shield) dmg *= 5
             mob[k].foundPlayer();
             mob[k].damage(dmg);
@@ -193,7 +193,7 @@ function collisionChecks(event) {
           if (obj.classType === "body" && obj.speed > 5) {
             const v = Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity));
             if (v > 8) {
-              let dmg = b.dmgScale * (b.modAcidDmg * b.isModAcidDmg + v * Math.sqrt(obj.mass) * 0.07);
+              let dmg = b.dmgScale * (b.modAcidDmg + v * Math.sqrt(obj.mass) * 0.07);
               mob[k].damage(dmg);
               if (mob[k].distanceToPlayer2() < 1000000) mob[k].foundPlayer();
               game.drawList.push({

js/game.js

@@ -45,13 +45,13 @@ const game = {
     game.draw.cons();
     game.draw.body();
     mobs.loop();
+    mobs.healthBar();
     mech.draw();
     mech.hold();
     level.drawFills();
     game.draw.drawMapPath();
     b.fire();
     b.bulletActions();
-    mobs.healthBar();
     game.drawCircle();
     ctx.restore();
     game.drawCursor();
@@ -272,19 +272,19 @@ const game = {
 
     if (keys[80] && !game.isChoosing) { //p  for pause
       if (game.paused) {
+        build.unPauseGrid()
         game.paused = false;
+        level.levelAnnounce();
+        document.body.style.cursor = "none";
         requestAnimationFrame(cycle);
       } else {
         game.paused = true;
         game.replaceTextLog = true;
-        game.makeTextLog("<h1>PAUSED</h1>", 1);
+        // game.makeTextLog("<h1>PAUSED</h1>", 1);
-        // let text = "<h1>PAUSED</h1><br><div style='font-size: 85%;'>"
+        //display grid
-        // //output current mod, field, and gun info when paused
+        // document.title = "PAUSED: press P to resume";
-        // if (mech.fieldMode !== 0) text += "<br><p><strong style='font-size:130%;'>" + mech.fieldUpgrades[mech.fieldMode].name + "</strong><br>" + mech.fieldUpgrades[mech.fieldMode].description + "</p>"
+        build.pauseGrid()
-        // if (b.mod !== null) text += "<br><p><strong style='font-size:130%;'>" + b.mods[b.mod].name + "</strong><br>" + b.mods[b.mod].description + "</p>"
+        document.body.style.cursor = "auto";
-        // if (b.activeGun !== null) text += "<br><p><strong style='font-size:130%;'>" + b.guns[b.activeGun].name + "</strong><br>" + b.guns[b.activeGun].description + "</p>"
-        // text += "</div>"
-        // game.makeTextLog(text, 1);
       }
     }
 
@@ -486,6 +486,9 @@ const game = {
     document.getElementById("choose-grid").style.display = "none"
     document.getElementById("info").style.display = "inline";
     document.getElementById("build-button").style.display = "inline"
+    document.getElementById("build-grid").style.display = "none"
+    document.getElementById("pause-grid-left").style.display = "none"
+    document.getElementById("pause-grid-right").style.display = "none"
     isShowingBuilds = false
     document.getElementById("splash").style.display = "inline";
     document.getElementById("dmg").style.display = "none";

js/index.js

@@ -2,6 +2,9 @@
 /* TODO:  *******************************************
 *****************************************************
 
+missiles don't explode reliably enough
+  they can bounce, which is cool, but they should still explode right after a bounce
+
 mod: do something when at full health
   extra damage  (seems too simple)
   power up drop rate?  (hard to see directly)
@@ -191,9 +194,9 @@ const build = {
   makeGrid() {
     let text = `
 <div style="display: flex; justify-content: space-around; align-items: center;">
-    <svg class="SVG-button" onclick="build.startBuildRun()" width="105" height="55">
+    <svg class="SVG-button" onclick="build.startBuildRun()" width="115" height="55">
       <g stroke='none' fill='#333' stroke-width="2" font-size="40px" font-family="Ariel, sans-serif">
-        <text x="13" y="40">start</text>
+        <text x="18" y="40">start</text>
       </g>
     </svg>
     <svg class="SVG-button" onclick="build.reset()" width="70" height="35">
@@ -202,7 +205,7 @@ const build = {
       </g>
     </svg>
   </div>
-  <div class="build-grid-module" style="text-align:center; font-size: 1.00em; line-height: 175%;background-color:#c4ccd8;">
+  <div style="align-items: center; text-align:center; font-size: 1.00em; line-height: 220%;background-color:#c4ccd8;">
   <div id="starting-level"></div>
   <label for="difficulty-select" title="effects: number of mobs, damage done by mobs, damage done to mobs, mob speed, heal effects">difficulty:</label>
   <select name="difficulty-select" id="difficulty-select-custom">
@@ -244,6 +247,42 @@ const build = {
     build.calculateCustomDifficulty()
     document.getElementById("difficulty-select-custom").value = localSettings.difficultyMode
   },
+  pauseGrid() {
+    // let text = `<div class="pause-grid-module" style="border:0px;background:none;"></div>`
+    let text = `<div class="pause-grid-module"><span style="font-size:1.5em;font-weight: 600;">PAUSED</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Press P to unpause</div>`;
+    let countGuns = 0
+    let countMods = 0
+    for (let i = 0, len = b.guns.length; i < len; i++) {
+      if (b.guns[i].have) {
+        text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid gun"></div> &nbsp; ${b.guns[i].name}</div> ${b.guns[i].description}</div>`
+        countGuns++
+      }
+    }
+    let el = document.getElementById("pause-grid-left")
+    el.style.display = "grid"
+    el.innerHTML = text
+
+    text = "";
+    text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid field"></div> &nbsp; ${mech.fieldUpgrades[mech.fieldMode].name}</div> ${mech.fieldUpgrades[mech.fieldMode].description}</div>`
+    for (let i = 0, len = b.mods.length; i < len; i++) {
+      if (b.mods[i].count > 0) {
+        text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid mod"></div> &nbsp; ${b.mods[i].name}</div> ${b.mods[i].description}</div>`
+        countMods++
+      }
+    }
+    el = document.getElementById("pause-grid-right")
+    el.style.display = "grid"
+    el.innerHTML = text
+    if (countMods > 5 || countGuns > 6) {
+      document.body.style.overflowY = "scroll";
+      document.body.style.overflowX = "hidden";
+    }
+  },
+  unPauseGrid() {
+    document.body.style.overflow = "hidden"
+    document.getElementById("pause-grid-left").style.display = "none"
+    document.getElementById("pause-grid-right").style.display = "none"
+  },
   calculateCustomDifficulty() {
     let difficulty = build.list.length * game.difficultyMode
     if (game.difficultyMode === 0) difficulty = build.list.length * 1 - 6
@@ -380,7 +419,7 @@ document.body.addEventListener("mousedown", (e) => {
 const keys = [];
 document.body.addEventListener("keydown", (e) => {
   keys[e.keyCode] = true;
-  game.keyPress();
+  if (mech.alive) game.keyPress();
 });
 
 document.body.addEventListener("keyup", (e) => {
@@ -388,11 +427,13 @@ document.body.addEventListener("keyup", (e) => {
 });
 
 document.body.addEventListener("wheel", (e) => {
+  if (!game.paused) {
     if (e.deltaY > 0) {
       game.nextGun();
     } else {
       game.previousGun();
     }
+  }
 }, {
   passive: true
 });

js/level.js

@@ -14,12 +14,12 @@ const level = {
   start() {
     if (level.levelsCleared === 0) {
       level.difficultyIncrease(10)
-      b.giveGuns(0)
+      // b.giveGuns(0)
       // mech.setField(3)
       b.giveMod(1);
 
-      // level.intro(); //starting level
+      level.intro(); //starting level
-      level.testingMap();
+      // level.testingMap();
       // level.bosses();
       // level.skyscrapers();
       // level.aerie();

js/player.js

@@ -293,7 +293,7 @@ const mech = {
     //smoothly move leg height towards height goal
     mech.yOff = mech.yOff * 0.85 + mech.yOffGoal * 0.15;
   },
-  alive: true,
+  alive: false,
   death() {
     if (b.isModImmortal) { //if player has the immortality buff, spawn on the same level with randomized stats
       spawn.setSpawnList(); //new mob types
@@ -437,7 +437,7 @@ const mech = {
   addHealth(heal) {
     mech.health += heal * game.healScale;
     if (mech.health > mech.maxHealth) mech.health = mech.maxHealth;
-    b.acidModSetCheck();
+    b.modOnHealthChange();
     mech.displayHealth();
   },
   defaultFPSCycle: 0, //tracks when to return to normal fps
@@ -454,7 +454,7 @@ const mech = {
       mech.death();
       return;
     }
-    b.acidModSetCheck();
+    b.modOnHealthChange();
     mech.displayHealth();
     document.getElementById("dmg").style.transition = "opacity 0s";
     document.getElementById("dmg").style.opacity = 0.1 + Math.min(0.6, dmg * 4);
@@ -520,15 +520,6 @@ const mech = {
     //prevents damage happening too quick
   },
   buttonCD: 0, //cool down for player buttons
-  usePowerUp(i) {
-    powerUp[i].effect();
-    Matter.World.remove(engine.world, powerUp[i]);
-    powerUp.splice(i, 1);
-    if (b.isModMassEnergy) {
-      mech.fieldMeter = mech.fieldEnergyMax;
-      mech.addHealth(0.05);
-    }
-  },
   drawLeg(stroke) {
     // if (game.mouseInGame.x > mech.pos.x) {
     if (mech.angle > -Math.PI / 2 && mech.angle < Math.PI / 2) {
@@ -874,16 +865,18 @@ const mech = {
       const dyP = mech.pos.y - powerUp[i].position.y;
       const dist2 = dxP * dxP + dyP * dyP;
       // float towards player  if looking at and in range  or  if very close to player
-      if (dist2 < grabPowerUpRange2 && mech.lookingAt(powerUp[i]) || dist2 < 16000) {
+      if (dist2 < grabPowerUpRange2 && (mech.lookingAt(powerUp[i]) || dist2 < 16000)) {
-        if (dist2 < 5000) { //use power up if it is close enough
+        // mech.fieldMeter -= mech.fieldRegen * 0.5;
-          Matter.Body.setVelocity(player, { //player knock back, after grabbing power up
+        if (mech.health === mech.maxHealth && powerUp[i].name === "heal" && dist2 < 16000) {
-            x: player.velocity.x + ((powerUp[i].velocity.x * powerUp[i].mass) / player.mass) * 0.3,
+          mech.fieldCDcycle = mech.cycle + 30;
-            y: player.velocity.y + ((powerUp[i].velocity.y * powerUp[i].mass) / player.mass) * 0.3
+          //push away
+          Matter.Body.setVelocity(powerUp[i], {
+            x: powerUp[i].velocity.x * 0,
+            y: powerUp[i].velocity.y * 0
           });
-          mech.usePowerUp(i);
+          powerUp[i].force.x -= 0.0005 * dxP * powerUp[i].mass;
-          return;
+          powerUp[i].force.y -= 0.0005 * dyP * powerUp[i].mass;
-        }
+        } else {
-        mech.fieldMeter -= mech.fieldRegen * 0.5;
           powerUp[i].force.x += 7 * (dxP / dist2) * powerUp[i].mass;
           powerUp[i].force.y += 7 * (dyP / dist2) * powerUp[i].mass - powerUp[i].mass * game.g; //negate gravity
           //extra friction
@@ -891,6 +884,21 @@ const mech = {
             x: powerUp[i].velocity.x * 0.11,
             y: powerUp[i].velocity.y * 0.11
           });
+          if (dist2 < 5000) { //use power up if it is close enough
+            if (b.isModMassEnergy) {
+              mech.fieldMeter = mech.fieldEnergyMax;
+              mech.addHealth(0.05);
+            }
+            Matter.Body.setVelocity(player, { //player knock back, after grabbing power up
+              x: player.velocity.x + ((powerUp[i].velocity.x * powerUp[i].mass) / player.mass) * 0.3,
+              y: player.velocity.y + ((powerUp[i].velocity.y * powerUp[i].mass) / player.mass) * 0.3
+            });
+            powerUp[i].effect();
+            Matter.World.remove(engine.world, powerUp[i]);
+            powerUp.splice(i, 1);
+            return; //because the array order is messed up after splice
+          }
+        }
       }
     }
   },

js/powerups.js

@@ -74,11 +74,6 @@ const powerUps = {
             if (target.ammo === Infinity) target = b.guns[b.inventory[Math.floor(Math.random() * (b.inventory.length))]]
           }
         }
-      } else {
-        // target = b.guns[Math.floor(Math.random() * b.guns.length)];         //if you don't have any guns just add ammo to a random gun you don't have yet
-        mech.fieldMeter = mech.fieldEnergyMax;
-        if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
-      }
         if (target.ammo === Infinity) {
           mech.fieldMeter = mech.fieldEnergyMax;
           if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
@@ -89,6 +84,11 @@ const powerUps = {
           game.updateGunHUD();
           game.makeTextLog("<div class='circle gun'></div> &nbsp; <span style='font-size:110%;'>+" + ammo + " ammo for " + target.name + "</span>", 300);
         }
+      } else {
+        // target = b.guns[Math.floor(Math.random() * b.guns.length)];         //if you don't have any guns just add ammo to a random gun you don't have yet
+        mech.fieldMeter = mech.fieldEnergyMax;
+        if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
+      }
     }
   },
   field: {

style.css

@@ -21,6 +21,11 @@ select {
   top: "-15px"; */
 }
 
+a {
+  text-decoration: none;
+  color: #08c;
+}
+
 #splash {
   user-select: none;
   position: absolute;
@@ -119,16 +124,55 @@ summary {
   color: #aaa;
 }
 
+.pause-grid {
+  padding: 1px;
+  margin: 0px;
+
+  display: none;
+  grid-template-columns: 316px;
+  /* grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); */
+  grid-auto-rows: minmax(auto, auto);
+  grid-gap: 0px;
+  align-content: space-between;
+
+  z-index: 10;
+  font-size: 1.3em;
+}
+
+#pause-grid-right {
+  justify-content: end;
+  position: relative;
+}
+
+#pause-grid-left {
+  justify-content: start;
+  position: relative;
+}
+
+.pause-grid-module {
+  margin: -1px;
+  padding: 10px;
+  line-height: 170%;
+  /* border-radius: 6px; */
+  border: 2px #000 solid;
+  background-color: #fff;
+  font-size: 0.65em;
+}
+
 #build-grid {
-  padding: 16px;
+  /* align-content: space-between; */
+  padding: 1px;
+  /* padding: 16px; */
   margin: 0px;
   border: 0px;
   background-color: #c4ccd8;
 
   display: none;
   grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+  grid-auto-flow: row;
   grid-auto-rows: minmax(auto, auto);
-  grid-gap: 16px;
+  grid-gap: 0px;
+  /* grid-gap: 16px; */
 
   position: relative;
   bottom: 0px;
@@ -137,10 +181,14 @@ summary {
 }
 
 .build-grid-module {
+  margin: -1px;
   padding: 10px;
   line-height: 170%;
-  border-radius: 6px;
+  /* border-radius: 6px; */
-  background: #fff;
+  border: 2px #000 solid;
+  background-color: #fff;
+
+  line-height: 170%;
   font-size: 0.65em;
 }
 
@@ -156,8 +204,8 @@ summary {
 
 #info {
   position: absolute;
-  bottom: 0px;
+  bottom: 3px;
-  left: 1px;
+  left: 3px;
   z-index: 12;
   font-size: 1.5em;
 }
@@ -165,7 +213,8 @@ summary {
 #details-div {
   padding: 10px;
   border-radius: 8px;
-  background-color: #ddd;
+  border: 2px #333 solid;
+  background-color: #eee;
 }
 
 #dmg {