ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

game-cryp

Browse Source
This commit is contained in:
ntr 2019-05-02 16:19:06 +10:00
parent 2716d05b07
commit 5f51e1604f
4 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/cryps.css
View File

@ -582,7 +582,7 @@ table td svg {
/* CRYP BOX */ /* CRYP BOX */
.cryp-box { .game-cryp {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;
@ -596,7 +596,7 @@ table td svg {
transition-timing-function: ease; transition-timing-function: ease;
} }
.cryp-box figure { .game-cryp figure {
margin: 0; margin: 0;
flex: 0 0 50%; flex: 0 0 50%;
text-align: center; text-align: center;
@ -605,7 +605,7 @@ table td svg {
justify-content: flex-end; justify-content: flex-end;
} }
.cryp-box .stats { .game-cryp .stats {
flex: 1 0 25%; flex: 1 0 25%;
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
@ -623,14 +623,14 @@ table td svg {
font-size: 75%; font-size: 75%;
} }
.cryp-box .skills { .game-cryp .skills {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex: 1 1 50%; flex: 1 1 50%;
height: 100%; height: 100%;
} }
.cryp-box .effects { .game-cryp .effects {
max-height: 100%; max-height: 100%;
font-size: 1.5em; font-size: 1.5em;
} }
@ -682,18 +682,18 @@ table td svg {
color: whitesmoke; color: whitesmoke;
} }
.cryp-box.ko { .game-cryp.ko {
animation: none; animation: none;
opacity: 0.5; opacity: 0.5;
/*opacity: 0.35;*/ /*opacity: 0.35;*/
filter: grayscale(100%); filter: grayscale(100%);
} }
.cryp-box.ko .cryp-skill-btn:hover { .game-cryp.ko .cryp-skill-btn:hover {
color: #333; color: #333;
} }
.cryp-box.unfocus { .game-cryp.unfocus {
/*opacity: 0.65;*/ /*opacity: 0.65;*/
filter: blur(5px); filter: blur(5px);
} }
@ -746,12 +746,12 @@ table td svg {
CRYP DAMAGE CRYP DAMAGE
*/ */
.cryp-box.active-skill { .game-cryp.active-skill {
filter: drop-shadow(0 0 0.2em silver); filter: drop-shadow(0 0 0.2em silver);
/*border-color: silver;*/ /*border-color: silver;*/
} }
.cryp-box.red-damage { .game-cryp.red-damage {
filter: drop-shadow(0 0 0.2em red); filter: drop-shadow(0 0 0.2em red);
color: red; color: red;
/*border-color: red;*/ /*border-color: red;*/
@ -770,7 +770,7 @@ CRYP DAMAGE
/*border-top: 1px solid red;*/ /*border-top: 1px solid red;*/
} }
.cryp-box.blue-damage { .game-cryp.blue-damage {
filter: drop-shadow(0 0 0.2em blue); filter: drop-shadow(0 0 0.2em blue);
color: blue; color: blue;
/*border-color: blue;*/ /*border-color: blue;*/
@ -789,7 +789,7 @@ CRYP DAMAGE
/*border-top: 1px solid blue;*/ /*border-top: 1px solid blue;*/
} }
.cryp-box.green-damage { .game-cryp.green-damage {
filter: drop-shadow(0 0 0.2em green); filter: drop-shadow(0 0 0.2em green);
color: green; color: green;
/*border-color: green;*/ /*border-color: green;*/
@ -808,7 +808,7 @@ CRYP DAMAGE
/*border-top: 1px solid green;*/ /*border-top: 1px solid green;*/
} }
.cryp-box.purple-damage { .game-cryp.purple-damage {
filter: drop-shadow(0 0 0.2em purple); filter: drop-shadow(0 0 0.2em purple);
color: purple; color: purple;
border-color: purple; border-color: purple;
@ -894,7 +894,7 @@ CRYP DAMAGE
} }
/*fucken beats me why needed */ /*fucken beats me why needed */
.cryp-box .skills { .game-cryp .skills {
height: unset; height: unset;
} }
@ -926,7 +926,7 @@ CRYP DAMAGE
text-align: center; text-align: center;
} }
.cryp-box { .game-cryp {
margin: 0 0.2em; margin: 0 0.2em;
flex-flow: column-reverse; flex-flow: column-reverse;
} }
@ -937,7 +937,7 @@ CRYP DAMAGE
width: 100%; width: 100%;
} }
.cryp-box .skills { .game-cryp .skills {
display: none; display: none;
} }
@ -969,7 +969,7 @@ CRYP DAMAGE
border-width: 0px; border-width: 0px;
} }
.cryp-box .stats { .game-cryp .stats {
flex-flow: row; flex-flow: row;
padding: 0.2em 0; padding: 0.2em 0;
} }

2
client/src/components/game.component.jsx
View File

@ -150,7 +150,7 @@ function GamePanel(props) {
return ( return (
<div <div
key={i} key={i}
className={`cryp-box ${ko} ${classes}`} className={`game-cryp ${ko} ${classes}`}
style={ activeSkill ? { cursor: 'pointer' } : {}} style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} > onClick={() => selectSkillTarget(cryp.id)} >
<div className="stats"> <div className="stats">

2
client/src/components/game.cryp.jsx
View File

@ -89,7 +89,7 @@ function GameCryp(props) {
<div <div
style={ activeSkill ? { cursor: 'pointer' } : {}} style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={onClick} onClick={onClick}
className={`cryp-box ${ko} ${classes}`} > className={`game-cryp ${ko} ${classes}`} >
<div className="stats"> <div className="stats">
{stats} {stats}
</div> </div>

16
client/src/components/instance.cryps.jsx
View File

@ -124,17 +124,19 @@ function Cryp(props) {
return ( return (
<div <div
key={cryp.id} key={cryp.id}
className="cryp-box" className="game-cryp"
onDragOver={onDragOver} onDragOver={onDragOver}
onDrop={onDrop} onDrop={onDrop}
style={border} style={border}
> >
<figure className="img" onClick={onClick}> <div className="game-cryp-top">
{crypAvatar(cryp.name)} <figure className="img" onClick={onClick}>
<figcaption>{cryp.name}</figcaption> {crypAvatar(cryp.name)}
</figure> <figcaption>{cryp.name}</figcaption>
<div className="skills"> </figure>
{skills} <div className="skills">
{skills}
</div>
</div> </div>
<div className="stats"> <div className="stats">
{specs} {specs}