fix chrome bug kinda

This commit is contained in:
ntr 2019-06-03 19:35:46 +10:00
parent b298feff9c
commit faff221ca6
3 changed files with 9 additions and 21 deletions

View File

@ -35,7 +35,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.opponent .game-construct { .opponent .game-construct {
align-items: flex-start; align-items: flex-start;
grid-template-rows: min-content min-content min-content minmax(min-content, 2fr); grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
@ -74,24 +73,18 @@
transition-timing-function: ease; transition-timing-function: ease;
} }
.game .targeting-arrows { .game #targeting {
grid-area: target;
height: 100%; height: 100%;
width: 100%; width: 100%;
stroke-width: 2px; stroke-width: 2px;
stroke: whitesmoke; stroke: whitesmoke;
/* some stupid bug in chrome makes it fill the entire screen */
max-height: 10em;
} }
.game-construct .targeting { .resolving #targeting {
grid-area: avatar; opacity: 0;
position: relative;
left: 60%;
top: 50%;
text-align: center;
}
.game-construct .img {
grid-area: avatar;
} }
.game-construct .name { .game-construct .name {
@ -208,11 +201,8 @@
left: 50%; left: 50%;
} }
.game-construct.active-skill { .game-construct.active-skill {
filter: drop-shadow(0 0 0.2em silver); filter: drop-shadow(0 0 0.2em silver);
/*border-color: silver;*/
} }
.game-construct.red-damage { .game-construct.red-damage {
@ -327,10 +317,6 @@
opacity: 0; opacity: 0;
} }
.resolving .targeting {
opacity: 0;
}
/* /*
COMBAT ANIMATIONS COMBAT ANIMATIONS
*/ */

View File

@ -94,12 +94,14 @@ function GameConstruct(props) {
return ( return (
<div <div
onClick={() => selectSkillTarget(construct.id)}
style={ activeSkill ? { cursor: 'pointer' } : {}} style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`game-construct ${ko} ${classes}`} > className={`game-construct ${ko} ${classes}`} >
<h3 className="name"> {construct.name} </h3> <h3 className="name"> {construct.name} </h3>
{crypSkills} {crypSkills}
<div className="stats"> {stats} </div> <div className="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar name={construct.name} id={construct.id} />
{combatTextEl}
<div className="effects"> {effects} </div> <div className="effects"> {effects} </div>
</div> </div>
); );

View File

@ -39,7 +39,7 @@ class TargetSvg extends Component {
const sourceY = height; const sourceY = height;
const sourceX = (source * width / 3) + width / 6; const sourceX = (source * width / 3) + width / 6;
const targetX = (target * width / 3) + width / 6 + (defensive ? width / 24 : 0); const targetX = (target * width / 3) + width / 6 + (defensive ? width / 32 : 0) + (source * width / 24) - (width / 24);
const targetY = defensive ? height : 0; const targetY = defensive ? height : 0;
const curveEnd = height * 0.25; const curveEnd = height * 0.25;
const curveStart = height * 0.75; const curveStart = height * 0.75;