feat(combat): add CombatPageComponent and replace the combat/new placeholder route
Wires up the Slice 0.3 combat screen (player/monster HP bars, round display, Angriff action, grouped German combat log, victory/defeat panels) and replaces the Slice 0.2 combat/new placeholder route with combat/:combatId loading CombatPageComponent. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bastian Wagner
@@ -0,0 +1,263 @@
|
||||
:host {
|
||||
display: block;
|
||||
min-block-size: 100%;
|
||||
}
|
||||
|
||||
.combat-page {
|
||||
display: grid;
|
||||
gap: var(--ar-space-4);
|
||||
}
|
||||
|
||||
.combat-page__scene {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: end;
|
||||
gap: var(--ar-space-4);
|
||||
min-block-size: clamp(18rem, 40vh, 26rem);
|
||||
padding: var(--ar-space-5);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ar-border);
|
||||
background-color: #151718;
|
||||
background-image: url('/images/backgrounds/Aschestrasse.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
@supports (
|
||||
background-image: image-set(
|
||||
url('/images/backgrounds/runtime/Aschestrasse-960.jpg') type('image/jpeg') 1x
|
||||
)
|
||||
) {
|
||||
.combat-page__scene {
|
||||
background-image: image-set(
|
||||
url('/images/backgrounds/runtime/Aschestrasse-960.jpg') type('image/jpeg') 1x
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.combat-page__scene::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, rgb(4 6 8 / 0.15), rgb(4 6 8 / 0.6));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.combat-page__combatant {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: var(--ar-space-2);
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__combatant--player {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.combat-page__combatant--monster {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.combat-page__portrait {
|
||||
inline-size: clamp(6rem, 14vw, 10rem);
|
||||
block-size: clamp(6rem, 14vw, 10rem);
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-md);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__info {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
min-inline-size: 10rem;
|
||||
color: var(--ar-text);
|
||||
text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.85);
|
||||
}
|
||||
|
||||
.combat-page__name {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.combat-page__level {
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__hp {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
font-size: var(--ar-font-sm);
|
||||
}
|
||||
|
||||
.combat-page__hp-track {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
block-size: 0.5rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ar-border);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
background: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.combat-page__hp-value {
|
||||
display: block;
|
||||
block-size: 100%;
|
||||
background: var(--ar-success);
|
||||
}
|
||||
|
||||
.combat-page__hp-value--monster {
|
||||
background: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__round {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: start;
|
||||
justify-self: center;
|
||||
padding: var(--ar-space-1) var(--ar-space-3);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-gold);
|
||||
background: rgb(9 11 13 / 0.75);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__actions {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.combat-page__attack {
|
||||
padding: var(--ar-space-3) var(--ar-space-6);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-text);
|
||||
background: linear-gradient(180deg, #263b4b, #17232d);
|
||||
cursor: pointer;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.combat-page__attack:hover:not(:disabled) {
|
||||
border-color: #d6b26b;
|
||||
background: linear-gradient(180deg, #315067, #1a2c3a);
|
||||
}
|
||||
|
||||
.combat-page__attack:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.combat-page__result {
|
||||
display: grid;
|
||||
gap: var(--ar-space-2);
|
||||
max-inline-size: 30rem;
|
||||
padding: var(--ar-space-5);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
background: var(--ar-panel);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__result h2 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.combat-page__result--won h2 {
|
||||
color: var(--ar-success);
|
||||
}
|
||||
|
||||
.combat-page__result--lost h2 {
|
||||
color: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__result-hint {
|
||||
color: var(--ar-text-muted);
|
||||
font-size: var(--ar-font-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.combat-page__log {
|
||||
display: grid;
|
||||
gap: var(--ar-space-1);
|
||||
max-block-size: 16rem;
|
||||
padding: var(--ar-space-4);
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--ar-border);
|
||||
background: var(--ar-panel-muted);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__log-round {
|
||||
margin: var(--ar-space-2) 0 0;
|
||||
color: var(--ar-gold);
|
||||
font-size: var(--ar-font-sm);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.combat-page__log-entry {
|
||||
margin: 0;
|
||||
color: var(--ar-text-muted);
|
||||
}
|
||||
|
||||
.combat-page__loading,
|
||||
.combat-page__error {
|
||||
padding: var(--ar-space-4);
|
||||
border: 1px solid var(--ar-border);
|
||||
background: var(--ar-panel);
|
||||
box-shadow: var(--ar-shadow-raised);
|
||||
}
|
||||
|
||||
.combat-page__error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--ar-space-4);
|
||||
border-color: var(--ar-danger);
|
||||
}
|
||||
|
||||
.combat-page__error button {
|
||||
flex: 0 0 auto;
|
||||
padding: var(--ar-space-2) var(--ar-space-3);
|
||||
border: 1px solid var(--ar-border-highlight);
|
||||
border-radius: var(--ar-radius-sm);
|
||||
color: var(--ar-text);
|
||||
background: #1a2023;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.combat-page__hp-value {
|
||||
transition: inline-size var(--ar-motion-base);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 720px) {
|
||||
.combat-page__scene {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combat-page__combatant--player,
|
||||
.combat-page__combatant--monster {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user