cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start implementing frontend design

Browse Source
This commit is contained in:
Michel Fromme
2023-06-18 10:48:50 +02:00
parent 89f47b3692
commit db41b03456
27 changed files with 997 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BloodChart.vue
+74 -45
View File
@@ -1,17 +1,50 @@
<template>
<div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="(coin, index) in dataPoints" :key="coin.name">
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
</div>
<div class="blood-chart-coin"></div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper">
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">{{ coin.percentage }}%</div>
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
</g>
</svg>
<div class="wrapper">
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</div>
<div class="blood-chart-bar-percentage">{{ coin.percentage }}%</div>
</div>
</div>
</div>
<div class="blood-chart-element-footer">
<div class="blood-chart-amount">130,4b</div>
<div class="blood-chart-coin">$BLOOD</div>
</div>
</div>
</div>
</template>
@@ -20,76 +53,72 @@
const dataPoints = [
{
name: "PEPE",
percentage: 34.4,
percentage: 62.2,
},
{
name: "Shiba",
percentage: 50.4,
percentage: 31.2,
},
{
name: "Doge",
percentage: 42.4,
percentage: 54.5,
},
];
</script>
<style lang="sass">
.blood-chart-wrapper
height: 500px
height: 750px
display: inline-flex
gap: 48px
gap: 96px
.blood-chart-element
height: 100%
width: 50px
width: 80px
display: flex
flex-direction: column
.blood-chart-element-header
flex: 0 0 100px
.blood-chart-coin
height: 50px
width: 50px
border-radius: 50px
height: 80px
width: 80px
border-radius: 80px
background-color: grey
margin-left: auto
margin-right: auto
position: relative
margin-bottom: 16px
.blood-chart-coin-title
text-align: center
margin-bottom: 32px
font-size: 24px
.blood-chart-element-body
background-color: lightgrey
background-color: rgba(233, 233, 233, 0.2)
flex: 1 1 auto
border-radius: 8px 8px 40px 40px
.blood-chart-bar-wrapper
height: 100%
display: flex
flex-direction: column
.blood-chart-bar
margin-top: auto
background-color: red
.drop
width: 1.1em
height: 1.1em
border-radius: 0 100% 100% 100%
background-color: red
position: absolute
animation: drop 3s infinite both
top: 32px
&.variant0
left: 14%
animation-delay: -5.2s
&.variant1
left: 39%
animation-delay: -.4s
&.variant2
left: 55%
animation-delay: -1.5s
@keyframes drop
0%
transform: translateY(0) scaleX(.85) rotate(45deg)
animation-timing-function: ease-out
60%
transform: translateY(120%) scaleX(.85) rotate(45deg)
animation-timing-function: ease-in
80%, 100%
transform: translateY(440px) scaleX(.85) rotate(45deg)
background-color: var(--blood-color)
position: relative
border-radius: 8px 8px 40px 40px
.blood-chart-bar-percentage
font-size: 14px
text-align: center
margin-top: 16px
.waves
position: absolute
top: -8px
width: 100%
height: 10px
.blood-chart-element-footer
margin-top: 32px
text-align: center
.blood-chart-amount
font-size: 24px
margin-bottom: 8px
.blood-chart-coin
font-size: 16px
</style>
src/components/Navbar.vue
+49 -25
View File
@@ -36,9 +36,31 @@ onBeforeUnmount(() => {
<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-center"></div>
<div class="navbar-text">Bloodline</div>
<div class="navbar-center">
<div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div>
</div>
<div class="navbar-end">
<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span>
</div>
</div>
@@ -52,39 +74,41 @@ header
position: fixed
z-index: 3
box-sizing: border-box
background-color: grey
background-color: #202020
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 128px
&.navbar--hidden
transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
justify-content: space-between
padding: 0 20px
padding: 16px 24px
box-sizing: border-box
height: 100%
align-items: center
@media (min-width: 992px)
padding: 10px 80px
padding: 16px 24px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 64px
letter-spacing: 0.138em
.navbar-center
display: flex
align-items: center
.main-menu-links
margin-right: 48px
&:hover, &:active, &:focus
color: lighten(black, 20%)
.main-menu-link
cursor: pointer
margin-left: auto
.navbar-social-links
display: flex
gap: 18px
.social-bloodline-badge
font-size: 16px
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
display: flex
align-items: center
align-self: center
a
color: black
&:hover,&:focus, &:active
color: lighten(black, 20%)
.navbar-hamburger-open
font-size: 35px
.parry-twitter
font-size: 30px
margin-left: 32px
flex: 0 0 200px
justify-content: flex-end
</style>
src/components/SacrificeToken.vue
+57 -35
View File
@@ -1,5 +1,6 @@
<template>
<div class="sacrifice-wrapper card">
<div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }}
<div class="sacrifice-headline">Select Token</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
@@ -15,37 +16,53 @@
</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper">
<div class="sacrifice-from-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<input type="number" v-model="tokenNumber" /><img src="@/assets/img/vampir.png" alt="vampir" />
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
src="@/assets/img/vampir.png"
alt="vampir"
/>
</div>
<div class="value-adder">
<div class="sacrifice-adder-step" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
</div>
</div>
<div class="sacrifice-divider">
<div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper">
<div class="sacrifice-to-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
<div class="sacrifice-to-output-rewards">2.312.310</div>
<div class="sacrifice-to-output-rewards">{{ output }}</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
</div>
<div class="sacrifice-fees-body">
<div class="sacrifice-fees-body-header">
<div class="sacrifice-fees-body-header-title">Gas Support</div>
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
</div>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0"
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@click="approvalData = tokenStore.sacrificeToken(1)"
>
<font-awesome-icon v-if="loading" icon="spinner" spin />
Sacrifce {{ activeToken.name }}
</div>
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
@@ -53,16 +70,9 @@
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect Wallet</div>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-feed-info">
<div class="sacrifice-fees-state">Disabled</div>
<div class="sacrifice-feed-amount">42Gwei</div>
</div>
<div class="sacrifice-feed-info-text">Increase amount to pay 97% less network fees.</div>
</div>
</div>
</div>
</template>
@@ -72,12 +82,13 @@ import { ref, defineProps, watch } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore);
const tokenStore = useTokenStore();
const { activeToken } = storeToRefs(tokenStore);
const { activeToken, loading } = storeToRefs(tokenStore);
const props = defineProps({
data: Array,
@@ -86,14 +97,21 @@ const props = defineProps({
watch(
activeToken,
() => {
tokenNumber.value = 0;
tokenNumber.value = null;
},
{ deep: true }
);
const tokenNumber = ref(0);
const output = ref(0);
const approvalData = ref(null);
const processChange = Helper.debounce((e) => test(e));
async function test(e) {
console.log("hier", e);
output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
}
function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
}
@@ -102,8 +120,6 @@ function addTokens(value) {
<style lang="sass">
.sacrifice-wrapper
padding: 12px 24px
width: 450px
display: flex
flex-direction: column
margin-left: auto
@@ -121,8 +137,9 @@ function addTokens(value) {
width: 100%
justify-content: space-evenly
.sacrifice-token
width: 50px
height: 50px
width: 132px
height: 132px
border-radius: 16px
padding: 12px
border: 1px solid lightgrey
cursor: pointer
@@ -138,19 +155,26 @@ function addTokens(value) {
display: flex
justify-content: center
margin-top: 24px
.btn
padding: 16px 64px
.sacrifice-fees-info-wrapper
display: flex
border: 2px dashed var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
.sacrifice-feed-info
display: flex
.sacrifice-feed-amount
margin-left: auto
.sacrifice-fees-img
flex: 0 0 15%
.sacrifice-fees-body
flex: 1 1 auto
.sacrifice-fees-body-header
font-size: 24px
display: flex
flex-direction: row
justify-content: space-between
.sacrifice-from-to-wrapper
.sacrifice-divider
text-align: center
.sacrifice-from-wrapper,.sacrifice-to-wrapper
border: 1px solid black
padding: 16px 24px
.sarcrifice-from-input
display: flex
margin-bottom: 8px
@@ -171,9 +195,7 @@ function addTokens(value) {
display: flex
gap: 6px
.sacrifice-adder-step
padding: 0 12px
background-color: var(--tertiary)
border: 1px solid var(--tertiary-dark)
font-size: 14px
&:hover,
&:active,
&:focus
src/components/TokenClaim.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<div class="claim bloodline-border">
<div class="rewards-wrapper">
<div class="rewards-headline">Sacrafice Reward</div>
<div class="rewards-sacrifice-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="rewards-divider bloodline-devider">
<font-awesome-icon icon="fa-solid fa-plus" />
</div>
<div class="rewards-headline">Clan Reward</div>
<div class="rewards-clan-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="claim-button">
<div class="btn btn-immortal">Claim</div>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="sass">
.claim
display: flex
flex-direction: column
padding: 32px 40px
.claim-button
text-align: center
margin-top: 32px
.rewards-wrapper
width: 100%
.rewards-headline
font-size: 24px
padding: 0 0 4px 8px
.rewards-divider
text-align: center
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
display: flex
.rewards-body
align-self: center
.rewards-coin
font-size: 24px
.rewards-amount
font-size: 40px
img
margin-left: auto
</style>