From 991b089e2b4d8c28b30a6d13546f26aa2ffa2b2f Mon Sep 17 00:00:00 2001
From: Jeremie Pardou <571533+jrmi@users.noreply.github.com>
Date: Sat, 7 Oct 2023 15:31:43 +0200
Subject: [PATCH] Add label to advanced images

---
 .../AdvancedImage/AdvancedImage.jsx             | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/gameComponents/AdvancedImage/AdvancedImage.jsx b/src/gameComponents/AdvancedImage/AdvancedImage.jsx
index 4b22b95e..c766f81b 100644
--- a/src/gameComponents/AdvancedImage/AdvancedImage.jsx
+++ b/src/gameComponents/AdvancedImage/AdvancedImage.jsx
@@ -38,6 +38,19 @@ const Wrapper = styled.div`
   line-height: 0em;
 `;
 
+const Label = styled.div`
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  padding: 0 3px;
+  background-color: black;
+  color: white;
+  border-radius: 0.5em;
+  opacity: 0.5;
+  font-size: 0.6em;
+  line-height: 1.5em;
+`;
+
 /*
 
 const layer={
@@ -59,6 +72,8 @@ const AdvancedImage = ({
   unflippedFor,
   holdItems,
   setState,
+  text,
+  backText,
   layers,
 }) => {
   const { register } = useItemInteraction("place");
@@ -161,6 +176,8 @@ const AdvancedImage = ({
         height={height}
         useCanvas={true}
       />
+      {flippedForMe && backText && <Label>{backText}</Label>}
+      {(!flippedForMe || !backText) && text && <Label>{text}</Label>}
       <UnflippedFor>
         {unflippedForUsers &&
           unflippedForUsers.map(({ color, id }) => {