new images

some image updates
single column power up choice for small screens or no image setting

js/bullet.js

@@ -5976,9 +5976,9 @@ const b = {
                     spray(12); //fires normal shotgun bullets
                 } else if (tech.isIncendiary) {
                     spread *= 0.15
-                    const END = Math.floor(input.down ? 10 : 7);
+                    const END = Math.floor(input.down ? 8 : 5);
-                    const totalBullets = 10
+                    const totalBullets = 9
-                    const angleStep = (input.down ? 0.4 : 1.3) / totalBullets
+                    const angleStep = (input.down ? 0.3 : 0.8) / totalBullets
                     let dir = m.angle - angleStep * totalBullets / 2;
                     for (let i = 0; i < totalBullets; i++) { //5 -> 7
                         dir += angleStep
@@ -5993,7 +5993,7 @@ const b = {
                             y: speed * Math.sin(dirOff)
                         });
                         bullet[me].onEnd = function() {
-                            b.explosion(this.position, 150 * (tech.isShotgunReversed ? 1.4 : 1) + (Math.random() - 0.5) * 40); //makes bullet do explosive damage at end
+                            b.explosion(this.position, 150 * (tech.isShotgunReversed ? 1.4 : 1) + (Math.random() - 0.5) * 30); //makes bullet do explosive damage at end
                         }
                         bullet[me].beforeDmg = function() {
                             this.endCycle = 0; //bullet ends cycle after hitting a mob and triggers explosion

js/level.js

@@ -21,7 +21,7 @@ const level = {
             // level.difficultyIncrease(30 * 4) //30 is near max on hard  //60 is near max on why
             // m.maxHealth = m.health = 100
             // tech.isRerollDamage = true
-            // powerUps.research.changeRerolls(20)
+            // powerUps.research.changeRerolls(10)
             // m.immuneCycle = Infinity //you can't take damage
             // tech.tech[297].frequency = 100
             // m.couplingChange(5)
@@ -35,7 +35,7 @@ const level = {
             // tech.giveTech("posture")
             // for (let i = 0; i < 1; ++i) tech.giveTech("Sleipnir")
             // tech.isFoamBall = true
-            // for (let i = 0; i < 1; ++i) tech.giveTech("emergence")
+            // for (let i = 0; i < 9; ++i) tech.giveTech("emergence")
             // for (let i = 0; i < 2; i++) tech.giveTech("unified field theory")
             // for (let i = 0; i < 9; i++) tech.giveTech("replication")
             // for (let i = 0; i < 10; i++) powerUps.directSpawn(450, -50, "tech");

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' onclick='powerUps.endDraft("${type}",true)' style="width: 115px; text-align: center;font-size: 1.1em;font-weight: 100;justify-self: end;border: 1px solid #444;">randomize</div>`
+            return `<div class='choose-grid-module cancel-card' onclick='powerUps.endDraft("${type}",true)' style="width: 115px;">randomize</div>`
         } else {
-            return `<div class='choose-grid-module' onclick='powerUps.endDraft("${type}",true)' style="width: 82px; text-align: center;font-size: 1.1em;font-weight: 100;justify-self: end;border: 1px solid #444;">cancel</div>`
+            return `<div class='choose-grid-module 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' style="font-size: 1.1em;font-weight: 100;border: 1px solid #444;">` // style = "margin-left: 192px; margin-right: -192px;"
+            text += `<div onclick="powerUps.research.use('${type}')" class='choose-grid-module 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>`
             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' style="font-size: 1.1em;font-weight: 100;border: 1px solid #444;">` // style = "margin-left: 192px; margin-right: -192px;"
+            text += `<div onclick="powerUps.research.use('${type}')" class='choose-grid-module 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="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>`
@@ -643,6 +643,46 @@ const powerUps = {
         }
         return text
     },
+    buildColumns(totalChoices, type) {
+        let text = ""
+        if (localSettings.isHideImages || canvas.width < 1200) {
+            document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
+            text += powerUps.cancelText(type)
+            text += powerUps.researchText(type)
+        } else if (totalChoices === 2) {
+            document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px"
+            text += powerUps.researchText(type)
+            text += powerUps.cancelText(type)
+        } else if (totalChoices === 1) {
+            document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
+            text += powerUps.cancelText(type)
+            text += powerUps.researchText(type)
+        } else {
+            document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px 384px"
+            text += "<div></div>"
+            text += powerUps.researchText(type)
+            text += powerUps.cancelText(type)
+        }
+        return text
+    },
+    // researchAndCancelText(type) {
+    //     let text = "<div class= 'choose-grid-module'>"
+    //     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;"
+    //         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>`
+    //         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><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="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>`
+    //     } else {
+    //         text += `<div></div>`
+    //     }
+    //     return text + '</div>'
+    // },
     hideStyle: `style="height:auto; border: none; background-color: transparent;"`,
     gunText(choose, click) {
         const style = localSettings.isHideImages ? powerUps.hideStyle : `style="background-image: url('img/gun/${b.guns[choose].name}.webp');"`
@@ -763,21 +803,7 @@ const powerUps = {
                 }
                 for (let i = 0; i < b.guns.length; i++) b.guns[i].isRecentlyShown = false //reset recently shown back to zero
                 if (options.length > 0) {
-                    let text = ""
+                    let text = powerUps.buildColumns(totalChoices, "gun")
-                    if (totalChoices === 2) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px"
-                        text += powerUps.researchText('gun')
-                        text += powerUps.cancelText('gun')
-                    } else if (totalChoices === 1) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
-                        text += powerUps.cancelText('gun')
-                        text += powerUps.researchText('gun')
-                    } else {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px 384px"
-                        text += "<div></div>"
-                        text += powerUps.researchText('gun')
-                        text += powerUps.cancelText('gun')
-                    }
                     for (let i = 0; i < totalChoices; i++) {
                         const choose = options[Math.floor(Math.seededRandom(0, options.length))] //pick an element from the array of options                        
                         // text += `<div class="choose-grid-module" onclick="powerUps.choose('gun',${choose})"><div class="grid-title"><div class="circle-grid gun"></div> &nbsp; ${b.guns[choose].name}</div> ${b.guns[choose].description}</div>`
@@ -843,21 +869,7 @@ const powerUps = {
                 for (let i = 0; i < m.fieldUpgrades.length; i++) m.fieldUpgrades[i].isRecentlyShown = false //reset recently shown back to zero
 
                 if (options.length > 0 || tech.isExtraBotOption) {
-                    let text = ""
+                    let text = powerUps.buildColumns(totalChoices, "field")
-                    if (totalChoices === 2) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px"
-                        text += powerUps.researchText('field')
-                        text += powerUps.cancelText('field')
-                    } else if (totalChoices === 1) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
-                        text += powerUps.cancelText('field')
-                        text += powerUps.researchText('field')
-                    } else {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px 384px"
-                        text += "<div></div>"
-                        text += powerUps.researchText('field')
-                        text += powerUps.cancelText('field')
-                    }
                     for (let i = 0; i < totalChoices; i++) {
                         const choose = options[Math.floor(Math.seededRandom(0, options.length))] //pick an element from the array of options
                         //text += `<div class="choose-grid-module" onclick="powerUps.choose('field',${choose})"><div class="grid-title"><div class="circle-grid field"></div> &nbsp; ${m.fieldUpgrades[choose].name}</div> ${m.fieldUpgrades[choose].description}</div>`                         //default
@@ -949,21 +961,7 @@ const powerUps = {
                 }
                 for (let i = 0; i < tech.tech.length; i++) tech.tech[i].isRecentlyShown = false //reset recently shown back to zero
                 if (options.length > 0) {
-                    let text = ""
+                    let text = powerUps.buildColumns(totalChoices, "tech")
-                    if (totalChoices === 2) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px"
-                        text += powerUps.researchText('tech')
-                        text += powerUps.cancelText('tech')
-                    } else if (totalChoices === 1) {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px"
-                        text += powerUps.cancelText('tech')
-                        text += powerUps.researchText('tech')
-                    } else {
-                        document.getElementById("choose-grid").style.gridTemplateColumns = "384px 384px 384px"
-                        text += "<div></div>"
-                        text += powerUps.researchText('tech')
-                        text += powerUps.cancelText('tech')
-                    }
                     for (let i = 0; i < totalChoices; i++) {
                         if (options.length < 1) break
                         const choose = options[Math.floor(Math.seededRandom(0, options.length))] //pick an element from the array of options
@@ -1054,6 +1052,7 @@ const powerUps = {
                         }
                         requestAnimationFrame(cycle);
                     }
+                    // if (localSettings.isHideImages) text += powerUps.researchText('tech')
                     document.getElementById("choose-grid").innerHTML = text
                     powerUps.showDraft();
 

style.css

@@ -191,7 +191,7 @@ summary {
 }
 
 .choose-grid-module {
-    padding: 5px;
+    /* padding: 5px; */
     line-height: 170%;
     /* border-radius: 8px; */
     background-color: #fafcfd;
@@ -212,18 +212,6 @@ summary {
     margin-right:10px;
 }
 
-.cancel {
-    /* text-align: right; */
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    color: #fff;
-}
-
-.cancel:hover {
-    color: #aaa;
-}
-
 .pause-grid {
     padding: 2px;
     margin: 0px;
@@ -362,6 +350,25 @@ summary {
     margin-right: -1px;
     font-size: 0.92em;
 }
+.cancel-card {
+    text-align: center;
+    font-size: 1.1em;
+    font-weight: 100;
+    justify-self: end;
+    border: 1px solid #444;
+    margin-top: -1px;
+    margin-right: -1px;
+    padding: 1px;
+}
+.research-card {
+    font-size: 1.1em;
+    font-weight: 100;
+    border: 1px solid #444;
+    margin-top: -1px;
+    margin-right: -1px;
+    padding: 1px 0px 1px 10px;
+}
+
 
 /* .no-image-cards{
     border: 1px solid #444; 

todo.txt

@@ -1,21 +1,7 @@
 ******************************************************** NEXT PATCH **************************************************
 
-card font is 10% smaller with a bit more padding on the edges
+some image updates
-background is darker on power up selection
+single column power up choice for small screens or no image setting
-css border added to research and cancel buttons
-JUNK images now timeout if you don't download the image in under 1 sec
-  and it will not even try to download an image above 500KB
-  and it will try a different random image if it's first attempt is too big
-    (gotta protect our friends with slow internet)
-
-finalBoss
-  mine mode comes in waves
-  orbiters mode comes in waves, and they spawn at a radius that intersects the player
-
-several on new level tech effects now also run on each new final Boss phase
-  gun stuff, many worlds, negative entropy heal spawns
-
-perfect diamagnetism slow fall is much strong, but works better when angled like a parachute
 
 *********************************************************** TODO *****************************************************
 
@@ -1178,6 +1164,8 @@ if pause is pressed while selecting power ups, display pause menu on top of sele
   thermal runaway - infrared maybe?
   redo the energy tech images with by Laurie Greasley
     now that you can use --ar 3:2 --stylize 1000 and photo repair
+  in general too many black background
+    redo fractal tech with white background
 ***past style themes***
   field emitter - isometric, clean white robot spherical gun turret on bird legs, blender 3d, style of artstation and behance, Disney Pixar, cute 
   standing wave - concentric transparent blue geometric circles science