Merge pull request #14 from x-team/feature/XTG-291

[XTG-291] Floors Page - Design Improvements

src/helpers/emojiHelper.tsx

@@ -64,13 +64,17 @@ export const emojiToImageSrc = (emoji: string, allEmoji: IAllEmoji) => {
 export const emojiToImageTag = (
     emoji: string,
     allEmoji: IAllEmoji,
-    className?: string
+    className?: string,
+    qty?: number,
 ) => {
     return (
-        <img
-            className={`inline ${className || `h-6 w-6`}`}
-            src={emojiToImageSrc(emoji, allEmoji)}
-            alt={emoji + " emoji"}
-        />
+        <div className="flex flex-col text-center w-14">
+            <img
+                className={`${className || `h-6 w-6`}`}
+                src={emojiToImageSrc(emoji, allEmoji)}
+                alt={emoji + " emoji"}
+            />
+            {qty && <span className="text-sm">x{qty}</span>}
+        </div>
     );
 };

src/pages/FloorsEditorPage.tsx

@@ -14,26 +14,30 @@ import PanelBox from "../ui/PanelBox";
 const FloorsEditorPage = () => {
     const [allEmoji, setAllEmoji] = useState<IAllEmoji>({});
     const [, setIsLoading] = useState(false);
+    const [shouldReload, setShouldReload] = useState(true);
     const [towerGame, setTowerGame] = useState<IGameWithTower | null>(null);
     const [enemies, setEnemies] = useState<IEnemy[]>([]);
 
     useEffect(() => {
         const fetchTowerAndEnemiesData = async () => {
             setIsLoading(true);
+            if(!shouldReload) {
+                return;
+            }
             const [enemies, game, allEmoji] = await Promise.all([
                 getEnemies(),
                 getCurrentTowerGameStatus(),
                 getAllEmoji(),
             ]);
-
+            setShouldReload(false);
             setEnemies(enemies);
             setTowerGame(game);
             setAllEmoji(allEmoji);
             setIsLoading(false);
         };
 
         fetchTowerAndEnemiesData();
-    }, [setTowerGame, setEnemies]);
+    }, [setTowerGame, setEnemies, shouldReload]);
 
     if (!towerGame) {
         return (
@@ -69,6 +73,7 @@ const FloorsEditorPage = () => {
                 allEmoji={allEmoji}
                 enemies={enemies}
                 towerGame={towerGame}
+                setShouldReload={setShouldReload}
             />
         </section>
     );
@@ -78,9 +83,10 @@ interface IFloorEditorProps {
     enemies: IEnemy[];
     towerGame: IGameWithTower;
     allEmoji: IAllEmoji;
+    setShouldReload: (reload: boolean) => void;
 }
 
-const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
+const FloorsEditor = ({ enemies, towerGame, allEmoji, setShouldReload }: IFloorEditorProps) => {
     const [showAddEnemyModal, setShowAddEnemyModal] = useState(false);
     const [editingFloor, setEditingFloor] = useState<ITowerFloor | null>(null);
 
@@ -105,18 +111,19 @@ const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
 
                     <div>
                         <Button onClick={handleOpenEditFloorModal(floor)}>
-                            +
+                            Edit
                         </Button>
                     </div>
                 </div>
 
-                <div className="mt-4">
+                <div className="mt-4 grid grid-cols-4 gap-2">
                     {Object.keys(groupedByEnemies).map((enemyKey) => (
-                        <div>
-                            {groupedByEnemies[enemyKey].length}x{" "}
+                        <div key={enemyKey} className="w-14 border-red-600">
                             {emojiToImageTag(
                                 groupedByEnemies[enemyKey][0].emoji,
-                                allEmoji
+                                allEmoji,
+                                "h-12 w-12",
+                                groupedByEnemies[enemyKey].length,
                             )}
                         </div>
                     ))}
@@ -125,14 +132,20 @@ const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
         );
     };
 
-    return (
+
+    const handleCloseEditFloorModalAction = (reload: boolean) => {
+        setShowAddEnemyModal(false);
+        setShouldReload(reload);
+    }
+
+    return ( 
         <div>
             <AddEnemyToFloorModal
                 floor={editingFloor}
                 show={showAddEnemyModal}
                 allEmoji={allEmoji}
                 allEnemies={enemies}
-                onClose={() => setShowAddEnemyModal(false)}
+                onClose={handleCloseEditFloorModalAction}
             />
             <section className="mb-4">
                 {towerGame._tower._floors

src/pages/GameEditorPage.tsx

@@ -223,7 +223,6 @@ const GameEditorPage = function GameEditorPage({ editMode }: IProps) {
           <div className={`flex  mt-4 ${!editMode && 'hidden'}`}>
             <section className="flex flex-col">
               <strong>Client Secret</strong>
-              {/* <span className="text-xs">{currentGameType?.clientSecret}</span> */}
               <div className="flex gap-1">
                 <span className="text-xs">{currentGameType?.clientSecret} </span>
                 <span className={`cursor-pointer w-4`} onClick={() => handleCopyBtnClickClientSecret(currentGameType?.clientSecret)}>{hasCopiedClientSecret ? <AiOutlineCheck color="green"/> : <AiOutlineCopy/>}</span>

src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx

@@ -1,12 +1,14 @@
-import { useState } from "react";
+import { groupBy } from "lodash";
+import { useEffect, useState } from "react";
+import { AiOutlineDelete } from "react-icons/ai";
 import { updateFloor } from "../../api/admin";
 import { emojiToImageTag } from "../../helpers/emojiHelper";
 import Button from "../Button";
 import Modal from "../Modal";
 
 interface IProps {
     show: boolean;
-    onClose: () => void;
+    onClose: (reload:boolean) => void;
     floor: ITowerFloor | null;
     allEnemies: IEnemy[];
     allEmoji: IAllEmoji;
@@ -21,20 +23,18 @@ const AddEnemyToFloorModal = ({
 }: IProps) => {
     const [floorEnemies, setFloorEnemies] = useState<IEnemy[]>([]);
 
-    if (!floor) {
-        return null;
-    }
-
-    const handleOnSaveButtonClick = () => {
-        const floorId = floor.id;
+    const handleOnSaveButtonClick = async () => {
+        const floorId = floor?.id;
         const enemyIds = floorEnemies.map((enemy) => enemy.id) as number[];
 
         if (!floorId || !enemyIds) {
             return;
         }
-        updateFloor(floorId, {
+        await updateFloor(floorId, {
             enemyIds,
         });
+        onClose(true);
+        setFloorEnemies([]);
     };
 
     const handleOnAddEnemyClick =
@@ -51,24 +51,42 @@ const AddEnemyToFloorModal = ({
             setFloorEnemies(newFloorEnemiesArray);
         };
 
+    const handleCloseModal = () => {
+        onClose(false);
+        setFloorEnemies([]);
+    }
+
+    useEffect(() => {
+        if(floor?._floorEnemies) {
+            const floorEnemies = floor._floorEnemies?.map(
+                (floorEnemy) => floorEnemy._enemy
+            );
+            setFloorEnemies(floorEnemies);
+
+        }
+    }, [floor?._floorEnemies]);
+
+    const groupedByEnemies = groupBy(floorEnemies, "name");
+
     return (
         <section>
-            <Modal show={show} onClose={onClose}>
+            <Modal show={show} onClose={handleCloseModal}>
                 <h2 className="text-xteamaccent font-extrabold italic text-xl">
-                    Add Enemy to Floor {floor.number}
+                    Edit Enemies on Floor {floor?.number}
                 </h2>
 
                 <div className="flex space-between w-full mt-4">
                     <div className="w-full h-96 bg-xteamaccent">
                         <p className="text-xl text-white text-center mb-4 uppercase">
                             All enemies
                         </p>
-                        <div className="grid grid-cols-4 gap-3">
+                        <div className="grid grid-cols-4 h-80 pl-10 pt-2">
                             {allEnemies.map((enemy) => {
                                 return (
                                     <span
                                         className="cursor-pointer"
                                         onClick={handleOnAddEnemyClick(enemy)}
+                                        key={enemy.id}
                                     >
                                         {emojiToImageTag(
                                             enemy.emoji,
@@ -80,28 +98,27 @@ const AddEnemyToFloorModal = ({
                             })}
                         </div>
                     </div>
-                    <div className="w-full bg-green-500">
+                    <div className="w-full bg-green-500 relative">
                         <p className="text-xl text-white text-center mb-4 uppercase">
                             Floor Enemies
                         </p>
-                        <div className="grid grid-cols-4 gap-3">
-                            {floorEnemies.map((enemy) => {
-                                return (
-                                    <span
-                                        className="cursor-pointer"
-                                        onClick={handleOnRemoveEnemyClick(
-                                            enemy
-                                        )}
-                                    >
-                                        {emojiToImageTag(
-                                            enemy.emoji,
-                                            allEmoji,
-                                            "h-12 w-12"
-                                        )}
-                                    </span>
-                                );
-                            })}
+                        <div className="grid grid-cols-4 pl-10 pt-2">
+                        {Object.keys(groupedByEnemies).map((enemyKey) => (
+                                <span
+                                    className="cursor-pointer h-[76px]"
+                                    onClick={handleOnRemoveEnemyClick(groupedByEnemies[enemyKey][0])}
+                                    key={groupedByEnemies[enemyKey][0].id}
+                                >
+                                    {emojiToImageTag(
+                                        groupedByEnemies[enemyKey][0].emoji,
+                                        allEmoji,
+                                        "h-12 w-12",
+                                        groupedByEnemies[enemyKey].length,
+                                    )}
+                                </span>
+                            ))}
                         </div>
+                        <span className="absolute cursor-pointer bottom-2 left-1/2 hover:text-xteamaccent" onClick={() => setFloorEnemies([])}><AiOutlineDelete /></span>
                     </div>
                 </div>