diff --git a/README.md b/README.md index 2b0f14d..d2e5fe8 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ - Нажать сочетание клавиш ctrl + shift + i - Перейти в Application(Приложение) - Кликнуть на файлы Куки -- Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName, UserId +- Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName - Вставить значения и названия на Локальный хост - Обновить страницу @@ -41,4 +41,4 @@ ## Наша Команда -![team](https://github.com/danilt2000/LuckyDiamond/assets/96600211/0c1b43b7-fe67-4fca-85ef-16f314847b70) +![team](https://cdn.discordapp.com/attachments/1175674631684898866/1208428357952348170/Group_92.png?ex=65e33f9c&is=65d0ca9c&hm=9279223a5486b16e30267bced4fd1f7cc63ff59292cb5e29d741914b5902e5e0&) diff --git a/luckydiamond/package-lock.json b/luckydiamond/package-lock.json index 7c52dfa..42267d9 100644 --- a/luckydiamond/package-lock.json +++ b/luckydiamond/package-lock.json @@ -21,6 +21,7 @@ "vue-chart-3": "^3.1.8", "vue-recaptcha": "^3.0.0-alpha.6", "vue-router": "^4.2.5", + "vue3-carousel": "^0.3.1", "vue3-recaptcha2": "^1.8.0" }, "devDependencies": { @@ -11892,6 +11893,14 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "node_modules/vue3-carousel": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz", + "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==", + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/vue3-recaptcha2": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz", diff --git a/luckydiamond/package.json b/luckydiamond/package.json index e825f8c..85940b1 100644 --- a/luckydiamond/package.json +++ b/luckydiamond/package.json @@ -22,6 +22,7 @@ "vue-chart-3": "^3.1.8", "vue-recaptcha": "^3.0.0-alpha.6", "vue-router": "^4.2.5", + "vue3-carousel": "^0.3.1", "vue3-recaptcha2": "^1.8.0" }, "devDependencies": { diff --git a/luckydiamond/public/index.html b/luckydiamond/public/index.html index 8e3f7fd..e132356 100644 --- a/luckydiamond/public/index.html +++ b/luckydiamond/public/index.html @@ -17,6 +17,9 @@ + + + LuckyDiamond @@ -35,5 +38,5 @@ - + \ No newline at end of file diff --git a/luckydiamond/src/assets/css/ComponentsStyles/chat.css b/luckydiamond/src/assets/css/ComponentsStyles/chat.css index f7c4a42..4f5777b 100644 --- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css +++ b/luckydiamond/src/assets/css/ComponentsStyles/chat.css @@ -191,4 +191,4 @@ .mention-message { background-color: rgb(169, 113, 0); -} +} \ No newline at end of file diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css index e69de29..eab476d 100644 --- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css +++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css @@ -0,0 +1,386 @@ +.jackpot-start { + z-index: 1; + /* margin-left: 5%; */ + border-radius: 20px; + background: #1D223E; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 42vh; + /* height: 480px; */ + height: 32vh; + border: 1px solid #262C55; + /* margin-top: 2.6%; */ + margin: 2.6%; +} + +.jackpot-loading-bar { + z-index: 1; + /* margin-left: 5%; */ + border-radius: 20px; + background: #1D223E; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 100%; + + /* height: 480px; */ + /* height: 100%; */ + border: 1px solid #262C55; + height: 100%; + /* margin-top: 2.6%; */ + /* margin: 2.6%; */ +} + +.jackpot-carousel { + z-index: 1; + position: relative; + /* margin-left: 5%; */ + border-radius: 10px; + background: #1D223E; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 100%; + margin-top: 1%; + + /* height: 480px; */ + /* height: 100%; */ + border: 1px solid #262C55; + height: 95%; +} + +.carousel-arrow { + position: absolute; + bottom: -20px; + /* Регулируйте положение стрелки относительно нижнего края карусели */ + left: 50%; + /* Центрирование стрелки по горизонтали */ + transform: translateX(-50%); + /* Дополнительное центрирование, чтобы точка указывала точно на центр */ + color: #728DF8; + /* Цвет стрелки */ + font-size: 24px; + /* Размер стрелки */ + /* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */ +} +.jackpot-useringame-list{ + margin-top: 3.5%; + overflow-y: auto; + height: 62vh +} +.jackpot-carousel-user { + z-index: 1; + position: relative; + /* margin-left: 5%; */ + border-radius: 10px; + background: #1F2543; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 100%; + margin-bottom: 1%; + + /* height: 480px; */ + /* height: 100%; */ + border: 1px solid #262C55; +} + + +.jackpot-game { + z-index: 1; + /* margin-left: 5%; */ + border-radius: 20px; + /* background: #1D223E; */ + /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */ + width: 69%; + /* height: 480px; */ + height: 94%; + /* border: 1px solid #262C55; */ + margin-top: 2.6%; +} + +.jackpot-main-elements { + z-index: 1; +} + +.jackpot-start__content p { + color: #FFFFFF84; + font-weight: 700; + line-height: 31px; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size: 13px; +} + +.padding-elements-jackpot { + padding-left: 5%; + padding-right: 5%; +} + +.jackpot-start__btns { + margin-top: 5%; + display: flex; + flex-direction: column; +} + +.jackpot-start__btns button { + width: 100%; + padding: 12px; + margin-bottom: 5px; + border: none; + color: #FFF; + font-weight: 700; + line-height: 19px; + font-style: normal; + font-family: Inter; + font-size: 16px; +} + +.bank-container { + display: flex; + align-items: center; + /* background-color: #000066; */ + color: white; + padding: 10px; + border-radius: 5px; + font-family: Arial, sans-serif; + /* Choose your font */ +} + +.shield img { + width: 35px; + /* Adjust based on your shield size */ + height: auto; + margin-left: 10px; + margin-bottom: -10px; +} + +.bank-info { + display: flex; + flex-direction: column; + text-align: left; +} + +.jackpot-last-game-bar-container { + /* margin-bottom: 3%; */ + padding-top: 10px; +} + +.jackpot-last-game-bar-container img { + /* margin-bottom: 3%; */ + width: 3vh; + height: 3vh; +} + +.jackpot-last-game-bar-container-text { + padding: 0px 0 5px 0; + color: #FFF; + font-weight: 200; + line-height: 15px; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00); + font-family: Montserrat Alternates; + font-size: 8px; +} + +.jackpot-last-game-bar { + z-index: 1; + /* margin-left: 5%; */ + border-radius: 20px; + background: #1D223E; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + width: 100%; + + /* height: 480px; */ + /* height: 100%; */ + border: 1px solid #262C55; + height: 100%; + /* margin-top: 2.6%; */ + /* margin: 2.6%; */ + +} + +.bank-value { + font-size: 24px; + /* Large text size */ + font-weight: bold; + margin-left: 1%; + font-family: Montserrat; + font-weight: bold; + color: #FFFFFF84; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + /* Make the number bold */ +} + +.bank-name { + font-size: 24px; + + font-family: Montserrat; + font-weight: bold; + /* Smaller text size for 'БАНК' */ +} + +.progress-text { + transition: opacity 0.5s ease; + opacity: 1; +} + +.progress-bar { + width: 95%; + background-color: #D9D9D9; + /* Navy blue background */ + border-radius: 10px; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); + margin-left: 2vh; + margin-bottom: 3%; +} + +.progress { + height: 40px; + background-color: #E13F3F; + /* Red for the progress */ + border-radius: 10px; + /* Rounded corners on the left side */ + line-height: 40px; + /* Same as height to vertically center text */ + color: white; + text-align: start; + text-indent: 20px; + padding-right: 10px; + /* Add some padding to the right of the text */ + transition: width 0.25s ease-in-out; +} + +.no-pointer-events { + pointer-events: none; +} + +.jackpot-player-info { + display: flex; + align-items: center; + padding-left: 5px; + padding-right: 5px; + border-radius: 5px; + color: white; + font-family: Arial, sans-serif; +} + +.jackpot-player-avatar img { + width: 48px; + /* Adjust size as needed */ + height: 48px; + margin-right: 10px; + margin-left: 1vh; +} + +.jackpot-player-data { + display: flex; + flex-direction: column; +} + +.jackpot-player-name { + font-size: 16px; + /* Adjust font size as needed */ + font-weight: bold; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat; + font-weight: bold; + color: #515D83; +} + +.jackpot-player-gems { + font-size: 15px; + /* Adjust font size as needed */ + display: flex; + align-items: start; + color: #FFFFFF84; + /* font-weight: 700; */ + /* line-height: 31px; */ + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-weight: bold; + /* font-size: 13px; */ +} + + +.jackpot-gems-icon { + + margin-left: 5px; + height: 1vh; +} + +.jackpot-gems-icon-extension{ + margin-bottom: -10px !important; +} + +.jackpot-player-chance { + background-color: #27345C; + /* Adjust background color as needed */ + border-radius: 5px; + font-size: 14px; + /* Adjust font size as needed */ + padding-left: 5px !important; + padding-right: 5px; + padding-bottom: 5px; + padding-top: 5px; + border-radius: 5px; + margin-left: 10%; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat; + font-weight: bold; +} +.jackpot-chance-value { + color: #EF4444; /* Или любой другой оттенок красного, который вам нужен */ + } + + .jackpot-banner { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #1e2749; /* Dark blue background */ + padding: 5px; + border-radius: 5px; + color: white; + font-family: Montserrat; + font-weight: bold; + + } + + .jackpot-content { + display: flex; + align-items: center; + } + + .jackpot-avatar { + width: 48px; /* Adjust based on your preference */ + height: 48px; + margin-right: 10px; + } + + .jackpot-info { + display: flex; + flex-direction: column; + } + + .jackpot-name { + font-size: 16px; + font-weight: bold; + color: #515D83; + } + + .jackpot-gems { + font-size: 14px; + color: #FFFFFF84; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-weight: bold; + } + + .jackpot-chance { + font-size: 16px; + background-color: transparent; /* Adjust if you want a different background */ + } + + .jackpot-percentage { + color: #EF4444; /* Adjust if you want a different color */ + } + + +@media (max-width: 1415px) { + .padding-elements-jackpot { + padding-left: 0; + padding-right: 0; + } +} \ No newline at end of file diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css index 99e4150..1cf6905 100644 --- a/luckydiamond/src/assets/css/PagesStyles/home.css +++ b/luckydiamond/src/assets/css/PagesStyles/home.css @@ -117,7 +117,17 @@ color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: Montserrat Alternates; - font-size: 91px; + font-size:91px; + font-weight: 700; + text-transform: uppercase; + text-align: center; +} + +.title-jackpot { + color: #fff; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size:80px; font-weight: 700; text-transform: uppercase; text-align: center; @@ -127,7 +137,7 @@ display: flex; justify-content: center; align-items: center; - padding-top: 4.7%; + padding-top: 5.5%; } .line__content .line__btn--main .line__btn { @@ -157,6 +167,11 @@ margin: 1% 6.6% 1% 4.7%; } +.line__img__jackpot { + display: flex; + margin: 1% 6.6% 1% 4.7%; +} + .display-firstline { display: flex; } @@ -178,6 +193,23 @@ left: 2%; } +.line__btn__jackpot { + border-radius: 21px; + background: #FFF; + box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); + color: #000; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-family: Montserrat Alternates; + font-size: 36px; + font-weight: 700; + padding: 11px 11px; + text-decoration: none; + text-transform: uppercase; + position: relative; + bottom: 4%; + left: 6%; +} + .line__btn--elm { color: #000; font-size: 38px; @@ -377,10 +409,21 @@ } } -@media screen and (min-height: 910px) { +@media screen and (min-height: 820px) { .chat { height: 87vh !important; } } + @media screen and (max-width: 1850px) { + .line__img__jackpot { + display: none !important; + } + } +/* +@media screen and (min-height: 800) { + .chat { + height: 85vh !important; + } +} */ /* /Media */ diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css index 52320aa..5d08b65 100644 --- a/luckydiamond/src/assets/css/global.css +++ b/luckydiamond/src/assets/css/global.css @@ -204,11 +204,11 @@ button { .jackpot { display: flex; grid-area: jackpot; - height: 95%; + /* height: 95%; border-radius: 3.125rem; background: #17181C; box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25); - margin: 0.625rem 2.438rem 1.125rem 1.125rem; + margin: 0.625rem 2.438rem 1.125rem 1.125rem; */ } .about { @@ -290,6 +290,29 @@ button { } +.bg-gradient-left { + background: #293561; + filter: blur(120px); + position: absolute; + top: 250px; + transform: rotate(180deg); + left: 200px; + width: 40%; + height: 55%; + z-index: 0; +} + +.bg-two-gradient-right { + background: #293561; + filter: blur(120px); + position: absolute; + top: 220px; + transform: rotate(330deg); + left: 600px; + width: 60%; + height: 35%; + z-index: 0; +} /* /Crash */ /* Media */ diff --git a/luckydiamond/src/assets/icons-gamemodes/jackpot_icon.svg b/luckydiamond/src/assets/icons-gamemodes/jackpot_icon.svg new file mode 100644 index 0000000..d6eacae --- /dev/null +++ b/luckydiamond/src/assets/icons-gamemodes/jackpot_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg new file mode 100644 index 0000000..5696a78 --- /dev/null +++ b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js index 0bbece7..9dea039 100644 --- a/luckydiamond/src/assets/js/chat/ChatLogic.js +++ b/luckydiamond/src/assets/js/chat/ChatLogic.js @@ -8,6 +8,12 @@ let webSocket; export function ConnectToChat() { try { + + if (webSocket && webSocket.readyState === WebSocket.OPEN) { + console.log('WebSocket connection already established.'); + return; + } + webSocket = new WebSocket(BackendWebSocketUrl); webSocket.onopen = function () { diff --git a/luckydiamond/src/assets/js/jackpot/JackpotLogic.js b/luckydiamond/src/assets/js/jackpot/JackpotLogic.js new file mode 100644 index 0000000..ef1fa78 --- /dev/null +++ b/luckydiamond/src/assets/js/jackpot/JackpotLogic.js @@ -0,0 +1,87 @@ +import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js'; +import { BackendApiUrl } from '@/properties/Сonfig.js'; +import { eventBus } from "@/main"; + +// import { +// GetCookie +// } from "@/assets/js/storage/CookieStorage.js"; + +let webSocket; + +export function ConnectToJackpotSocket() { + try { + + if (webSocket && webSocket.readyState === WebSocket.OPEN) { + console.log('WebSocket connection already established.'); + return; + } + + webSocket = new WebSocket(BackendWebSocketJackpotUrl); + + webSocket.onopen = function () { + console.log('Connection established'); + }; + + webSocket.onmessage = function (event) { + + // const dataObject = JSON.parse(event.data); + + eventBus.emit('jackpotGameTik', event.data); + + // console.log(dataObject) + // if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) { + // eventBus.emit('dataChat', event.data); + // console.log('CHAT') + // } + // else { + // eventBus.emit('crash', event.data) + // } + + }; + + webSocket.onclose = function () { + + webSocket = new WebSocket(BackendWebSocketJackpotUrl); + + console.log('Connection closed and reconnected'); + }; + + webSocket.onerror = function (event) { + webSocket = new WebSocket(BackendWebSocketJackpotUrl); + console.error('WebSocket Error:', event); + }; + } catch (error) { + console.error('Error in ConnectToChat:', error); + } +} + +export async function JoinJackpotGame(userData, amount) { + const data = { + userCredentials: { + searchToken: userData.searchToken, + authtoken: userData.authtoken + }, + bid: amount + } + + try { + const response = await fetch(`${BackendApiUrl}/GameJackpot/JoinJackpotGame`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data), + redirect: 'follow' + }) + + if (!response.ok) { + console.log('Fetch error:', response.status) + } + + console.log(response) + return await response.json() + } + catch (error) { + console.log('Fetch error') + } +} diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue index 3103651..43706b8 100644 --- a/luckydiamond/src/components/ChatComponent.vue +++ b/luckydiamond/src/components/ChatComponent.vue @@ -11,7 +11,13 @@