mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
436 lines
14 KiB
Vue
436 lines
14 KiB
Vue
<template>
|
||
<div class="content-grid--double">
|
||
<aside-bar-component></aside-bar-component>
|
||
<chat-component></chat-component>
|
||
<header-component></header-component>
|
||
<div class="bg-gradient-left"></div>
|
||
<section class="double">
|
||
<div class="double-start">
|
||
<div
|
||
class="jackpot-start__content title-saper padding-elements-jackpot"
|
||
>
|
||
<h2>Рулетка</h2>
|
||
<p>Крути, ставь, побеждай!</p>
|
||
<div class="saper-start__choises diamonds diamonds-input__margin">
|
||
<h3>Сумма депозита</h3>
|
||
|
||
<div class="diamonds__choises">
|
||
<img
|
||
class="diamond-icon"
|
||
src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
|
||
/>
|
||
<input
|
||
v-model="amountDeposit"
|
||
type="number"
|
||
id="diamonds-input"
|
||
/>
|
||
<div class="diamonds__btns btn-style__diamonds">
|
||
<ul class="diamonds-btns__display">
|
||
<li v-for="(item, index) in JackpotNumbers" :key="index">
|
||
<button
|
||
@click="clickedBtnChoice(index, item.diamonds)"
|
||
:class="{
|
||
'btn-click': clickedBtn === index,
|
||
[index]: clickedBtn === index,
|
||
}"
|
||
:id="item.diamonds === 'max' ? 'max-button' : null"
|
||
v-if="item.diamonds !== undefined"
|
||
>
|
||
{{ item.diamonds }}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="jackpot-start__btns">
|
||
<div class="error-block" v-if="ErrorClick">
|
||
<h2>Ошибка при заполнении</h2>
|
||
</div>
|
||
<button
|
||
class="btn-start"
|
||
:class="{ 'animate-start-btn': ErrorClick }"
|
||
@click="clickPlayBtn"
|
||
>
|
||
Начать игру
|
||
</button>
|
||
<!-- <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
|
||
<button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
<div class="double-game">
|
||
<div class="bootstrap-wrapper">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 double-game-main-box">
|
||
<div class="double-carousel">
|
||
<div class="double-carousel-arrow">▲</div>
|
||
<div class="double-carousel-arrow-upper">▲</div>
|
||
<Carousel
|
||
ref="carousel"
|
||
:wrapAround="true"
|
||
:autoplay="autoPlay"
|
||
class="no-pointer-events"
|
||
:transition="150"
|
||
:itemsToShow="10"
|
||
@slide-start="handleStepCarousel"
|
||
>
|
||
<Slide v-for="(slide, index) in slides" :key="index">
|
||
<div>
|
||
<img
|
||
:src="slide.img"
|
||
onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
|
||
/>
|
||
</div>
|
||
</Slide>
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 double-game-history-main-box">
|
||
<div class="container-double-history-text">
|
||
<span class="double-history-text">история</span>
|
||
</div>
|
||
|
||
<div class="double--history-carousel">
|
||
<Carousel
|
||
ref="carouselHistory"
|
||
class="no-pointer-events"
|
||
:transition="150"
|
||
:itemsToShow="24"
|
||
>
|
||
<Slide v-for="(slide, index) in slidesHistory" :key="index">
|
||
<div>
|
||
<img
|
||
:src="slide.img"
|
||
onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
|
||
/>
|
||
</div>
|
||
</Slide>
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4" style="padding-left: 0px">
|
||
<div class="double-members-ingame-red">
|
||
<div class="double-members-flex-container">
|
||
<div class="double-red-box">
|
||
RED X2
|
||
</div>
|
||
<div class="double-user-icon">
|
||
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
|
||
</div>
|
||
</div>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4" style="padding-left: 0px">
|
||
<div class="double-members-ingame-green">
|
||
<div class="double-members-flex-container">
|
||
<div class="double-green-box">
|
||
GREEN X20
|
||
</div>
|
||
<div class="double-user-icon">
|
||
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
|
||
</div>
|
||
</div>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
|
||
<div class="double-members-ingame-black">
|
||
<div class="double-members-flex-container">
|
||
<div class="double-white-box">
|
||
BLACK X2
|
||
</div>
|
||
<div class="double-user-icon">
|
||
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
|
||
</div>
|
||
</div>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
<h1>fds</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { reactive, ref, onMounted } from "vue";
|
||
|
||
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";
|
||
|
||
import "@/assets/css/PagesStyles/games-pages/jackpot.css";
|
||
import "@/assets/css/PagesStyles/games-pages/double.css";
|
||
import "@/assets/css/global.css";
|
||
import { eventBus } from "@/main";
|
||
|
||
export default {
|
||
components: {
|
||
HeaderComponent,
|
||
AsideBarComponent,
|
||
ChatComponent,
|
||
Carousel,
|
||
Slide,
|
||
},
|
||
data() {
|
||
return {
|
||
JackpotNumbers,
|
||
};
|
||
},
|
||
async created() {},
|
||
setup() {
|
||
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",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
|
||
target: "Red",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
|
||
target: "Black",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
|
||
target: "Green",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
|
||
target: "Black",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
|
||
target: "Red",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
|
||
target: "Black",
|
||
},
|
||
{
|
||
img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
|
||
target: "Red",
|
||
},
|
||
]);
|
||
|
||
// const slides = reactive([]);
|
||
const slidesHistory = reactive([]);
|
||
|
||
let doubleData = reactive({});
|
||
|
||
let autoPlay = ref(0);
|
||
let targetColor = ref("");
|
||
let timeToGame = ref(0);
|
||
let endGame = ref(false);
|
||
|
||
onMounted(() => {
|
||
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);
|
||
|
||
// 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 (endGame.value == true) {
|
||
let { currentSlideIndex } = data;
|
||
if (
|
||
slides[currentSlideIndex + 1].target == targetColor.value &&
|
||
endGame.value == true
|
||
) {
|
||
stopAutoPlay();
|
||
setTimeout(() => {
|
||
loadGameHistory();
|
||
}, 2000);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
void error;
|
||
}
|
||
}
|
||
|
||
async function loadGameHistory() {
|
||
try {
|
||
await GetNewestDoubleGames()
|
||
.then((response) => {
|
||
return response.json();
|
||
})
|
||
.then((data) => {
|
||
slidesHistory.value = [];
|
||
slidesHistory.length = 0;
|
||
for (let i = 0; i < 25; i++) {
|
||
// doubleData = Object.assign(doubleData, dataDoubleParse);
|
||
|
||
// timeToGame.value = doubleData.WaitingTime;
|
||
if (data[i].winColor == "Red") {
|
||
slidesHistory.push({
|
||
img: require("@/assets/icons-games/double-game/HistoryRectangleRedDouble.png"),
|
||
target: "Red",
|
||
});
|
||
}
|
||
if (data[i].winColor == "Black") {
|
||
slidesHistory.push({
|
||
img: require("@/assets/icons-games/double-game/HistoryRectangleBlackDouble.png"),
|
||
target: "Black",
|
||
});
|
||
}
|
||
if (data[i].winColor == "Green") {
|
||
slidesHistory.push({
|
||
img: require("@/assets/icons-games/double-game/HistoryRectangleGreenDouble.png"),
|
||
target: "Green",
|
||
});
|
||
}
|
||
}
|
||
|
||
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,
|
||
timeToGame,
|
||
handleStepCarousel,
|
||
stopAutoPlay,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.carousel__slide {
|
||
padding: 1px;
|
||
}
|
||
|
||
.carousel__viewport {
|
||
perspective: 2000px;
|
||
}
|
||
|
||
.carousel__track {
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.carousel__slide--sliding {
|
||
transition: 0.5s;
|
||
}
|
||
|
||
.carousel__slide {
|
||
opacity: 0.9;
|
||
transform: rotateY(-20deg) scale(0.9);
|
||
}
|
||
|
||
.carousel__slide--active ~ .carousel__slide {
|
||
transform: rotateY(20deg) scale(0.9);
|
||
}
|
||
|
||
.carousel__slide--prev {
|
||
opacity: 1;
|
||
transform: rotateY(-10deg) scale(0.95);
|
||
}
|
||
|
||
.carousel__slide--next {
|
||
opacity: 1;
|
||
transform: rotateY(10deg) scale(0.95);
|
||
}
|
||
|
||
.carousel__slide--active {
|
||
opacity: 1;
|
||
transform: rotateY(0) scale(1.1);
|
||
}
|
||
.double--history-carousel {
|
||
opacity: 1 !important;
|
||
transform: rotateY(0) scale(1) !important;
|
||
}
|
||
.double--history-carousel .carousel__slide--active ~ .carousel__slide,
|
||
.double--history-carousel .carousel__slide--prev,
|
||
.double--history-carousel .carousel__slide--next,
|
||
.double--history-carousel .carousel__slide--active {
|
||
opacity: 1;
|
||
transform: rotateY(0) scale(1);
|
||
}
|
||
</style> |