Add stable version of double

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-top: 4vh;
-    padding-bottom: 7vh;
+    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;
 }

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;

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

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

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)
 

luckydiamond/src/pages/games-pages/DoublePage.vue

@@ -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) {
+      loadGameHistory();
-        for (let i = 1; i < 29; i++) {
+
-          if (i === 15 || i === 28) {
+      // if (slides.length == 0) {
-            slides.push({
+      //   for (let i = 1; i < 29; i++) {
-              img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
+      //     if (i == 15 || i == 28) {
-              target: "Green",
+      //       slides.push({
-            });
+      //         img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
-          } else {
+      //         target: "Green",
-            if (i % 2 === 0) {
+      //       });
-              slides.push({
+      //     } else {
-                img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+      //       if (i % 2 == 0) {
-                target: "Red",
+      //         slides.push({
-              });
+      //           img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
-            } else {
+      //           target: "Red",
-              slides.push({
+      //         });
-                img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+      //       } else {
-                target: "Black",
+      //         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);
+        // doubleData = Object.assign(doubleData, dataDoubleParse);
-        console.log(dataDoubleParse);
 
-        timeToGame.value = doubleData.WaitingTime;
+        // timeToGame.value = doubleData.WaitingTime;
-
+        if (endGame.value != true) {
-        if (dataDoubleParse.Status === "InGame") {
+          if (dataDoubleParse.Status == "InGame") {
-          autoPlay.value = 500;
+            autoPlay.value = 20;
-          targetColor.value = dataDoubleParse.WInColor;
+            targetColor.value = dataDoubleParse.WInColor;
-        } else if (dataDoubleParse.Status === "GameEnd") {
+          }
-          endGame.value = true;
+          if (dataDoubleParse.Status == "GameEnd") {
-          autoPlay.value = 350;
+            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,