rounds implemented + over all improvements

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import SacrificeToken from "@/components/SacrificeToken.vue";
 import BloodChart from "@/components/BloodChart.vue";
@@ -7,8 +7,13 @@ 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";
@@ -21,24 +26,25 @@ function onSwiper(swiper) {
 	swiperInstance.value = swiper;
 }
 
-const rounds = [{ round: 1 }, { round: 2 }, { round: 3 }];
-const currentSlide = ref(1);
-const currentIndex = computed(() => {
-	return rounds.findIndex((obj) => obj.round === currentSlide.value);
-});
-
-function prevSlide() {
-	if (currentSlide.value !== rounds[0].round) {
-		currentSlide.value--;
+async function prevSlide() {
+	if (activeRound.value > 1) {
+		activeRound.value--;
+		await roundsStore.fillRound();
 	}
 }
 
-function nextSlide() {
-	if (currentSlide.value < rounds[rounds.length - 1].round) {
-		currentSlide.value++;
+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"
 // );
@@ -79,13 +85,13 @@ function nextSlide() {
 				</swiper>
 				<div class="slider-wrapper">
 					<font-awesome-icon
-						:class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
+						:class="{ 'slider-prev': true, disabled: roundsStore.activeRound <= 1 }"
 						@click="prevSlide"
 						:icon="['fas', 'caret-left']"
 					/>
-					<div class="slider-text">Cycle {{ currentSlide }}</div>
+					<div class="slider-text">Cycle {{ roundsStore.activeRound }}</div>
 					<font-awesome-icon
-						:class="{ 'slider-next': true, disabled: currentSlide === rounds[rounds.length - 1].round }"
+						:class="{ 'slider-next': true, disabled: currentRound === roundsStore.activeRound }"
 						@click="nextSlide"
 						:icon="['fas', 'caret-right']"
 					/>
@@ -123,7 +129,7 @@ function nextSlide() {
 							</div>
 						</div>
 						<div class="blood-chart">
-							<blood-chart></blood-chart>
+							<blood-chart :data="rounds[activeRound]"></blood-chart>
 						</div>
 						<div class="cycle-end-wrapper">
 							<div class="cycle-end-inner">