mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
Add carousel element
This commit is contained in:
Hepatica
@@ -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;
|
||||
@@ -225,6 +227,12 @@ 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);
|
||||
@@ -328,6 +336,7 @@ button {
|
||||
height: 35%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* /Crash */
|
||||
|
||||
/* Media */
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 909 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 901 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 909 B |
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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";
|
||||
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() {
|
||||
return {
|
||||
Object: {
|
||||
bg: "value",
|
||||
nickname: "value",
|
||||
icons: {},
|
||||
textTacholgy: { text1: "text2" },
|
||||
},
|
||||
};
|
||||
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>
|
||||
}),
|
||||
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>
|
||||
Reference in New Issue
Block a user