Jocaru/echoes-of-the-ash
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Implement Inventory Grid View and GameButton

Browse Source
This commit is contained in:
Joan
2026-02-07 22:00:14 +01:00
parent dcfc91b82b
commit eb75ee5b33
22 changed files with 1161 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pwa/src/components/game/CombatEffects.css
View File

@@ -7,11 +7,11 @@
/* More transparent/themed background */
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(5px);
border-radius: 12px;
padding: 1rem;
color: white;
position: relative;
overflow: hidden;
/* overflow: hidden; Removed to allow floating text to be seen */
clip-path: var(--game-clip-path);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -118,10 +118,10 @@
width: 100%;
height: 16px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-top: 5px;
position: relative;
overflow: hidden;
clip-path: var(--game-clip-path-sm);
}
.health-bar-fill {
@@ -197,12 +197,12 @@
/* Combat Log */
.combat-log-container {
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 0.5rem;
margin-top: 1rem;
height: 150px;
overflow-y: auto;
font-size: 0.9rem;
clip-path: var(--game-clip-path-sm);
}
.log-message {
@@ -236,7 +236,7 @@
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
z-index: 1000;
}
.floating-text {
@@ -246,6 +246,8 @@
animation: float-up 5s forwards;
pointer-events: none;
text-shadow: 2px 2px 0 #000;
z-index: 2000;
/* Ensure on top of everything */
}
.type-damage {
@@ -346,10 +348,10 @@
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
padding: 1rem 2rem;
border-radius: 20px;
font-size: 1.5rem;
animation: pulse 1s infinite;
z-index: 20;
clip-path: var(--game-clip-path-sm);
}
@keyframes pulse {
@@ -419,10 +421,10 @@
.stat-block {
background: rgba(0, 0, 0, 0.4);
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
position: relative;
clip-path: var(--game-clip-path-sm);
}
.stat-block.enemy {
@@ -463,13 +465,12 @@
height: 12px;
/* Slightly thinner than header */
background: rgba(0, 0, 0, 0.6);
border-radius: 6px;
overflow: hidden;
position: relative;
clip-path: var(--game-clip-path-sm);
}
.progress-fill {
height: 100%;
border-radius: 6px;
transition: width 0.3s ease-out;
}