diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue index 464c5ee..2a57fa6 100644 --- a/luckydiamond/src/pages/games-pages/DoublePage.vue +++ b/luckydiamond/src/pages/games-pages/DoublePage.vue @@ -5,8 +5,6 @@
-

double

-

time to game - {{ timeToGame.toFixed(0) }}

@@ -32,6 +30,12 @@
+
+

double

+

+ time to game - {{ timeToGame.toFixed(0) }} +

+
@@ -63,71 +67,69 @@ export default { Slide, }, setup() { - const slides = reactive([]) - let doubleData = reactive({}) + const slides = reactive([]); + let doubleData = reactive({}); - let autoPlay = ref(0) - let targetColor = ref('') - let timeToGame = ref(0) - let endGame = ref(false) + let autoPlay = ref(0); + let targetColor = ref(""); + let timeToGame = ref(0); + let endGame = ref(false); onMounted(() => { if (slides.length == 0) { for (let i = 1; i < 29; i++) { - if (i === 15) { + if (i === 15 || i === 28) { slides.push({ img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), target: "Green", - }) - } - else { + }); + } 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/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) + eventBus.on("doubleGame", (dataDouble) => { + const dataDoubleParse = JSON.parse(dataDouble); + doubleData = Object.assign(doubleData, dataDoubleParse); + console.log(dataDoubleParse); - timeToGame.value = doubleData.WaitingTime + timeToGame.value = doubleData.WaitingTime; - if (dataDoubleParse.Status === 'InGame') { - autoPlay.value = 500 - targetColor.value = dataDoubleParse.WInColor + if (dataDoubleParse.Status === "InGame") { + autoPlay.value = 500; + targetColor.value = dataDoubleParse.WInColor; + } else if (dataDoubleParse.Status === "GameEnd") { + endGame.value = true; + autoPlay.value = 350; } - else if (dataDoubleParse.Status === 'GameEnd') { - endGame.value = true - autoPlay.value = 350 - } - }) - }) + }); + }); function handleStepCarousel(data) { try { - if (targetColor.value !== '') { - let { currentSlideIndex } = data + if (targetColor.value !== "") { + let { currentSlideIndex } = data; - if (slides[currentSlideIndex + 1].target == targetColor.value && endGame.value) { - stopAutoPlay() + if ( + slides[currentSlideIndex + 1].target == targetColor.value && + endGame.value + ) { + stopAutoPlay(); } } } catch (error) { - void(error); + void error; } } @@ -135,9 +137,17 @@ export default { autoPlay.value = 0; } - return { slides, autoPlay, doubleData, targetColor, timeToGame, handleStepCarousel, stopAutoPlay }; + return { + slides, + autoPlay, + doubleData, + targetColor, + timeToGame, + handleStepCarousel, + stopAutoPlay, + }; }, -} +};