chore: render combined objects (#330)

Co-authored-by: Malin <[email protected]>
Etimo · Oct 3, 2023 · ea52a6f · ea52a6f
1 parent e88786e
commit ea52a6f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/packages/frontend/src/components/Board/Cell.tsx b/packages/frontend/src/components/Board/Cell.tsx
@@ -34,8 +34,11 @@ const renderGameCharacterComponent = (gameObject: IGameObjectDto) => {
 export const Cell: FC<CellProps> = memo((props) => {
   const { gameObjects, id } = props;
 
-  const lastGameObject =
-    gameObjects.length > 0 ? gameObjects[gameObjects.length - 1] : null;
+  const renderGameObject = (gameObject: IGameObjectDto, index: number) => (
+    <div key={index} className="absolute w-[100%]">
+      {renderGameCharacterComponent(gameObject)}
+    </div>
+  );
 
   return (
     <div
@@ -46,7 +49,9 @@ export const Cell: FC<CellProps> = memo((props) => {
           : 'justify-center'
       }`}
     >
-      {lastGameObject && renderGameCharacterComponent(lastGameObject)}
+      {gameObjects.map((gameObject, index) =>
+        renderGameObject(gameObject, index),
+      )}
     </div>
   );
 });
diff --git a/packages/frontend/src/components/gameObject/BotObject.tsx b/packages/frontend/src/components/gameObject/BotObject.tsx
@@ -4,5 +4,5 @@ import { robot } from '../images';
 import { CommonGameObject } from './CommonGameObject';
 
 export const BotComponent: FC<BotGameObjectProperties> = memo(({ name }) => (
-  <CommonGameObject characterName={name} characterImg={robot} />
+  <CommonGameObject characterName={name} characterImg={robot} index={10} />
 ));
diff --git a/packages/frontend/src/components/gameObject/CommonGameObject.tsx b/packages/frontend/src/components/gameObject/CommonGameObject.tsx
@@ -4,24 +4,29 @@ interface CommonGameObjectProps {
   characterName?: string;
   characterImg: string;
   imageClassName?: string;
+  index?: number;
 }
 
 export const CommonGameObject: FC<CommonGameObjectProps> = ({
   characterName,
   characterImg,
   imageClassName,
+  index = 2,
 }) => {
   return (
     <div className="flex flex-col w-full">
       {characterName && (
-        <p className="text-[6px] text-black dark:text-white max-w-[98%] self-center sm:text-[10px] overflow-hidden whitespace-nowrap truncate">
+        <p className="text-[6px] text-black dark:text-white max-w-[98%] self-center sm:text-[10px] bg-gray-50 dark:bg-gray-800 overflow-hidden whitespace-nowrap truncate">
           {characterName}
         </p>
       )}
       <img
         src={characterImg}
         className={`w-[70%] h-[70%] self-center ${imageClassName}`}
         alt={characterName}
+        style={{
+          zIndex: index,
+        }}
       />
     </div>
   );