new game styles
This commit is contained in:
ntr
parent
e1c8a1b507
commit
16a0a18905
@ -28,31 +28,35 @@
|
||||
|
||||
.opponent {
|
||||
grid-area: opponent;
|
||||
}
|
||||
|
||||
.opponent .combat-text {
|
||||
.combat-text {
|
||||
top: 75%;
|
||||
}
|
||||
|
||||
.opponent .combat-anim {
|
||||
.combat-anim {
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.opponent .game-construct {
|
||||
.game-construct {
|
||||
align-items: flex-start;
|
||||
grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-areas:
|
||||
"stats "
|
||||
"name "
|
||||
"effects "
|
||||
"avatar ";
|
||||
"effects stats"
|
||||
"effects name"
|
||||
"effects avatar";
|
||||
|
||||
.effects {
|
||||
align-self: flex-start;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.opponent .game-construct .name {
|
||||
.game-construct .name {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.game-construct {
|
||||
display: grid;
|
||||
@ -65,19 +69,98 @@
|
||||
|
||||
justify-items: center;
|
||||
|
||||
grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(min-content, 1fr) min-content min-content;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-areas:
|
||||
"skills "
|
||||
"avatar "
|
||||
"effects "
|
||||
"name "
|
||||
"stats ";
|
||||
"skills avatar"
|
||||
"effects name"
|
||||
"effects stats";
|
||||
|
||||
transition-property: translate, opacity;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
|
||||
.effects {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.stats {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25em;
|
||||
text-align: center;
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.skills {
|
||||
grid-area: skills;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
height: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.effects {
|
||||
grid-area: effects;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.ko {
|
||||
animation: none;
|
||||
opacity: 0.20;
|
||||
}
|
||||
|
||||
.ko button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.unfocus {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.unfocus.ko {
|
||||
opacity: 0.20;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats div {
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats .value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
white-space: nowrap;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.game-construct figure {
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
#targeting {
|
||||
@ -101,116 +184,6 @@
|
||||
max-height: 10em;
|
||||
}
|
||||
}
|
||||
/*
|
||||
.resolving #targeting {
|
||||
opacity: 0;
|
||||
}
|
||||
*/
|
||||
.game-construct .name {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25em;
|
||||
text-align: center;
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.game-construct .stats {
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-construct .stats div {
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-construct .stats .value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-construct figcaption {
|
||||
white-space: nowrap;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.game-construct figure {
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.game-construct .skills {
|
||||
grid-area: skills;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-construct .skills button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-construct .effects {
|
||||
grid-area: effects;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.game-btn {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.game-btn:first-child {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.game-construct button {
|
||||
color: #888;
|
||||
flex: 1 1 100%;
|
||||
padding: 0;
|
||||
margin: 0 0.5em;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.game-construct button.active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-construct button[disabled], .game-construct button[disabled]:hover {
|
||||
color: #333333;
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
.game-construct button:hover {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.game-construct.ko {
|
||||
animation: none;
|
||||
opacity: 0.20;
|
||||
/* filter: grayscale(100%);
|
||||
*/}
|
||||
|
||||
.game-construct.ko button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.game-construct.unfocus {
|
||||
opacity: 0.35;
|
||||
/* filter: blur(5px);
|
||||
*/}
|
||||
|
||||
.game-construct.unfocus.ko {
|
||||
opacity: 0.20;
|
||||
/* filter: blur(5px) grayscale(100%);
|
||||
*/}
|
||||
|
||||
.combat-text {
|
||||
font-size: 2em;
|
||||
@ -238,10 +211,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-construct.active-skill {
|
||||
/* filter: drop-shadow(0 0 0.2em silver);
|
||||
*/}
|
||||
|
||||
.game-construct.red-damage {
|
||||
color: #a52a2a;
|
||||
/*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
|
||||
@ -326,7 +295,7 @@
|
||||
object-fit: contain;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-position: top;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ function Skill(props) {
|
||||
return (
|
||||
<button
|
||||
disabled='true'
|
||||
class='construct-skill-btn disabled'>
|
||||
class='construct-skill-btn disabled'>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -52,17 +52,11 @@ class TargetSvg extends Component {
|
||||
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
|
||||
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
|
||||
|
||||
const pathOffset = [
|
||||
[0, -1, -2],
|
||||
[1, 0, -1],
|
||||
[2, 1, 0],
|
||||
][source][target];
|
||||
|
||||
const sourceY = height;
|
||||
const sourceX = (source * width / 3) + width / 6;
|
||||
const sourceX = (source * width / 3) + width / 24;
|
||||
const targetX = (target * width / 3) + width / 6
|
||||
+ (defensive ? width / 64 : 0)
|
||||
+ (pathOffset * width / 32);
|
||||
+ (source * width / 18);
|
||||
const targetY = defensive ? height : 0;
|
||||
const bendStart = height * (0.7 - 0.1 * source);
|
||||
const bendEnd = height * 0.20;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user