center alignment of resolving text

This commit is contained in:
ntr 2019-11-08 09:59:42 +11:00
parent ff8e3aaa71
commit 00b32b38a3
2 changed files with 11 additions and 6 deletions

View File

@ -252,12 +252,16 @@
grid-area: target; grid-area: target;
text-align: center; text-align: center;
align-self: center; align-self: center;
height: auto; // height: auto;
svg { svg {
display: inline; display: inline;
height: 1em; height: 1em;
margin-right: 0.1em margin-right: 0.1em
} }
display: flex;
flex-flow: column;
justify-content: center;
} }
.skill-description { .skill-description {

View File

@ -52,6 +52,7 @@ class TargetSvg extends Component {
itemInfo, itemInfo,
} = props; } = props;
const { width, height } = state; const { width, height } = state;
if (!game) return false; // game will be null when battle ends if (!game) return false; // game will be null when battle ends
if (game.phase === 'Finished') return false; // Clear everything if its over (in case of abandon) if (game.phase === 'Finished') return false; // Clear everything if its over (in case of abandon)
@ -59,7 +60,7 @@ class TargetSvg extends Component {
if (tutorialGame) { if (tutorialGame) {
return ( return (
<div class="resolving-skill"> <div class="resolving-skill">
<h2><span> Select your skills, click on targets and then hit <b>READY</b>.</span></h2> <h2>Select your skills, click on targets and then hit <b>READY</b>.</h2>
</div> </div>
); );
} }
@ -72,8 +73,8 @@ class TargetSvg extends Component {
return ( return (
<div class="resolving-skill"> <div class="resolving-skill">
<h1><span>{gameEffectInfo.effect}</span></h1> <h1>{gameEffectInfo.effect}</h1>
<div><span>{infoDescription} </span></div> <div>{infoDescription}</div>
</div> </div>
); );
} }
@ -90,8 +91,8 @@ class TargetSvg extends Component {
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
return ( return (
<div class="resolving-skill"> <div class="resolving-skill">
<h1><span>{animSkill}</span></h1> <h1>{animSkill}</h1>
<div><span>{itemSourceDescription}</span></div> <div>{itemSourceDescription}</div>
</div> </div>
); );
} }