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>
 };