302 lines
7.7 KiB
Vue
302 lines
7.7 KiB
Vue
<script setup>
|
|
import { ref, computed, inject, onMounted } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import SacrificeToken from "@/components/SacrificeToken.vue";
|
|
import BloodChart from "@/components/BloodChart.vue";
|
|
import TokenClaim from "@/components/TokenClaim.vue";
|
|
// import Web3 from "web3";
|
|
// import { useWalletStore } from "@/stores/wallet";
|
|
import { useTokenStore } from "@/stores/tokens";
|
|
import { useRoundsStore } from "@/stores/rounds";
|
|
const tokenStore = useTokenStore();
|
|
const roundsStore = useRoundsStore();
|
|
const { token } = storeToRefs(tokenStore);
|
|
|
|
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
|
|
|
|
// Import Swiper Vue.js components
|
|
const swiperInstance = ref();
|
|
import { Navigation } from "swiper";
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
const modules = [Navigation];
|
|
const isMobile = inject("isMobile");
|
|
function onSwiper(swiper) {
|
|
swiperInstance.value = swiper;
|
|
}
|
|
|
|
async function prevSlide() {
|
|
if (activeRound.value > 1) {
|
|
activeRound.value--;
|
|
await roundsStore.fillRound();
|
|
}
|
|
}
|
|
|
|
async function nextSlide() {
|
|
if (activeRound.value < currentRound.value) {
|
|
activeRound.value++;
|
|
await roundsStore.fillRound();
|
|
}
|
|
}
|
|
|
|
// const computedRounds = computed(() => {
|
|
// if()
|
|
// return ""
|
|
// })
|
|
|
|
// let web3 = new Web3(
|
|
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
|
|
// );
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div>
|
|
<section id="bloodline-header">
|
|
<div class="header-text">
|
|
Turn your meme.<br />
|
|
Join the bloodline scheme.
|
|
</div>
|
|
</section>
|
|
<section id="sacrifice" class="container">
|
|
<sacrifice-token :data="token"></sacrifice-token>
|
|
</section>
|
|
|
|
<div class="container section-header-container">
|
|
<h3>Bloodline Cycle</h3>
|
|
Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
|
|
each cycle's end.
|
|
</div>
|
|
<section id="cycle-section" class="container">
|
|
<swiper
|
|
:slides-per-view="1"
|
|
:navigation="true"
|
|
:space-between="50"
|
|
@swiper="onSwiper"
|
|
:modules="modules"
|
|
class="cycle-slider"
|
|
>
|
|
<swiper-slide>Cycle 1</swiper-slide>
|
|
<swiper-slide>Slide 2</swiper-slide>
|
|
<swiper-slide>Slide 3</swiper-slide>
|
|
<swiper-slide>Slide 4</swiper-slide>
|
|
<swiper-slide>Slide 5</swiper-slide>
|
|
</swiper>
|
|
<div class="slider-wrapper">
|
|
<font-awesome-icon
|
|
:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
|
|
@click="prevSlide"
|
|
:icon="['fas', 'caret-left']"
|
|
/>
|
|
<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
|
|
<font-awesome-icon
|
|
:class="{ 'slider-next': true, disabled: currentRound === roundsStore.activeRound }"
|
|
@click="nextSlide"
|
|
:icon="['fas', 'caret-right']"
|
|
/>
|
|
</div>
|
|
<div class="cycle card bloodline-wrapper">
|
|
<div class="bloodline-inner">
|
|
<token-claim></token-claim>
|
|
</div>
|
|
|
|
<div class="bloodline-clan">
|
|
<h3>Bloodline Clan</h3>
|
|
<p>
|
|
Win extra rewards for you and your clan. Increase the strength of your bloodline by
|
|
sacrificing more memes.
|
|
</p>
|
|
<table class="bonus-table" v-if="!isMobile">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1st</th>
|
|
<td>100% Bonus</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2nd</th>
|
|
<td>50% Bonus</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3rd</th>
|
|
<td>No Bonus</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="bloodline-container" v-else>
|
|
<div class="bloodline-border purple">
|
|
Get up to +100% Clan Bonus <br />on your sacrifice.
|
|
</div>
|
|
</div>
|
|
<div class="blood-chart">
|
|
<blood-chart :data="rounds[activeRound]"></blood-chart>
|
|
</div>
|
|
<div class="cycle-end-wrapper">
|
|
<div class="cycle-end-inner">
|
|
<h2>Cycle End</h2>
|
|
<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
|
|
<div class="bloodline-border">
|
|
<table>
|
|
<tr>
|
|
<td>Sacrifice:</td>
|
|
<td class="divider"></td>
|
|
<td>200b $BLOOD</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Time left:</td>
|
|
<td class="divider"></td>
|
|
<td>23h 59m</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="container section-header-container">
|
|
<h2>Tutorial</h2>
|
|
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
|
|
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
|
|
</div>
|
|
<section id="tokenomics" class="container">
|
|
<div class="card">
|
|
<h2>Tokenomics</h2>
|
|
<p>100% clan owned. No team %, no pre-mine</p>
|
|
<img v-if="isMobile" src="@/assets/img/tokenomics_footer.png" alt="tokenomics" />
|
|
<img v-else src="@/assets/img/tokenomics.png" alt="tokenomics" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style lang="sass">
|
|
.blood-chart
|
|
margin-top: 56px
|
|
display: flex
|
|
justify-content: center
|
|
margin-bottom: 80px
|
|
|
|
.header-text
|
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
|
|
font-size: 32px
|
|
text-align: center
|
|
margin-top: 64px
|
|
margin-bottom: 100px
|
|
@media (min-width: 992px)
|
|
font-size: 64px
|
|
margin-top: 0px
|
|
line-height: unset
|
|
text-shadow: unset
|
|
line-height: 80px
|
|
font-weight: 600
|
|
|
|
|
|
.chart-wrapper-coin
|
|
display: flex
|
|
justify-content: space-evenly
|
|
width: 600px
|
|
.chart-coin
|
|
height: 50px
|
|
width: 50px
|
|
background-color: red
|
|
border-radius: 50px
|
|
position: relative
|
|
.bonus-table
|
|
border: 1px solid black
|
|
padding: 0px 16px 0px 16px
|
|
text-align: left
|
|
margin-left: auto
|
|
margin-right: auto
|
|
border: 4px solid var(--purple)
|
|
border-radius: 16px
|
|
border-spacing: 16px
|
|
font-size: 24px
|
|
th
|
|
padding-right: 16px
|
|
#tokenomics
|
|
background-color: var(--darkgrey)
|
|
>div
|
|
text-align: center
|
|
img
|
|
display: block
|
|
margin-left: auto
|
|
margin-right: auto
|
|
.chart-wrapper
|
|
width: 600px
|
|
height: 600px
|
|
border: 1px solid blue
|
|
display: flex
|
|
justify-content: space-evenly
|
|
.chart-element
|
|
height: 100%
|
|
background-color: #ddd
|
|
display: flex
|
|
position: relative
|
|
.chart
|
|
width: 75px
|
|
color: white
|
|
margin-top: auto
|
|
text-align: center
|
|
padding-top: 10px
|
|
|
|
.cycle-slider
|
|
text-align: center
|
|
.swiper-button-next
|
|
right: 30%
|
|
.swiper-button-prev
|
|
left: 30%
|
|
|
|
.slider-wrapper
|
|
display: flex
|
|
justify-content: center
|
|
font-size: 24px
|
|
user-select: none
|
|
.slider-text
|
|
margin: 0 24px
|
|
margin-top: auto
|
|
margin-bottom: auto
|
|
.slider-prev, .slider-next
|
|
color: #3B0067
|
|
font-size: 40px
|
|
cursor: pointer
|
|
&.disabled
|
|
opacity: .35
|
|
pointer-events: none
|
|
|
|
.section-header-container
|
|
text-align: center
|
|
font-size: 24px
|
|
margin-top: 64px
|
|
margin-bottom: 64px
|
|
@media (min-width: 992px)
|
|
width: 655px
|
|
|
|
.bloodline-wrapper
|
|
.bloodline-inner
|
|
padding: 4px
|
|
@media (min-width: 992px)
|
|
padding: 20px
|
|
.bloodline-clan
|
|
text-align: center
|
|
|
|
.cycle-end-wrapper
|
|
.cycle-end-inner
|
|
text-align: center
|
|
font-size: 24px
|
|
padding: 0 24px 48px 24px
|
|
.cycle-end-text
|
|
margin-bottom: 32px
|
|
table
|
|
width: 100%
|
|
tr
|
|
td
|
|
text-align: left
|
|
&.divider
|
|
width: 10px
|
|
|
|
h2
|
|
font-size: 40px
|
|
</style>
|