diff options
| -rw-r--r-- | frontend/src/components/game/CardImage.jsx | 15 | ||||
| -rw-r--r-- | frontend/src/components/game/Hand.jsx | 6 |
2 files changed, 17 insertions, 4 deletions
diff --git a/frontend/src/components/game/CardImage.jsx b/frontend/src/components/game/CardImage.jsx new file mode 100644 index 00000000..110d9883 --- /dev/null +++ b/frontend/src/components/game/CardImage.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import type { ApiCard } from '../../api/model'; +import './Hand.css' + +type CardImageProps = { + card: ApiCard, + otherClasses: string +} + +export const CardImage = ({card, otherClasses}: CardImageProps) => { + return <img src={`/images/cards/${card.image}`} + title={card.name} + alt={'Card ' + card.name} + className={`card-img ${otherClasses}`}/> +}; diff --git a/frontend/src/components/game/Hand.jsx b/frontend/src/components/game/Hand.jsx index 2b8ca196..9b29742e 100644 --- a/frontend/src/components/game/Hand.jsx +++ b/frontend/src/components/game/Hand.jsx @@ -2,6 +2,7 @@ import { Button, ButtonGroup, Classes, Intent } from '@blueprintjs/core'; import React from 'react'; import type { ApiHandCard, ApiPlayerMove } from '../../api/model'; import './Hand.css' +import { CardImage } from './CardImage'; type HandProps = { cards: ApiHandCard[], @@ -24,10 +25,7 @@ type HandCardProps = { const HandCard = ({card, wonderUpgradable, prepareMove}: HandCardProps) => { let playableClass = card.playability.playable ? '' : 'unplayable'; return <div className={`hand-card ${playableClass}`}> - <img src={`/images/cards/${card.image}`} - title={card.name} - alt={'Card ' + card.name} - className="hand-card-img"/> + <CardImage card={card} otherClasses="hand-card-img"/> <ActionButtons card={card} wonderUpgradable={wonderUpgradable} prepareMove={prepareMove} /> </div> }; |