Fix enemy facing direction and add player damage feedback
This commit is contained in:
@@ -15,6 +15,28 @@
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
pointer-events: none; font-family: monospace; z-index: 10;
|
||||
}
|
||||
#damage-vignette {
|
||||
position: absolute; inset: 0; opacity: 0; pointer-events: none;
|
||||
background: radial-gradient(ellipse at center,
|
||||
rgba(255,0,0,0) 40%, rgba(255,0,0,0.35) 100%);
|
||||
box-shadow: inset 0 0 120px 40px rgba(255,0,0,0.5);
|
||||
}
|
||||
#damage-vignette.hurt { animation: hurt-flash 0.45s ease-out; }
|
||||
@keyframes hurt-flash {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
#low-hp-vignette {
|
||||
position: absolute; inset: 0; opacity: 0; pointer-events: none;
|
||||
background: radial-gradient(ellipse at center,
|
||||
rgba(255,0,0,0.05) 0%, rgba(255,0,0,0.15) 55%, rgba(220,0,0,0.7) 100%);
|
||||
box-shadow: inset 0 0 160px 60px rgba(220,0,0,0.55);
|
||||
}
|
||||
#low-hp-vignette.active { animation: low-hp-pulse 1.1s ease-in-out infinite; }
|
||||
@keyframes low-hp-pulse {
|
||||
0%, 100% { opacity: 0.25; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
#health-bar-bg {
|
||||
position: absolute; top: 16px; left: 16px; width: 250px; height: 20px;
|
||||
background: rgba(0,0,0,0.6); border: 2px solid #555;
|
||||
@@ -199,6 +221,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="ui-overlay">
|
||||
<div id="damage-vignette"></div>
|
||||
<div id="low-hp-vignette"></div>
|
||||
<div id="health-bar-bg"></div>
|
||||
<div id="health-bar"></div>
|
||||
<div id="health-text">100</div>
|
||||
|
||||
Reference in New Issue
Block a user