From f40a2ade8be0b5c8a824a00ddf559fb7d8f2521f Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sun, 17 Mar 2024 21:37:28 +0100
Subject: [PATCH] Add carousel element

---
 luckydiamond/src/assets/css/global.css        |  19 +-
 .../double-game/RectangleBlackDouble.svg      |  17 ++
 .../double-game/RectangleGreenDouble.svg      |  17 ++
 .../double-game/RectangleRedDouble.svg        |  17 ++
 .../src/components/DoubleComponent.vue        |  29 ---
 .../src/components/DoubleComponent2.vue       | 231 ------------------
 .../src/pages/games-pages/DoublePage.vue      | 213 +++++++++++++---
 7 files changed, 244 insertions(+), 299 deletions(-)
 create mode 100644 luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.svg
 create mode 100644 luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.svg
 create mode 100644 luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.svg
 delete mode 100644 luckydiamond/src/components/DoubleComponent.vue
 delete mode 100644 luckydiamond/src/components/DoubleComponent2.vue

diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 1b884d3..b702f24 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -108,6 +108,7 @@ button {
         "menu jackpot jackpot jackpot jackpot jackpot chat";
     grid-gap: 0.625rem;
 }
+
 .content-grid--double {
     display: grid;
     grid-auto-columns: 1fr;
@@ -123,6 +124,7 @@ button {
         "menu double double double double double chat";
     grid-gap: 0.625rem;
 }
+
 .grid-crash {
     display: grid;
     grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
@@ -177,7 +179,7 @@ button {
     height: 86vh;
     position: relative;
     z-index: 3;
-   
+
 }
 
 /* /Chat */
@@ -225,9 +227,15 @@ button {
     margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }
 
+.double {
+    display: flex;
+    grid-area: double;
+   
+}
+
 .about {
     grid-area: about;
-    
+
 }
 
 
@@ -293,7 +301,7 @@ button {
     grid-area: help;
     display: flex;
     /* height:99%; */
-    height:86vh;
+    height: 86vh;
     border-radius: 3.125rem;
     background: #17181C;
     box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
@@ -301,7 +309,7 @@ button {
     /*height: 96.2%;*/
     width: 1000px;
     margin: 0 auto;
-    
+
 }
 
 
@@ -328,8 +336,9 @@ button {
     height: 35%;
     z-index: 0;
 }
+
 /* /Crash */
 
 /* Media */
 
-/* /Media */
+/* /Media */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.svg b/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.svg
new file mode 100644
index 0000000..8f73ee1
--- /dev/null
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.svg
@@ -0,0 +1,17 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2522_173)">
+<rect x="4" width="100" height="100" rx="15" fill="#1F1F1F"/>
+</g>
+<defs>
+<filter id="filter0_d_2522_173" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_173"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_173" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.svg b/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.svg
new file mode 100644
index 0000000..8025bc2
--- /dev/null
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.svg
@@ -0,0 +1,17 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_3462_2)">
+<rect x="4" width="100" height="100" rx="15" fill="#3B6D3A"/>
+</g>
+<defs>
+<filter id="filter0_d_3462_2" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3462_2"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3462_2" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.svg b/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.svg
new file mode 100644
index 0000000..4f4ba8f
--- /dev/null
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.svg
@@ -0,0 +1,17 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2522_175)">
+<rect x="4" width="100" height="100" rx="15" fill="#EF4444"/>
+</g>
+<defs>
+<filter id="filter0_d_2522_175" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_175"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_175" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/components/DoubleComponent.vue b/luckydiamond/src/components/DoubleComponent.vue
deleted file mode 100644
index ca6fa1f..0000000
--- a/luckydiamond/src/components/DoubleComponent.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <!-- <roll /> -->
-    <div class="d-flex align-items-center justify-content-center">
-      <double />
-      <double-component2></double-component2>
-      <tutorial-page></tutorial-page>
-    </div>
-  </template>
-  
-  <script>
-  // import Roll from '../components/Roll.vue';
-  import DoubleComponent2 from "@/components/DoubleComponent2.vue";
-//   import TutorialPage from '@/pages/games-pages/TutorialPage.vue';
-  
-  export default {
-    name: 'DoubleComponent22',
-    components: {
-      // Roll
-      DoubleComponent2,
-    //   TutorialPage
-    }
-  }
-  </script>
-  
-  <style scoped>
-  .d-flex {
-    margin-left: 20vh;
-  }
-</style>
\ No newline at end of file
diff --git a/luckydiamond/src/components/DoubleComponent2.vue b/luckydiamond/src/components/DoubleComponent2.vue
deleted file mode 100644
index 0a937f1..0000000
--- a/luckydiamond/src/components/DoubleComponent2.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
-    <div class="containerbox">
-        <div class="container main d-flex p-5 my-5">
-            <div>
-                <div>
-                    <span class="text-white">
-                        sua escolha foi: {{ corSelecionada }}
-                    </span>
-                </div>
-                <h5 class="text-white">
-                    Seu saldo na carteira: <span class="text-primary"> {{ `R$ ${wallet},00 ` }}</span>
-                </h5>
-                <div class="d-flex">
-                    <button class="mx-1" :class="corSelecionada === 'vermelho' ? 'btn-red-active' : 'btn-red'"
-                        @click="corSelecionada = 'vermelho'">2x</button>
-                    <button class="mx-1" :class="corSelecionada === 'branco' ? 'btn-white-active' : 'btn-white '"
-                        @click="corSelecionada = 'branco'">14x</button>
-                    <button class="btn-black mx-1" :class="corSelecionada === 'preto' ? 'btn-black-active' : 'btn-black '"
-                        @click="corSelecionada = 'preto'">2x</button>
-                </div>
-                <div class="my-3">
-                    <!-- <label class="text-white" for="aposta">Valor da Aposta:</label> -->
-                    <div class="d-flex aling-items-center my-3 p-2 input-container">
-                        <input class="input-controler" type="number" id="aposta" v-model.number="valorAposta" :max="wallet"
-                            placeholder="Quantia" />
-                        <span class="text-white fw-bold">R$</span>
-                    </div>
-                    <button class="btn btn-primary w-100" @click="iniciarJogo()"
-                        :disabled="indiceEtapa !== 0 || !corSelecionada || !valorAposta || valorAposta > wallet">Começar Jogo</button>
-                </div>
-            </div>
-            <div class="container">
-                <div class="progress">
-                    <div class="progress-bar" role="progressbar" :style="{ width: `${contador * 10}%` }">
-                        <span class="timer-count">
-                            {{ contador.toFixed(1) }} {{ etapas[indiceEtapa] }} <span v-if="indiceEtapa === 2">{{
-                                numeroGerado }}</span>
-                        </span>
-                    </div>
-                </div>
-                <roll :etapa="etapas[indiceEtapa]" :winnerNumber="numeroGerado" @number-roll="atualizarNumero" />
-            </div>
-        </div>
-    </div>
-    <!-- <tutorial-page></tutorial-page> -->
-    <roll-page></roll-page>
-</template>
-<script>
-import RollPage from '@/pages/games-pages/RollPage.vue';
-// import TutorialPage from '@/pages/games-pages/TutorialPage.vue';
-
-export default {
-    components: {
-        RollPage,
-        // TutorialPage
-    },
-    data() {
-        return {
-            contador: 10,
-            etapas: ['Iniciar...', 'Girando...', 'Vencedor:'],
-            indiceEtapa: 0,
-            corSelecionada: null,
-            valorAposta: null,
-            resultado: null,
-            numeroGerado: null,
-            numtest: 6,
-            numeroDaRoleta: '',
-            wallet: 500,
-        }
-    },
-    mounted() {
-        setInterval(() => {
-            this.contador -= 0.1
-            if (this.contador < 0.1) {
-                this.indiceEtapa = (this.indiceEtapa + 1) % this.etapas.length
-                this.contador = 10
-                if (this.indiceEtapa === 2) {
-                    this.gerarNumero()
-                    this.avaliarResultado()
-                    this.resetGame()
-                }
-            }
-        }, 100)
-    },
-    methods: {
-        atualizarNumero(num) {
-            this.numeroDaRoleta = num.num
-        },
-        iniciarJogo() {
-            if (this.valorAposta > this.wallet) {
-                alert('Valor da aposta é maior do que a carteira')
-                return
-            }
-            if (!this.corSelecionada || !this.valorAposta) {
-                alert('Selecione uma cor e insira o valor da aposta')
-                return
-            }
-            this.resultado = null
-            this.indiceEtapa = 1
-            // this.wallet -= this.valorAposta
-        },
-        gerarNumero() {
-            this.numeroGerado = this.numeroDaRoleta;
-        },
-        resetGame() {
-            this.corSelecionada = null,
-                this.numeroDaRoleta = null
-        },
-        avaliarResultado() {
-            if (this.numeroGerado <= 7 && this.corSelecionada === "vermelho" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
-                this.resultado = "Parabéns! Você ganhou!";
-                this.wallet += this.valorAposta * 2;
-            } else if (this.numeroGerado > 7 && this.numeroGerado <= 14 && this.corSelecionada === "preto" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
-                this.resultado = "Parabéns! Você ganhou!";
-                this.wallet += this.valorAposta * 2;
-            } else if (this.numeroGerado === 15 && this.corSelecionada === "branco" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
-                this.resultado = "Parabéns! Você ganhou!";
-                this.wallet += this.valorAposta * 14;
-            } else {
-                if (this.corSelecionada != null && this.valorAposta <= this.wallet) {
-                    this.resultado = "Que pena! Tente novamente.";
-                    this.wallet -= this.valorAposta;
-                }
-            }
-            this.indiceEtapa = 2;
-        }
-    }
-}
-</script>
-
-<style scoped>
-.progress {
-    width: 40vh;
-}
-.containerbox {
-    width: 432px;
-    height: 438px;
-    margin-right: 300px;
-}
-.input-container {
-    background-color: #000;
-    border-radius: 5px;
-}
-
-.input-controler {
-    background-color: transparent;
-    outline: none;
-    border: none;
-    color: #fff;
-}
-
-.main {
-    background-color: #2f2f2f;
-    border-radius: 10px;
-}
-
-.active {
-    border: 3px solid #fff;
-}
-
-.progress-bar {
-    background-color: #ff0037;
-    transition: width 0.1s ease-in-out;
-    width: 10vh;
-}
-
-.btn-white {
-    background-color: #fff;
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-}
-
-.btn-black {
-    background-color: #000;
-    color: white;
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-}
-
-.btn-red {
-    background-color: #ff0037;
-    color: white;
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-}
-
-.btn-red-active {
-    background-color: #940826;
-    color: white;
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-    border: 3px solid #fff;
-}
-
-.btn-black-active {
-    background-color: #000000;
-    color: white;
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-    border: 3px solid #fff;
-}
-
-.btn-white-active {
-    background-color: #858283;
-    color: rgb(0, 0, 0);
-    width: 100%;
-    border: none;
-    height: 50px;
-    border-radius: 10px;
-    border: 3px solid #000000;
-}
-
-.timer-count {
-    position: absolute;
-    
-    
-    font-size: 17px;
-    color: #000;
-    font-weight: bold;
-}
-</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue
index 9002af0..90a44a0 100644
--- a/luckydiamond/src/pages/games-pages/DoublePage.vue
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -1,39 +1,184 @@
 <template>
-    <div class="content-grid--double">
-      <aside-bar-component></aside-bar-component>
-      <chat-component></chat-component>
-      <section class="double">
-  
+  <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>
+
+    <!-- <double-component></double-component> -->
+    <section class="double">
+      <h1>gdfgf</h1>
+
+      <!-- v-bind="settings" :breakpoints="breakpoints" -->
+      <Carousel
+      ref="carousel"
+      :wrapAround="true"
       
-  
-      </section>
-      <header-component></header-component>
-    <double-component></double-component>
-    </div>
-  </template>
+      :itemsToShow="10"
+
+      >
+        <!-- <Slide v-for="slide in 10" :key="slide">
+          <div class="carousel__item">{{ slide }}</div>
+        </Slide> -->
+
+        <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>
+
+        <!-- <template #addons>
+          <Navigation />
+        </template> -->
+      </Carousel>
+
+      <!-- <Carousel
+                    ref="carousel"
+                    :itemsToShow="10"
+                    :autoplay="10"
+                    :transition="150"
+                    :wrapAround="true"
+                    class="no-pointer-events"
+                  >
+                    <Slide v-for="(slide, index) in slides" :key="index">
+                      <div class="carousel__item">
+                        <img
+                          :src="slide.img"
+                          onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
+                        />
+                      </div>
+                    </Slide>
+                  </Carousel> -->
+    </section>
+  </div>
+</template>
   <script>
-  import DoubleComponent from "@/components/DoubleComponent.vue";
-  import AsideBarComponent from "@/components/AsidebarComponent.vue";
-  import HeaderComponent from "@/components/HeaderComponent.vue";
-  import ChatComponent from "@/components/ChatComponent.vue";
-  
-  export default {
-    data() {
-      return {
-        Object: {
-          bg: "value",
-          nickname: "value",
-          icons: {},
-          textTacholgy: { text1: "text2" },
-        },
-      };
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import "@/assets/css/PagesStyles/games-pages/jackpot.css";
+import "@/assets/css/global.css";
+
+export default {
+  data: () => ({
+    // carousel settings
+    // slides: [],
+    slides: [
+      {
+        img: "@/assets/icons-games/double-game/RectangleRedDouble.svg",
+        nickname: "Hepatir",
+      },
+      {
+        img: "@/assets/icons-games/double-game/RectangleGreenDouble.svg",
+        nickname: "Hepatir",
+      },
+      {
+        img: "@/assets/icons-games/double-game/RectangleBlackDouble.svg",
+        nickname: "Ckutls_",
+      }
+      // ,
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //   nickname: "Ckutls_",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //   nickname: "Ckutls_",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //   nickname: "Hepagfdtir",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //   nickname: "Ckutls_",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //   nickname: "Ckutls_",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //   nickname: "Ckutls_",
+      // },
+      // {
+      //   img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //   nickname: "Hepgdfatir",
+      // },
+    ],
+    settings: {
+      itemsToShow: 1,
+      snapAlign: "center",
     },
-    name: "HelpPage",
-    components: {
-      HeaderComponent,
-      AsideBarComponent,
-      DoubleComponent,
-      ChatComponent,
+    // breakpoints are mobile first
+    // any settings not specified will fallback to the carousel settings
+    breakpoints: {
+      // 700px and up
+      700: {
+        itemsToShow: 3.5,
+        snapAlign: "center",
+      },
+      // 1024 and up
+      1024: {
+        itemsToShow: 5,
+        snapAlign: "start",
+      },
     },
-  };
-  </script>
\ No newline at end of file
+  }),
+  name: "HelpPage",
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    ChatComponent,
+    Carousel,
+    Slide,
+  },
+};
+</script>
+
+<style scoped>
+.carousel__slide {
+  padding: 5px;
+}
+
+.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);
+}
+</style>
\ No newline at end of file