admin/n-gon-improved
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

green health bar

Browse Source 
community map clock by Cornbread 2100

health bar is now green
added a damage bar
  (I'll probably add a setting to disable this next patch)

wave gun has -15% ammo
tech phonon has +25% ammo, and +10% damage

JUNK tech stubs can now wall climb
This commit is contained in:
landgreen
2023-03-12 17:23:51 -07:00
parent eecf763d82
commit be109bbb91
9 changed files with 1525 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@@ -24,7 +24,8 @@
<div id="fade-out"></div> <div id="fade-out"></div>
<div id="health-bg"></div> <div id="health-bg"></div>
<div id="health"></div> <div id="health"></div>
<div id="defense"></div> <div id="defense-bar"></div>
<div id="damage-bar"></div>
<div id="dmg"></div> <div id="dmg"></div>
<div id='construct'></div> <div id='construct'></div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
@@ -100,6 +101,7 @@
<option value="biohazard"> <option value="biohazard">
<option value="islands"> <option value="islands">
<option value="tunnel"> <option value="tunnel">
<option value="clock">
<option value="coliseum"> <option value="coliseum">
<option value="staircase"> <option value="staircase">
<option value="perplex"> <option value="perplex">
@@ -115,12 +117,26 @@
<option value="crossfire"> <option value="crossfire">
<option value="temple"> <option value="temple">
<option value="run"> <option value="run">
<!-- biohazard
islands
tunnel
clock
coliseum
staircase
perplex
n-gon
vats
yingYang
basement
stronghold
commandeer
stereoMadness
house
dripp
crossfire
temple
run -->
</datalist> </datalist>
<!-- communityLevels: ["stronghold", "basement", "crossfire", "vats", "run", "n-gon", "house", "perplex", "coliseum", "tunnel", "islands", "temple", "dripp"], -->
<!-- playableLevels: ["labs", "rooftops", "skyscrapers", "warehouse", "highrise", "office", "aerie", "satellite", "sewers", "testChamber", "pavilion"], -->
<!-- <label for="banned">banned levels:</label>
<input type="text" id="ban-list" name="banned" placeholder="list levels by name" autocomplete="off" spellcheck="true" style="width: 183px;"> -->
<br> <br>
<label for="classic-select" title="play older versions of n-gon">classic n-gon:</label> <label for="classic-select" title="play older versions of n-gon">classic n-gon:</label>
<select name="classic-select" id="classic-select" onChange="window.location.href=this.value"> <select name="classic-select" id="classic-select" onChange="window.location.href=this.value">

10
js/bullet.js
View File

@@ -6366,8 +6366,8 @@ const b = {
name: "wave", //3 name: "wave", //3
description: "emit a <strong>wave packet</strong> of oscillating particles<br>that propagates through <strong>solids</strong>", description: "emit a <strong>wave packet</strong> of oscillating particles<br>that propagates through <strong>solids</strong>",
ammo: 0, ammo: 0,
ammoPack: 135, ammoPack: 115,
defaultAmmoPack: 135, defaultAmmoPack: 115,
have: false, have: false,
wavePacketCycle: 0, wavePacketCycle: 0,
delay: 40, delay: 40,
@@ -6396,7 +6396,7 @@ const b = {
ctx.lineWidth = 2 * tech.wavePacketDamage ctx.lineWidth = 2 * tech.wavePacketDamage
ctx.beginPath(); ctx.beginPath();
const end = 700 * Math.sqrt(tech.isBulletsLastLonger) * Math.pow(0.93, tech.waveReflections) // / Math.sqrt(tech.waveReflections * 0.5) //should equal about 1060 const end = 700 * Math.sqrt(tech.isBulletsLastLonger) * Math.pow(0.93, tech.waveReflections) // / Math.sqrt(tech.waveReflections * 0.5) //should equal about 1060
const damage = 2.1 * m.dmgScale * tech.wavePacketDamage * tech.waveBeamDamage * (tech.isBulletTeleport ? 1.43 : 1) * (tech.isInfiniteWaveAmmo ? 0.75 : 1) //damage is lower for large radius mobs, since they feel the waves longer const damage = 2.3 * m.dmgScale * tech.wavePacketDamage * tech.waveBeamDamage * (tech.isBulletTeleport ? 1.43 : 1) * (tech.isInfiniteWaveAmmo ? 0.75 : 1) //damage is lower for large radius mobs, since they feel the waves longer
for (let i = this.waves.length - 1; i > -1; i--) { for (let i = this.waves.length - 1; i > -1; i--) {
//draw wave //draw wave
@@ -6507,7 +6507,7 @@ const b = {
ctx.beginPath(); ctx.beginPath();
// const end = 1100 * tech.isBulletsLastLonger / Math.sqrt(tech.waveReflections * 0.5) //should equal about 1767 // const end = 1100 * tech.isBulletsLastLonger / Math.sqrt(tech.waveReflections * 0.5) //should equal about 1767
const end = 1100 * tech.isBulletsLastLonger * Math.pow(0.93, tech.waveReflections) //should equal about 1767 const end = 1100 * tech.isBulletsLastLonger * Math.pow(0.93, tech.waveReflections) //should equal about 1767
const damage = 2.1 * m.dmgScale * tech.wavePacketDamage * tech.waveBeamDamage * (tech.isBulletTeleport ? 1.4 : 1) * (tech.isInfiniteWaveAmmo ? 0.75 : 1) //damage is lower for large radius mobs, since they feel the waves longer const damage = 2.3 * m.dmgScale * tech.wavePacketDamage * tech.waveBeamDamage * (tech.isBulletTeleport ? 1.4 : 1) * (tech.isInfiniteWaveAmmo ? 0.75 : 1) //damage is lower for large radius mobs, since they feel the waves longer
for (let i = this.waves.length - 1; i > -1; i--) { for (let i = this.waves.length - 1; i > -1; i--) {
const v1 = Vector.add(this.waves[i].position, Vector.mult(this.waves[i].unit1, this.waves[i].radius)) const v1 = Vector.add(this.waves[i].position, Vector.mult(this.waves[i].unit1, this.waves[i].radius))
const v2 = Vector.add(this.waves[i].position, Vector.mult(this.waves[i].unit2, this.waves[i].radius)) const v2 = Vector.add(this.waves[i].position, Vector.mult(this.waves[i].unit2, this.waves[i].radius))
@@ -6690,7 +6690,7 @@ const b = {
if (this.dmgCoolDown < 1) { if (this.dmgCoolDown < 1) {
q = Matter.Query.point(mob, this.position) // check if inside a mob q = Matter.Query.point(mob, this.position) // check if inside a mob
for (let i = 0; i < q.length; i++) { for (let i = 0; i < q.length; i++) {
this.dmgCoolDown = 5 + Math.floor(7 * Math.random() * b.fireCDscale); this.dmgCoolDown = 5 + Math.floor(8 * Math.random() * b.fireCDscale);
let dmg = this.dmg let dmg = this.dmg
q[i].damage(dmg); q[i].damage(dmg);
if (q[i].alive) { if (q[i].alive) {

7
js/index.js
View File

@@ -444,7 +444,9 @@ ${simulation.isCheating ? "<br><br><em>lore disabled</em>": ""}
document.getElementById("field").style.display = "none" document.getElementById("field").style.display = "none"
document.getElementById("health").style.display = "none" document.getElementById("health").style.display = "none"
document.getElementById("health-bg").style.display = "none" document.getElementById("health-bg").style.display = "none"
document.getElementById("defense").style.display = "none" document.getElementById("defense-bar").style.display = "none"
document.getElementById("damage-bar").style.display = "none"
//show in game console //show in game console
// document.getElementById("text-log").style.display = "inline" // document.getElementById("text-log").style.display = "inline"
@@ -462,7 +464,8 @@ ${simulation.isCheating ? "<br><br><em>lore disabled</em>": ""}
document.getElementById("health").style.display = "inline" document.getElementById("health").style.display = "inline"
document.getElementById("health-bg").style.display = "inline" document.getElementById("health-bg").style.display = "inline"
} }
document.getElementById("defense").style.display = "inline" document.getElementById("defense-bar").style.display = "inline"
document.getElementById("damage-bar").style.display = "inline"
// document.body.style.overflow = "hidden" // document.body.style.overflow = "hidden"
document.getElementById("pause-grid-left").style.display = "none" document.getElementById("pause-grid-left").style.display = "none"
document.getElementById("pause-grid-right").style.display = "none" document.getElementById("pause-grid-right").style.display = "none"

1355
js/level.js
View File

File diff suppressed because it is too large Load Diff

49
js/player.js
View File

@@ -455,7 +455,8 @@ const m = {
m.alive = false; m.alive = false;
simulation.paused = true; simulation.paused = true;
m.health = 0; m.health = 0;
document.getElementById("defense").style.display = "none"; //hide defense document.getElementById("defense-bar").style.display = "none"; //hide defense
document.getElementById("damage-bar").style.display = "none"
m.displayHealth(); m.displayHealth();
document.getElementById("text-log").style.display = "none" document.getElementById("text-log").style.display = "none"
document.getElementById("fade-out").style.opacity = 0.9; //slowly fade to 90% white on top of canvas document.getElementById("fade-out").style.opacity = 0.9; //slowly fade to 90% white on top of canvas
@@ -511,11 +512,11 @@ const m = {
// health display is a x^1.5 rule to make it seem like the player has lower health, this makes the player feel more excitement // health display is a x^1.5 rule to make it seem like the player has lower health, this makes the player feel more excitement
id.style.width = Math.floor(300 * m.maxHealth * Math.pow(m.health / m.maxHealth, 1.4)) + "px"; id.style.width = Math.floor(300 * m.maxHealth * Math.pow(m.health / m.maxHealth, 1.4)) + "px";
//css animation blink if health is low //css animation blink if health is low
if (m.health < 0.3) { // if (m.health < 0.3) {
id.classList.add("low-health"); // id.classList.add("low-health");
} else { // } else {
id.classList.remove("low-health"); // id.classList.remove("low-health");
} // }
}, },
addHealth(heal) { addHealth(heal) {
if (!tech.isEnergyHealth) { if (!tech.isEnergyHealth) {
@@ -535,6 +536,7 @@ const m = {
defaultFPSCycle: 0, //tracks when to return to normal fps defaultFPSCycle: 0, //tracks when to return to normal fps
immuneCycle: 0, //used in engine immuneCycle: 0, //used in engine
lastCalculatedDamage: 0, //used to decided if damage bar needs to be redrawn (in simulation.checks)
lastCalculatedDefense: 0, //used to decided if defense bar needs to be redrawn (in simulation.checks) lastCalculatedDefense: 0, //used to decided if defense bar needs to be redrawn (in simulation.checks)
defense() { defense() {
let dmg = 1 let dmg = 1
@@ -3924,38 +3926,13 @@ const m = {
//show sneak attack status //show sneak attack status
// if (m.cycle > m.lastKillCycle + 240) { // if (m.cycle > m.lastKillCycle + 240) {
// if (m.sneakAttackCharge > 0) { // if (m.sneakAttackCharge > 0) {
if (m.sneakAttackCycle + Math.min(120, 0.7 * (m.cycle - m.enterCloakCycle)) > m.cycle) { // if (m.sneakAttackCycle + Math.min(120, 0.7 * (m.cycle - m.enterCloakCycle)) > m.cycle) {
// ctx.strokeStyle = "rgba(0,0,0,0.5)" //m.fieldMeterColor; //"rgba(255,255,0,0.2)" //ctx.strokeStyle = `rgba(0,0,255,${0.5+0.5*Math.random()})`
// ctx.strokeStyle = "rgba(0,0,0,0.2)"
// ctx.lineWidth = 1
// ctx.fillStyle = "rgba(0,0,0,0.02)"
// for (let i = 0; i < 4; i++) {
// ctx.beginPath(); // ctx.beginPath();
// ctx.ellipse(m.pos.x, m.pos.y, 50, 30, 0.2 * m.cycle + i * Math.PI / 4, 0, 2 * Math.PI); // ctx.arc(simulation.mouseInGame.x, simulation.mouseInGame.y, 16, 0, 2 * Math.PI);
// ctx.stroke() // ctx.fillStyle = "rgba(0,0,0,0.2)"
// // ctx.fill(); // ctx.fill();
// } // }
ctx.strokeStyle = "rgba(0,0,0,0.5)" //m.fieldMeterColor; //"rgba(255,255,0,0.2)" //ctx.strokeStyle = `rgba(0,0,255,${0.5+0.5*Math.random()})`
ctx.beginPath();
ctx.arc(simulation.mouseInGame.x, simulation.mouseInGame.y, 16, 0, 2 * Math.PI);
// ctx.lineWidth = 3
ctx.fillStyle = "rgba(0,0,0,0.2)"
ctx.fill();
// const unit = Vector.add(m.pos, Vector.rotate({ x: 45, y: 0 }, 2 * Math.PI * Math.random()))
// simulation.drawList.push({ //add dmg to draw queue
// x: unit.x,
// y: unit.y,
// radius: 4 + 10 * Math.random(),
// color: 'rgba(0, 0, 0, 0.1)',
// time: 15
// });
}
} }
} }
}, },

40
js/simulation.js
View File

@@ -679,7 +679,8 @@ const simulation = {
document.getElementById("splash").style.opacity = "0"; document.getElementById("splash").style.opacity = "0";
document.getElementById("dmg").style.display = "none"; document.getElementById("dmg").style.display = "none";
document.getElementById("health-bg").style.display = "none"; document.getElementById("health-bg").style.display = "none";
document.getElementById("defense").style.display = "none" document.getElementById("defense-bar").style.display = "none"
document.getElementById("damage-bar").style.display = "none"
document.body.style.cursor = "auto"; document.body.style.cursor = "auto";
setTimeout(() => { setTimeout(() => {
document.getElementById("experiment-button").style.opacity = "1"; document.getElementById("experiment-button").style.opacity = "1";
@@ -716,7 +717,8 @@ const simulation = {
document.getElementById("dmg").style.display = "inline"; document.getElementById("dmg").style.display = "inline";
document.getElementById("health").style.display = "inline" document.getElementById("health").style.display = "inline"
document.getElementById("health-bg").style.display = "inline"; document.getElementById("health-bg").style.display = "inline";
document.getElementById("defense").style.display = "inline" document.getElementById("defense-bar").style.display = "inline"
document.getElementById("damage-bar").style.display = "inline"
document.getElementById("tech").style.display = "inline" document.getElementById("tech").style.display = "inline"
document.getElementById("guns").style.display = "inline" document.getElementById("guns").style.display = "inline"
@@ -1138,28 +1140,28 @@ const simulation = {
//update defense bar //update defense bar
const defense = m.defense() const defense = m.defense()
if (m.lastCalculatedDefense !== defense) { if (m.lastCalculatedDefense !== defense) {
document.getElementById("defense").style.width = Math.floor(300 * m.maxHealth * (1 - defense)) + "px"; document.getElementById("defense-bar").style.width = Math.floor(300 * m.maxHealth * (1 - defense)) + "px";
// if (m.lastCalculatedDefense === 1) document.getElementById("defense").style.display = "inline" // if (m.lastCalculatedDefense === 1) document.getElementById("defense-bar").style.display = "inline"
// if (defense === 1) document.getElementById("defense").style.display = "none" // if (defense === 1) document.getElementById("defense-bar").style.display = "none"
// Math.pow(m.defense(), 0.13) // Math.pow(m.defense(), 0.13)
m.lastCalculatedDefense = defense m.lastCalculatedDefense = defense
// console.log(defense) // console.log(defense)
} }
// const defense = m.defense()
// if (m.lastCalculatedDefense !== defense) { //update damage bar
// if (m.lastCalculatedDefense === 1) { const damage = tech.damageFromTech()
// document.getElementById("defense").style.display = "inline" if (m.lastCalculatedDamage !== damage) {
// requestAnimationFrame(() => { document.getElementById("defense").style.width = Math.floor(300 * m.maxHealth * (1 - defense)) + "px"; }) canvas.width
// } else if (defense === 1) { // document.getElementById("damage-bar").style.width = Math.floor(Math.atan(damage - 1) / 6.28 * canvas.width) + "px";
// document.getElementById("defense").style.display = "none" document.getElementById("damage-bar").style.height = Math.floor(Math.atan(damage - 1) / 3.14 * canvas.height) + "px";
// document.getElementById("defense").style.width = "0px";
// } else { m.lastCalculatedDamage = damage
// document.getElementById("defense").style.width = Math.floor(300 * m.maxHealth * (1 - defense)) + "px"; console.log(damage)
// } }
// m.lastCalculatedDefense = defense
// console.log(defense)
// }
} }
if (!(m.cycle % 60)) { //once a second if (!(m.cycle % 60)) { //once a second
//energy overfill //energy overfill

5
js/spawn.js
View File

@@ -976,7 +976,8 @@ const spawn = {
// m.displayHealth(); // m.displayHealth();
document.getElementById("health").style.display = "none" document.getElementById("health").style.display = "none"
document.getElementById("health-bg").style.display = "none" document.getElementById("health-bg").style.display = "none"
document.getElementById("defense").style.display = "none" document.getElementById("defense-bar").style.display = "none"
document.getElementById("damage-bar").style.display = "none"
document.getElementById("text-log").style.display = "none" document.getElementById("text-log").style.display = "none"
document.getElementById("fade-out").style.opacity = 1; //slowly fades out document.getElementById("fade-out").style.opacity = 1; //slowly fades out
// build.shareURL(false) // build.shareURL(false)
@@ -5733,7 +5734,7 @@ const spawn = {
y: this.position.y, y: this.position.y,
radius: 3000, radius: 3000,
color: `rgba(0, 0, 0,${1-0.1*i})`, color: `rgba(0, 0, 0,${1-0.1*i})`,
time: (i + 1) * 3 time: (i + 2) * 4
}); });
} }
//teleport to near the end of player history //teleport to near the end of player history

25
js/tech.js
View File

@@ -945,7 +945,7 @@ const tech = {
}, },
{ {
name: "kinetic bombardment", name: "kinetic bombardment",
description: "<strong class='color-d'>damage</strong> is proportional to mob <strong>distance</strong><br>up to <strong>+33%</strong> <strong class='color-d'>damage</strong> at <strong>3000</strong> displacement", description: "far away mobs take more <strong class='color-d'>damage</strong><br>up to <strong>+33%</strong> <strong class='color-d'>damage</strong> at <strong>3000</strong> displacement",
maxCount: 1, maxCount: 1,
count: 0, count: 0,
frequency: 1, frequency: 1,
@@ -4510,7 +4510,7 @@ const tech = {
{ {
name: "irradiated nails", name: "irradiated nails",
link: `<a target="_blank" href='https://en.wikipedia.org/wiki/Irradiation' class="link">irradiated nails</a>`, link: `<a target="_blank" href='https://en.wikipedia.org/wiki/Irradiation' class="link">irradiated nails</a>`,
description: "<strong>nails</strong>, <strong>needles</strong>, and <strong>rivets</strong> are <strong class='color-p'>radioactive</strong><br>about <strong>+90%</strong> <strong class='color-d'>damage</strong> over <strong>3</strong> seconds", description: "<strong>nails</strong>, <strong>needles</strong>, and <strong>rivets</strong> are <strong class='color-p'>radioactive</strong><br><strong>+90%</strong> <strong class='color-p'>radioactive</strong> <strong class='color-d'>damage</strong> over <strong>3</strong> seconds",
isGunTech: true, isGunTech: true,
maxCount: 1, maxCount: 1,
count: 0, count: 0,
@@ -5023,11 +5023,11 @@ const tech = {
requires: "wave", requires: "wave",
effect() { effect() {
tech.waveBeamSpeed *= 0.75; tech.waveBeamSpeed *= 0.75;
tech.waveBeamDamage += 0.36 * 0.41 //this sets base wave damage tech.waveBeamDamage += 0.27 * 0.41 //this sets base wave damage
}, },
remove() { remove() {
tech.waveBeamSpeed = 11; tech.waveBeamSpeed = 11;
tech.waveBeamDamage = 0.36 //this sets base wave damage tech.waveBeamDamage = 0.27 //this sets base wave damage
} }
}, },
{ {
@@ -5087,7 +5087,7 @@ const tech = {
return tech.haveGunCheck("wave") && !tech.isPhaseVelocity return tech.haveGunCheck("wave") && !tech.isPhaseVelocity
}, },
requires: "wave, not phase velocity", requires: "wave, not phase velocity",
ammoScale: 10, ammoScale: 6,
effect() { effect() {
tech.isLongitudinal = true; tech.isLongitudinal = true;
b.guns[3].chooseFireMethod() b.guns[3].chooseFireMethod()
@@ -5285,7 +5285,7 @@ const tech = {
}, },
{ {
name: "iridium-192", name: "iridium-192",
description: "<strong class='color-e'>explosions</strong> release <strong class='color-p'>gamma radiation</strong><br><strong>+100%</strong> <strong class='color-d'>damage</strong> over <strong>4</strong> seconds", description: "<strong class='color-e'>explosions</strong> release <strong class='color-p'>gamma radiation</strong><br><strong>+100%</strong> <strong class='color-e'>explosion</strong> <strong class='color-d'>damage</strong> over <strong>4</strong> seconds",
isGunTech: true, isGunTech: true,
maxCount: 1, maxCount: 1,
count: 0, count: 0,
@@ -6071,7 +6071,7 @@ const tech = {
}, },
{ {
name: "K-selection", name: "K-selection",
description: "<strong>+37%</strong> size and <strong class='color-d'>damage</strong><br>for <strong class='color-p' style='letter-spacing: -0.8px;'>worms</strong> and <strong class='color-p' style='letter-spacing: -0.8px;'>fleas</strong>", description: "<strong>+37%</strong> <strong class='color-p' style='letter-spacing: -0.8px;'>worm</strong> and <strong class='color-p' style='letter-spacing: -0.8px;'>flea</strong> <strong class='color-d'>damage</strong>",
isGunTech: true, isGunTech: true,
maxCount: 3, maxCount: 3,
count: 0, count: 0,
@@ -9515,7 +9515,7 @@ const tech = {
effect() { effect() {
document.getElementById("health").style.display = "none" document.getElementById("health").style.display = "none"
document.getElementById("health-bg").style.display = "none" document.getElementById("health-bg").style.display = "none"
document.getElementById("defense").style.display = "none" document.getElementById("defense-bar").style.display = "none"
for (let i = 0; i < 20; i++) powerUps.spawn(m.pos.x + 160 * (Math.random() - 0.5), m.pos.y + 160 * (Math.random() - 0.5), "heal"); for (let i = 0; i < 20; i++) powerUps.spawn(m.pos.x + 160 * (Math.random() - 0.5), m.pos.y + 160 * (Math.random() - 0.5), "heal");
}, },
remove() {} remove() {}
@@ -9876,7 +9876,8 @@ const tech = {
//move health to the right //move health to the right
document.getElementById("health").style.left = "86px" document.getElementById("health").style.left = "86px"
document.getElementById("health-bg").style.left = "86px" document.getElementById("health-bg").style.left = "86px"
document.getElementById("defense").style.left = "86px" document.getElementById("defense-bar").style.left = "86px"
document.getElementById("damage-bar").style.left = "86px"
}, },
remove() {} remove() {}
}, },
@@ -10215,21 +10216,23 @@ const tech = {
}, },
{ {
name: "stubs", name: "stubs",
description: "no knees or toes are drawn on the player", description: "no knees or toes are drawn on the player<br>you can wall climb though",
maxCount: 1, maxCount: 1,
count: 0, count: 0,
frequency: 0, frequency: 0,
isSkin: true, isSkin: true,
isJunk: true, isJunk: true,
isNonRefundable: true,
allowed() { allowed() {
return !m.isShipMode return !m.isShipMode
}, },
requires: "", requires: "",
effect() { effect() {
m.skin.stubs() m.skin.stubs()
Matter.Body.scale(player.parts[3], 2, 2);
}, },
remove() { remove() {
if (this.count) m.resetSkin(); // if (this.count) m.resetSkin();
} }
}, },
{ {

126
style.css
View File

@@ -553,27 +553,112 @@ summary {
transition: opacity 1s; transition: opacity 1s;
} }
#defense { #damage-bar {
position: absolute;
/* top: 1px;
left: 15px;
height: 7px;
width: 0px;
transition: width 0.3s linear; */
top: 16px;
right: 4px;
height: 0px;
width: 7px;
transition: height 0.15s linear;
opacity: 1;
z-index: 2;
pointer-events: none;
background-color: rgb(255, 55, 95);
/* border-bottom: 1.5px solid #701; */
/* border-right: 1.5px solid #701; */
display: none;
}
#defense-bar {
position: absolute;
top: 8px;
left: 15px;
height: 7px;
width: 0px;
transition: width 0.3s linear;
opacity: 1;
z-index: 2;
pointer-events: none;
background-color: #fff;
border-right: 1.5px solid #777;
display: none;
}
#health {
position: absolute;
top: 15px;
left: 15px;
height: 20px;
width: 0px;
transition: width 1s ease-out; z-index: 2;
pointer-events: none;
background-color: rgb(9, 245, 166);
border-right: 2px solid rgb(51, 162, 125);
display: none;
}
#health-bg {
position: absolute;
top: 15px;
left: 15px;
height: 20px;
width: 0px;
transition: width 1s ease-out;
background-color: #032;
opacity: 0.1;
z-index: 1;
pointer-events: none;
display: none;
}
/* #damage-bar {
position: absolute;
top: 0px;
left: 15px;
height: 6px;
width: 0px;
transition: width 0.3s linear;
opacity: 1;
z-index: 2;
pointer-events: none;
background-color: #f03;
border: 1px solid #701;
display: none;
}
#defense-bar {
position: absolute; position: absolute;
top: 9px; top: 9px;
left: 15px; left: 15px;
height: 5px; height: 5px;
width: 0px; width: 0px;
transition: width 0.25s linear; transition: width 0.3s linear;
opacity: 1; opacity: 1;
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
background-color: #fff; background-color: #fff;
border-top: 1px solid #000; border: 1px solid #333;
/* border-bottom: 1px solid #000; */ display: none;
/* border-left: 1px solid #000; */ }
border-right: 1px solid #000; #health {
position: absolute;
top: 16px;
left: 15px;
height: 20px;
width: 0px;
transition: width 1s ease-out; z-index: 2;
pointer-events: none;
background-color: #0fa;
border: 2px solid rgb(51, 162, 125);
border-radius: 8px;
display: none; display: none;
} }
#health-bg { #health-bg {
position: absolute; position: absolute;
top: 15px; top: 18px;
left: 15px; left: 15px;
height: 20px; height: 20px;
width: 0px; width: 0px;
@@ -582,36 +667,23 @@ summary {
opacity: 0.1; opacity: 0.1;
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
border-radius: 8px;
display: none; display: none;
} } */
#health { /* .low-health {
position: absolute;
top: 15px;
left: 15px;
height: 20px;
width: 0px;
transition: width 1s ease-out;
opacity: 0.6;
z-index: 2;
pointer-events: none;
background-color: #f00;
/* display: none; */
}
.low-health {
animation: blink 250ms infinite alternate; animation: blink 250ms infinite alternate;
} }
@keyframes blink { @keyframes blink {
from { from {
opacity: 0.9; opacity: 1;
} }
to { to {
opacity: 0.2; opacity: 0.6;
} }
} } */
/* background on title page */ /* background on title page */
#fade-out { #fade-out {