cek/airboardgame
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Adds possibility to display text on Image component. Useful for:

Browse source 
- Numbers on monster tokens,
- Numbers on map tiles.
This commit is contained in:
Romain Garrigues 2020-06-16 19:40:20 +01:00 committed by Jérémie Pardou-Piquemal
parent 82cfc665be
commit 23eabcab83
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/Item.js
View file

@ -138,6 +138,9 @@ const Image = ({
flipped,
updateState,
unflippedFor,
extraStyling,
imgText,
backImgText
}) => {
const user = useRecoilValue(userAtom);
const size = {};
@ -172,16 +175,23 @@ const Image = ({
let image;
if (backContent && (flipped || (unflippedFor && unflippedFor !== user.id))) {
image = (
<>
{ imgText && (
<div class='image-text' style={{position: 'absolute', right: 0, padding: '0 3px', margin: '7px', 'background-color': 'white', color: 'black', 'border-radius': '50%'}}>
{backImgText}
</div>
)}
<img
src={backContent}
draggable={false}
{...size}
style={{ userSelect: 'none', pointerEvents: 'none' }}
style={{ userSelect: 'none', pointerEvents: 'none', ...extraStyling }}
/>
</>
);
} else {
image = (
<>
<div class='image-wrapper' style={{position: 'relative'}}>
{unflippedFor && (
<div
style={{
@ -197,13 +207,18 @@ const Image = ({
Only you
</div>
)}
{ imgText && (
<div class='image-text' style={{position: 'absolute', right: 0, padding: '0 3px', margin: '7px', 'background-color': 'white', color: 'black', 'border-radius': '50%'}}>
{imgText}
</div>
)}
<img
src={content}
draggable={false}
{...size}
style={{ userSelect: 'none', pointerEvents: 'none' }}
style={{ userSelect: 'none', pointerEvents: 'none', ...extraStyling }}
/>
</>
</div>
);
}