diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css index 707c1f3..896cb9d 100644 --- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css +++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css @@ -7,27 +7,83 @@ height: 32vh; border: 1px solid #262C55; margin: 2.6%; + margin-top: 0px; } -.double-game-main-box{ +.double-game { + z-index: 1; + border-radius: 20px; + width: 69%; + height: 94%; +} + +.double-game-main-box { border-radius: 10px; border: 1px solid #262C55; - padding-top: 7vh; - padding-bottom: 7vh; + padding-top: 4vh; + padding-bottom: 4vh; padding-left: 0vh !important; padding-right: 0vh !important; background: #1A1F37; - + margin-bottom: 1vh !important; } .double-carousel { z-index: 1; position: relative; - border-radius: 10px; background: #2E2D37; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); width: 100%; margin-top: 1px; - border: 1px solid #262C55; + border: 1vh solid #2E2D37; + border-right: 0vh !important; + border-left: 0vh !important; height: 95%; +} + +.container-double-history-text { + display: flex; +} + +.double-history-text { + background-color: #728DF8; + border: none; + color: #0E1220; + padding-right: 1vh; + padding-left: 1vh; + font-size: 16px; + margin: 4px 2px; + border-radius: 5px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + font-size: 18px; + font-family: Montserrat; + font-weight: bold; +} + +.double-carousel-arrow { + position: absolute; + bottom: -3vh; + left: 50%; + transform: translateX(-50%); + color: #728DF8; + font-size: 24px; +} + +.double-carousel-arrow-upper { + position: absolute; + top: -3vh; + left: 50%; + transform: translateX(-50%) rotate(180deg); + color: #728DF8; + font-size: 24px; +} + +.double-game-history-main-box { + border-radius: 20px; + border: 1px solid #262C55; + padding-top: 1vh; + padding-bottom: 0vh; + padding-left: 1vh; + padding-right: 0vh; + background: #1A1F37; } \ 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 a3bce2b..a503d61 100644 --- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css +++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css @@ -47,17 +47,12 @@ .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; diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png new file mode 100644 index 0000000..534865b Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png differ diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png new file mode 100644 index 0000000..b79ba1d Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png differ diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png new file mode 100644 index 0000000..490524a Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png differ diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js index baa1da5..c49f0b5 100644 --- a/luckydiamond/src/assets/js/chat/ChatLogic.js +++ b/luckydiamond/src/assets/js/chat/ChatLogic.js @@ -31,7 +31,7 @@ export function ConnectToChat() { if (dataObject.MessageType == 'DoubleGameState') { eventBus.emit('doubleGame', event.data) - console.log('data') + console.log(event.data) return; } diff --git a/luckydiamond/src/assets/js/games/double/DoubleApi.js b/luckydiamond/src/assets/js/games/double/DoubleApi.js new file mode 100644 index 0000000..5797c4d --- /dev/null +++ b/luckydiamond/src/assets/js/games/double/DoubleApi.js @@ -0,0 +1,22 @@ +import { BackendApiUrl } from '@/properties/Сonfig.js'; + +export async function GetNewestDoubleGames() { + try { + const response = await fetch(`${BackendApiUrl}/GameDouble/GetNewestDoubleGames`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + redirect: 'follow' + }) + + if (!response.ok) { + console.log('Fetch error:', response.status) + } + + return await response + } + catch (error) { + console.log('Fetch error') + } +} \ No newline at end of file diff --git a/luckydiamond/src/main.js b/luckydiamond/src/main.js index 11a6fff..bd12f6a 100644 --- a/luckydiamond/src/main.js +++ b/luckydiamond/src/main.js @@ -13,6 +13,16 @@ export const eventBus = mitt() const app = createApp(App) +app.config.warnHandler = (msg) => { + // Intercept specific warning message and suppress it + if (msg.includes('Property or method "clickedBtn" is not defined on the instance but referenced during render.')) { + // You can simply return to ignore it, or even better, log it somewhere if you have a logging system + return; + } + + // Log or handle other warnings as you see fit + }; + app.use(router) app.mixin(Mixins) diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue index 3174f20..b49c10c 100644 --- a/luckydiamond/src/pages/games-pages/DoublePage.vue +++ b/luckydiamond/src/pages/games-pages/DoublePage.vue @@ -60,19 +60,21 @@ -
+
+
▲
+
▲
@@ -86,6 +88,32 @@
+
+
+ история +
+ +
+ + +
+ +
+ + +
+

double

@@ -107,6 +135,7 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue"; import HeaderComponent from "@/components/HeaderComponent.vue"; import ChatComponent from "@/components/ChatComponent.vue"; import JackpotNumbers from "@/mocks/JackpotNumbers"; +import { GetNewestDoubleGames } from "@/assets/js/games/double/DoubleApi"; import { Carousel, Slide } from "vue3-carousel"; import "vue3-carousel/dist/carousel.css"; @@ -129,8 +158,26 @@ export default { JackpotNumbers, }; }, + async created() {}, setup() { - const slides = reactive([]); + const slides = reactive([ + { + img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), + target: "Green", + }, + { + img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"), + target: "Red", + }, + { + img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"), + target: "Black", + }, + ]); + + // const slides = reactive([]); + const slidesHistory = reactive([]); + let doubleData = reactive({}); let autoPlay = ref(0); @@ -139,54 +186,58 @@ export default { let endGame = ref(false); onMounted(() => { - if (slides.length == 0) { - for (let i = 1; i < 29; i++) { - if (i === 15 || i === 28) { - slides.push({ - img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), - target: "Green", - }); - } else { - if (i % 2 === 0) { - slides.push({ - img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"), - target: "Red", - }); - } else { - slides.push({ - img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"), - target: "Black", - }); - } - } - } - } + loadGameHistory(); + + // if (slides.length == 0) { + // for (let i = 1; i < 29; i++) { + // if (i == 15 || i == 28) { + // slides.push({ + // img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), + // target: "Green", + // }); + // } else { + // if (i % 2 == 0) { + // slides.push({ + // img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"), + // target: "Red", + // }); + // } else { + // slides.push({ + // img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"), + // target: "Black", + // }); + // } + // } + // } + // } eventBus.on("doubleGame", (dataDouble) => { const dataDoubleParse = JSON.parse(dataDouble); - doubleData = Object.assign(doubleData, dataDoubleParse); - console.log(dataDoubleParse); + // doubleData = Object.assign(doubleData, dataDoubleParse); - timeToGame.value = doubleData.WaitingTime; - - if (dataDoubleParse.Status === "InGame") { - autoPlay.value = 500; - targetColor.value = dataDoubleParse.WInColor; - } else if (dataDoubleParse.Status === "GameEnd") { - endGame.value = true; - autoPlay.value = 350; + // timeToGame.value = doubleData.WaitingTime; + if (endGame.value != true) { + if (dataDoubleParse.Status == "InGame") { + autoPlay.value = 20; + targetColor.value = dataDoubleParse.WInColor; + } + if (dataDoubleParse.Status == "GameEnd") { + targetColor.value = dataDoubleParse.WInColor; + endGame.value = true; + autoPlay.value = 150; + } } }); }); function handleStepCarousel(data) { try { - if (targetColor.value !== "") { + if (endGame.value == true) { let { currentSlideIndex } = data; - if ( slides[currentSlideIndex + 1].target == targetColor.value && - endGame.value + // slides[currentSlideIndex + 1].target == targetColor.value && + endGame.value == true ) { stopAutoPlay(); } @@ -196,12 +247,52 @@ export default { } } + async function loadGameHistory() { + try { + await GetNewestDoubleGames() + .then((response) => { + for (let i = 1; i < 29; i++) { + if (i === 15 || i === 28) { + slidesHistory.push({ + img: require("@/assets/icons-games/double-game/HistoryRectangleGreenDouble.png"), + target: "Green", + }); + } else { + if (i % 2 === 0) { + slidesHistory.push({ + img: require("@/assets/icons-games/double-game/HistoryRectangleRedDouble.png"), + target: "Red", + }); + } else { + slidesHistory.push({ + img: require("@/assets/icons-games/double-game/HistoryRectangleBlackDouble.png"), + target: "Black", + }); + } + } + } + return response.json(); + }) + .then((data) => { + console.log(data); + }) + .catch((error) => { + void error; + }); + } catch (error) { + void error; + } + } + function stopAutoPlay() { autoPlay.value = 0; + endGame.value = false; + targetColor.value = ""; } return { slides, + slidesHistory, autoPlay, doubleData, targetColor,