build css mostly

2019-12-04 06:54:13 -08:00
parent 8d7a70aa57
commit 7926952049
7 changed files with 71 additions and 51 deletions
--- a/index.html
+++ b/index.html
@@ -87,45 +87,47 @@
 		</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">
+				<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>
+					<option value="0" selected>normal</option>
+					<option value="4">hard</option>
+					<option value="8">why...</option>
+				</select>
+				<br>
+				<label for="body-damage" title="allow damage from heavy, fast moving blocks">collision damage from blocks:</label>
+				<input type="checkbox" id="body-damage" name="body-damage" checked style="width:16px; height:16px;">
+				<br>
+				<label for="fps-select" title="use this to slow the game down">frames per second cap:</label>
+				<select name="fps-select" id="fps-select">
+					<option value="max">no fps cap</option>
+					<option value="72" selected>72 fps cap</option>
+					<option value="60">60 fps cap</option>
+					<option value="45">45 fps cap</option>
+					<option value="30">30 fps cap</option>
+				</select>
+			</div>
 		</details>
-	</div> -->
+	</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>
-						<option value="0" selected>normal</option>
-						<option value="4">hard</option>
-						<option value="8">why...</option>
-					</select>
-					<br>
-					<label for="body-damage" title="allow damage from heavy, fast moving blocks">collision damage from blocks:</label>
-					<input type="checkbox" id="body-damage" name="body-damage" checked style="width:16px; height:16px;">
-					<br>
-					<label for="fps-select" title="use this to slow the game down">frames per second cap:</label>
-					<select name="fps-select" id="fps-select">
-						<option value="max">no fps cap</option>
-						<option value="72" selected>72 fps cap</option>
-						<option value="60">60 fps cap</option>
-						<option value="45">45 fps cap</option>
-						<option value="30">30 fps cap</option>
-					</select>
-				</div>
-				<br><br>
-
 				<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>
--- a/js/bullets.js
+++ b/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,
--- a/js/game.js
+++ b/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
--- a/js/index.js
+++ b/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'
  }
 });

--- a/js/player.js
+++ b/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();
--- a/js/powerups.js
+++ b/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);
-        if (level.isBuildRun) ammo *= 2
+        let ammo = Math.ceil((target.ammoPack * (0.45 + 0.06 * Math.random())) / Math.sqrt(b.dmgScale));
+        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);
--- a/style.css
+++ b/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;
-  right: 1px;
+
+  position: absolute;
+  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;
-  /* background-color: #ccc; */
-  /* border-radius: 5px; */
+  font-size: 1.5em;
 }

 #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 {