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

targeting text

Browse Source
This commit is contained in:
ntr 2019-09-16 14:22:57 +10:00
parent d4ae38e733
commit d1b13ce092
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/assets/styles/game.less
View File

@ -88,6 +88,13 @@
stroke: whitesmoke; stroke: whitesmoke;
} }
.resolving-skill {
grid-area: target;
align-self: center;
text-align: center;
height: auto;
}
/* some stupid bug in chrome makes it fill the entire screen */ /* some stupid bug in chrome makes it fill the entire screen */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#targeting { #targeting {

13
client/src/components/targeting.arrows.jsx
View File

@ -17,8 +17,9 @@ class TargetSvg extends Component {
this.onResize = throttle(() => { this.onResize = throttle(() => {
const svg = document.getElementById('targeting'); const svg = document.getElementById('targeting');
if (!svg) return setTimeout(this.onResize, 500);
const { width, height } = svg.getBoundingClientRect(); const { width, height } = svg.getBoundingClientRect();
const path = document.querySelector('#targeting path'); // const path = document.querySelector('#targeting path');
this.setState({ width, height }); this.setState({ width, height });
}, 500); }, 500);
} }
@ -34,15 +35,7 @@ class TargetSvg extends Component {
if (!animTarget) return false; if (!animTarget) return false;
return ( return (
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows"> <h1 class="resolving-skill">{animTarget.skill}</h1>
<text
x={`${(width / 2) - 50}`}
y={`${(height / 2) + 16}`}
font-family="Jura"
font-size="2em">
{animTarget.skill}
</text>
</svg>
); );
} }