Add stable version of double

This commit is contained in:
Hepatica
2024-03-31 07:24:35 +02:00
parent b1a98f704b
commit a18eca3d8c
9 changed files with 225 additions and 51 deletions

View File

@@ -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;
}

View File

@@ -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

View File

@@ -31,7 +31,7 @@ export function ConnectToChat() {
if (dataObject.MessageType == 'DoubleGameState') {
eventBus.emit('doubleGame', event.data)
console.log('data')
console.log(event.data)
return;
}

View 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')
}
}

View File

@@ -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)

View File

@@ -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;
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,