build css mostly

index.html

@@ -87,23 +87,19 @@
 		</details>
 	</div> -->
 	<div id="build-grid"></div>
-	<button type="button" id="build-button">challenge run</button>
+	<!-- <button type="button" id="build-button">challenge run</button> -->
+	<svg class="SVG-button" id="build-button" width="94" height="40">
+		<g stroke='none' fill='#333' stroke-width="2" font-size="28px" font-family="Arial, sans-serif">
+			<text x="10" y="30">builds</text>
+		</g>
+	</svg>
 
 
 
-	<!-- <div id="build">
+	<div id="settings">
 		<details>
-			<summary>builds</summary>
+			<summary>settings</summary>
-
+			<div style="line-height: 150%;" id="details-div">
-		</details>
-	</div> -->
-
-
-	<div id="controls">
-		<details>
-			<summary>about</summary>
-			<div id="details-div">
-				<div style="line-height: 150%;">
 				<label for="difficulty-select" title="effects: number of mobs, damage done by mobs, damage done to mobs, mob speed">combat difficulty:</label>
 				<select name="difficulty-select" id="difficulty-select">
 					<option value="easy">easy</option>
@@ -124,8 +120,14 @@
 					<option value="30">30 fps cap</option>
 				</select>
 			</div>
-				<br><br>
+		</details>
+	</div>
 
+
+	<div id="controls">
+		<details>
+			<summary>about</summary>
+			<div id="details-div">
 				<table>
 					<tr>
 						<th>FIRE</th>
@@ -183,11 +185,11 @@
 					</svg>
 				</a>
 				<a href="https://github.com/landgreen/n-gon">Github</a> hosts the source code for n-gon.<br> It's written in JavaScript, CSS, and HTML.
-				<br>
+				<!-- <br>
 				<br>
 				n-gon is also hosted at <a href="https://lilgreenland.itch.io/n-gon">itch.io</a>.
 				<br>
-				<br>
+				<br> -->
 			</div>
 		</details>
 	</div>

js/bullets.js

@@ -57,7 +57,7 @@ const b = {
   },
   mods: [{
       name: "depleted uranium rounds",
-      description: "your <strong>bullets</strong> are 10% larger<br>increased momentum and physical <strong class='color-d'>damage</strong>",
+      description: "your <strong>bullets</strong> are 10% larger<br>increased mass and physical <strong class='color-d'>damage</strong>",
       have: false, //0
       effect: () => {
         //good for guns that do mostly projectile damage:
@@ -224,7 +224,7 @@ const b = {
     },
     {
       name: "monogamy",
-      description: "using your first gun reduces <strong class='color-d'>damage</strong> taken<br>scales by <strong>7%</strong> for each gun in your inventory",
+      description: "using your first gun reduces <strong class='color-d'>damage</strong> taken<br><em>scales by <strong>7%</strong> for each gun in your inventory</em>",
       have: false, //20
       effect: () => { // good with long term planning
         b.isModMonogamy = true
@@ -943,7 +943,7 @@ const b = {
       }
     }, {
       name: "wave beam", //3
-      description: "fire a stream of oscillating particles<br>bullets <strong>propagate</strong> through solids",
+      description: "emit a <strong>sine wave</strong> of oscillating particles<br>particles propagate through <strong>walls</strong>",
       ammo: 0,
       ammoPack: 85,
       have: false,
@@ -1192,7 +1192,7 @@ const b = {
       }
     }, {
       name: "flak", //8
-      description: "fire a cluster of short range projectiles<br><strong class='color-e'>explode</strong> on contact or after half a second",
+      description: "fire a cluster of short range projectiles<br><strong class='color-e'>explodes</strong> on contact or after half a second",
       ammo: 0,
       ammoPack: 20,
       have: false,

js/game.js

@@ -457,7 +457,7 @@ const game = {
     document.getElementById("controls").style.display = "inline";
     document.getElementById("build-button").style.display = "inline"
     isShowingBuilds = false
-    // document.getElementById("settings").style.display = "inline";
+    document.getElementById("settings").style.display = "inline";
     document.getElementById("splash").style.display = "inline";
     document.getElementById("dmg").style.display = "none";
     document.getElementById("health-bg").style.display = "none";
@@ -470,6 +470,7 @@ const game = {
     document.body.style.overflow = "hidden"
     document.getElementById("build-grid").style.display = "none"
     document.getElementById("controls").style.display = "none";
+    document.getElementById("settings").style.display = "none";
     document.getElementById("build-button").style.display = "none";
     document.getElementById("splash").onclick = null; //removes the onclick effect so the function only runs once
     document.getElementById("splash").style.display = "none"; //hides the element that spawned the function

js/index.js

@@ -168,12 +168,14 @@ const build = {
 }
 
 document.getElementById("build-button").addEventListener("click", () => {
+  document.getElementById("build-button").style.display = "none";
   const el = document.getElementById("build-grid")
   if (build.isShowingBuilds) {
     el.style.display = "none"
     build.isShowingBuilds = false
     document.body.style.overflow = "hidden"
     document.getElementById("controls").style.display = 'inline'
+    document.getElementById("settings").style.display = 'inline'
   } else {
     build.list = []
     let text = '<p>choose up to 5 powers<br>	<button type="button" id="build-begin-button" onclick="build.startBuildRun()">Begin Run</button></p>'
@@ -192,6 +194,7 @@ document.getElementById("build-button").addEventListener("click", () => {
     document.body.style.overflowY = "scroll";
     document.body.style.overflowX = "hidden";
     document.getElementById("controls").style.display = 'none'
+    document.getElementById("settings").style.display = 'none'
   }
 });
 

js/player.js

@@ -1133,7 +1133,7 @@ const mech = {
     },
     {
       name: "plasma torch",
-      description: "use <strong class='color-f'>energy</strong> to emit <strong class='color-d'>damaging</strong> beam<br><strong>decreased</strong> <strong>shield</strong> range and efficiency",
+      description: "use <strong class='color-f'>energy</strong> to emit <strong class='color-d'>damaging</strong> plasma<br><strong>decreased</strong> <strong>shield</strong> range and efficiency",
       effect: () => {
         mech.fieldMode = 2;
         mech.fieldText();

js/powerups.js

@@ -45,8 +45,8 @@ const powerUps = {
         if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
       } else {
         //ammo given scales as mobs take more hits to kill
-        let ammo = Math.ceil((target.ammoPack * (0.4 + 0.05 * Math.random())) / b.dmgScale);
+        let ammo = Math.ceil((target.ammoPack * (0.45 + 0.06 * Math.random())) / Math.sqrt(b.dmgScale));
-        if (level.isBuildRun) ammo *= 2
+        if (level.isBuildRun) ammo = Math.floor(ammo * 1.2)
         target.ammo += ammo;
         game.updateGunHUD();
         game.makeTextLog("<div class='circle gun'></div> &nbsp; <span style='font-size:110%;'>+" + ammo + " ammo for " + target.name + "</span>", 300);

style.css

@@ -43,12 +43,21 @@ summary {
   font-size: 1.2em;
 }
 
+.SVG-button {
+  border: 2px #333 solid;
+  border-radius: 9px;
+}
+
+.SVG-button:hover {
+  background-color: #eee;
+}
+
 #build-button {
-  position: sticky;
+
-  bottom: 0px;
+  position: absolute;
-  right: 1px;
+  top: 3px;
+  right: 3px;
   z-index: 12;
-  font-size: 1.3em;
 }
 
 #build-grid {
@@ -84,7 +93,7 @@ summary {
 }
 
 .build-grid-module:hover {
-  background-color: #fff;
+  background-color: #eee;
 }
 
 .gun-module {
@@ -107,15 +116,20 @@ summary {
   z-index: 12;
   font-size: 1.3em;
 } */
+#settings {
+  position: absolute;
+  bottom: 0px;
+  right: 1px;
+  z-index: 12;
+  font-size: 1.5em;
+}
 
 #controls {
   position: absolute;
   bottom: 0px;
   left: 1px;
   z-index: 12;
-  font-size: 1.3em;
+  font-size: 1.5em;
-  /* background-color: #ccc; */
-  /* border-radius: 5px; */
 }
 
 #details-div {
@@ -274,7 +288,7 @@ em {
 }
 
 .color-f {
-  color: #0cf;
+  color: #0ad;
   letter-spacing: 1px;
 }
 
@@ -284,19 +298,19 @@ em {
 }
 
 .color-h {
-  color: #0c8;
+  color: #0b7;
   letter-spacing: 1px;
 }
 
 .color-e {
-  color: #e50;
+  color: #d60;
   letter-spacing: 1px;
 }
 
 .color-s {
-  color: #066;
+  color: #055;
   font-weight: 900;
-  letter-spacing: 1px;
+  letter-spacing: 2px;
 }
 
 .faded {