Skip to content

Commit 2e939a5

Browse files
ccmoralesjccmoralesj
authored
Merge pull request #14 from x-team/feature/XTG-291
[XTG-291] Floors Page - Design Improvements
2 parents 99c5906 + 914979d commit 2e939a5

File tree

4 files changed

+80
-47
lines changed

4 files changed

+80
-47
lines changed

‎src/helpers/emojiHelper.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,17 @@ export const emojiToImageSrc = (emoji: string, allEmoji: IAllEmoji) => {
6464
export const emojiToImageTag = (
6565
emoji: string,
6666
allEmoji: IAllEmoji,
67-
className?: string
67+
className?: string,
68+
qty?: number,
6869
) => {
6970
return (
70-
<img
71-
className={`inline ${className || `h-6 w-6`}`}
72-
src={emojiToImageSrc(emoji, allEmoji)}
73-
alt={emoji + " emoji"}
74-
/>
71+
<div className="flex flex-col text-center w-14">
72+
<img
73+
className={`${className || `h-6 w-6`}`}
74+
src={emojiToImageSrc(emoji, allEmoji)}
75+
alt={emoji + " emoji"}
76+
/>
77+
{qty && <span className="text-sm">x{qty}</span>}
78+
</div>
7579
);
7680
};

‎src/pages/FloorsEditorPage.tsx

+23-10
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,30 @@ import PanelBox from "../ui/PanelBox";
1414
const FloorsEditorPage = () => {
1515
const [allEmoji, setAllEmoji] = useState<IAllEmoji>({});
1616
const [, setIsLoading] = useState(false);
17+
const [shouldReload, setShouldReload] = useState(true);
1718
const [towerGame, setTowerGame] = useState<IGameWithTower | null>(null);
1819
const [enemies, setEnemies] = useState<IEnemy[]>([]);
1920

2021
useEffect(() => {
2122
const fetchTowerAndEnemiesData = async () => {
2223
setIsLoading(true);
24+
if(!shouldReload) {
25+
return;
26+
}
2327
const [enemies, game, allEmoji] = await Promise.all([
2428
getEnemies(),
2529
getCurrentTowerGameStatus(),
2630
getAllEmoji(),
2731
]);
28-
32+
setShouldReload(false);
2933
setEnemies(enemies);
3034
setTowerGame(game);
3135
setAllEmoji(allEmoji);
3236
setIsLoading(false);
3337
};
3438

3539
fetchTowerAndEnemiesData();
36-
}, [setTowerGame, setEnemies]);
40+
}, [setTowerGame, setEnemies, shouldReload]);
3741

3842
if (!towerGame) {
3943
return (
@@ -69,6 +73,7 @@ const FloorsEditorPage = () => {
6973
allEmoji={allEmoji}
7074
enemies={enemies}
7175
towerGame={towerGame}
76+
setShouldReload={setShouldReload}
7277
/>
7378
</section>
7479
);
@@ -78,9 +83,10 @@ interface IFloorEditorProps {
7883
enemies: IEnemy[];
7984
towerGame: IGameWithTower;
8085
allEmoji: IAllEmoji;
86+
setShouldReload: (reload: boolean) => void;
8187
}
8288

83-
const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
89+
const FloorsEditor = ({ enemies, towerGame, allEmoji, setShouldReload }: IFloorEditorProps) => {
8490
const [showAddEnemyModal, setShowAddEnemyModal] = useState(false);
8591
const [editingFloor, setEditingFloor] = useState<ITowerFloor | null>(null);
8692

@@ -105,18 +111,19 @@ const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
105111

106112
<div>
107113
<Button onClick={handleOpenEditFloorModal(floor)}>
108-
+
114+
Edit
109115
</Button>
110116
</div>
111117
</div>
112118

113-
<div className="mt-4">
119+
<div className="mt-4 grid grid-cols-4 gap-2">
114120
{Object.keys(groupedByEnemies).map((enemyKey) => (
115-
<div>
116-
{groupedByEnemies[enemyKey].length}x{" "}
121+
<div key={enemyKey} className="w-14 border-red-600">
117122
{emojiToImageTag(
118123
groupedByEnemies[enemyKey][0].emoji,
119-
allEmoji
124+
allEmoji,
125+
"h-12 w-12",
126+
groupedByEnemies[enemyKey].length,
120127
)}
121128
</div>
122129
))}
@@ -125,14 +132,20 @@ const FloorsEditor = ({ enemies, towerGame, allEmoji }: IFloorEditorProps) => {
125132
);
126133
};
127134

128-
return (
135+
136+
const handleCloseEditFloorModalAction = (reload: boolean) => {
137+
setShowAddEnemyModal(false);
138+
setShouldReload(reload);
139+
}
140+
141+
return (
129142
<div>
130143
<AddEnemyToFloorModal
131144
floor={editingFloor}
132145
show={showAddEnemyModal}
133146
allEmoji={allEmoji}
134147
allEnemies={enemies}
135-
onClose={() => setShowAddEnemyModal(false)}
148+
onClose={handleCloseEditFloorModalAction}
136149
/>
137150
<section className="mb-4">
138151
{towerGame._tower._floors

‎src/pages/GameEditorPage.tsx

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

‎src/ui/AddEnemyToFloorModal/AddEnemyToFloorModal.tsx

+47-30
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { useState } from "react";
1+
import { groupBy } from "lodash";
2+
import { useEffect, useState } from "react";
3+
import { AiOutlineDelete } from "react-icons/ai";
24
import { updateFloor } from "../../api/admin";
35
import { emojiToImageTag } from "../../helpers/emojiHelper";
46
import Button from "../Button";
57
import Modal from "../Modal";
68

79
interface IProps {
810
show: boolean;
9-
onClose: () => void;
11+
onClose: (reload:boolean) => void;
1012
floor: ITowerFloor | null;
1113
allEnemies: IEnemy[];
1214
allEmoji: IAllEmoji;
@@ -21,20 +23,18 @@ const AddEnemyToFloorModal = ({
2123
}: IProps) => {
2224
const [floorEnemies, setFloorEnemies] = useState<IEnemy[]>([]);
2325

24-
if (!floor) {
25-
return null;
26-
}
27-
28-
const handleOnSaveButtonClick = () => {
29-
const floorId = floor.id;
26+
const handleOnSaveButtonClick = async () => {
27+
const floorId = floor?.id;
3028
const enemyIds = floorEnemies.map((enemy) => enemy.id) as number[];
3129

3230
if (!floorId || !enemyIds) {
3331
return;
3432
}
35-
updateFloor(floorId, {
33+
await updateFloor(floorId, {
3634
enemyIds,
3735
});
36+
onClose(true);
37+
setFloorEnemies([]);
3838
};
3939

4040
const handleOnAddEnemyClick =
@@ -51,24 +51,42 @@ const AddEnemyToFloorModal = ({
5151
setFloorEnemies(newFloorEnemiesArray);
5252
};
5353

54+
const handleCloseModal = () => {
55+
onClose(false);
56+
setFloorEnemies([]);
57+
}
58+
59+
useEffect(() => {
60+
if(floor?._floorEnemies) {
61+
const floorEnemies = floor._floorEnemies?.map(
62+
(floorEnemy) => floorEnemy._enemy
63+
);
64+
setFloorEnemies(floorEnemies);
65+
66+
}
67+
}, [floor?._floorEnemies]);
68+
69+
const groupedByEnemies = groupBy(floorEnemies, "name");
70+
5471
return (
5572
<section>
56-
<Modal show={show} onClose={onClose}>
73+
<Modal show={show} onClose={handleCloseModal}>
5774
<h2 className="text-xteamaccent font-extrabold italic text-xl">
58-
Add Enemy to Floor {floor.number}
75+
Edit Enemies on Floor {floor?.number}
5976
</h2>
6077

6178
<div className="flex space-between w-full mt-4">
6279
<div className="w-full h-96 bg-xteamaccent">
6380
<p className="text-xl text-white text-center mb-4 uppercase">
6481
All enemies
6582
</p>
66-
<div className="grid grid-cols-4 gap-3">
83+
<div className="grid grid-cols-4 h-80 pl-10 pt-2">
6784
{allEnemies.map((enemy) => {
6885
return (
6986
<span
7087
className="cursor-pointer"
7188
onClick={handleOnAddEnemyClick(enemy)}
89+
key={enemy.id}
7290
>
7391
{emojiToImageTag(
7492
enemy.emoji,
@@ -80,28 +98,27 @@ const AddEnemyToFloorModal = ({
8098
})}
8199
</div>
82100
</div>
83-
<div className="w-full bg-green-500">
101+
<div className="w-full bg-green-500 relative">
84102
<p className="text-xl text-white text-center mb-4 uppercase">
85103
Floor Enemies
86104
</p>
87-
<div className="grid grid-cols-4 gap-3">
88-
{floorEnemies.map((enemy) => {
89-
return (
90-
<span
91-
className="cursor-pointer"
92-
onClick={handleOnRemoveEnemyClick(
93-
enemy
94-
)}
95-
>
96-
{emojiToImageTag(
97-
enemy.emoji,
98-
allEmoji,
99-
"h-12 w-12"
100-
)}
101-
</span>
102-
);
103-
})}
105+
<div className="grid grid-cols-4 pl-10 pt-2">
106+
{Object.keys(groupedByEnemies).map((enemyKey) => (
107+
<span
108+
className="cursor-pointer h-[76px]"
109+
onClick={handleOnRemoveEnemyClick(groupedByEnemies[enemyKey][0])}
110+
key={groupedByEnemies[enemyKey][0].id}
111+
>
112+
{emojiToImageTag(
113+
groupedByEnemies[enemyKey][0].emoji,
114+
allEmoji,
115+
"h-12 w-12",
116+
groupedByEnemies[enemyKey].length,
117+
)}
118+
</span>
119+
))}
104120
</div>
121+
<span className="absolute cursor-pointer bottom-2 left-1/2 hover:text-xteamaccent" onClick={() => setFloorEnemies([])}><AiOutlineDelete /></span>
105122
</div>
106123
</div>
107124

0 commit comments

Comments
 (0)