window width media rules to scale cards

card images and text scale based on browser width for smaller screens

tech Zectron - super ball can damage you, but they do more damage to mobs
  superBall bullets are converted to run off generic b.superBall()

sneakers - after taking damage if sneakers are low on life they teleport to a random point from the player's history and they sneak attack again
sneakBoss - a large sneaker that can hide several times before it dies

bug fixes

js/bullet.js

@@ -3769,7 +3769,7 @@ const b = {
         bullet[me] = Bodies.polygon(where.x, where.y, 12, radius, b.fireAttributes(dir, false));
         Composite.add(engine.world, bullet[me]); //add bullet to world
         Matter.Body.setVelocity(bullet[me], velocity);
-                Matter.Body.setDensity(bullet[me], 0.0001 + 0.001 * tech.isSuperHarm);
+        Matter.Body.setDensity(bullet[me], 0.0001 + 0.001 * tech.superHarm);
         bullet[me].endCycle = simulation.cycle + Math.floor(300 + 90 * Math.random());
         bullet[me].minDmgSpeed = 0;
         bullet[me].restitution = 1;
@@ -3782,11 +3782,11 @@ const b = {
                     this.endCycle = 0
                 }
             };
-                } else if (tech.isSuperHarm){
+        } else if (tech.superHarm) {
             bullet[me].collidePlayerDo = function() {
                 if (Matter.Query.collides(this, [player]).length) {
                     this.endCycle = 0
-                            let dmg = 0.03
+                    let dmg = 0.03 * this.mass * tech.superHarm
                     m.damage(dmg);
                     simulation.drawList.push({ //add dmg to draw queue
                         x: this.position.x,
@@ -3800,7 +3800,7 @@ const b = {
             bullet[me].cycle = 0
             bullet[me].do = function() {
                 this.cycle++
-                        if (this.cycle > 60) this.do = this.collidePlayerDo
+                if (this.cycle > 6) this.do = this.collidePlayerDo
                 this.force.y += this.mass * 0.0012;
             };
         } else {

js/index.js

@@ -157,7 +157,6 @@ window.addEventListener('load', () => {
                 simulation.molecularMode = Number(set[property])
                 const i = 4 //update experiment text
                 m.fieldUpgrades[i].description = m.fieldUpgrades[i].setDescription()
-                // document.getElementById(`field-${i}`).innerHTML = `<div class="grid-title"><div class="circle-grid field"></div> &nbsp; ${build.nameLink(m.fieldUpgrades[i].name)}</div> ${m.fieldUpgrades[i].description}`
                 document.getElementById(`field-${i}`).innerHTML = `<div class="card-text">
                 <div class="grid-title"><div class="circle-grid field"></div> &nbsp; ${build.nameLink(m.fieldUpgrades[i].name)}</div>
                 ${m.fieldUpgrades[i].description}</div>`
@@ -325,7 +324,8 @@ const build = {
         if (tech.plasmaBotCount) botText += `<br>plasma-bots: ${tech.plasmaBotCount}`
         if (tech.missileBotCount) botText += `<br>missile-bots: ${tech.missileBotCount}`
 
-        let text = `<div class="pause-grid-module" style = "font-size: 13px;line-height: 120%;padding: 5px;"> 
+        let text = `<div class="pause-grid-module" style = "padding: 10px; line-height: 110%;">
+<span style = "font-size: 0.87em;">
 <svg class="SVG-button" onclick="build.shareURL(false)" width="92" height="20" style="padding:0px; margin: 1px;">
     <g stroke='none' fill='#333' stroke-width="2" font-size="14px" font-family="Ariel, sans-serif"> <text x="5" y="15">copy build url</text></g>
 </svg><span style="font-size:1.5em;font-weight: 600; float: right;">PAUSED</span> 
@@ -349,13 +349,13 @@ ${botText}
 <span style="float: right;">mouse: (${simulation.mouseInGame.x.toFixed(1)}, ${simulation.mouseInGame.y.toFixed(1)})</span> 
 <br><strong class='color-m'>tech</strong>: ${tech.totalCount}  &nbsp; <strong class='color-r'>research</strong>: ${powerUps.research.count}
 <span style="float: right;">velocity: (${player.velocity.x.toFixed(3)}, ${player.velocity.y.toFixed(3)})</span> 
-${junkCount ?  `<br><strong class='color-j'>JUNK</strong>: ${(junkCount / totalCount * 100).toFixed(1)}%  `: ""}
+${junkCount ?  `<br><strong class='color-junk'>JUNK</strong>: ${(junkCount / totalCount * 100).toFixed(1)}%  `: ""}
 <br>
 <br>level: ${level.levelsCleared} ${level.levels[level.onLevel]} (${level.difficultyText()})
 <br>seed: ${Math.initialSeed} &nbsp; ${m.cycle} cycles
 <br>mobs: ${mob.length} &nbsp; blocks: ${body.length} &nbsp; bullets: ${bullet.length} &nbsp; power ups: ${powerUp.length} 
 ${simulation.isCheating ? "<br><br><em>lore disabled</em>": ""}
-</div>`;
+</span></div>`;
         // deaths: ${mobs.mobDeaths} &nbsp;
         if (tech.isPauseSwitchField && !simulation.isChoosing) {
             const style = localSettings.isHideImages ? `style="height:auto;"` : `style="background-image: url('img/field/${m.fieldUpgrades[m.fieldMode].name}${m.fieldMode === 0 ? Math.floor(Math.random()*10) : ""}.webp');"`
@@ -588,7 +588,7 @@ ${simulation.isCheating ? "<br><br><em>lore disabled</em>": ""}
     },
     populateGrid() { //background-color:var(--build-bg-color);
         let text = `
-  <div class="experiment-grid-module" style="position: sticky; top:0; z-index: 10; align-self: start; width: 165px; font-size: 1.00em; line-height: 170%; background-color: #fafcfd;display: flex; flex-direction: column; justify-content: center; align-items: center;border: 1.5px #333 solid;border-radius:10px;">  
+  <div class="experiment-grid-module" style="position: sticky; top:0; z-index: 10; align-self: start; width: 165px; font-size: 1.00em; line-height: 170%; background-color: #fafcfd;display: flex; flex-direction: column; justify-content: center; align-items: center;border: 1.5px #333 solid;border-radius:10px; padding:7px;  height: 190px;">  
 <div>
     <svg class="SVG-button" onclick="build.startExperiment()" width="150" height="68" >
         <g stroke='none' fill='#333' stroke-width="2" font-size="60px" font-family="Ariel, sans-serif">

js/level.js

@@ -28,11 +28,11 @@ const level = {
             // m.setField("perfect diamagnetism") //molecular assembler  standing wave   time dilation   perfect diamagnetism   metamaterial cloaking   wormhole   negative mass    pilot wave   plasma torch
             // simulation.molecularMode = 2
             // m.damage(0.1);
-            // b.giveGuns("nail gun") //0 nail gun  1 shotgun  2 super balls 3 wave 4 missiles 5 grenades  6 spores  7 drones  8 foam  9 harpoon  10 mine  11 laser
+            // b.giveGuns("super balls") //0 nail gun  1 shotgun  2 super balls 3 wave 4 missiles 5 grenades  6 spores  7 drones  8 foam  9 harpoon  10 mine  11 laser
             // b.giveGuns("spores") //0 nail gun  1 shotgun  2 super balls 3 wave 4 missiles 5 grenades  6 spores  7 drones  8 foam  9 harpoon  10 mine  11 laser
             // b.guns[0].ammo = 10000
-            // tech.giveTech("Zectron")
             // tech.giveTech("cordyceps")
+            // tech.giveTech("Zectron")
             // for (let i = 0; i < 1; ++i) tech.giveTech("super ball")
             // tech.isFoamBall = true
             // for (let i = 0; i < 1; ++i) tech.giveTech("incendiary ammunition")

js/player.js

@@ -2974,7 +2974,7 @@ const m = {
         },
         {
             name: "metamaterial cloaking",
-            description: "when not firing activate <strong class='color-cloaked'>cloaking</strong><br><span style = 'font-size:92%;'>after <strong class='color-cloaked'>decloaking</strong> <strong>+333%</strong> <strong class='color-d'>damage</strong> for up to <strong>2</strong> s</span><br>generate <strong>6</strong> <strong class='color-f'>energy</strong> per second",
+            description: "when not firing activate <strong class='color-cloaked'>cloaking</strong><br>after <strong class='color-cloaked'>decloaking</strong> <strong>+333%</strong> <strong class='color-d'>damage</strong> for <strong>2</strong> s<br>generate <strong>6</strong> <strong class='color-f'>energy</strong> per second",
             effect: () => {
                 m.fieldFire = true;
                 m.fieldMeterColor = "#333";

js/powerup.js

@@ -620,21 +620,21 @@ const powerUps = {
         if (tech.isSuperDeterminism) {
             return `<div></div>`
         } else if (tech.isCancelTech) {
-            return `<div class='choose-grid-module cancel-card' onclick='powerUps.endDraft("${type}",true)' style="width: 115px;">randomize</div>`
+            return `<div class='cancel-card' onclick='powerUps.endDraft("${type}",true)' style="width: 115px;">randomize</div>`
         } else {
-            return `<div class='choose-grid-module cancel-card' onclick='powerUps.endDraft("${type}",true)' style="width: 85px;">cancel</div>`
+            return `<div class='cancel-card' onclick='powerUps.endDraft("${type}",true)' style="width: 85px;">cancel</div>`
         }
     },
     researchText(type) {
         let text = ""
         if (tech.isJunkResearch && powerUps.research.currentRerollCount < 3) {
-            text += `<div onclick="powerUps.research.use('${type}')" class='choose-grid-module research-card'>` // style = "margin-left: 192px; margin-right: -192px;"
+            text += `<div onclick="powerUps.research.use('${type}')" class='research-card'>` // style = "margin-left: 192px; margin-right: -192px;"
             tech.junkResearchNumber = Math.ceil(4 * Math.random())
             text += `<div><div> <span style="position:relative;">`
-            for (let i = 0; i < tech.junkResearchNumber; i++) text += `<div class="circle-grid junk" style="position:absolute; top:0; left:${15*i}px ;opacity:0.8; border: 1px #fff solid;"></div>`
+            for (let i = 0; i < tech.junkResearchNumber; i++) text += `<div class="circle-grid junk" style="position:absolute; top:0; left:${15*i}px ;opacity:0.8; border: 1px #fff solid;width: 1.15em;height: 1.15em;"></div>`
             text += `</span>&nbsp; <span class='research-select'>pseudoscience</span></div></div></div>`
         } else if (powerUps.research.count > 0) {
-            text += `<div onclick="powerUps.research.use('${type}')" class='choose-grid-module research-card' >` // style = "margin-left: 192px; margin-right: -192px;"
+            text += `<div onclick="powerUps.research.use('${type}')" class='research-card' >` // style = "margin-left: 192px; margin-right: -192px;"
             text += `<div><div><span style="position:relative;">`
             for (let i = 0, len = Math.min(powerUps.research.count, 30); i < len; i++) text += `<div class="circle-grid research" style="font-size:0.82em; position:absolute; top:0; left:${(18 - len*0.21)*i}px ;opacity:0.8; border: 1px #fff solid;"></div>`
             text += `</span>&nbsp; <span class='research-select'>${tech.isResearchReality?"<span class='alt'>alternate reality</span>": "research"}</span></div></div></div>`
@@ -644,21 +644,29 @@ const powerUps = {
         return text
     },
     buildColumns(totalChoices, type) {
+        let width
+        if (canvas.width < 1500) {
+            width = "340px"
+        } else if (canvas.width < 1950) {
+            width = "360px"
+        } else {
+            width = "384px"
+        }
         let text = ""
         if (localSettings.isHideImages || canvas.width < 1200) {
-            document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
+            document.getElementById("choose-grid").style.gridTemplateColumns = width
             text += powerUps.cancelText(type)
             text += powerUps.researchText(type)
         } else if (totalChoices === 2) {
-            document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px"
+            document.getElementById("choose-grid").style.gridTemplateColumns = `repeat(2, ${width})`
             text += powerUps.researchText(type)
             text += powerUps.cancelText(type)
         } else if (totalChoices === 1) {
-            document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
+            document.getElementById("choose-grid").style.gridTemplateColumns = width
             text += powerUps.cancelText(type)
             text += powerUps.researchText(type)
         } else {
-            document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px 384px"
+            document.getElementById("choose-grid").style.gridTemplateColumns = `repeat(3, ${width})`
             text += "<div></div>"
             text += powerUps.researchText(type)
             text += powerUps.cancelText(type)

js/tech.js

@@ -299,7 +299,7 @@ const tech = {
     },
     tech: [{
             name: "ordnance",
-            description: "</strong>double</strong> the <strong class='flicker'>frequency</strong> of finding <strong class='color-g'>gun</strong><strong class='color-m'>tech</strong><br>spawn a <strong class='color-g'>gun</strong> and <strong>+7%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong>double</strong> the <strong class='flicker'>frequency</strong> of finding <strong class='color-g'>gun</strong><strong class='color-m'>tech</strong><br>spawn a <strong class='color-g'>gun</strong> and <strong>+7%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 1,
             count: 0,
             frequency: 1,
@@ -509,7 +509,7 @@ const tech = {
         {
             name: "supply chain",
             descriptionFunction() {
-                return `double your current <strong class='color-ammo'>ammo</strong><br><strong>+4%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
+                return `double your current <strong class='color-ammo'>ammo</strong><br><strong>+4%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
             },
             maxCount: 9,
             count: 0,
@@ -2512,7 +2512,7 @@ const tech = {
         },
         {
             name: "overcharge",
-            description: "<strong>+66</strong> maximum <strong class='color-f'>energy</strong><br><strong>+6%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong>+66</strong> maximum <strong class='color-f'>energy</strong><br><strong>+6%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 9,
             count: 0,
             frequency: 1,
@@ -2538,7 +2538,7 @@ const tech = {
         },
         {
             name: "Maxwells demon",
-            description: "<strong class='color-f'>energy</strong> above your max decays <strong>96%</strong> slower<br><strong>+5%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong class='color-f'>energy</strong> above your max decays <strong>96%</strong> slower<br><strong>+5%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 1,
             count: 0,
             frequency: 2,
@@ -2846,7 +2846,7 @@ const tech = {
         {
             name: "adiabatic healing",
             descriptionFunction() {
-                return `${powerUps.orb.heal()} have <strong>+100%</strong> effect<br><strong>+5%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
+                return `${powerUps.orb.heal()} have <strong>+100%</strong> effect<br><strong>+5%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
             },
             maxCount: 3,
             count: 0,
@@ -3234,7 +3234,7 @@ const tech = {
         },
         {
             name: "pseudoscience",
-            description: "<span style = 'font-size:94%;'>when <strong>selecting</strong> a power up, <strong class='color-r'>research</strong> <strong>3</strong> times</span><br>for <strong>free</strong>, but add <strong>1-4%</strong> <strong class='color-j'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool",
+            description: "<span style = 'font-size:94%;'>when <strong>selecting</strong> a power up, <strong class='color-r'>research</strong> <strong>3</strong> times</span><br>for <strong>free</strong>, but add <strong>1-4%</strong> <strong class='color-junk'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool",
             maxCount: 1,
             count: 0,
             frequency: 1,
@@ -3292,7 +3292,7 @@ const tech = {
         {
             name: "emergence",
             description: "<strong class='color-m'>tech</strong>, <strong class='color-f'>fields</strong>, and <strong class='color-g'>guns</strong> have <strong>+1</strong> <strong>choice</strong><br><strong>+8%</strong> <strong class='color-d'>damage</strong>",
-            // description: "<strong class='color-m'>tech</strong>, <strong class='color-f'>fields</strong>, and <strong class='color-g'>guns</strong> have <strong>+2</strong> <strong>choices</strong><br><strong>+3%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            // description: "<strong class='color-m'>tech</strong>, <strong class='color-f'>fields</strong>, and <strong class='color-g'>guns</strong> have <strong>+2</strong> <strong>choices</strong><br><strong>+3%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 9,
             count: 0,
             frequency: 1,
@@ -3319,7 +3319,7 @@ const tech = {
         {
             name: "path integral",
             link: `<a target="_blank" href='https://en.wikipedia.org/wiki/Path_integral_formulation' class="link">path integral</a>`,
-            description: "your next <strong class='color-m'>tech</strong> choice has all possible <strong>options</strong><br><strong>+5%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "your next <strong class='color-m'>tech</strong> choice has all possible <strong>options</strong><br><strong>+5%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 1,
             count: 0,
             frequency: 1,
@@ -3410,8 +3410,8 @@ const tech = {
         },
         {
             name: "abiogenesis",
-            // description: `use ${powerUps.orb.research(4)}(or <strong>49%</strong> <strong class='color-j'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool if you can't) to add a 2nd <strong>boss</strong> to each level`,
+            // description: `use ${powerUps.orb.research(4)}(or <strong>49%</strong> <strong class='color-junk'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool if you can't) to add a 2nd <strong>boss</strong> to each level`,
-            description: `<span style = 'font-size:94%;'>as a level begins spawn a 2nd <strong>boss</strong> using ${powerUps.orb.research(4)}<br>(<strong>+49%</strong> <strong class='color-j'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool if you can't pay)</span>`,
+            description: `<span style = 'font-size:94%;'>as a level begins spawn a 2nd <strong>boss</strong> using ${powerUps.orb.research(4)}<br>(<strong>+49%</strong> <strong class='color-junk'>JUNK</strong> to the <strong class='color-m'>tech</strong> pool if you can't pay)</span>`,
             maxCount: 1,
             count: 0,
             frequency: 2,
@@ -3429,7 +3429,7 @@ const tech = {
         },
         {
             name: "meta-analysis",
-            description: `if you choose a <strong class='color-j'>JUNK</strong><strong class='color-m'>tech</strong> you instead get a<br>random normal <strong class='color-m'>tech</strong> and spawn ${powerUps.orb.research(2)}`,
+            description: `if you choose a <strong class='color-junk'>JUNK</strong><strong class='color-m'>tech</strong> you instead get a<br>random normal <strong class='color-m'>tech</strong> and spawn ${powerUps.orb.research(2)}`,
             maxCount: 1,
             count: 0,
             frequency: 1,
@@ -3447,7 +3447,7 @@ const tech = {
         },
         {
             name: "dark patterns",
-            description: "<strong>+38%</strong> <strong class='color-d'>damage</strong><br><strong>+53%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong>+38%</strong> <strong class='color-d'>damage</strong><br><strong>+53%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 1,
             count: 0,
             frequency: 1,
@@ -3776,7 +3776,7 @@ const tech = {
         },
         {
             name: "replication",
-            description: "<strong>+10%</strong> chance to <strong class='color-dup'>duplicate</strong> spawned <strong>power ups</strong><br><strong>+33%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong>+10%</strong> chance to <strong class='color-dup'>duplicate</strong> spawned <strong>power ups</strong><br><strong>+33%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 9,
             count: 0,
             frequency: 1,
@@ -4669,7 +4669,7 @@ const tech = {
             frequency: 1,
             frequencyDefault: 1,
             allowed() {
-                return (tech.haveGunCheck("shotgun") && !tech.isNailShot && !tech.isIceShot && !tech.isRivets && !tech.isFoamShot && !tech.isSporeWorm && !tech.isSporeFlea && !tech.isNeedles) || (tech.haveGunCheck("super balls") && !tech.isFoamBall && !tech.isSuperHarm) || (tech.isRivets && !tech.isNailCrit) || (m.fieldUpgrades[m.fieldMode].name === "molecular assembler" && simulation.molecularMode === 3) || (tech.haveGunCheck("drones") && !tech.isForeverDrones && !tech.isDroneRadioactive && !tech.isDroneTeleport)
+                return (tech.haveGunCheck("shotgun") && !tech.isNailShot && !tech.isIceShot && !tech.isRivets && !tech.isFoamShot && !tech.isSporeWorm && !tech.isSporeFlea && !tech.isNeedles) || (tech.haveGunCheck("super balls") && !tech.isFoamBall && !tech.superHarm) || (tech.isRivets && !tech.isNailCrit) || (m.fieldUpgrades[m.fieldMode].name === "molecular assembler" && simulation.molecularMode === 3) || (tech.haveGunCheck("drones") && !tech.isForeverDrones && !tech.isDroneRadioactive && !tech.isDroneTeleport)
             },
             requires: "shotgun, super balls, rivets, drones, not irradiated drones, burst drones, polyurethane, Zectron",
             effect() {
@@ -4708,9 +4708,9 @@ const tech = {
         },
         {
             name: "Zectron",
-            description: `<strong>+100%</strong> <strong>super ball</strong> density and <strong class='color-d'>damage</strong><br>after colliding with <strong>super balls</strong> <strong>lose</strong> <strong class='color-h'>health</strong>`,
+            description: `<strong>+80%</strong> <strong>super ball</strong> density and <strong class='color-d'>damage</strong>, but<br>after colliding with <strong>super balls</strong> <strong>lose</strong> <strong class='color-h'>health</strong>`,
             isGunTech: true,
-            maxCount: 1,
+            maxCount: 9,
             count: 0,
             frequency: 2,
             frequencyDefault: 2,
@@ -4719,10 +4719,10 @@ const tech = {
             },
             requires: "super balls not incendiary ammunition",
             effect() {
-                tech.isSuperHarm = true
+                tech.superHarm++
             },
             remove() {
-                tech.isSuperHarm = false
+                tech.superHarm = 0
             }
         },
         {
@@ -5521,7 +5521,7 @@ const tech = {
         },
         {
             name: "booby trap",
-            description: "<strong>60%</strong> chance to drop a <strong>mine</strong> from <strong>power ups</strong><br><strong>+46%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "<strong>60%</strong> chance to drop a <strong>mine</strong> from <strong>power ups</strong><br><strong>+46%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             isGunTech: true,
             maxCount: 1,
             count: 0,
@@ -5626,25 +5626,25 @@ const tech = {
                 tech.isSporeGrowth = false
             }
         },
-        {
+        // {
-            name: "cordyceps",
+        //     name: "cordyceps",
-            description: "mobs infected by <strong class='color-p' style='letter-spacing: 2px;'>sporangium</strong><br><strong>resurrect</strong> and attack other mobs",
+        //     description: "mobs infected by <strong class='color-p' style='letter-spacing: 2px;'>sporangium</strong><br><strong>resurrect</strong> and attack other mobs",
-            isGunTech: true,
+        //     isGunTech: true,
-            maxCount: 1,
+        //     maxCount: 1,
-            count: 0,
+        //     count: 0,
-            frequency: 2,
+        //     frequency: 2,
-            frequencyDefault: 2,
+        //     frequencyDefault: 2,
-            allowed() {
+        //     allowed() {
-                return tech.haveGunCheck("spores")
+        //         return tech.haveGunCheck("spores")
-            },
+        //     },
-            requires: "spores",
+        //     requires: "spores",
-            effect() {
+        //     effect() {
-                tech.isZombieMobs = true
+        //         tech.isZombieMobs = true
-            },
+        //     },
-            remove() {
+        //     remove() {
-                tech.isZombieMobs = false
+        //         tech.isZombieMobs = false
-            }
+        //     }
-        },
+        // },
         {
             name: "colony",
             description: "<strong>+50%</strong> <strong class='color-p' style='letter-spacing: 2px;'>sporangium</strong> discharge<br><strong>40%</strong> chance to discharge something different",
@@ -5712,7 +5712,7 @@ const tech = {
         {
             name: "junk DNA",
             descriptionFunction() {
-                return `<strong>+53%</strong> ${b.guns[6].nameString()} <strong class='color-d'>damage</strong> per <strong class='color-j'>JUNK</strong><strong class='color-m'>tech</strong> <em>(${(53*tech.junkCount).toFixed(0)}%)</em><br><strong>+50%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
+                return `<strong>+53%</strong> ${b.guns[6].nameString()} <strong class='color-d'>damage</strong> per <strong class='color-junk'>JUNK</strong><strong class='color-m'>tech</strong> <em>(${(53*tech.junkCount).toFixed(0)}%)</em><br><strong>+50%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool`
             },
             isGunTech: true,
             maxCount: 1,
@@ -5739,7 +5739,7 @@ const tech = {
         // {
         //     name: "junk DNA",
         //     //increase damage by 10% for each JUNK tech percent in the tech pool, remove all JUNK tech,
-        //     descriptionFunction() { return `<strong>+50%</strong> ${b.guns[6].nameString()} <strong class='color-d'>damage</strong><br><strong>+15%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool` },
+        //     descriptionFunction() { return `<strong>+50%</strong> ${b.guns[6].nameString()} <strong class='color-d'>damage</strong><br><strong>+15%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool` },
         //     isGunTech: true,
         //     maxCount: 1,
         //     count: 0,
@@ -5863,7 +5863,9 @@ const tech = {
         },
         {
             name: "path integration",
-            description: "<strong>drones</strong>, <strong class='color-p' style='letter-spacing: 2px;'>spores</strong>, <strong class='color-p' style='letter-spacing: -0.8px;'>fleas</strong>, and <strong class='color-p' style='letter-spacing: -0.8px;'>worms</strong><br>travel with you through <strong>levels</strong>",
+            descriptionFunction() {
+                return `<strong>drones</strong> and ${b.guns[6].nameString("s")}<br>travel with you through <strong>levels</strong>`
+            },
             isGunTech: true,
             maxCount: 1,
             count: 0,
@@ -6520,7 +6522,7 @@ const tech = {
         {
             name: "UHMWPE",
             descriptionFunction() {
-                return `+${(b.guns[9].ammo).toFixed(0)}% <strong>harpoon</strong> <strong>rope</strong> <strong>length</strong><br><em>(1/80 of harpoon <strong class='color-ammo'>ammo</strong>)</em>`
+                return `+${(b.guns[9].ammo*1.25).toFixed(0)}% <strong>harpoon</strong> <strong>rope</strong> <strong>length</strong><br><em>(1/80 of harpoon <strong class='color-ammo'>ammo</strong>)</em>`
             },
             isGunTech: true,
             maxCount: 1,
@@ -8363,7 +8365,7 @@ const tech = {
         // },
         {
             name: "swap meet",
-            description: "normal <strong class='color-m'>tech</strong> become <strong class='color-j'>JUNK</strong><br>and <strong class='color-j'>JUNK</strong> become normal <strong class='color-m'>tech</strong>",
+            description: "normal <strong class='color-m'>tech</strong> become <strong class='color-junk'>JUNK</strong><br>and <strong class='color-junk'>JUNK</strong> become normal <strong class='color-m'>tech</strong>",
             maxCount: 1,
             count: 0,
             frequency: 0,
@@ -8412,7 +8414,7 @@ const tech = {
                 const delay = 333
                 const loop = () => {
                     if ((simulation.isChoosing) && m.alive && !build.isExperimentSelection) {
-                        const dmg = Math.floor(33 * Math.random()) * 0.01
+                        const dmg = Math.floor(27 * Math.random()) * 0.01
                         this.text = `<strong style = "font-family: 'Courier New', monospace;">+${(dmg*100).toFixed(0).padStart(2, '0')}%</strong> <strong class='color-d'>damage</strong><br>&nbsp;`
                         this.damage = 1 + dmg
                         if (document.getElementById(`damage-JUNK-id${this.id}`)) document.getElementById(`damage-JUNK-id${this.id}`).innerHTML = this.text
@@ -8686,7 +8688,7 @@ const tech = {
         // },
         {
             name: "discount",
-            description: "get 3 random <strong class='color-j'>JUNK</strong><strong class='color-m'>tech</strong> for the price of 1!<br>&nbsp;",
+            description: "get 3 random <strong class='color-junk'>JUNK</strong><strong class='color-m'>tech</strong> for the price of 1!<br>&nbsp;",
             maxCount: 1,
             count: 0,
             frequency: 0,
@@ -9431,6 +9433,20 @@ const tech = {
                 if (this.count) m.look = m.lookDefault
             }
         },
+        {
+            name: "iFrames",
+            description: "you are <strong>invulnerable</strong><br>when you aren't taking damage",
+            maxCount: 1,
+            count: 0,
+            frequency: 0,
+            isJunk: true,
+            allowed() {
+                return true
+            },
+            requires: "",
+            effect() {},
+            remove() {}
+        },
         {
             name: "disintegrated armament",
             description: "spawn a <strong class='color-g'>gun</strong><br><strong>remove</strong> your active <strong class='color-g'>gun</strong>",
@@ -9645,7 +9661,7 @@ const tech = {
         },
         {
             name: "defragment",
-            description: "set the <strong class='flicker'>frequency</strong> of finding <strong class='color-j'>JUNK</strong><strong class='color-m'>tech</strong> to zero<br>&nbsp;",
+            description: "set the <strong class='flicker'>frequency</strong> of finding <strong class='color-junk'>JUNK</strong><strong class='color-m'>tech</strong> to zero<br>&nbsp;",
             maxCount: 1,
             count: 0,
             frequency: 0,
@@ -9857,7 +9873,7 @@ const tech = {
         },
         {
             name: "expert system",
-            description: "spawn a <strong class='color-m'>tech</strong> power up<br><strong>+64%</strong> <strong class='color-j'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
+            description: "spawn a <strong class='color-m'>tech</strong> power up<br><strong>+64%</strong> <strong class='color-junk'>JUNK</strong> to <strong class='color-m'>tech</strong> pool",
             maxCount: 9,
             count: 0,
             frequency: 0,
@@ -10772,7 +10788,7 @@ const tech = {
         },
         {
             name: "tinker",
-            description: "<strong>permanently</strong> unlock <strong class='color-j'>JUNK</strong><strong class='color-m'>tech</strong> in experiment mode<br><em>this effect is stored for future visits</em>",
+            description: "<strong>permanently</strong> unlock <strong class='color-junk'>JUNK</strong><strong class='color-m'>tech</strong> in experiment mode<br><em>this effect is stored for future visits</em>",
             maxCount: 1,
             count: 0,
             frequency: 0,
@@ -11306,6 +11322,6 @@ const tech = {
     buffedGun: 0,
     isGunChoice: null,
     railChargeRate: null,
-    isSuperHarm: null,
+    superHarm: null,
     isZombieMobs: null
 }

style.css

@@ -177,6 +177,7 @@ summary {
     display: grid;
     grid-template-columns: repeat(3, 384px);
     align-items: stretch;
+    /* align-items: start; */
     /* align-content: start; */
     /* grid-auto-rows: minmax(auto, 140px); */
     visibility: hidden;
@@ -221,6 +222,7 @@ summary {
     /* grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); */
     grid-auto-rows: minmax(auto, auto);
     align-content: start;
+    align-items: start;
     /* align-content: space-between; */
     /* gap: 10px; */
     z-index: 2;
@@ -264,7 +266,7 @@ summary {
     border-radius: 8px;
     background-color: #fff;
     font-size: 0.65em; */
-    padding: 5px;
+    /* padding: 5px; */
     line-height: 160%;
     /* border-radius: 8px; */
     background-color: #fafcfd;
@@ -280,6 +282,8 @@ summary {
     display: flex;
     justify-content: center;
     /* align-content: space-between; */
+    /* align-items: start; */
+    /* align-items: stretch; */
     /* padding-top: 10px; */
     /* padding: 16px; */
     padding: 10px 1px;
@@ -307,7 +311,8 @@ summary {
 }
 
 .experiment-grid-module {
-    padding: 5px;
+    /* padding: 0.1em; */
+    /* padding: 5px; */
     line-height: 160%;
     /* border-radius: 8px; */
     background-color: #fafcfd;
@@ -322,6 +327,7 @@ summary {
 
 .grid-title {
     padding-bottom: 6px;
+    padding-top: 4px;
     font-size: 1.4em;
     font-weight: 600;
 }
@@ -338,18 +344,21 @@ summary {
     display: flex; 
     justify-content:flex-end;
     flex-direction: column;  
-    padding:0px;
+    /* margin: 5px; */
 }
 
 .card-text {
     background-color: rgba(255,255,255,1); 
     /* border-radius: 8px; */
-    padding: 11px 13px; 
+    /* padding: 11px 13px;  */
+    padding: 0.5em 1em;
     /* border-top: 1px solid var(--build-bg-color); */
     border: 1px solid #444;
     margin-top: -1px;
     margin-right: -1px;
     font-size: 0.92em;
+    min-height: 88px;
+    /* height:78px; */
 }
 .cancel-card {
     text-align: center;
@@ -360,6 +369,9 @@ summary {
     margin-top: -1px;
     margin-right: -1px;
     padding: 1px;
+
+    line-height: 160%;
+    background-color: #fafcfd;
 }
 .research-card {
     font-size: 1.1em;
@@ -368,36 +380,42 @@ summary {
     margin-top: -1px;
     margin-right: -1px;
     padding: 1px 0px 1px 10px;
+    line-height: 160%;
+    background-color: #fafcfd;
 }
 
 
 /* media rules for smaller screens
 4->3 at 1550
 */
-@media (width < 0px) {
+@media (1500px <= width < 1950px) {
-    .experiment-grid-module {
+    .experiment-grid-module, .choose-grid-module, .pause-grid-module {
-        line-height: 140%;
+        line-height: 150%;
-        font-size: 0.65em;
+        font-size: 0.72em;
     }
-    .choose-grid-module{
+    #experiment-grid, #choose-grid, .pause-grid{
-        line-height: 140%;
+        grid-template-columns: repeat(auto-fit, 360px);
-        font-size: 0.65em;
-    }
-    .pause-grid-module {
-        line-height: 140%;
-        font-size: 0.65em;
     }
     .card-background{
-        height:270px; 
+        height:315px;
     }
-    #experiment-grid{
+    .card-text {
-        grid-template-columns: repeat(auto-fit, 360px);
+        min-height: 82px;
     }
-    #choose-grid{
-        grid-template-columns: repeat(auto-fit, 360px);
 }
-    .pause-grid{
+@media (width < 1500px) {
-        grid-template-columns: repeat(auto-fit, 360px);
+    .experiment-grid-module, .choose-grid-module, .pause-grid-module {
+        line-height: 143%;
+        font-size: 0.68em;
+    }
+    #experiment-grid, #choose-grid, .pause-grid{
+        grid-template-columns: repeat(auto-fit, 340px);
+    }
+    .card-background{
+        height:290px; 
+    }
+    .card-text {
+        min-height: 75px;
     }
 }
 
@@ -855,15 +873,14 @@ summary {
 }
 .color-cancel {
     background-color: #fafcfd;
-    border: 2px #444 solid;
+    border: 0.15em #444 solid;
-    padding: 4px;
+    padding: 0.2em;
-    border-radius: 4px;
+    border-radius: 0.2em;
     font-weight: 800;
-    line-height: 160%;
     font-size: 1em;
 }
 
-.color-j {
+.color-junk {
     letter-spacing: 1px;
     /* font-weight: 100; */
     font-family: Lucida Console, Courier, monospace;
@@ -907,6 +924,11 @@ summary {
     margin-bottom: -0.3em;
 }
 
+.junk {
+    background-color: hsl(254, 44%, 75%);
+    border-radius: 25%;
+}
+
 .research-circle {
     width: 0.9em;
     height: 0.9em;
@@ -983,11 +1005,7 @@ summary {
     box-shadow: 0 0 0 3px #025;
 } */
 
-.junk {
+
-    background-color: hsl(254, 44%, 75%);
-    border-radius: 25%;
-    /* animation: 3s linear infinite alternate pulse; */
-}
 
 @keyframes pulse {
     0% {

todo.txt

@@ -1,34 +1,29 @@
 ******************************************************** NEXT PATCH **************************************************
 
-adjust card size based on window width for smaller screens
+card images and text scale based on browser width for smaller screens
-  switched from px to em css units for many elements
-
-some image updates
-single column power up choice for small screens or no image setting
 
 tech Zectron - super ball can damage you, but they do more damage to mobs
   superBall bullets are converted to run off generic b.superBall()
-  !!still needs testing for balance
 
-tech: cordyceps - sporangium infect mobs, making them fight for you
+sneakers - after taking damage if sneakers are low on life they teleport to a random point from the player's history and they sneak attack again
-  zombies might attack player if there are no mob targets
-  !!still needs testing for balance
-
-sneakers - after taking damage if sneakers are low on life they teleport to a random point on the player history and sneak attack again
 sneakBoss - a large sneaker that can hide several times before it dies
 
 bug fixes
 
 *********************************************************** TODO *****************************************************
 
+tech: cordyceps - sporangium infect mobs, making them fight for you
+  zombies might attack player if there are no mob targets
+  !! needs to explore when there are no targets
+  !! mechanics are confusing
+  !! still needs testing for balance
+    it's targeting player even when there are mobs
 tech - all mobs return as zombies?
 
-set media rules for smaller screens
+Now that super balls are generic maybe something else should produce them
-  should fit 4 tech per row on my laptop
+  super-bot 
-  smaller card size
+  molecular fabricator - how to aim?
-    set font to 0.8em
+  shotgun - too similar to super ball gun
-    set card width to 384*0.8
-      and set background images to fit
 
 set mob health bar colors based on status effects?
   make mob damage immunity a mob status effect?
@@ -36,7 +31,6 @@ set mob health bar colors based on status effects?
 physics notes: add link to double slit content
   https://www.youtube.com/watch?v=v_uBaBuarEM
 
-
 tech: rail gun area damage effect, but for all harpoon mode
 
 laser momentum pushed back on player?
@@ -1162,6 +1156,7 @@ if pause is pressed while selecting power ups, display pause menu on top of sele
 ***maybe redo***
   dynamical systems
   harpoon gun
+    Eiichiro Oda --niji
   nail-bot
   homeostasis
   heuristics