mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
Add stable version of double
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -31,7 +31,7 @@ export function ConnectToChat() {
|
||||
|
||||
if (dataObject.MessageType == 'DoubleGameState') {
|
||||
eventBus.emit('doubleGame', event.data)
|
||||
console.log('data')
|
||||
console.log(event.data)
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
22
luckydiamond/src/assets/js/games/double/DoubleApi.js
Normal file
22
luckydiamond/src/assets/js/games/double/DoubleApi.js
Normal file
@@ -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')
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -60,19 +60,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div class="jackpot-game">
|
||||
<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"
|
||||
:itemsToShow="3"
|
||||
@slide-start="handleStepCarousel"
|
||||
>
|
||||
<Slide v-for="(slide, index) in slides" :key="index">
|
||||
@@ -86,6 +88,32 @@
|
||||
</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"
|
||||
:wrapAround="true"
|
||||
:autoplay="autoPlay"
|
||||
class="no-pointer-events"
|
||||
:transition="150"
|
||||
:itemsToShow="28"
|
||||
@slide-start="handleStepCarousel"
|
||||
>
|
||||
<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-12">
|
||||
<h1>double</h1>
|
||||
<h2 v-if="timeToGame !== null">
|
||||
@@ -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;
|
||||
// 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;
|
||||
} else if (dataDoubleParse.Status === "GameEnd") {
|
||||
endGame.value = true;
|
||||
autoPlay.value = 350;
|
||||
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,
|
||||
|
||||
Reference in New Issue
Block a user