heroes-of-chess-components 0.6.30 → 0.6.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,193 @@
1
+ var _templateObject;
2
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
3
+ import styled from "styled-components";
4
+ import { HocIconCrown, HocIconPodioRace } from "../../assets/race";
5
+ import useCharacters from "../../hooks/character/useCharacters";
6
+ import useIsMobile from "../../hooks/mobile/useMobile";
7
+ import HBox from "../HBox/type";
8
+ import HCoinLabel from "../HCoinLabel/HCoinLabel";
9
+ import HTitle from "../HTitle/HTitle";
10
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
+ var CharacterImage = styled("img")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 70px;\n border-radius: 50%;\n margin: ", ";\n"])), function (_ref) {
12
+ var margin = _ref.margin;
13
+ return margin || "0";
14
+ });
15
+ var HRaceTable = function HRaceTable(_ref2) {
16
+ var _data$, _data$2, _data$3;
17
+ var data = _ref2.data,
18
+ points = _ref2.points;
19
+ var _useIsMobile = useIsMobile(1050),
20
+ isMobile = _useIsMobile.isMobile;
21
+ var _useCharacters = useCharacters(),
22
+ setCharacterPicture = _useCharacters.setCharacterPicture;
23
+ var knowCoinsAndDiamonds = function knowCoinsAndDiamonds(_ref3) {
24
+ var coins = _ref3.coins,
25
+ diamonds = _ref3.diamonds,
26
+ id = _ref3.id;
27
+ if (!(points !== null && points !== void 0 && points.length) === 0) return;
28
+
29
+ // Ordenar las posiciones por puntos (descendente)
30
+
31
+ var totalPoints = points.reduce(function (acc, point) {
32
+ return acc + point.points;
33
+ }, 0);
34
+ var totalCoinsPoints = totalPoints * 10; // Total de monedas disponibles
35
+
36
+ var totalPlayers = points === null || points === void 0 ? void 0 : points.length; // Cantidad de jugadores
37
+ var totalCoins = 0;
38
+ var totalDiamonds = 0;
39
+
40
+ // Calcular la distribución proporcional de monedas en escalones
41
+ var baseShare = Math.floor(totalCoinsPoints / (totalPlayers * (totalPlayers + 1) / 2));
42
+
43
+ // Asignar monedas según la posición: los jugadores en posiciones más altas reciben más
44
+ var myPosition = points.findIndex(function (point) {
45
+ var _point$idCustomer;
46
+ var pointId = ((_point$idCustomer = point.idCustomer) === null || _point$idCustomer === void 0 ? void 0 : _point$idCustomer._id) || point.idCustomer;
47
+ return (pointId === null || pointId === void 0 ? void 0 : pointId.toString()) === (id === null || id === void 0 ? void 0 : id.toString());
48
+ });
49
+ if (myPosition >= 0) {
50
+ totalCoins = baseShare * (totalPlayers - myPosition);
51
+
52
+ // Calcular diamantes según las monedas
53
+ if (totalCoins >= 200) {
54
+ totalDiamonds = 1 + Math.floor((totalCoins - 200) / 100);
55
+ }
56
+ }
57
+
58
+ // Retornar el resultado según lo solicitado
59
+ if (coins) {
60
+ return totalCoins;
61
+ } else if (diamonds) {
62
+ return totalDiamonds;
63
+ }
64
+ };
65
+ return /*#__PURE__*/_jsxs(HBox, {
66
+ width: "100%",
67
+ direction: isMobile ? "column" : "row",
68
+ justify: "center",
69
+ align: "center",
70
+ children: [/*#__PURE__*/_jsx(HBox, {
71
+ borderRadius: "23px",
72
+ width: "80%",
73
+ direction: "column",
74
+ background: "purpleLight",
75
+ overflowY: "auto",
76
+ justify: "flex-start",
77
+ align: "flex-start",
78
+ padding: "25px 10px 10px 10px",
79
+ margin: "0 20px 10px 0",
80
+ gap: "0",
81
+ children: data === null || data === void 0 ? void 0 : data.map(function (point, index) {
82
+ var _point$idCustomer2, _point$idCustomer3, _point$idCustomer4, _point$points;
83
+ return /*#__PURE__*/_jsxs(HBox, {
84
+ borderRadius: "23px",
85
+ width: "100%",
86
+ padding: "1em 0",
87
+ height: "100%",
88
+ justify: "flex-end",
89
+ align: "flex-start",
90
+ children: [/*#__PURE__*/_jsxs(HBox, {
91
+ width: "10%",
92
+ height: "60px",
93
+ borderRadius: "8px",
94
+ background: index + 1 === 1 ? "shadeGold" : "purpleLight2",
95
+ children: [index === 0 && /*#__PURE__*/_jsx("img", {
96
+ src: HocIconCrown,
97
+ alt: "crown",
98
+ style: {
99
+ left: "50%",
100
+ transform: "translateX(-50%)",
101
+ top: "-30px",
102
+ position: "absolute",
103
+ zIndex: 9999
104
+ }
105
+ }), /*#__PURE__*/_jsx(HTitle, {
106
+ color: "purpleMedium",
107
+ children: index + 1
108
+ })]
109
+ }), /*#__PURE__*/_jsxs(HBox, {
110
+ align: "center",
111
+ background: "purpleLight2",
112
+ borderRadius: "8px",
113
+ width: "88%",
114
+ height: "60px",
115
+ children: [/*#__PURE__*/_jsx(HTitle, {
116
+ padding: "1em",
117
+ text: (_point$idCustomer2 = point.idCustomer) !== null && _point$idCustomer2 !== void 0 && _point$idCustomer2.profileInfo ? "".concat(point.idCustomer.profileInfo.name || "", " ").concat(point.idCustomer.profileInfo.lastName || "").trim() || "Usuario" : "Usuario",
118
+ color: "purpleMedium",
119
+ margin: "0",
120
+ lineHeight: "1.5",
121
+ letterSpacing: "normal",
122
+ fontSize: "16px",
123
+ width: "100%",
124
+ textAlign: "left"
125
+ }), /*#__PURE__*/_jsx(HTitle, {
126
+ padding: "1em",
127
+ text: "Rewards: ",
128
+ color: "purpleMedium",
129
+ textAlign: "center",
130
+ margin: "0",
131
+ lineHeight: "1.5",
132
+ letterSpacing: "normal",
133
+ fontSize: "16px"
134
+ }), /*#__PURE__*/_jsx(HCoinLabel, {
135
+ width: "280px",
136
+ value: knowCoinsAndDiamonds({
137
+ coins: true,
138
+ id: ((_point$idCustomer3 = point.idCustomer) === null || _point$idCustomer3 === void 0 ? void 0 : _point$idCustomer3._id) || point.idCustomer
139
+ })
140
+ }), /*#__PURE__*/_jsx(HCoinLabel, {
141
+ width: "280px",
142
+ value: knowCoinsAndDiamonds({
143
+ diamonds: true,
144
+ id: ((_point$idCustomer4 = point.idCustomer) === null || _point$idCustomer4 === void 0 ? void 0 : _point$idCustomer4._id) || point.idCustomer
145
+ }),
146
+ isCoin: false
147
+ }), /*#__PURE__*/_jsx(HTitle, {
148
+ text: ((_point$points = point === null || point === void 0 ? void 0 : point.points) !== null && _point$points !== void 0 ? _point$points : "0") + " pts",
149
+ color: "purpleMedium",
150
+ textAlign: "center",
151
+ margin: "0",
152
+ width: "30%",
153
+ lineHeight: "1.5",
154
+ letterSpacing: "normal",
155
+ fontSize: "18px"
156
+ })]
157
+ })]
158
+ }, index);
159
+ })
160
+ }), /*#__PURE__*/_jsxs(HBox, {
161
+ width: "40%",
162
+ direction: "column",
163
+ align: "center",
164
+ style: {
165
+ alignSelf: "flex-start",
166
+ marginTop: "50px"
167
+ },
168
+ children: [/*#__PURE__*/_jsxs(HBox, {
169
+ width: "100%",
170
+ justify: "center",
171
+ align: "flex-end",
172
+ direction: "row",
173
+ overflowX: "visible",
174
+ overflowY: "visible",
175
+ children: [/*#__PURE__*/_jsx(CharacterImage, {
176
+ src: setCharacterPicture((_data$ = data[1]) === null || _data$ === void 0 || (_data$ = _data$.idCustomer) === null || _data$ === void 0 ? void 0 : _data$.profileInfo).picture,
177
+ margin: "0 30px -30px 0"
178
+ }), /*#__PURE__*/_jsx(CharacterImage, {
179
+ src: setCharacterPicture((_data$2 = data[0]) === null || _data$2 === void 0 || (_data$2 = _data$2.idCustomer) === null || _data$2 === void 0 ? void 0 : _data$2.profileInfo).picture,
180
+ margin: "0 0 10px 0"
181
+ }), /*#__PURE__*/_jsx(CharacterImage, {
182
+ src: setCharacterPicture((_data$3 = data[2]) === null || _data$3 === void 0 || (_data$3 = _data$3.idCustomer) === null || _data$3 === void 0 ? void 0 : _data$3.profileInfo).picture,
183
+ margin: "0 0 -60px 30px"
184
+ })]
185
+ }), /*#__PURE__*/_jsx("img", {
186
+ src: HocIconPodioRace,
187
+ alt: "racePodio",
188
+ width: 400
189
+ })]
190
+ })]
191
+ });
192
+ };
193
+ export default HRaceTable;
@@ -0,0 +1,257 @@
1
+ import styled from "styled-components";
2
+ import { HocIconCrown, HocIconPodioRace } from "../../assets/race";
3
+ import useCharacters from "../../hooks/character/useCharacters";
4
+ import useIsMobile from "../../hooks/mobile/useMobile";
5
+ import HCoinLabel from "../HCoinLabel/HCoinLabel";
6
+ import HTitle from "../HTitle/HTitle";
7
+ import HBox from "../HBox/HBox";
8
+
9
+ const CharacterImage = styled("img")<{ margin?: string }>`
10
+ width: 70px;
11
+ border-radius: 50%;
12
+ margin: ${({ margin }) => margin || "0"};
13
+ `;
14
+
15
+ interface ProfileInfo {
16
+ name?: string;
17
+ lastName?: string;
18
+ picture?: string;
19
+ }
20
+
21
+ interface CustomerData {
22
+ idCustomer?: {
23
+ _id?: string;
24
+ profileInfo?: ProfileInfo;
25
+ } | string;
26
+ numberOfGames?: number;
27
+ combo?: number;
28
+ points?: number;
29
+ omit?: boolean;
30
+ _id?: string;
31
+ }
32
+
33
+ interface HRaceTableProps {
34
+ data?: CustomerData[];
35
+ points?: CustomerData[];
36
+ }
37
+
38
+ const HRaceTable: React.FC<HRaceTableProps> = ({ data, points }) => {
39
+ const { isMobile } = useIsMobile(1050);
40
+ const { setCharacterPicture } = useCharacters();
41
+
42
+ const knowCoinsAndDiamonds = ({
43
+ coins,
44
+ diamonds,
45
+ id,
46
+ }: {
47
+ coins?: boolean;
48
+ diamonds?: boolean;
49
+ id?: string;
50
+ }): number => {
51
+ if (!points?.length) return 0;
52
+
53
+ const totalPoints = points.reduce(
54
+ (acc, point) => acc + (point.points || 0),
55
+ 0
56
+ );
57
+ const totalCoinsPoints = totalPoints * 10;
58
+ const totalPlayers = points.length;
59
+
60
+ const baseShare = Math.floor(
61
+ totalCoinsPoints / ((totalPlayers * (totalPlayers + 1)) / 2)
62
+ );
63
+
64
+ const myPosition = points.findIndex((point) => {
65
+ const pointId =
66
+ typeof point.idCustomer === "object"
67
+ ? point.idCustomer?._id
68
+ : point.idCustomer;
69
+ return pointId?.toString() === id?.toString();
70
+ });
71
+
72
+ if (myPosition < 0) return 0;
73
+
74
+ const totalCoins = baseShare * (totalPlayers - myPosition);
75
+
76
+ if (diamonds) {
77
+ if (totalCoins >= 200) {
78
+ return 1 + Math.floor((totalCoins - 200) / 100);
79
+ }
80
+ return 0;
81
+ }
82
+
83
+ if (coins) {
84
+ return totalCoins;
85
+ }
86
+
87
+ return 0;
88
+ };
89
+
90
+ const getPlayerName = (point: CustomerData): string => {
91
+ if (typeof point.idCustomer === "object" && point.idCustomer?.profileInfo) {
92
+ const { name = "", lastName = "" } = point.idCustomer.profileInfo;
93
+ return `${name} ${lastName}`.trim() || "Usuario";
94
+ }
95
+ return "Usuario";
96
+ };
97
+
98
+ const getPlayerId = (point: CustomerData): string | undefined => {
99
+ return typeof point.idCustomer === "object"
100
+ ? point.idCustomer?._id
101
+ : point.idCustomer;
102
+ };
103
+
104
+ const getPlayerProfileInfo = (
105
+ point: CustomerData | undefined
106
+ ): ProfileInfo | undefined => {
107
+ if (!point) return undefined;
108
+ return typeof point.idCustomer === "object"
109
+ ? point.idCustomer?.profileInfo
110
+ : undefined;
111
+ };
112
+
113
+ return (
114
+ <HBox
115
+ width="100%"
116
+ direction={isMobile ? "column" : "row"}
117
+ justify="center"
118
+ align="center"
119
+ >
120
+ <HBox
121
+ borderRadius="23px"
122
+ width="80%"
123
+ direction="column"
124
+ background={"purpleLight"}
125
+ overflowY="auto"
126
+ justify="flex-start"
127
+ align="flex-start"
128
+ padding="25px 10px 10px 10px"
129
+ margin="0 20px 10px 0"
130
+ gap="0"
131
+ >
132
+ {data?.map((point, index) => (
133
+ <HBox
134
+ borderRadius="23px"
135
+ key={index}
136
+ width="100%"
137
+ padding="1em 0"
138
+ height="100%"
139
+ justify="flex-end"
140
+ align="flex-start"
141
+ >
142
+ <HBox
143
+ width="10%"
144
+ height="60px"
145
+ borderRadius="8px"
146
+ background={index + 1 === 1 ? "shadeGold" : "purpleLight2"}
147
+ >
148
+ {index === 0 && (
149
+ <img
150
+ src={HocIconCrown}
151
+ alt="crown"
152
+ style={{
153
+ left: "50%",
154
+ transform: "translateX(-50%)",
155
+ top: "-30px",
156
+ position: "absolute",
157
+ zIndex: 9999,
158
+ }}
159
+ />
160
+ )}
161
+ <HTitle color="purpleMedium">{index + 1}</HTitle>
162
+ </HBox>
163
+ <HBox
164
+ align="center"
165
+ background={"purpleLight2"}
166
+ borderRadius="8px"
167
+ width="88%"
168
+ height="60px"
169
+ >
170
+ <HTitle
171
+ padding={"1em"}
172
+ text={getPlayerName(point)}
173
+ color={"purpleMedium"}
174
+ margin="0"
175
+ lineHeight="1.5"
176
+ letterSpacing="normal"
177
+ fontSize={"16px"}
178
+ width={"100%"}
179
+ textAlign={"left"}
180
+ />
181
+ <HTitle
182
+ padding={"1em"}
183
+ text={"Rewards: "}
184
+ color={"purpleMedium"}
185
+ textAlign="center"
186
+ margin="0"
187
+ lineHeight="1.5"
188
+ letterSpacing="normal"
189
+ fontSize={"16px"}
190
+ />
191
+ <HCoinLabel
192
+ width={"280px"}
193
+ value={knowCoinsAndDiamonds({
194
+ coins: true,
195
+ id: getPlayerId(point),
196
+ })}
197
+ />
198
+ <HCoinLabel
199
+ width={"280px"}
200
+ value={knowCoinsAndDiamonds({
201
+ diamonds: true,
202
+ id: getPlayerId(point),
203
+ })}
204
+ isCoin={false}
205
+ />
206
+ <HTitle
207
+ text={(point?.points ?? 0) + " pts"}
208
+ color={"purpleMedium"}
209
+ textAlign="center"
210
+ margin="0"
211
+ width={"30%"}
212
+ lineHeight="1.5"
213
+ letterSpacing="normal"
214
+ fontSize={"18px"}
215
+ />
216
+ </HBox>
217
+ </HBox>
218
+ ))}
219
+ </HBox>
220
+ {/* PODIO */}
221
+ <HBox
222
+ width="40%"
223
+ direction="column"
224
+ align="center"
225
+ style={{
226
+ alignSelf: "flex-start",
227
+ marginTop: "50px",
228
+ }}
229
+ >
230
+ <HBox
231
+ width="100%"
232
+ justify="center"
233
+ align="flex-end"
234
+ direction="row"
235
+ overflowX="visible"
236
+ overflowY="visible"
237
+ >
238
+ <CharacterImage
239
+ src={setCharacterPicture(getPlayerProfileInfo(data?.[1]) || {}).picture}
240
+ margin="0 30px -30px 0"
241
+ />
242
+ <CharacterImage
243
+ src={setCharacterPicture(getPlayerProfileInfo(data?.[0]) || {}).picture}
244
+ margin="0 0 10px 0"
245
+ />
246
+ <CharacterImage
247
+ src={setCharacterPicture(getPlayerProfileInfo(data?.[2]) || {}).picture}
248
+ margin="0 0 -60px 30px"
249
+ />
250
+ </HBox>
251
+ <img src={HocIconPodioRace} alt="racePodio" width={400} />
252
+ </HBox>
253
+ </HBox>
254
+ );
255
+ };
256
+
257
+ export default HRaceTable;
@@ -41,4 +41,5 @@ import { HNews } from "./HNews/HNews";
41
41
  import { HNewsItem } from "./HNewsItem/HNewsItem";
42
42
  import { ErrorBoundary, ErrorScreen, ErrorTester } from "./HErrorBoundary";
43
43
  import HTrafficLight from "./HTrafficLight/HTrafficLight.tsx";
44
- export { HBackground, HBlackBack, HBox, HButton, HCalendar, HCalendarStyled, HDropdown, HInput, HRadio, HSearchInput, HTitle, HTabs, HCoinLabel, HCardLayout, HModal, HModalSecurityCode, HPopUpContainer, HPopUp, HCircularButton, HCircularTextButton, HToggleButton, HLoaderSpinner, HLogin, HPagination, HText, HInputArea, HVideoPlayerReact, HAccordion, HSlider, ClientMyReservationsComponent, ClientCalendarComponent, HModalData, HScoreBar, HProgressBar, HLevelUpAnimation, HToggleButtonCustom, HInitBackgroundAnimation, HTable, HNews, HNewsItem, HTrafficLight, ErrorBoundary, ErrorScreen, ErrorTester };
44
+ import HRaceTable from "./HRaceTable/HRaceTable.tsx";
45
+ export { HBackground, HBlackBack, HBox, HButton, HCalendar, HCalendarStyled, HDropdown, HInput, HRadio, HSearchInput, HTitle, HTabs, HCoinLabel, HCardLayout, HModal, HModalSecurityCode, HPopUpContainer, HPopUp, HCircularButton, HCircularTextButton, HToggleButton, HLoaderSpinner, HLogin, HPagination, HText, HInputArea, HVideoPlayerReact, HAccordion, HSlider, ClientMyReservationsComponent, ClientCalendarComponent, HModalData, HScoreBar, HProgressBar, HLevelUpAnimation, HToggleButtonCustom, HInitBackgroundAnimation, HTable, HNews, HNewsItem, HTrafficLight, HRaceTable, ErrorBoundary, ErrorScreen, ErrorTester };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "heroes-of-chess-components",
3
- "version": "0.6.30",
3
+ "version": "0.6.32",
4
4
  "description": "Reusable React Components for Heroes of Chess Apps",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",