new images

some image updates single column power up choice for small screens or no image setting
2022-12-20 07:58:28 -08:00
parent 8b9511f975
commit 3cbc2c7941
10 changed files with 78 additions and 84 deletions
--- a/img/Hilbert
+++ b/img/Hilbert
--- a/spaces.webp
+++ b/spaces.webp
--- a/img/field/molecular
+++ b/img/field/molecular
--- a/img/many-worlds.webp
+++ b/img/many-worlds.webp
--- a/collapse.webp
+++ b/collapse.webp
--- a/js/bullet.js
+++ b/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 totalBullets = 10
-                    const angleStep = (input.down ? 0.4 : 1.3) / totalBullets
+                    const END = Math.floor(input.down ? 8 : 5);
+                    const totalBullets = 9
+                    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
--- a/js/level.js
+++ b/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");
--- a/js/powerup.js
+++ b/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 = ""
-                    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')
-                    }
+                    let text = powerUps.buildColumns(totalChoices, "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 = ""
-                    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')
-                    }
+                    let text = powerUps.buildColumns(totalChoices, "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 = ""
-                    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')
-                    }
+                    let text = powerUps.buildColumns(totalChoices, "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();

--- a/style.css
+++ b/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; 
--- a/todo.txt
+++ b/todo.txt
@@ -1,21 +1,7 @@
 ******************************************************** NEXT PATCH **************************************************

-card font is 10% smaller with a bit more padding on the edges
-background is darker on power up selection
-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
+some image updates
+single column power up choice for small screens or no image setting

 *********************************************************** 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