app - master - DivBytes/charm

app
1 602 строки51 KB
DivBytes
create app
26 фев 2025, 12:52
26 фев 2025, 12:52351a095
import React, { useState, useEffect } from 'react';
import bridge from '@vkontakte/vk-bridge';
import io from "socket.io-client";
import './main.css';
import Panel from './components/Panel';



import Home from "./components/home";
import Login from "./components/login";
import ErrorView from "./components/ErrorView";
import Setting from "./components/setting";
import UserTop from "./components/userTop";
import Games from "./components/games";
import Clan from "./components/clan";
import CreateClan from "./components/CreateClan"
import ViewClanInfo from "./components/ViewClanInfo";
import Shop from "./components/shop";
import Bonus from "./components/bonus";
import Gifts from "./components/Gifts";
import Profile from "./components/profile";

import Chat from "./components/chat";

import Dice from "./components/Games/dice";
import Double from "./components/Games/double";
import Dream from "./components/Games/dream";

import dreamWheel from "./components/Games/img/dream.svg";
import dreamPoint from "./components/Games/img/pointer.a255f11d1308d4c4b.svg";

import {ScreenSpinner} from '@vkontakte/vkui';



import { Icon28UserOutline,
		 Icon28GameOutline,
		 Icon28GraphOutline,
		 Icon28IpadOutline,
		 Icon28ListOutline,
     Icon28Cancel,
     Icon24Cancel 

 } from '@vkontakte/icons';




const App = () => {
	const domain = "play.charmgames.ru";
  const [isVkMiniApp, setIsVkMiniApp] = useState(false);
	const [activity, setActivePanel] = useState("home");
  const [activeTabRating, setActiveTabRating] = useState("topDay");
  const [activeTabClans, setActiveTabClans] = useState("topClans");
	const [fetchedUser, setUser] = useState(null);
	const [userData, setUserData] = useState({});
  const [loading, setLoading] = useState(1);
  const [myClanData, setMyClanData] = useState(null);
  const [clanInfo, setClanInfo] = useState(null);
	const [connectToWs, setConnectToWs] = useState(false);
	const [gameToken, setGameToken] = useState(null);
  const [screen, setScreen] = useState("home");
	const [gameData, setGameData] = useState(null);
	const [gameSum, setGameSum] = useState(0);
  const [isLoad, setLoad] = useState(false);
  const [getTop, setTop] = useState(null);
  const [popout, setPopout] = useState(<ScreenSpinner size="medium" />);
  const [modal, setModal] = useState(null);
  const [isModal, setIsModal] = useState("");
  const [promoName, setPromoName] = useState("");
  const [ClanName, setClanName] = useState("");
  const [ClanPhoto, setClanPhoto] = useState("");
  const [userDataModal, setIsModalData] = useState({});
  const [changeName, setChangeName] = useState("");
  const [errorData, setErrorData] = useState(null);
	const [getSumBets, setSumBets] = useState(0);
	const [getWinnerSum, setWinnerSum] = useState(0);
  const topSumDay = [300, 200, 100, 75, 50, 45, 30, 25, 20, 10, 7, 5, 3];
  const [NameColor, setNameColor] = useState('');
  const [NotificationData, setNotificationData] = useState(null);
    const [promostatus, setPromoStatus] = useState({
    error: false,
    desc: "",
  });

  

  




  









 



	const [getTotalSum, setTotalSum] = useState({
		num: 0,
		str: "",
	});
	const [errorInputGame, setErrorInputGame] = useState({
		error: false,
		dssc: "",
	});

	const games = [
    "DICE2",
    "DOUBLE",
    "DREAM",
	];

  const onStoryChange = (e) => setActivePanel(e.currentTarget.dataset.story);

	 const [state, setState] = useState({
    getLastProv: new Date().getTime(),
    getLastProvBool: false,
    bombs: 5,
    gameData: {
      bombs: 5,
      game: "",
    },
    token: "",
    uid: 0,
    cur: 0,
    graph: [],
  });


	useEffect(() => {
    async function run() {

      window.addEventListener("popstate", (e) => {
        e.preventDefault();
        if (window?.socket?.connected) window?.socket?.disconnect();
        // startGraphAnimator({
        //  type: "update",
        //  state: 0,
        //  game: "crash"
        // });
        setActivePanel("home");
        window.history.pushState({ activity: "home" }, `home`);
        setErrorInputGame({
          error: false,
        });
      });

      
      window.history.pushState({ activity: "home" }, `home`);
      const user = await bridge.send("VKWebAppGetUserInfo");
      
      //console.log(user)
      setUser(user);
      var j = state;
      j.uid = user.id;
      setState(j);
      await sendRequest("POST", "getUser", user).then((data) => {
        setUserData(data.userData);
      }

      );

      setActivePanel("home");
      setPopout(null);
      setLoading(0);
    }
    run();
  }, []);

  function refreshTop() {
    setLoad(true);

    setTimeout(async () => {
      await sendRequest("POST", "getTop", fetchedUser)
        .then(async (data) => {
          var users_ids = [];
          var new_top_day = [];
          var new_top_week = [];
          var new_top_hour = [];

          
          
          setTop(data.data)


          data.data.day.rating.filter((x) => {
            if (!users_ids.find((y) => y === x.id)) users_ids.push(x.id);
          });

         data.data.week.rating.filter((x) => {
            if (!users_ids.find((y) => y === x.id)) users_ids.push(x.id);
          });

                  

          for (var i = 0; i < 10; i++) {
            if (data.data.day.rating.find((x) => x.id === x.id)) {
              new_top_day.push({
                id: x.id,
                value: data.data.day.rating[i]?.value,
                color: data.data.day.rating[i]?.color,
                nick: data.data.day.rating[i]?.nick,
                photo: data.data.day.rating[i]?.photo,
              });
            }
            if (
              data.data.week.rating.find((x) => x.id === x.id)
            ) {
              new_top_week.push({
                id: x.id,
                value: data.data.week.rating[i]?.value,
                color: data.data.week.rating[i]?.color,
                nick: data.data.week.rating[i]?.nick,
                photo: data.data.week.rating[i]?.photo,
              });
            }
          }

          setTop((data) => ({
            ...data,
            day: { ...data.day, rating: new_top_day },
            week: { ...data.week, rating: new_top_week },
          }));

          
        setLoad(false);
        })
        .catch((err) => console.error(err));
    }, 200);
  }


  function refreshTopClan() {



  }

  function openTopDayLayout() {
    refreshTop();
    setActivePanel("topPlayer")
    setActiveTabRating("topDay");
  }

  function openClanLayout() {

    setLoading(1);
    refreshTop(); 
    setActivePanel("clans")
    setActiveTabRating("topClans");
    setLoading(0);
  }

  function invRequest(value) {
    //setPopout(<ScreenSpinner size="medium" />);
    sendRequest("POST", "clans", fetchedUser, {
      a: "invRequest",
      cid: value,
    }).then((x) => {
      setActiveTabClans("myClan");
      setUserData(x.userData);
      setActivePanel("home");
      //setPopout(null);
      //changeScreen("clans");
    });
  }

  function refreshData() {
    //setLoad(true);
    setTimeout(async () => {
      await sendRequest("POST", "getUser", fetchedUser).then((data) => {
        setUserData(data.userData);
        setLoad(false);
        setPopout(null);
      });
    }, 200);
  }

  function changename() {
    sendRequest("POST", "change_name", fetchedUser, {
      a: "5000",
      changename: changeName,
    }).then((data) => {
      if (data.status === "error") {
        //console.log(error);
      } else {
        return showNotification({
          title: "Успешно!",
          desc: 'Вы успешно изменили ник на:  "{changeName}"',      
        });
        //refreshData();
        //setIsModal(null)
        //setActivePanel("home");
      }
    });
  }

   const getBonus = async () => {
    var res = await sendRequest("POST", "getBonus", fetchedUser);
    if (res.status === "ok") {
     
        return showNotification({
          title: "Получен бонус",
          desc: 'На ваш баланс зачисленно '+ number_format(res.user.coins) + ' GCoins',      
        });
      //);
    } else {
      return showNotification({
          title: "Ошибка",
          desc: 'Ошибка получения бонуса',      
        });
      //);
    }
    setUserData(res.userData);
  };

  function showNotification(data) {
   setNotificationData(data);
   setIsModal('notification')
  }
  function closeNotification(data) {
   setNotificationData(null);
   setIsModal(null);
   refreshData();
  }


  const changeScreen = async (e) => {
    setErrorInputGame({
      error: false,
    });
    if (window.socket?.connected) {
      window.socket.disconnect();
    }
    setActivePanel(e);
    if (userData.ban) {
      // seterrorscreen({
      //  'num_error': 3,
      //  'error_msg': 'Сервер временно недоступен. В течение нескольких минут всё должно заработать. Следите за новостями в нашей группе.'
      // });
      setLoading(0);
      setPopout(null);
      setActivePanel("error");
      setModal(null);
      return;
    }
    // setsnackbar(null);
    if (e == "rating" || e == "clans") {
      //console.log('+')
      setPopout(<ScreenSpinner size="medium" />);
      setLoading(1);
      await sendRequest("POST", "getTop", fetchedUser)
        .then(async (data) => {
          var users_ids = [];
          var new_top_day = [];
          var new_top_week = [];
          var new_top_hour = [];
          setTop(data.data);
          setLoading(0);
          var token = await bridge.send("VKWebAppGetAuthToken", {
            app_id: 51855953,
            scope: "",
          });
          data.data.day.rating.filter((x) => {
            if (!users_ids.find((y) => y === x.id)) users_ids.push(x.id);
          });
          data.data.week.rating.filter((x) => {
            if (!users_ids.find((y) => y === x.id)) users_ids.push(x.id);
          });
          data.data.hour.rating.filter((x) => {
            if (!users_ids.find((y) => y === x.id)) users_ids.push(x.id);
          });
          var top = await bridge.send("VKWebAppCallAPIMethod", {
            method: "users.get",
            params: {
              access_token: token.access_token,
              v: "5.199",
              user_ids: users_ids.toString(),
              fields: "photo_200",
            },
          });
          for (var i = 0; i < top.response.length; i++) {
            if (data.data.day.rating.find((x) => x.id === top.response[i].id)) {
              new_top_day.push({
                id: top.response[i].id,
                value: data.data.day.rating[i]?.value,
                color: data.data.day.rating[i]?.color,
                nick: data.data.day.rating[i]?.nick
                  ? data.data.day.rating[i]?.nick
                  : `${top.response[i]?.first_name} ${top.response[i]?.last_name}`,
                photo: top.response[i].photo_200,
              });
            }
            if (
              data.data.week.rating.find((x) => x.id === top.response[i].id)
            ) {
              new_top_week.push({
                id: top.response[i].id,
                value: data.data.week.rating[i]?.value,
                color: data.data.week.rating[i]?.color,
                nick: data.data.week.rating[i]?.nick
                  ? data.data.week.rating[i]?.nick
                  : `${top.response[i]?.first_name} ${top.response[i]?.last_name}`,
                photo: top.response[i].photo_200,
              });
            }
            if (
              data.data.hour.rating.find((x) => x.id === top.response[i].id)
            ) {
              new_top_hour.push({
                id: top.response[i].id,
                value: data.data.hour.rating[i]?.value,
                color: data.data.hour.rating[i]?.color,
                nick: data.data.hour.rating[i]?.nick
                  ? data.data.hour.rating[i]?.nick
                  : `${top.response[i]?.first_name} ${top.response[i]?.last_name}`,
                photo: top.response[i].photo_200,
              });
            }
          }
          setTop((data) => ({
            ...data,
            day: { ...data.day, rating: new_top_day },
            week: { ...data.week, rating: new_top_week },
            hour: { ...data.hour, rating: new_top_hour },
          }));
          if (e === "clans" && activeTabClans === "myClan" && userData.clan) {
            sendRequest("POST", "clans", fetchedUser, { a: "get" }).then(
              (dataC) => {
                setMyClanData(dataC);
                //setPopout(null);
              }
            );
          } else {
            //setPopout(null);
          }
        })
        .catch((err) => console.error(err));
    }
    if (e == "home") {
      setPopout(<ScreenSpinner size="medium" />);
      await sendRequest("POST", "getUser", fetchedUser).then((data) => {
        setUserData(data.userData);
        //setPopout(null);
      });
    }
  };

  function sendRequest(method, query, user, dataQuery) {
    return new Promise(function (resolve, reject) {
      var url = `https://${domain}/capi`;
      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader("Content-Type", "application/json");
      //console.log(user)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          xhr.onerror = () => {
            return showError({
              desc: "#1",
              button: {
                back: false,
                backEvent: () => {},
                event: async () => {
                  setActivePanel("home");
                  
                  setPopout(<ScreenSpinner size="medium" />);
                  setLoading(1);
                  await sendRequest("POST", "getUser", user).then((data) => {
                    setUserData(data.userData);
                    setLoad(false);

                    setPopout(null);
                    setLoading(0);
                  });
                },
                text: "#2",
              },
            });
          };
          xhr.onload = () => {
            resolve(JSON.parse(xhr.responseText));
          };
        }
      };
      var data = {
        data: dataQuery ? dataQuery : {},
        query,
        referer: window.location.href,
        uid: user.id,
      };
      xhr.send(JSON.stringify(data));
    });
  }

  function play(game) {
		if (connectToWs) {
			window?.socket?.disconnect();
			setConnectToWs(false);
		}
		game = game.toUpperCase();
		if (games.find((x) => x === game)) {
		  if (game === "DICE2") {
        setConnectToWs(true);
        connect(game.toLowerCase());
      }
      if (game === "DOUBLE") {
        setConnectToWs(true);
        connect(game.toLowerCase());
      }
      if (game === "DREAM") {
        setConnectToWs(true);
        connect(game.toLowerCase());
      }
      
		
		}
	}

  function showError(data) {
    setErrorData(data);
    setActivePanel("error");
  }


	function connect(game) {
    var ws = window.socket;
    if (!ws) {
      ws = {
        disconnected: true,
      };
    }
    if (ws.disconnected) {
      ws = io(`wss://${domain}:8443`, {
        secure: true,
        transports: ["websocket"],
        query: {
          params: JSON.stringify({
						photo: {
							_100: fetchedUser.photo_100,
							_200: fetchedUser.photo_200,
						},
						nick: {
							first: fetchedUser.first_name,
							last: fetchedUser.last_name,
						},
						referer: window.location.href,
						uid: fetchedUser.id,
					}),
        },
      });
      window.socket = ws;
      ws.on("connect", async () => {
        // //console.log("Connected!");
        ws.emit("message", {
          game,
          referer: window.location.href,
          type: "init",
          user: fetchedUser.id,
        });
      });
      ws.on("disconnect", (info) => {
        setConnectToWs(false);
        // //console.log(info);
        if (info.match(/^transport close$/i)) {
          return showError({
            desc: "Вы были отключены от сервера!",
            button: {
              back: true,
              event: () => {
                connect(game);
              },
              text: "Переподключиться",
              backEvent: () => {
                setActivePanel("home");
              },
            },
          });
        }
        // //console.log("Disconnected!");
      });
      ws.on(`exit`, () => {
        ws.disconnect();
        return showError({
          desc: "Вы были отключены от игры от бездействия в течении 5 минут!",
          button: {
            back: true,
            backEvent: () => {
              setActivePanel("home");
            },
            event: () => {
              connect(game);
            },
            text: "Переподключиться",
          },
        });
      });
      events(ws, game);
    } else {
      window?.socket?.disconnect();
      connect(game);
    }
  }

  function events(ws, game) {
    ws.on("message", async (msg) => {
      if (msg.type === "init") {
        if (msg.status) {
          var j = state;
          j.token = msg.token;
          j.gameData.game = game;
          setState(j);
          setGameToken(msg.token);
          ws.emit("message", {
            room: msg.roomId,
            token: msg.token,
            type: "join",
            user: fetchedUser.id,
            game,
          });
          setActivePanel(game);
        } else {
          return showError({
            desc: "Вы уже зашли с другого устройства!",
            button: {
              back: true,
              backEvent: () => {
                setActivePanel("home");
              },
              event: () => {
                connect(game);
              },
              text: "Попробовать снова",
            },
          });
        }
      } else if (msg.type === "update") {
        //startGraphAnimator(msg);
        if (
          msg.state === 1 &&
          (msg.game === "mines" ||
            msg.game === "tower" ||
            msg.game === "goldwest")
        ) {
          var j = state;
          j.gameData.bombs = msg.bombs;
          j.getLastProvBool = true;
          j.getLastProv = new Date().getTime();
          j.gameData.game = msg.game;
          setState(j);
        }
        if (msg?.balance) {
          setUserData((v) => ({ ...v, coins: msg.balance.coins }));
        }
        setGameData(msg);
        //setLoading(0);
        if (
          msg.state === 2 &&
          msg.game !== "mines" &&
          msg.game !== "tower" &&
          msg.game !== "thimble" &&
          msg.game !== "goldwest"
        ) {
          getTatals(msg);
        }
      } else if (msg.type === "setBet") {
        if (msg.status) {
          setUserData((data) => ({
            ...data,
            coins: msg.private.balance.coins,
          }));
        } else {
          if (msg.desc) {
            setErrorInputGame({
              error: true,
              desc: msg.desc,
            });
          }
        }
      } else if (msg.type === "requestCall") {
        if (msg.a === "getUser") {
          await sendRequest("POST", "getUser", fetchedUser).then((data) => {
            setUserData(data.userData);
          });
        }
      }
    });
    ws.on(`error`, async (msg) => {
      if (msg.type === "join") {
        return showError({
          desc: "Вы уже зашли с другого аккаунта!",
          button: {
            back: true,
            backEvent: () => {
              refreshData();
              setActivePanel("home");
              setPopout(<ScreenSpinner size="medium" />);
              setLoading(0);
            },
            event: () => {
              connect(game);
            },
            text: "Попробовать снова",
          },
        });
      }
    });
  }

  function getTatals(data) {
    var res = 0;
    var res1 = 0;
    var res2 = 0;
    var res3 = "";
    var res33 = 0;
    data.bets.filter((x) => {
      if (x.user === fetchedUser.id) {
        res += x.defsum;
        if (x.win === 1) {
          res1 += x.sum;
        }
      }
    });
    res2 = res1 - res;
    res33 =
      res2 <= 0 ? `${res2}`.replace(/-/gi, "") : `${res2}`.replace(/-/gi, "");
    res3 = `${res2 < 0 ? "-" : res2 > 0 ? "+" : ""}`;
    setSumBets(res);
    setWinnerSum(res1);
    setTotalSum({
      str: res3,
      num: res33,
    });
  }

  function changesumgame(value) {
    if (!isNaN(value.replace(/ /gi, "").trim())) {
      setGameSum(Number(value.replace(/ /gi, "").trim()));
      setErrorInputGame({
        error: false,
      });
    }
  }

  function changesumbybtn(value) {
		setErrorInputGame({
			error: false,
		});
		if (!isNaN(value)) {
			setGameSum(Number(gameSum + value));
		} else if (value === "/2") {
			setGameSum(Number((gameSum / 2).toFixed(2)));
		} else if (value === "*2") {
			setGameSum(Number((gameSum * 2).toFixed(2)));
		}
	}

  function openCreateClanLayout(){

  }

  function openClanInfo(id) {
    setLoading(1);
    sendRequest("POST", "clans", fetchedUser, {
      a: "getClanInfo",
      id: id,
    }).then((data) => {
      setLoading(0);
      //setPopout(null);
      setClanInfo(data);
      setActivePanel("viewClanInfo");
    });
  }

  function openUserInfo(data) {
    //console.log(data.uid)
  sendRequest("POST", "UserInfo", fetchedUser, {
      a: "getUserInfo",
      id: data,
    }).then((data) => {
      //console.log(data)
        setIsModal('activity_userInfo')
        setIsModalData(data.userData)
    });
}

  function openHashCheck(data) {
    setIsModal("activity_hash");
    setIsModalData(data);
  }

  function openChangeNameModal() {
    setIsModal("change_name");
  }
  function openModalOpen(data) {
    //console.log(data)
    setIsModal(data);
  }

   function modalProfileClose() {
    setIsModal(null);
    setIsModalData({});
  }

  function changeColorName() {
    sendRequest("POST", "change_color_name", fetchedUser, {
      a: "15000",
      changcolorename: NameColor,
    }).then((data) => {
      if (data.status === "error") {
        //console.log(error);
      } else {
        return showNotification({
          title: "Успешно!",
          desc: "Вы успешно изменили цвет имени. ",      
        });

        //refreshData();
        //setIsModal(null)
        //setActivePanel("home");
      }
    });
  }

  function savecreateclan() {
    sendRequest("POST", "clans", fetchedUser, {
      a: "createClan",
      name: ClanName,
      photo: ClanPhoto,
    }).then((data) => {
      //setPopout(null);
      if (data.status === "error") {
        //console.log('ошибка')
      } else {
        //console.log('успешно')
        
      }
    });
  }

  function usepromo() {
    //setPopout(<ScreenSpinner size="medium" />);
    sendRequest("POST", "actions", fetchedUser, {
      a: "activatePromo",
      promo: promoName,
    }).then((data) => {
      //setPopout(null);
      if (data.status === "error") {
        setPromoStatus({
          error: true,
          desc: data.desc,
        });
      } else {
        setPromoName(null)
        setIsModal(null)
        return showNotification({
          title: "Промокод активирован",
          desc: 'Вы успешно активировали прокомод '+ promoName +'. Вы получаете '+ number_format(data.sum) + ' GCoins',      
        });
        
      }
    });
  }

 
   const modals = (
    <>
      {modal === "active_hash" && (
        <>
          //console.log("setModal")
          <div className="AlertLogic ScreenAlert shown">
            <div className="Alert">
              <div className="AlertBox">
                <div className="AlertHeader">
                  <div className="AlertTitle">Хеш игры</div>
                  <div className="AlertClose">
                    <div
                      className="Button style-default mode-secondary round-circle size-2 CloseButton"
                      onClick={() => setModal(null)}
                    >
                      <div className="ButtonContent">
                        <div className="ButtonText">
                          <Icon28CancelAltOutline />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="AlertContent">
                  <p>
                    Результат игры: <b>{ElementData?.num}</b>
                  </p>
                  <p>
                    Строка для проверки: <b>{ElementData?.md5}</b>
                  </p>
                  <p>
                    Хеш результата: <b>{ElementData?.hash}</b>
                  </p>
                  <p>
                    Для проверки скопируйте строку и вставьте на любом сайте для
                    хеширования по технологии md5 (например{" "}
                    <a
                      className="Link mode-primary"
                      href="https://decodeit.ru/md5"
                      style={{ cursor: "pointer" }}
                      target="_blank"
                    >
                      тут
                    </a>
                    ). Если полученный хеш совпадает с указанным в этом окне, то
                    игра была честной.
                  </p>
                </div>
                <div className="AlertButtons">
                  <div
                    className="Button style-simple mode-primary round-circle size-4 AlertButton inline"
                    onClick={() => {
                      bridge.send("VKWebAppCopyText", {
                        text: ElementData?.md5,
                      });
                    }}
                  >
                    <div className="ButtonContent">
                      <div className="ButtonText">Скопировать</div>
                    </div>
                  </div>
                  <div className="Button style-simple mode-primary round-circle size-4 AlertButton inline">
                    <a href="https://md5calc.com/hash/md5/" target="_blank" style={{ cursor: "pointer" }}>
                      <div className="ButtonContent">
                        <div className="ButtonText">Проверить</div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
      </>
  )

	
	return (
		<div className="Root">
    <div className='RootContent'>
    <div className='ScreenSwitcher'>
    <div className='ScreenSwitcherContent'>

    {loading ? (
  <div className="AlertLogic ScreenAlert shown">
  <div className="LoadingAlert">
    <div className="LoadingAlertContent">
      <div className="Loading loading" style={{ width: "50px", height: "35px"}}>
     
      </div>
      <div className="text">LOADING</div> 
    </div>
  </div>
</div>

  ) : null }
    
    {isModal == "activity_hash" && (
              <div className="AlertLogic ScreenAlert shown">
                <div className="Alert">
                  <div className="AlertBox">
                    <div className="AlertHeader">
                      <div className="AlertTitle">Хеш игры</div>
                      <div className="AlertClose">
                        <div
                          className="Button style-default mode-secondary round-circle size-2 CloseButton"
                          onClick={modalProfileClose}
                        >
                          <div className="ButtonContent">
                            <div className="ButtonText">
                              <Icon28Cancel />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="AlertContent">
                      <p>
                        Результат игры: <b>{userDataModal.num}</b>
                      </p>
                      <p>
                        Строка для проверки: <b>{userDataModal.md5}</b>
                      </p>
                      <p>
                        Хеш результата: <b>{userDataModal.hash}</b>
                      </p>
                      <p>
                        Для проверки скопируйте строку и вставьте на любом сайте
                        для хеширования по технологии md5 (например{" "}
                        <a
                          className="Link mode-primary"
                          href="https://decodeit.ru/md5"
                          target="_blank"
                        >
                          тут
                        </a>
                        ). Если полученный хеш совпадает с указанным в этом
                        окне, то игра была честной.
                      </p>
                    </div>
                    <div className="AlertButtons">
                      <div
                        className="Button style-simple mode-primary round-circle size-4 AlertButton inline"
                        onClick={() =>
                          bridge.send("VKWebAppCopyText", {
                            text: userDataModal.md5,
                          })
                        }
                      >
                        <div className="ButtonContent">
                          <div className="ButtonText">Скопировать</div>
                        </div>
                      </div>
                      <a href="https://decodeit.ru/md5" target="_blank">
                        <div className="Button style-simple mode-primary round-circle size-4 AlertButton inline">
                          <div className="ButtonContent">
                            <div className="ButtonText">Проверить</div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {isModal == 'activity_userInfo' && (

<div className="AlertLogic ScreenAlert shown">
  <div className="Alert ProfilePopout">
    <div className="AlertBox">
      <div className="AlertHeader">
        <div className="AlertTitle">
          <div className="userCard">
            <div className="leftPart">
              <div className="Avatar size-64 style-circle bgStyle-dark userAvatar">
                <div className="AvatarWrapper" style={{ width: "64px", height: "64px" }}>
                  <img width="64" height="64" className="AvatarImg" src={userDataModal.photo} alt=""/></div>
                
              </div>
            </div>
            <div className="rightPart">
              <div className="name"><span className="nameText usersColorsBase-6">{userDataModal.nick ? userDataModal.nick : "@" + userDataModal.user}</span></div>
              <div className="balance">
                <div className="value"><span className="vt">{number_format(userDataModal.coins)}</span> GC
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="AlertClose">
          <div className="Button style-default mode-secondary round-circle size-2 CloseButton" onClick={modalProfileClose}>
            <div className="ButtonContent">
              <div className="ButtonText">
              <Icon28Cancel/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="AlertContent">
        <div className="loadingWrapper ">
          <div className="Loading" style={{ width: "50px", height: "35px" }}>
            
          </div>
        </div>
        <div className="Placeholder errorPlaceholder hide">
          <div className="PlaceholderIcon mode-error">
           
          </div>
          <div className="PlaceholderTitle">Ошибка</div>
        </div>
        <div className="userInfo">
          <div className="Header mode-primary size-2 statsHeader">
            <div className="HeaderContent">Статистика</div>
          </div>
          <div className="Div statsBlock">
            <div className="item left">
              <div className="title">Выиграно сегодня</div>
              <div className="value">{lil_format(userDataModal?.stats?.general?.dayWin)}</div>
            </div>
            <div className="item right">
              <div className="title">Проиграно сегодня</div>
              <div className="value">{lil_format(userDataModal?.stats?.general?.dayloss)}</div>
            </div>
            <div className="item left">
              <div className="title">Всего наиграно</div>
              <div className="value">{lil_format(userDataModal?.stats?.general?.wektotal)}</div>
            </div>
            <div className="item right">
              <div className="title">Макс. выигрыш</div>
              <div className="value">{lil_format(userDataModal?.stats?.general?.maxwin)}</div>
            </div>
            <div className="item left">
              <div className="title">Макс. коэффициент</div>
              <div className="value">x{lil_format(userDataModal?.stats?.general?.coef)}</div>
            </div>
            <div className="item right">
              <div className="title">Наибольший баланс</div>
              <div className="value">{lil_format(userDataModal?.maxcoins)}</div>
            </div>
          </div>
          <div className="footerBlock">
            <div className="regDate">В игре с <b>{userDataModal?.RegisterData}</b></div>
            
          
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

)}

    {isModal == "notification" && (

      <div class="AlertLogic ScreenAlert shown">
  <div class="ModalCard">
    <div class="ModalBox">
      <div class="ModalHeader">
        <div class="ModalIcon">
          
        </div>
        <div class="ModalTitle">{NotificationData.title}</div>
      </div>
      <div class="ModalContent"><b>{NotificationData.desc}</b></div>
      <div class="ModalButtons">
        <div class="ModalButtonsLine">
          <div class="Button style-default mode-primary round-circle size-1 ModalButton inline" onClick={closeNotification}>
            <div class="ButtonContent">
              <div class="ButtonText">Закрыть</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    )}


            {isModal == "open_promo" && (
              <div className="AlertLogic ScreenAlert shown">
                <div className="Modal">
                  <div className="ModalBox">
                    <div className="ModalHeader">
                      <div className="ModalIcon"></div>
                      <div className="ModalTitle">Активация промокода</div>
                      <div className="ModalClose">
                        <div
                          className="Button style-default mode-secondary round-circle size-2 CloseButton"
                          onClick={() => setIsModal(null)}
                        >
                          <div className="ButtonContent">
                            <div className="ButtonText">
                              <Icon24Cancel />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="ModalContent">
                      <div className="Input mode-default style-dark align-left size-undefined">
                        <div className="InputArea">
                          {promostatus.error === true ? promostatus.desc : null}
                          <input
                            className="InputField"
                            placeholder="Введите промокод"
                            type="text"
                            onChange={(e) =>
                              setPromoName(e.currentTarget.value)
                            }
                          />
                        </div>
                      </div>
                    </div>
                    <div className="ModalButtons">
                      <div
                        className="Button style-default mode-primary round-circle size-1 ModalButton inline"
                        onClick={usepromo}
                      >
                        <div className="ButtonContent">
                          <div className="ButtonText">Использовать</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {isModal == "change_name" && (
          <div className="AlertLogic ScreenAlert shown">
          <div className="Modal">
            <div className="ModalBox">
              <div className="ModalHeader">
                <div className="ModalIcon"></div>
                <div className="ModalTitle">Изменить имя</div>
                <div className="ModalClose" onClick={() => setIsModal(null)}>
                  <div className="Button style-default mode-secondary round-circle size-2 CloseButton">
                    <div className="ButtonContent">
                      <div className="ButtonText">
                        <Icon24Cancel />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="ModalContent">
                <div className="FormStatus mode-dark">
                  <div className="FormStatusLeft">
                    <div className="FormStatusTitle">Текущее имя</div>
                    <div className="FormStatusContent">
                      {userData.nick
                        ? userData.nick
                        : `${fetchedUser?.first_name} ${fetchedUser?.last_name}`}
                    </div>
                  </div>
                </div>
                <div className="Spacing size-6 orientation-h"></div>
                <div className="Input mode-default style-dark align-left">
                  <div className="InputArea">
                    <input
                      className="InputField"
                      placeholder="Введите новое имя"
                      onChange={(e) => setChangeName(e.currentTarget.value)}
                    />
                  </div>
                </div>
              </div>
              <div className="ModalButtons">
                <div
                  className="Button style-default mode-primary round-circle size-1 ModalButton inline"
                  onClick={changename}
                >
                  <div className="ButtonContent">
                    <div className="ButtonText">
                      <span className="priceStyle">
                        <span className="vt">
                          Изменить за <b>15 000</b>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

            )}





		<div className='BottomNavigator'>
    <div className='BottomNavigatorContent'>
		

		    
			 <Panel ActivePanel={activity} >
			 	<Home panelId="home" openModalOpen={openModalOpen} onStoryChange={onStoryChange} fetchedUser={fetchedUser} userData={userData}   />
			 	<Setting panelId="setting" />
        <Login panelId='login' setLoading={setLoading} />
			 	<UserTop panelId="topPlayer" openUserInfo={openUserInfo} setActiveTabRating={setActiveTabRating} topSumDay={topSumDay} refreshTop={refreshTop} userData={userData} fetchedUser={fetchedUser} getTop={getTop} loading={loading} activeTabRating={activeTabRating}/>
			 	<Clan panelId="clans" onStoryChange={onStoryChange} openClanInfo={openClanInfo} activeTabRating={activeTabRating} getTop={getTop} />
        <CreateClan panelId='createclan' setClanName={setClanName} setClanPhoto={setClanPhoto} savecreateclan={savecreateclan}/>
        <Shop panelId="shop" onStoryChange={onStoryChange}  />
        <Bonus panelId='bonus' getBonus={getBonus} userData={userData} />
			 	<Games panelId="games" play={play}/>
        <ErrorView panelId="error" data={errorData} />
        <Gifts panelId="gifts" />
        <Profile panelId='profile' openModalOpen={openModalOpen} openChangeNameModal={openChangeNameModal} userData={userData} fetchedUser={fetchedUser}/>

        <Chat panelId="chat" openUserInfo={openUserInfo} userData={userData} fetchedUser={fetchedUser} />

        <ViewClanInfo
          panelId="viewClanInfo"
          invRequest={invRequest}
          clanInfo={clanInfo}
          number_format={number_format}
          loading={loading}
        />

			 	<Dice
            panelId="dice2"
            play={play}
            getSumBets={getSumBets}
            getTotalSum={getTotalSum}
            getWinnerSum={getWinnerSum}
            errorInputGame={errorInputGame}
            gameData={gameData}
            number_format={number_format}
            openHashCheck={openHashCheck}
            fetchedUser={fetchedUser}
            userData={userData}
            changesumbybtn={changesumbybtn}
            changesumgame={changesumgame}
            gameSum={gameSum}
            loading={loading}
           
            bet={(value) =>
              window.socket.emit(`message`, {
                type: "action",
                a: "setBet",
                bet: gameSum,
                user: fetchedUser.id,
                token: gameToken,
                t: value,
              })
            }
          />

          <Dream
            panelId="dream"
            dreamWheel={dreamWheel}
            dreamPoint={dreamPoint}
            getSumBets={getSumBets}
            getWinnerSum={getWinnerSum}
            getTotalSum={getTotalSum}
            fetchedUser={fetchedUser}
            changesumbybtn={changesumbybtn}
            changesumgame={changesumgame}
            bet={(v) =>
              window.socket.emit("message", {
                type: "action",
                a: "setBet",
                bet: gameSum,
                user: fetchedUser.id,
                token: gameToken,
                t: v,
              })
            }
            gameSum={gameSum}
            errorInputGame={errorInputGame}
            openHashCheck={openHashCheck}
            //loading={loading}
            gameData={gameData}
            userData={userData}
            number_format={number_format}
          />

          <Double
            panelId="double"
            getSumBets={getSumBets}
            getWinnerSum={getWinnerSum}
            getTotalSum={getTotalSum}
            fetchedUser={fetchedUser}
            changesumbybtn={changesumbybtn}
            changesumgame={changesumgame}
            bet={(v) =>
              window.socket.emit("message", {
                type: "action",
                a: "setBet",
                bet: gameSum,
                user: fetchedUser.id,
                token: gameToken,
                t: v,
              })
            }
            gameSum={gameSum}
            errorInputGame={errorInputGame}
            openHashCheck={openHashCheck}
            
            gameData={gameData}
            userData={userData}
            number_format={number_format}
          />

			 </Panel>


		
       </div>
		<>
       {(activity !== 'bonus' && activity !== 'shop'&& activity !== 'dream'&& activity !== 'double') && (

		<div className='NavigatorMenu'>
			<div className='items'>
				<div className='BottomNavigatorItem' onClick={() => setActivePanel("home")}>
					<div className='wrapper'>
						<div className='icon'>
							<Icon28UserOutline />
						</div>
					</div>
				</div>
				<div className='BottomNavigatorItem' onClick={openClanLayout}>
					<div className='wrapper'>
						<div className='icon'>
							<Icon28IpadOutline />
						</div>
					</div>
				</div>
				<div className='BottomNavigatorItem rounded' onClick={() => setActivePanel("games")}>
					<div className='wrapper'>
						<div className='icon'>
							<Icon28GameOutline />
						</div>
					</div>
				</div>
				<div className='BottomNavigatorItem' onClick={openTopDayLayout}>
					<div className='wrapper'>
						<div className='icon'>
							<Icon28GraphOutline />
						</div>
					</div>
				</div>
				<div className='BottomNavigatorItem' onClick={() => setActivePanel("setting")}>
					<div className='wrapper'>
						<div className='icon'>
							<Icon28ListOutline />
						</div>
					</div>
				</div>
				
			</div>
		</div>
    
  )}
</>
    {isModal == "change_color" && (
              <div className="AlertLogic ScreenAlert shown">
          <div className="Modal editColorModal">
            <div className="ModalBox">
              <div className="ModalHeader">
                <div className="ModalIcon"></div>
                <div className="ModalTitle">Цвет имени</div>
                <div className="ModalClose" onClick={() => setIsModal(null)}>
                  <div className="Button style-default mode-secondary round-circle size-2 CloseButton">
                    <div className="ButtonContent">
                      <div className="ButtonText">
                        <Icon24Cancel />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="ModalContent">
                <div className="Header mode-secondary size-2">
                  <div className="HeaderContent">Выберите новый цвет</div>
                </div>
                <div className="Spacing size-7 orientation-h"></div>
                <div className="colorsWrapper n1">
                  <div
                    className="color usersColorsBaseBG-0"
                    onClick={() => setNameColor("white")}
                  ></div>
                  <div
                    className="color usersColorsBaseBG-1"
                    onClick={() => setNameColor("#f35")}
                  ></div>
                  <div
                    className="color usersColorsBaseBG-2"
                    onClick={() => setNameColor("#f96c06")}
                  ></div>
                  <div
                    className="color usersColorsBaseBG-3"
                    onClick={() => setNameColor("#f5c249")}
                  ></div>
                </div>
                <div className="colorsWrapper n2">
                  <div className="color usersColorsBaseBG-4"></div>
                  <div className="color usersColorsBaseBG-5"></div>
                  <div className="color usersColorsBaseBG-6"></div>
                  <div className="color usersColorsBaseBG-7"></div>
                </div>
              </div>
              <div className="ModalButtons">
                <div
                  className="Button style-default mode-primary round-circle size-1 ModalButton inline"
                  onClick={changeColorName}
                >
                  <div className="ButtonContent">
                    <div className="ButtonText">
                      <span className="priceStyle">
                        <span className="vt">
                          Изменить за <b>15 000</b>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

            )}

    </div>

    </div>
		</div>
		</div>
    </div>
	);

   

}





function number_format(number, decimals, dec_point, thousands_sep) {
	decimals = false;
	var i, j, kw, kd, km;
	if (isNaN((decimals = Math.abs(decimals)))) {
		decimals = 2;
	}
	if (dec_point == undefined) {
		dec_point = ".";
	}
	if (thousands_sep == undefined) {
		thousands_sep = " ";
	}

	i = parseInt((number = (+number || 0).toFixed(decimals))) + "";

	if ((j = i.length) > 3) {
		j = j % 3;
	} else {
		j = 0;
	}

	km = j ? i.substr(0, j) + thousands_sep : "";
	kw = i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep);
	kd = decimals
		? dec_point +
		  Math.abs(number - i)
				.toFixed(decimals)
				.replace(/-/, 0)
				.slice(2)
		: "";
	return km + kw + kd;
}
function number_format2(number, decimals, dec_point, thousands_sep) {
	var i, j, kw, kd, km;
	if (isNaN((decimals = Math.abs(decimals)))) {
		decimals = 2;
	}
	if (dec_point == undefined) {
		dec_point = ".";
	}
	if (thousands_sep == undefined) {
		thousands_sep = " ";
	}

	i = parseInt((number = (+number || 0).toFixed(decimals))) + "";

	if ((j = i.length) > 3) {
		j = j % 3;
	} else {
		j = 0;
	}

	km = j ? i.substr(0, j) + thousands_sep : "";
	kw = i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep);
	kd = decimals
		? dec_point +
		  Math.abs(number - i)
				.toFixed(decimals)
				.replace(/-/, 0)
				.slice(2)
		: "";
	return km + kw + kd;
}

function lil_format(number) {
  if (number < 1000) {
    return number;
  }
  if (number > 999 && number < 1000000) {
    return (number / 1000).toFixed(0) + "K";
  }
  if (number > 999999 && number < 1000000000) {
    return (number / 1000000).toFixed(1) + "М";
  }
  if (number > 999999999) {
    return (number / 1000000000).toFixed(1) + "В";
  }
}

export default App;