feat:
-Add UI (Health bars, Resources UI, HUD Interface, Weapon U, Zoombie Invasion progress Indicator) -Refactor code structure for improved readability and maintainability
This commit is contained in:
24Play-Mykyta-Slobodianiuk
+363
@@ -0,0 +1,363 @@
|
||||
@use "sass:math";
|
||||
|
||||
#ui {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HUD — screen-space overlay built by HudC.
|
||||
|
||||
Structure follows BEM: each visual block (invasion bar, resources,
|
||||
weapon, tutorial hint, death end-card) is a `.hud-<block>` class with
|
||||
`&__element` children and `&--modifier` states. SCSS nesting (`&`) keeps
|
||||
each block's rules in one place so we never repeat the prefix.
|
||||
|
||||
The whole HUD is viewport-relative: lengths use vw via the fluid helpers
|
||||
below, so it scales as one piece with the device.
|
||||
============================================================ */
|
||||
|
||||
// Core fluid helper: a clamp() that grows linearly with the viewport from $min
|
||||
// (at $vp-min) to $max (at $vp-max), and stays flat outside that range.
|
||||
//
|
||||
// The unit it scales against is the CSS variable --fluid-unit, set on #hud:
|
||||
// 1vw in portrait (scale with width) and 1vh in landscape (scale with the
|
||||
// limiting height). Landscape screens are wide but short, so scaling by width
|
||||
// there blows the HUD up — height keeps it proportional.
|
||||
@function fluid-clamp($min, $max, $vp-min: 320px, $vp-max: 900px) {
|
||||
$slope: math.div($max - $min, $vp-max - $vp-min); // px/px → unitless
|
||||
$intercept: $min - $slope * $vp-min; // px
|
||||
@return clamp(#{$min}, #{$intercept} + #{$slope * 100} * var(--fluid-unit, 1vw), #{$max});
|
||||
}
|
||||
|
||||
// Fluid font-size from a px range.
|
||||
@mixin fluid($min, $max) {
|
||||
font-size: fluid-clamp($min, $max);
|
||||
}
|
||||
|
||||
// Fluid image size from px ranges. Pass 2 args for a square image (height reuses
|
||||
// the width range) or 4 args for a non-square one (separate height range).
|
||||
@mixin fluid-img($wmin, $wmax, $hmin: null, $hmax: null) {
|
||||
width: fluid-clamp($wmin, $wmax);
|
||||
@if $hmin == null {
|
||||
height: fluid-clamp($wmin, $wmax); // square: reuse the width range
|
||||
} @else if $hmax == null {
|
||||
height: fluid-clamp($hmin, $wmax); // only a min height given: cap at the width max
|
||||
} @else {
|
||||
height: fluid-clamp($hmin, $hmax); // full height range given
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid value for any single property from a px range — bounds it between
|
||||
// $min/$max while it scales with the viewport (e.g. to cap the invasion bar).
|
||||
@mixin fluid-prop($prop, $min, $max) {
|
||||
#{$prop}: fluid-clamp($min, $max);
|
||||
}
|
||||
|
||||
#hud {
|
||||
position: fixed;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding-inline: 16px;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
font-family: "PassionOne", "Roboto", sans-serif;
|
||||
|
||||
// Portrait: every fluid size scales with viewport width.
|
||||
--fluid-unit: 1vw;
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
padding-inline: 24px;
|
||||
}
|
||||
|
||||
// Landscape: scale with height instead (short screens → keep the HUD small).
|
||||
@media (orientation: landscape) {
|
||||
--fluid-unit: 1vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Zombie Invasion bar (top) ----------------------------
|
||||
"HURRY UP" and the countdown share this one container and crossfade: the
|
||||
--hurry-phase modifier shows the hurry text and hides the bar; dropping it
|
||||
reveals the bar. The zombie head rides the fill's leading edge. */
|
||||
.hud-invasion {
|
||||
position: absolute;
|
||||
min-height: 80px;
|
||||
padding-inline: 64px;
|
||||
top: 0.5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: 100%;
|
||||
max-width: 768px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
transition: opacity 0.4s ease;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
padding-inline: 80px;
|
||||
}
|
||||
|
||||
// Fully hidden (before the onboarding reaches the invasion stage, and after death).
|
||||
&--hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include fluid(24px, 48px);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
-webkit-text-stroke: 1px #000;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Holds the track + the head that rides the fill's moving edge.
|
||||
&__bar {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__track {
|
||||
width: 100%;
|
||||
@include fluid-prop(height, 20px, 32px); // bound the bar thickness so it can't blow up
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.45));
|
||||
border: 2px solid #000;
|
||||
border-radius: 1000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// glossy green: highlight on top → base → darker bottom (width set per-frame in JS)
|
||||
background: linear-gradient(to bottom, #c2f57a 0%, #7fd23a 45%, #4f9e18 100%);
|
||||
|
||||
// Final stretch (low time left): glossy red.
|
||||
&--low {
|
||||
background: linear-gradient(to bottom, #ff9a6a 0%, #f0512c 45%, #c5301a 100%);
|
||||
}
|
||||
}
|
||||
|
||||
// The zombie head sits on the fill's leading edge; `left` is set per-frame in
|
||||
// JS (0%..100% of the bar). The transform here only centers it — the shake
|
||||
// animation lives on the inner <img>, so the two transforms don't fight.
|
||||
&__head-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__head {
|
||||
@include fluid-img(44px, 70px);
|
||||
display: block; // kill the inline-image descender gap so it centers on the track
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0.5vw 0.8vw rgba(0, 0, 0, 0.5));
|
||||
flex: none;
|
||||
transform-origin: center;
|
||||
|
||||
// Half time left: the icon grows and shakes to draw attention.
|
||||
&--alert {
|
||||
animation: hud-zombie-shake 0.45s ease-in-out infinite;
|
||||
}
|
||||
// Red zone: shake harder + bigger. Declared after --alert so it wins when both are set.
|
||||
&--alert-strong {
|
||||
animation: hud-zombie-shake-strong 0.28s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// "HURRY UP" overlays the bar in the same box; absolute + inset:0 centers it
|
||||
// over the bar regardless of the container's side padding.
|
||||
&__hurry {
|
||||
@include fluid(48px, 64px);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
-webkit-text-stroke: 1px #000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Crossfade between the two states (both transition opacity).
|
||||
&__title,
|
||||
&__row {
|
||||
transition: opacity 0.35s ease;
|
||||
}
|
||||
&--hurry-phase &__hurry {
|
||||
opacity: 1;
|
||||
}
|
||||
&--hurry-phase &__title,
|
||||
&--hurry-phase &__row {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Resources (top-right) -------------------------------- */
|
||||
.hud-resources {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
align-items: flex-end;
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
// One resource panel. The background art already includes the icon, so the
|
||||
// whole panel is both the loot fly-target and the thing that pulses on collect.
|
||||
&__panel {
|
||||
@include fluid-img(64px, 96px, 30px, 46px);
|
||||
position: relative;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
transition: transform 0.12s ease-out;
|
||||
}
|
||||
|
||||
&__count {
|
||||
@include fluid(13px, 22px);
|
||||
position: absolute;
|
||||
left: 6%;
|
||||
right: 28%; // keep the number clear of the colored tab on the right
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Weapon panel (bottom-left) --------------------------- */
|
||||
.hud-weapon {
|
||||
@include fluid-img(64px, 80px);
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__icon {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__lvl {
|
||||
@include fluid(14px, 18px);
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
bottom: 1%;
|
||||
left: 62%;
|
||||
transform: translateX(-50%);
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Onboarding hint -------------------------------------- */
|
||||
/* Centered hint ("DRAG TO MOVE") that fades + scales in/out. */
|
||||
.hud-tutorial {
|
||||
@include fluid(30px, 56px);
|
||||
position: absolute;
|
||||
top: 63%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
-webkit-text-stroke: 1px #000;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&--show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Death end-card --------------------------------------- */
|
||||
/* The zombie icon flies to center (smooth ease-out + fade), then the button. */
|
||||
.hud-endcard {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
|
||||
&__zombie {
|
||||
@include fluid-img(150px, 300px);
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 1vw 2vw rgba(0, 0, 0, 0.6));
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 1s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
opacity 0.6s ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Revealed once the death animation has played (set in JS).
|
||||
&--show .hud-endcard__zombie {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hud-zombie-shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1.25) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.25) rotate(-12deg);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.25) rotate(12deg);
|
||||
}
|
||||
}
|
||||
@keyframes hud-zombie-shake-strong {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1.45) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.45) rotate(-22deg);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.45) rotate(22deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user