59 |
60 |
62 |
63 |
22 |
24 | );
25 | }
26 | );
27 |
28 | BackImg.displayName = "BackImg";
29 |
30 | export { BackImg };
31 |
--------------------------------------------------------------------------------
/src/components/custom/backImgCommon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface BackImgCommonProps
5 | extends React.HtmlHTMLAttributes{children}
23 |
20 | {/* Gradient Border */}
21 |
28 |
29 | {/* Inner Background */}
30 |
43 | );
44 | }
45 | );
46 |
47 | BackImgCommon.displayName = "BackImgCommon";
48 |
49 | export { BackImgCommon };
50 |
--------------------------------------------------------------------------------
/src/components/custom/backImgShop.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface BackImgShopProps
5 | extends React.HtmlHTMLAttributes
40 | {children}
41 |
42 |
20 | {/* Gradient Border */}
21 |
24 |
25 | {/* Inner Background */}
26 |
36 | );
37 | }
38 | );
39 |
40 | BackImgShop.displayName = "BackImgt";
41 |
42 | export { BackImgShop };
43 |
--------------------------------------------------------------------------------
/src/components/custom/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface ButtonProps
5 | extends React.ButtonHTMLAttributes
33 | {children}
34 |
35 |
21 |
30 |
39 |
40 | );
41 | }
42 | );
43 |
44 | CatBtn.displayName = "CatBtn";
45 |
46 | export { CatBtn };
47 |
--------------------------------------------------------------------------------
/src/components/custom/claimModal.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { Image } from "./image";
4 | import { Fire, Foot, Feather_down, Feather_up } from "@/assets/imgs";
5 | import axios from "axios";
6 |
7 | interface IsOpenType {
8 | win: boolean;
9 | lose: boolean;
10 | }
11 | export interface ClaimModalProps extends React.HTMLAttributes
47 |
100 | );
101 | }
102 | );
103 |
104 | ClaimModal.displayName = "ClaimModal";
105 |
106 | export { ClaimModal };
107 |
--------------------------------------------------------------------------------
/src/components/custom/drawer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils"; // Make sure this utility is correctly implemented
3 | import { Cancel_btn, Feather_up, Feather_down } from "@/assets/imgs";
4 | import { Image } from "./image";
5 |
6 | export interface DrawerProps extends React.HTMLAttributes
48 |
49 |
99 |
50 |
98 |
51 |
63 | 57 | {isOpen.win ? "Congratulations" : "Game Over"} 58 |
59 |60 | {isOpen.win ? "You win the game" : "You loose the game"} 61 |
62 |
64 |
97 |
65 |
78 | 66 | You reward: 67 |
68 | {isOpen.win ? ( 69 |70 | 5 TON 71 |
72 | ) : ( 73 |74 | 1000 $King 75 |
76 | )} 77 |
79 |
85 |
96 |
42 |
43 |
46 |
84 | );
85 | }
86 | );
87 |
88 | Drawer.displayName = "Drawer";
89 |
90 | export { Drawer };
91 |
--------------------------------------------------------------------------------
/src/components/custom/image.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cn } from "@/lib/utils";
3 |
4 | export interface ImageProps extends React.ImgHTMLAttributes
47 | 
58 |
83 | 48 | Confirm your purchase 49 |
50 |51 | {title} 52 |
53 |59 | {description} 60 |
61 |62 | Cost: {cost}$King 63 |
64 |
65 |
71 |
82 |
24 |
25 |
29 |
37 | );
38 | }
39 | );
40 |
41 | ShopItem.displayName = "ShopItem";
42 |
43 | export { ShopItem };
44 |
--------------------------------------------------------------------------------
/src/components/items/Booster.tsx:
--------------------------------------------------------------------------------
1 | import bumb from '@/assets/icons/items/bumb.png' // 4%
2 | import health from '@/assets/icons/items/health.png' // 6%
3 | import speedup from '@/assets/icons/items/fire.png' // 15%
4 | import fullhealth from '@/assets/icons/items/fullhealth.png' // 15%
5 | import shield from '@/assets/icons/items/shield.png' // 15%
6 | import slow from '@/assets/icons/items/slow.png' // 15%
7 | import x2 from '@/assets/icons/items/x2.png' // 15%
8 |
9 | const items = [bumb, speedup, fullhealth, health, shield, slow, x2];
10 | const itemScore = [`bomb`, `speedup`, `fullhealth`, `health`, `shield`, `slow`, `x2`];
11 |
12 | const booster = () => {
13 | let type = 0;
14 |
15 | const random_num = Math.random();
16 | if (random_num < 0.04) type = 0; // 4% for bumb
17 | else if (random_num < 0.25) type = 1; // 15% for speedup
18 | else if (random_num < 0.40) type = 2; // 15% for fullhealth
19 | else if (random_num < 0.10) type = 3; // 6% for health
20 | else if (random_num < 0.55) type = 4; // 15% for shield
21 | else if (random_num < 0.70) type = 5; // 15% for slow
22 | else type = 6; // 15% for x2
23 |
24 | return { item: items[type], score: itemScore[type] }
25 | };
26 |
27 | export default booster;
--------------------------------------------------------------------------------
/src/components/items/Coin.tsx:
--------------------------------------------------------------------------------
1 | import BigCoin from '@/assets/icons/items/bcoin.png' // 5% score 10
2 | import SmallCoin from '@/assets/icons/items/scoin.png' // 65% score 1
3 | import Cat from '@/assets/icons/items/cat.png' // 15% score 3
4 | import Dog from '@/assets/icons/items/dog.png' // 15% score 3
5 |
6 | const items = [Cat, Dog, BigCoin, SmallCoin]
7 | const appearanceRates = [15, 15, 5, 65];
8 | const itemScore = [1, 1, 1, 1];
9 |
10 |
11 | const coin = () => {
12 | let type = 0;
13 |
14 | const random = Math.random() * 100
15 | let cumulativeRate = 0
16 | for (let i = 0; i < appearanceRates.length; i++) {
17 | cumulativeRate += appearanceRates[i]
18 | if (random < cumulativeRate) {
19 | type = i;
20 | break
21 | }
22 | }
23 |
24 | return { item: items[type], score: itemScore[type] }
25 | };
26 |
27 | export default coin;
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
26 | {img && }
27 |
28 | {title}
30 | 36 |
24 | {isShowNav && }
25 | {children}
26 |
27 | );
28 | };
29 |
30 | export default AppLayout;
31 |
--------------------------------------------------------------------------------
/src/layouts/nav.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { useNavigate, NavLink, useLocation } from "react-router-dom";
3 | import { GoHome } from "react-icons/go";
4 | import { RxDashboard } from "react-icons/rx";
5 | import { BiBasket } from "react-icons/bi";
6 | import { FaUserPlus, FaAward } from "react-icons/fa";
7 | import { IoMdCheckbox } from "react-icons/io";
8 | import {
9 | HomeFullIcon,
10 | HomeIcon,
11 | QuestsFullIcon,
12 | QuestsIcon,
13 | MenuFullIcon,
14 | MenuIcon,
15 | ShopFullIcon,
16 | ShopIcon,
17 | FriendFullIcon,
18 | FriendIcon,
19 | LeadersFullIcon,
20 | LeadersIcon,
21 | } from "@/assets/icons";
22 | import { Image } from "@/components/custom/image";
23 | interface NavProps {
24 | isAdmin?: boolean;
25 | }
26 |
27 | const Nav = ({ isAdmin }: NavProps) => {
28 | const navigate = useNavigate();
29 | const navigation = useLocation();
30 | const pathName = navigation.pathname;
31 |
32 | const gotoHome = useCallback(() => {
33 | navigate("/overview");
34 | }, [navigate]);
35 |
36 | const gotoAllCourses = useCallback(() => {
37 | navigate("/all-courses");
38 | }, [navigate]);
39 |
40 | return (
41 | <>
42 | {/* {isAdmin && ( */}
43 |
44 |
161 |
162 | );
163 | };
164 |
165 | export default Nav;
166 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
8 | export const calculateDateDifference = (d1: string | null, d2: string) => {
9 | if (!d1) return 1;
10 | const date1 = new Date(d1);
11 | const date2 = new Date(d2);
12 | return Math.floor(Math.abs((date1.setHours(0, 0, 0, 0) - date2.setHours(0, 0, 0, 0)) / (1000 * 3600 * 36)));
13 | };
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/Card.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import { useNavigate } from "react-router";
3 | import { Image } from "@/components/custom/image";
4 | import { Button } from "@/components/custom/button";
5 | import { BackImg } from "@/components/custom/backImg";
6 | import { FootPrint } from "@/assets/imgs";
7 | import { IoIosArrowBack, IoIosShareAlt } from "react-icons/io";
8 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
9 | import axios from "axios";
10 |
11 | const Card = () => {
12 | const navigate = useNavigate();
13 | const [index, setIndex] = useState
45 | {/* Main */}
46 |
47 |
63 |
64 | {/* Quests */}
65 |
66 |
83 |
84 | {/* Cards */}
85 |
86 |
101 |
102 | {/* Shop */}
103 |
104 |
119 |
120 | {/* Friends */}
121 |
122 |
139 |
140 | {/* Leaders */}
141 |
142 |
159 |
160 |
48 | {/*
62 |
67 |
82 |
87 |
100 |
105 |
118 |
123 |
138 |
143 |
158 |
90 |
91 |
220 | );
221 | };
222 |
223 | export default Card;
224 |
--------------------------------------------------------------------------------
/src/pages/Claim.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { Image } from "@/components/custom/image";
4 | import { ImgKinglion, Feather_down, Feather_up } from "@/assets/imgs";
5 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
6 | import axios from "axios";
7 |
8 | const Claim = () => {
9 | const navigate = useNavigate();
10 | const currentUser = useContext
92 |
206 |
207 | {/* Footprint Background Effect */}
208 |
212 | {/* Top Gradient Overlay */}
213 |
214 | {/* Bottom Gradient Overlay */}
215 |
216 |
217 | {/* Bottom Gradient-1 Overlay */}
218 |
219 |
93 |
121 |
198 |
199 |
205 |
94 |
102 |
109 | {displayName}
108 |
110 |
117 |
111 |
116 |
112 | Play the game, earn points, get
characters and become
113 | the coolest
player in King Leon!
114 |
122 |
197 |
123 |
156 |
124 |
130 | 131 | Skin Name 132 |
133 |134 | Description 135 |
136 | {index !== null && index === selectSkin ? ( 137 | 140 | ) : ( 141 | 154 | )} 155 |
157 |
196 |
158 | {totalSkins.map((item, idx) =>
159 | index === idx ? (
160 |
195 |
166 |
167 |
173 |
174 | ) : (
175 |
181 |
192 | )
193 | )}
194 | setIndex(idx)}
184 | >
185 |
191 |
46 |
86 | );
87 | };
88 | export default Claim;
89 |
--------------------------------------------------------------------------------
/src/pages/Friends.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import { BackImg } from "@/components/custom/backImg";
3 | import { BackImgCommon } from "@/components/custom/backImgCommon";
4 | import { Button } from "@/components/custom/button";
5 | import { Image } from "@/components/custom/image";
6 | import { StarIcon, UserBgIcon, Small_footprint } from "@/assets/imgs";
7 | import { FaCheck } from "react-icons/fa6";
8 | import { IoCopy } from "react-icons/io5";
9 | import { IoIosShareAlt } from "react-icons/io";
10 | import axios from "axios";
11 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
12 |
13 | interface Friend {
14 | avatar: string;
15 | username: string;
16 | ispremiumuser: string;
17 | score: string;
18 | }
19 |
20 | const botUrl = "https://t.me/tmakingliontestbot?start=";
21 |
22 | const Friends = () => {
23 | const [friends, setFriends] = useState
47 |
85 |
48 |
53 |
54 | 49 | Daily check-in 50 |
51 |Day {days}
52 |
55 |
56 |
60 |
57 |
59 |
61 |
84 | 62 | You got: 63 |
64 |200 $King
65 |
66 |
72 |
83 | {error}
; 69 | 70 | return ( 71 |
72 | {/* Main Content */}
73 |
232 | );
233 | };
234 |
235 | export default Friends;
236 |
--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useRef } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { Image } from "@/components/custom/image";
4 | import { FootPrint } from "@/assets/imgs";
5 | import { VectorLeftIcon, VectorRightIcon } from "@/assets/icons";
6 | import { TelegramContext } from "../contexts/TelegramContext";
7 |
8 | const Home = () => {
9 | const navigate = useNavigate();
10 | const playRef = useRef
74 | {/* Referral Program Section */}
75 |
220 | {/* Top Effect Overlay*/}
221 |
222 |
223 | {/* Bottom Effect Overlay */}
224 |
225 |
226 | {/* Bottom Effect2 Overlay*/}
227 |
228 |
229 | {/* Circle Blur Overlay */}
230 | {/* */}
231 |
76 |
172 | 77 | Referral Program 78 |
79 |80 | Invite your friends and earn points 81 |
82 |
83 |
133 | {/* Telegram Link */}
134 |
84 |
107 |
85 |
99 |
100 | {/* Decorative Image */}
101 |
91 |
98 | 92 | Common User 93 |
94 |95 | +1000 96 |
97 |
108 | {/* User Info */}
109 |
132 |
110 |
124 |
125 | {/* Decorative Image */}
126 |
116 |
123 | 117 | Premium User 118 |
119 |120 | +5000 121 |
122 |
135 |
165 |
171 |
136 |
137 |
164 |
138 |
163 |
139 |
162 |
140 |
149 | {copy ? (
150 |
153 | ) : (
154 |
160 | )}
161 |
141 |
148 | 142 | Your link 143 |
144 |145 | {hiddenUrl} 146 |
147 |
173 |
219 | 174 | Your friends ({friends.length}) 175 |
176 |
177 |
218 |
178 | {friends.length === 0 ? (
179 |
180 |
186 | ) : (
187 | friends?.map((data, index) => (
188 |
189 |
214 | ))
215 | )}
216 |
217 |
181 |
185 | 182 | No friends yet... 183 |
184 |
190 | {/* User Info */}
191 |
213 |
192 |
206 |
198 |
205 | {data.username}
199 |200 | {data.ispremiumuser 201 | ? "Premium User" 202 | : "Common User"} 203 |
204 |
207 |
212 | 208 | Your reward 209 |
210 |{data.score}
211 |
32 | {/* Header */}
33 |
100 | );
101 | };
102 |
103 | export default Home;
104 |
--------------------------------------------------------------------------------
/src/pages/Leaderboard.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import axios from "axios";
3 | import { BackImgCommon } from "@/components/custom/backImgCommon";
4 | import { Image } from "@/components/custom/image";
5 | import { FootPrint, Small_footprint } from "@/assets/imgs";
6 | import { GoldIcon, SilverIcon, BronzeIcon } from "@/assets/icons";
7 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
8 |
9 | interface User {
10 | username: string;
11 | point?: number;
12 | avatar: string;
13 | score?: number;
14 | ranking?: number;
15 | }
16 |
17 | const Leaderboard = () => {
18 | const [users, setUsers] = useState
34 |
43 |
44 | {/* Main Content */}
45 |
35 |
38 | {displayName}
37 |
39 |
42 | Общая прибыль
40 |1000 $King
41 |
46 | {/* Background and blur elements */}
47 |
48 |
49 |
50 |
51 | {/* Main Effect */}
52 |
99 |
53 |
57 |
58 | {/* Down Gradient */}
59 |
60 |
61 | {/* Content with text */}
62 |
54 |
55 |
56 |
63 |
98 | 64 | Tap to play 65 |
66 |
67 |
68 |
72 |
73 |
74 | {/* Overlay with Footprint and Icons */}
75 |
83 |
97 |
84 | {/* Left Icons */}
85 |
96 |
86 |
89 |
90 | {/* Right Icons */}
91 |
92 |
95 | {error}
; 51 | console.log(users); 52 | return ( 53 |
54 | {/* Main Content */}
55 |
157 | );
158 | };
159 |
160 | export default Leaderboard;
161 |
--------------------------------------------------------------------------------
/src/pages/Play.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { Image } from "@/components/custom/image";
3 | import { Button } from "@/components/custom/button";
4 | import { ClaimModal } from "@/components/custom/claimModal";
5 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
6 | import axios from "axios";
7 |
8 | import {
9 | VectorLeftIcon,
10 | VectorRightIcon,
11 | HeartEmptyIcon,
12 | HeartIcon,
13 | } from "@/assets/icons";
14 |
15 | import { FootPrint, Boxlion_left, Boxlion_right } from "@/assets/imgs";
16 | // import coin from "@/components/items/Coin";
17 | // import booster from "@/components/items/Booster";
18 |
19 | import bumb from "@/assets/icons/items/bumb.png"; // 4%
20 | import healthIcon from "@/assets/icons/items/health.png"; // 6%
21 | import speedup from "@/assets/icons/items/fire.png"; // 15%
22 | import fullhealth from "@/assets/icons/items/fullhealth.png"; // 15%
23 | import shield from "@/assets/icons/items/shield.png"; // 15%
24 | import slow from "@/assets/icons/items/slow.png"; // 15%
25 | import x2 from "@/assets/icons/items/x2.png"; // 15%
26 |
27 | import BigCoin from "@/assets/icons/items/bcoin.png"; // 5% score 10
28 | import SmallCoin from "@/assets/icons/items/scoin.png"; // 65% score 1
29 | import Cat from "@/assets/icons/items/cat.png"; // 15% score 3
30 | import Dog from "@/assets/icons/items/dog.png"; // 15% score 3
31 |
32 | const firstCoin = `data:image/png;base64,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`;
33 |
34 | const Play = () => {
35 | const currentUser = useContext
56 | {/* Leaderboard Section */}
57 |
138 |
139 | {/* Footprint Background Effect */}
140 |
144 |
145 | {/* Long Blur Overlay */}
146 |
147 |
148 | {/* Bottom Effect Overlay */}
149 |
150 |
151 | {/* Bottom Gradient Overlay */}
152 |
153 |
154 | {/* Circle Blur Overlay */}
155 |
156 |
58 |
94 | 59 | Leaderboard 60 |
61 |
62 | {/* Blurred Background Effect */}
63 |
64 |
65 | {/* User Card */}
66 |
93 |
67 | {/* User Info */}
68 |
92 |
69 |
81 |
75 |
80 | {displayName}
76 |77 | {userRank ? `${userRank.point} points` : "000 points"} 78 |
79 |82 | #{userRank?.ranking} 83 |
84 | 85 | {/* Decorative Image */} 86 |
95 |
137 | 96 | {totalUsers} holders 97 |
98 |
99 |
136 |
100 | {users.map((data, index) => (
101 |
106 |
133 | ))}
134 |
135 |
107 |
121 | {index === 0 ? (
122 |
131 |
132 |
108 |
120 |
114 |
119 | {data.username}
115 |116 | {data.point} points 117 |
118 |
121 | {index === 0 ? (
122 |
131 |
461 | 
462 |
463 | );
464 |
465 | const generateCoins = () => {
466 | if (generateMulti === generateSpeed) return;
467 | generateMulti = generateSpeed;
468 |
469 | const interval = setTimeout(() => {
470 | setTime((pre) => pre + 1);
471 | setGenerateSpeed((prev) => prev - 5);
472 | }, generateSpeed);
473 |
474 | const choose = Math.random();
475 | const id = Date.now().toString();
476 | const coins = coin();
477 | const boosterCoins = booster();
478 | const bomb = bombCoin();
479 | setCoinCounter(coinCounter + 1);
480 |
481 | if (coinCounter !== 0 && coinCounter % 50 === 0)
482 | setCurrentShowItems((prev) => prev + 1);
483 | if (coinCounter !== 0 && coinCounter % 10 === 0) {
484 | if (bombChance < 0.3) {
485 | setBombChance(bombChance + 0.02);
486 | }
487 | if (boosterChance > 0.02) setBoosterChance(boosterChance - 0.02);
488 | if (speed > 200) setSpeed(speed - 10);
489 | }
490 |
491 | console.log(
492 | `choose -----------------------------------------------------------------------------------------${choose}`
493 | );
494 | console.log(
495 | `speed ------------------------------------------------------------------------------------------${speed}`
496 | );
497 | console.log(
498 | `bombChance -------------------------------------------------------------------------------------${bombChance}`
499 | );
500 | console.log(
501 | `boosterChance ----------------------------------------------------------------------------------${boosterChance}`
502 | );
503 |
504 | if (choose < bombChance) {
505 | const tem = (
506 |
507 | 
512 |
513 | );
514 | setBombTime(1);
515 | setItem(tem);
516 | setScore(bomb.score);
517 | setUrl(bomb.item);
518 | } else if (choose < boosterChance + bombChance) {
519 | const tem = (
520 |
521 | 
526 |
527 | );
528 | setItem(tem);
529 | setScore(boosterCoins.score);
530 | setUrl(boosterCoins.item);
531 | } else {
532 | const tem = (
533 |
534 | 
539 |
540 | );
541 | setItem(tem);
542 | setScore(coins.score);
543 | setUrl(coins.item);
544 | }
545 |
546 | const location = Math.floor(Math.random() * 4);
547 | // if (previousLocation !== location || (previousLocation === location && typeof score != 'string')) {
548 | setShowingItems((prevItems) => [
549 | ...prevItems,
550 | {
551 | id,
552 | item,
553 | top: location % 2 ? 10 : 160,
554 | wid: 0,
555 | pos: location < 2 ? 0 : 1,
556 | location: location,
557 | score,
558 | url,
559 | },
560 | ]);
561 | // }
562 |
563 | // setPreviousLocation(location);
564 | return () => clearInterval(interval);
565 | };
566 |
567 | useEffect(() => {
568 | if (!isGameRunning) return;
569 | if (showingItems.length === currentShowItems) return;
570 | if (firstCoinDelay) {
571 | setTimeout(() => {
572 | setFirstCoinDelay(false);
573 | generateCoins();
574 | }, 2000);
575 | } else {
576 | generateCoins();
577 | }
578 | }, [time, generateEvent]);
579 |
580 | ///////////////////////
581 | // //
582 | // LOSE !! //
583 | // CONDITION //
584 | // //
585 | ///////////////////////
586 |
587 | useEffect(() => {
588 | const dieResult = health.every((item) => item === 0);
589 | if (dieResult) {
590 | winOrFailModal("lose");
591 | }
592 | }, [health]);
593 |
594 | ///////////////////////
595 | // //
596 | // COIN //
597 | // KILL OR AUTO //
598 | // //
599 | ///////////////////////
600 |
601 | useEffect(() => {
602 | const interval = setInterval(() => {
603 | let flage = true;
604 | setShowingItems(
605 | (prevItems) =>
606 | prevItems
607 | .map(({ id, item, top, wid, pos, location, score, url }) => ({
608 | id,
609 | item,
610 | top: top + 17,
611 | wid: wid + 27,
612 | pos,
613 | location,
614 | score,
615 | url,
616 | })) // Move items down
617 | .filter(({ wid, score, location }) => {
618 | if (wid === 108 && score !== 0) {
619 | if (location === 1) {
620 | if (autoReceiveCount === 1 && autoReceivePosition === 1) {
621 | changePos(
622 | autoReceiveImage,
623 | autoReceiveCount,
624 | autoReceivePosition,
625 | wid
626 | );
627 | } else {
628 | if (typeof score == "number" && flage === true) {
629 | setHealth((preHealth) => {
630 | let newD = [...preHealth];
631 | newD.shift();
632 | newD.push(0);
633 | return newD;
634 | });
635 | flage = false;
636 | }
637 | }
638 | }
639 | if (location === 0) {
640 | if (autoReceiveCount === 1 && autoReceivePosition === -1) {
641 | changePos(
642 | autoReceiveImage,
643 | autoReceiveCount,
644 | autoReceivePosition,
645 | wid
646 | );
647 | } else {
648 | if (typeof score == "number" && flage === true) {
649 | setHealth((preHealth) => {
650 | let newD = [...preHealth];
651 | newD.shift();
652 | newD.push(0);
653 | return newD;
654 | });
655 | flage = false;
656 | }
657 | }
658 | }
659 | if (location === 3) {
660 | if (autoReceiveCount === -1 && autoReceivePosition === 1) {
661 | changePos(
662 | autoReceiveImage,
663 | autoReceiveCount,
664 | autoReceivePosition,
665 | wid
666 | );
667 | } else {
668 | if (typeof score == "number" && flage === true) {
669 | setHealth((preHealth) => {
670 | let newD = [...preHealth];
671 | newD.shift();
672 | newD.push(0);
673 | return newD;
674 | });
675 | flage = false;
676 | }
677 | }
678 | }
679 | if (location === 2) {
680 | if (autoReceiveCount === -1 && autoReceivePosition === -1) {
681 | changePos(
682 | autoReceiveImage,
683 | autoReceiveCount,
684 | autoReceivePosition,
685 | wid
686 | );
687 | } else {
688 | if (typeof score == "number" && flage === true) {
689 | setHealth((preHealth) => {
690 | let newD = [...preHealth];
691 | newD.shift();
692 | newD.push(0);
693 | return newD;
694 | });
695 | flage = false;
696 | }
697 | }
698 | }
699 | }
700 | if (wid < 90) return wid;
701 | }) // Remove if off-screen
702 | );
703 | }, speed);
704 |
705 | return () => clearInterval(interval);
706 | }, [autoReceiveCount, autoReceiveImage, autoReceivePosition]);
707 |
708 | useEffect(() => {
709 | setTimeout(() => {
710 | setBombTime(0);
711 | }, 1500);
712 | }, [bombTime]);
713 |
714 | return (
715 |
716 | {/* Header */}
717 |
946 | );
947 | };
948 |
949 | export default Play;
950 |
--------------------------------------------------------------------------------
/src/pages/Quest.tsx:
--------------------------------------------------------------------------------
1 | import { BackImg } from "@/components/custom/backImg";
2 | import { BackImgCommon } from "@/components/custom/backImgCommon";
3 | import { CatBtn } from "@/components/custom/catBtn";
4 | import { FootPrint } from "@/assets/imgs";
5 | import { IoIosArrowForward } from "react-icons/io";
6 |
7 | const tasks = [
8 | {
9 | name: "Task name",
10 | check: true,
11 | points: "0.00",
12 | },
13 | {
14 | name: "Task name",
15 | check: true,
16 | points: "0.00",
17 | },
18 | {
19 | name: "Task name",
20 | check: false,
21 | points: "0.00",
22 | },
23 | {
24 | name: "Task name",
25 | check: true,
26 | points: "0.00",
27 | },
28 | {
29 | name: "Task name",
30 | check: true,
31 | points: "0.00",
32 | },
33 | ];
34 |
35 | const Quests = () => {
36 | return (
37 |
718 |
727 |
728 | {/* Main Content */}
729 |
719 |
722 | {displayName}
721 |
723 |
726 | Общая прибыль
724 |1000 $King
725 |
730 | {/* Background and blur elements */}
731 |
732 |
733 |
734 |
735 | {/* Main Effect */}
736 |
938 |
939 | {/* Win Modal */}
940 |
737 |
741 |
742 | {/* Down Gradient */}
743 |
744 |
745 | {/* Content */}
746 |
738 |
739 |
740 |
747 |
937 |
748 |
749 | {health.slice(0, 4).map((item, index) => (
750 |
784 |
749 | {health.slice(0, 4).map((item, index) => (
750 |
758 | {health.filter((item) => item === 1).length > 4 759 | ? `+${health.filter((item) => item === 1).length - 4}` 760 | : ""} 761 |
762 | )} 763 | 764 |765 | {currentScore}/ 766 | {fianllyScore} 767 |
768 |
769 | {boosterIcons.map((item) => (
770 |
778 |
779 | {bombTime === 1 && (
780 |
783 |
785 | {/* Background Glow */}
786 |
787 |
788 | {/* Boxlions */}
789 |
797 |
798 | {/* Overlay with Footprint and Icons */}
799 |
790 |
796 |
807 |
856 |
857 | {/* Button Section */}
858 |
808 | {/* Left Icons */}
809 |
855 |
810 |
821 |
822 | {/* Right Icons */}
823 |
824 |
835 | {showingItems.map(({ id, item, top, wid, pos }) =>
836 | pos ? (
837 |
842 | {item}
843 |
844 | ) : (
845 |
850 | {item}
851 |
852 | )
853 | )}
854 |
859 |
936 |
860 |
878 |
896 |
897 |
898 |
916 |
934 |
935 |
38 |
46 | {/*main content */}
47 |
99 | );
100 | };
101 |
102 | export default Quests;
103 |
--------------------------------------------------------------------------------
/src/pages/Shop.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useContext } from "react";
2 | import axios from "axios";
3 | import { FootPrint } from "@/assets/imgs";
4 | import { Drawer } from "@/components/custom/drawer";
5 | import { CatBtn } from "@/components/custom/catBtn";
6 | import { ShopItem } from "@/components/custom/shop_item";
7 | import { TelegramContext, TelegramUser } from "../contexts/TelegramContext";
8 | import WebApp from "@twa-dev/sdk";
9 |
10 | interface ShopCard {
11 | itemname: string;
12 | id: number;
13 | imageurl: string;
14 | }
15 |
16 | interface CardDetail {
17 | itemname: string;
18 | description: string;
19 | price: number;
20 | imageurl: string;
21 | }
22 |
23 | const Shop = () => {
24 | const [drawerOpen, setDrawerOpen] = useState(false);
25 | const [index, setIndex] = useState
48 |
91 | {/* Top Gradient Overlay */}
92 |
93 | {/* Bottom Gradient Overlay */}
94 |
95 |
96 | {/* Bottom Gradient-1 Overlay */}
97 |
98 | Quests
49 |
50 | Complete tasks, get rewarded,
move to the top and be the best.
51 |
58 |
90 | Tasks list
59 |
60 | {tasks?.map((item, idx) => (
61 |
66 |
87 | ))}
88 |
89 |
67 |
86 |
68 |
69 |
76 |
70 |
75 | {item.name}
71 |72 | {item.points} points 73 |
74 |
77 | {item.check && (
78 |
81 | )}
82 |
84 |
85 | {error}
; 69 | 70 | const handleDrawerOpen = (idx: number) => { 71 | setCardDetail(null); 72 | setIndex(idx); 73 | setDrawerOpen(true); 74 | }; 75 | 76 | const handleDrawerClose = () => { 77 | setDrawerOpen(false); 78 | setTimeout(() => { 79 | setIndex(null); 80 | }, 200); 81 | }; 82 | 83 | const handleBuy = async () => { 84 | if (!chatId) { 85 | alert("Please login to buy."); 86 | return; 87 | } 88 | 89 | try { 90 | const amount = 50; 91 | 92 | const response = await axios.post( 93 | "https://simon.billtears76.workers.dev/stars/buy_product", 94 | { chatId, amount } 95 | ); 96 | const data = response.data; 97 | if (data.ok) { 98 | WebApp.openInvoice(data.result); 99 | console.log("Invoice opended successfully"); 100 | } else { 101 | window.location.href = data.result; 102 | } 103 | } catch (error) { 104 | console.error("Error during payment process:", error); 105 | } 106 | 107 | setDrawerOpen(false); 108 | setTimeout(() => { 109 | setIndex(null); 110 | }, 200); 111 | }; 112 | 113 | return ( 114 | <> 115 |
116 | {/* Main Content */}
117 |
156 |
157 | {/* Drawer Component */}
158 | {index !== null && cardDetail && (
159 |
118 | {/* Navigation Toggle */}
119 |
136 |
137 | {/* Top Effect Overlay */}
138 |
139 |
140 | {/* Bottom Gradient Overlay */}
141 |
142 |
143 | {/* FootPrint Effect */}
144 |
152 |
153 | {/* Bottom Gradient-1 Overlay */}
154 |
155 |
126 | {shopCards.map((item, idx) => (
127 | handleDrawerOpen(item.id)}
132 | />
133 | ))}
134 |
135 |
160 |
170 | )}
171 |
172 | );
173 | };
174 |
175 | export default Shop;
176 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///