Skip to content

Instantly share code, notes, and snippets.

@mendesrl

mendesrl/index.html

Created January 28, 2019 15:44
Show Gist options
  • Save mendesrl/99e2d7c9b973e406c7279656042bd497 to your computer and use it in GitHub Desktop.
Save mendesrl/99e2d7c9b973e406c7279656042bd497 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
/* Desenvolver o compoenent chamado oferta, que representa cada item das Ofertas Diarias
*
Utilize apenas
Vue.compoenent( 'nomeDoComponente', {
props: {},
template: ``,
methods: {}
} )
Implementando seu componente dentro do Vue.component nao se faz necessario importa-lo no index.js
pois o mesmo eh uma instancia de Vue e tera acesso a tudo o que voce colocar em Vue.???
*/
Vue.component('ofertas',{
props:[
'imagem',
'pontospodertri',
'nome',
'pontospoderimg',
'pontospoder',
'retornamoeda',
'retornavalor',
'comprar'
],
template:
`<div class="oferta">
<div class="boxAzul" v-on:click="$emit('comprar')">
<img :src="imagem" class="imgOferta">
<img :src="pontospodertri" class="pontospodertri">
<span class="nome">{{nome}}</span>
<img :src="pontospoderimg" class="pontospoderimg">
<span class="pontospoder2">{{pontospoder}}</span>
<img :src="retornamoeda" class="retornamoeda">
<span class="retornamoedatexto">{{retornavalor}}</span>
</div>
</div>`
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Brawl Stars Store</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/brawler.css">
<link rel="stylesheet" href="css/oferta.css">
<link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet">
<link rel="shortcut icon" href="assets/img/brawl-stars-icone.jpg" type="image/x-icon">
<script src="data/brawlers.js"></script>
<script src="data/ofertasDiarias.js"></script>
</head>
<body>
<div id="imgCapa">
<img src="assets\img\brawl-stars-capa.jpg" height="500" width="100%">
<div id="imgLogo">
<img src="assets\img\brawl-stars-logo.png" height="200" width="60%">
</div>
</div>
<div id="app">
<div>
<h3>{{titulo}}</h3>
</div>
<div id="pagamento">
<div id="imgMoeda">
<div class="imgPagamento">
<img src="assets\img\moeda.png" height="20" width="20">
<span>{{saldomoeda}}</span>
</div>
</div>
<div id="imgGema">
<div class="imgPagamento">
<img src="assets\img\gema.png" height="20" width="20">
<span>{{saldogema}}</span>
</div>
</div>
</div>
<div id="conteudo" >
<div id="boxBrawlers">
<div id="tituloConteudo1">
<h2>MEUS BRAWLERS</h2>
</div>
<brawler v-for="(brawler, i) in brawlers" :key="i"
:imagem="brawler.imagem"
:trofeus="brawler.trofeus"
:poder="brawler.poder"
:pontospoder="brawler.pontosPoder"
:totalpontospoder="brawler.totalPontosPoder"
:tamanho="tamanho(i)"
trofeu="assets\img\trofeu.png"
pontospoderimg="assets\img\pontos-poder.png"></brawler>
</div>
<div id="boxOfertas">
<div id="tituloConteudo2">
<h2>OFERTAS DIÁRIAS</h2>
</div>
<ofertas v-for="(ofertas, i) in ofertasDiarias" :key="i"
:imagem="ofertas.imagem"
:nome="ofertas.nome"
:pontospoder="ofertas.pontosPoder"
:retornamoeda="retornamoeda(i)"
:retornavalor="retornavalor(i)"
v-on:comprar="comprar(i)"
pontospodertri="assets\img\pontos-poder-triangulo.svg"
pontospoderimg="assets\img\pontos-poder.png"></ofertas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="components/brawler.js"></script>
<script src="components/oferta.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Raw
index.js
// Neste arquivo voce deve criar uma instancia de Vue capaz de controlar todo o projeto ' new Vue() ' ;)
var app = new Vue({
el:"#app",
data: {
titulo: 'Encontre itens incriveis para deixar seu brawler mais forte!',
saldomoeda: 100,
saldogema: 15,
brawlers : [
{
id: 1,
trofeus: 39,
progressoTrofeus: "42%",
imagem: "assets/img/shelly.png",
poder: 4,
pontosPoder: 80,
totalPontosPoder: 80
},
{
id: 2,
trofeus: 69,
progressoTrofeus: "55%",
imagem: "assets/img/nita.png",
poder: 3,
pontosPoder: 46,
totalPontosPoder: 50
},
{
id: 3,
trofeus: 90,
progressoTrofeus: "65%",
imagem: "assets/img/colt.png",
poder: 4,
pontosPoder: 10,
totalPontosPoder: 80
},
{
id: 4,
trofeus: 62,
progressoTrofeus: "20%",
imagem: "assets/img/bull.png",
poder: 1,
pontosPoder: 14,
totalPontosPoder: 20
},
{
id: 5,
trofeus: 95,
progressoTrofeus: "8%",
imagem: "assets/img/barley.png",
poder: 3,
pontosPoder: 25,
totalPontosPoder: 50
},
{
id: 6,
trofeus: 73,
progressoTrofeus: "11%",
imagem: "assets/img/el-primo.png",
poder: 1,
pontosPoder: 19,
totalPontosPoder: 20
}
],
ofertasDiarias : [
{
id: 1,
brawlerId: 4,
pontosPoder: 7,
imagem:"assets/img/bull.png",
nome:"PONTOS DE PODER",
valor: 18,
moeda:'moeda'
}
,{
id: 2,
brawlerId: 5,
pontosPoder: 12,
imagem:"assets/img/barley.png",
nome:"PONTOS DE PODER",
valor: 24,
moeda:'moeda'
}
,{
id: 3,
brawlerId: 2,
pontosPoder: 5,
imagem:"assets/img/nita.png",
nome:"PONTOS DE PODER",
valor: 12,
moeda:'moeda'
},
{
id: 3,
brawlerId: 3,
pontosPoder: 10,
imagem:"assets/img/colt.png",
nome:"PONTOS DE PODER",
valor: 10,
moeda:'moeda'
}
,{
id: 5,
brawlerId: 6,
pontosPoder: 8,
imagem:"assets/img/el-primo.png",
nome:"PONTOS DE PODER",
valor: 0,
moeda:'moeda'
}
,{
id: 6,
brawlerId: 1,
pontosPoder: 50,
imagem:"assets/img/shelly.png",
nome:"PONTOS DE PODER",
valor: 1,
moeda:'gema'
}
]
},
methods: {
retornamoeda (index)
{
if ( this.ofertasDiarias[index].moeda === 'moeda' && this.ofertasDiarias[index].id !== 5 )
{
return "assets/img/moeda.png"
}
else if ( this.ofertasDiarias[index].moeda === 'gema')
{
return "assets/img/gema.png"
}
},
retornavalor (index)
{
if ( this.ofertasDiarias[index].valor === 0 )
{
return "GRATIS"
}
return this.ofertasDiarias[index].valor
},
tamanho (index)
{
if ( this.brawlers[index].id === 1 )
{
return "8%"
}
else if ( this.brawlers[index].id === 2)
{
return "13%"
}
else if ( this.brawlers[index].id === 3)
{
return "16%"
}
else if ( this.brawlers[index].id === 4)
{
return "7%"
}
else if ( this.brawlers[index].id === 5)
{
return "5%"
}
else if ( this.brawlers[index].id === 6)
{
return "3%"
}
},
comprar(index)
{
if (this.ofertasDiarias[index].moeda === 'moeda'&&
this.ofertasDiarias[index].id !== 5 &&
this.saldomoeda > 0)
{
var auxiliar = this.saldomoeda;
if (this.saldomoeda >= this.ofertasDiarias[index].valor )
{
this.saldomoeda = auxiliar - (this.ofertasDiarias[index].valor);
}
else
alert("acabou suas moedas")
}
else if (this.ofertasDiarias[index].moeda === 'moeda' && this.ofertasDiarias[index].id === 5)
{
alert("isso é gratis")
}
else if (this.ofertasDiarias[index].moeda === 'gema' && this.saldogema >0)
{
var auxiliar = this.saldogema;
if (this.saldogema >= this.ofertasDiarias[index].valor )
{
this.saldogema = auxiliar - (this.ofertasDiarias[index].valor);
console.log(this.saldogema);
}
else
alert("acabou suas gemas");
}
}
}
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment