563 lines
9.7 KiB
CSS
563 lines
9.7 KiB
CSS
/* Combat Layout */
|
|
.combat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
/* More transparent/themed background */
|
|
background: rgba(20, 20, 20, 0.6);
|
|
backdrop-filter: blur(5px);
|
|
padding: 1rem;
|
|
color: white;
|
|
position: relative;
|
|
/* 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);
|
|
}
|
|
|
|
.glow-effect {
|
|
box-shadow: 0 0 10px #ff4444, 0 0 20px #ff4444;
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
}
|
|
|
|
.dead .location-image {
|
|
filter: grayscale(100%);
|
|
transition: filter 1s ease;
|
|
}
|
|
|
|
/* Combat Scene: Location Background with NPC Overlay */
|
|
.combat-scene-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 1rem auto;
|
|
aspect-ratio: 10 / 7;
|
|
overflow: hidden;
|
|
clip-path: var(--game-clip-path);
|
|
border: 2px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.combat-location-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.combat-location-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 4rem;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
.combat-npc-overlay-container {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
width: 50%;
|
|
height: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.combat-npc-overlay {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
|
|
transition: filter 0.3s, transform 0.3s;
|
|
}
|
|
|
|
.combat-npc-overlay.attacking {
|
|
animation: lunge 0.3s;
|
|
}
|
|
|
|
.combat-npc-overlay-container.dead .combat-npc-overlay {
|
|
filter: grayscale(100%) brightness(0.5) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
|
|
}
|
|
|
|
/* Enemy shake effect - opposite direction (enemy faces right, recoils right) */
|
|
.combat-npc-overlay-container.shake-effect {
|
|
animation: shake-right 0.5s cubic-bezier(.36, .07, .19, .97) both;
|
|
}
|
|
|
|
@keyframes shake-right {
|
|
|
|
10%,
|
|
90% {
|
|
transform: translate3d(1px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
80% {
|
|
transform: translate3d(-2px, 0, 0);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
60% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.combat-npc-placeholder {
|
|
font-size: 4rem;
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
|
|
}
|
|
|
|
/* Enemy avatar now uses shared .location-image styles from Game.css */
|
|
|
|
/* ... existing code ... */
|
|
|
|
/* Action Buttons Center */
|
|
.combat-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* Center horizontally */
|
|
padding: 1rem 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.combat-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 0 1rem 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.battle-arena {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
position: relative;
|
|
min-height: 250px;
|
|
}
|
|
|
|
/* Combatants */
|
|
.combatant {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.combatant.enemy {
|
|
color: #ffaaaa;
|
|
}
|
|
|
|
.combatant.player {
|
|
color: #aaddff;
|
|
}
|
|
|
|
.combatant.dead .enemy-avatar {
|
|
filter: grayscale(100%) brightness(0.5);
|
|
transition: filter 1s ease-out;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Cleaned up old styles */
|
|
.player-placeholder {
|
|
font-size: 5rem;
|
|
color: #ff4444;
|
|
}
|
|
|
|
.player-placeholder {
|
|
color: #4488ff;
|
|
}
|
|
|
|
.vs-divider {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #666;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
/* Health Bars */
|
|
.stats-container {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
.health-bar-container {
|
|
width: 100%;
|
|
height: 16px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin-top: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
clip-path: var(--game-clip-path-sm);
|
|
}
|
|
|
|
.health-bar-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease-out;
|
|
}
|
|
|
|
.enemy-fill {
|
|
background: linear-gradient(90deg, #ff4444, #cc0000);
|
|
}
|
|
|
|
.player-fill {
|
|
background: linear-gradient(90deg, #4488ff, #0044cc);
|
|
}
|
|
|
|
.health-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 1px black;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.combat-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 0;
|
|
width: 100%;
|
|
/* Ensure buttons stack properly */
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.combat-actions-group {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.combat-actions-group {
|
|
max-width: 400px;
|
|
/* Limit width of attack/flee buttons */
|
|
}
|
|
|
|
.btn.full-width {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
/* Don't let close button get too wide */
|
|
}
|
|
|
|
.btn-attack {
|
|
background: #ff4444;
|
|
color: white;
|
|
}
|
|
|
|
.btn-flee {
|
|
background: #666;
|
|
color: white;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Combat Log */
|
|
.combat-log-container {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 0.5rem;
|
|
margin-top: 1rem;
|
|
height: 150px;
|
|
overflow-y: auto;
|
|
font-size: 0.9rem;
|
|
clip-path: var(--game-clip-path-sm);
|
|
}
|
|
|
|
.log-message {
|
|
padding: 2px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.log-player_attack {
|
|
color: #aaddff;
|
|
}
|
|
|
|
.log-enemy_attack {
|
|
color: #ffaaaa;
|
|
}
|
|
|
|
.log-victory {
|
|
color: #44ff44;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.log-defeat {
|
|
color: #ff4444;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Animations & Floats */
|
|
.floating-text-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.floating-text {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
animation: float-up 5s forwards;
|
|
pointer-events: none;
|
|
text-shadow: 2px 2px 0 #000;
|
|
z-index: 2000;
|
|
/* Ensure on top of everything */
|
|
}
|
|
|
|
.type-damage {
|
|
color: #ff4444;
|
|
}
|
|
|
|
.type-crit {
|
|
color: #ffaa00;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.type-heal {
|
|
color: #44ff44;
|
|
}
|
|
|
|
.type-miss {
|
|
color: #aaa;
|
|
}
|
|
|
|
.type-info {
|
|
color: #44aaff;
|
|
}
|
|
|
|
.type-stamina {
|
|
color: #ffd700;
|
|
}
|
|
|
|
@keyframes float-up {
|
|
0% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-50px) scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.type-xp {
|
|
color: #ffd700;
|
|
font-size: 1.2rem;
|
|
/* User wants it lower, so we can adjust top via inline style in TSX or here */
|
|
/* text-shadow: 1px 1px 0 #000; */
|
|
}
|
|
|
|
.shake-effect {
|
|
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
10%,
|
|
90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.flash-hit {
|
|
animation: flash 0.3s;
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
50% {
|
|
filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5);
|
|
}
|
|
|
|
/* Red flash */
|
|
100% {
|
|
filter: brightness(1);
|
|
}
|
|
}
|
|
|
|
.turn-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0, 0, 0, 0.8);
|
|
padding: 1rem 2rem;
|
|
font-size: 1.5rem;
|
|
animation: pulse 1s infinite;
|
|
z-index: 20;
|
|
clip-path: var(--game-clip-path-sm);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* Attacking Animation */
|
|
.attacking {
|
|
animation: lunge 0.3s;
|
|
}
|
|
|
|
@keyframes lunge {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* Assuming LTR, for enemy use -20px via modifier if needed */
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.enemy.attacking {
|
|
animation: lunge-left 0.3s;
|
|
}
|
|
|
|
@keyframes lunge-left {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Combat Stats Layout - Staggered HP Bars */
|
|
.combat-stats-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.stat-block {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 0.5rem 1rem;
|
|
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 {
|
|
width: 60%;
|
|
align-self: flex-start;
|
|
border-left: 3px solid #dc3545;
|
|
}
|
|
|
|
.stat-block.player {
|
|
width: 60%;
|
|
align-self: flex-end;
|
|
border-right: 3px solid #4caf50;
|
|
}
|
|
|
|
.stat-block .stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.25rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-block .stat-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-block .stat-numbers {
|
|
color: #ddd;
|
|
}
|
|
|
|
.stat-block.player .progress-bar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Ensure progress bars look like GameHeader */
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 12px;
|
|
/* Slightly thinner than header */
|
|
background: rgba(0, 0, 0, 0.6);
|
|
overflow: hidden;
|
|
position: relative;
|
|
clip-path: var(--game-clip-path-sm);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease-out;
|
|
} |