blood splash

src/App.vue

@@ -13,11 +13,12 @@ import { useCycleStore } from "@/stores/cycles";
 
 import SlideoutPanel from "./components/SlideoutPanel.vue";
 import ConnectWallet from "./components/ConnectWallet.vue";
-
+import BloodSplash from "./components/BloodSplash.vue";
 import { getNetwork, fetchTransaction } from "@wagmi/core";
 
 const isMobile = ref(false);
 const showPanel = ref(false);
+const splashBlood = ref(0);
 
 const router = useRouter();
 const route = useRoute();
@@ -58,6 +59,7 @@ function changeRoute(name) {
 }
 provide("isMobile", isMobile);
 provide("showPanel", showPanel);
+provide("splashBlood", splashBlood);
 
 onMounted(async () => {
 	window.addEventListener("resize", handleWindowSizeChange);
@@ -88,6 +90,8 @@ onMounted(async () => {
 	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
 		<RouterView />
 	</div>
+	<blood-splash :key="splashBlood"></blood-splash>
+
 	<div class="footer">
 		<div class="footer-inner">
 			<div class="footer-headline">Join Bloodline</div>

src/components/SacrificeToken.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="sacrifice-wrapper card card--glow bloodline-wrapper">
 		<div class="sacrifice-headline">Select Sacrifice</div>
+		<button @click="splashBlood++">splash</button>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
 				<div
@@ -186,6 +187,7 @@ import { debounce, formatNumber } from "@/helper/helper.js";
 
 const isMobile = inject("isMobile");
 const showPanel = inject("showPanel");
+const splashBlood = inject("splashBlood");
 
 const walletStore = useWalletStoreV2();
 
@@ -201,6 +203,7 @@ const stakingOutput = ref(null);
 const blockEvent = ref(null);
 const approveToast = ref(null);
 const addOperator = ref(true);
+const splashesUsed = ref([]);
 /**
  * state 0 enter amount
  * state 1 rdy to go