1490 lines
40 KiB
Vue
1490 lines
40 KiB
Vue
<template>
|
|
<div class="task-one">
|
|
<div class="task-one-header">
|
|
<NavBar @login-success="updateLogin"></NavBar>
|
|
</div>
|
|
<div class="content">
|
|
<div class="center">
|
|
<div class="content-left">
|
|
<div class="return" @click="handTaskHome">
|
|
<div class="return-icon">
|
|
<img src="@/assets/img/task/return.png" alt="" />
|
|
</div>
|
|
<div class="gacha-guest">Gacha Quest</div>
|
|
</div>
|
|
<!-- <div class="claim-bottom"> -->
|
|
<div class="twist-egg">
|
|
<img src="@/assets/img/task/twist-egg.jpg" alt="" />
|
|
</div>
|
|
|
|
<div class="bottom-content">
|
|
<div :class="isClaim ? 'claim-active' : 'claim'" @click="handClaim">
|
|
{{ isBalance == 0 ? "Claim" : "Claimed" }}
|
|
</div>
|
|
<div class="participants-content">
|
|
<div class="participants">All Participants ({{ count }})</div>
|
|
<div><img src="@/assets/img/task/cardinal-numbers.png" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- </div> -->
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="title">How to Participate</div>
|
|
<div
|
|
:class="
|
|
chain.logined == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 1
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="connect-center">
|
|
<div>Connect your wallet</div>
|
|
<div
|
|
class="connect-now"
|
|
v-if="!chain.logined && currentTask == 1"
|
|
@click="login"
|
|
>
|
|
Connect Now
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:class="
|
|
chain.logined == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!chain.logined"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
isDiscode == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 2
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="discord">
|
|
<div>Connect your Discord</div>
|
|
<div
|
|
class="discord-account"
|
|
v-if="!isDiscode && currentTask == 2"
|
|
@click="handDiscodes"
|
|
>
|
|
Connect
|
|
</div>
|
|
<div class="account" v-if="isDiscode">
|
|
@{{ userInfo.discord }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="serial-number"
|
|
:class="
|
|
isDiscode == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!isDiscode"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
joinDiscode == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 3
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="join-discode">
|
|
<div>Join CF Discord and get Gacha role</div>
|
|
<div
|
|
class="join-btn"
|
|
v-if="!joinDiscode && currentTask == 3"
|
|
@click="handJoinDiscode"
|
|
>
|
|
Join
|
|
</div>
|
|
<div
|
|
class="verification"
|
|
v-if="!joinDiscode && currentTask == 3"
|
|
@click="handDiscodeVerification"
|
|
>
|
|
Verify
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="serial-number"
|
|
:class="
|
|
joinDiscode == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!joinDiscode"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
isTwitter == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 4
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="connect-twitter">
|
|
<div>Connect your Twitter</div>
|
|
<div
|
|
class="twitter-account"
|
|
v-if="!isTwitter && currentTask == 4"
|
|
@click="handTwitter"
|
|
>
|
|
Connect
|
|
</div>
|
|
<div class="account" v-if="isTwitter">
|
|
@{{ userInfo.twitter }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="serial-number"
|
|
:class="
|
|
isTwitter == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!isTwitter"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
isFollowCEBG == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 5
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="follow-content">
|
|
<div>Follow Counter Fire</div>
|
|
<div
|
|
class="follow-cebg"
|
|
v-if="!isFollowCEBG && currentTask == 5"
|
|
@click="handFollowCEBG"
|
|
>
|
|
Follow
|
|
</div>
|
|
<div
|
|
class="verification"
|
|
v-if="!isFollowCEBG && currentTask == 5"
|
|
@click="handFollowCEBGVerification"
|
|
>
|
|
Verify
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="serial-number"
|
|
:class="
|
|
isFollowCEBG == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!isFollowCEBG"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="
|
|
isQuote == true
|
|
? 'task-right-item-actave'
|
|
: currentTask == 6
|
|
? 'task-right-item-current'
|
|
: 'task-right-item'
|
|
"
|
|
>
|
|
<div class="broadcast-content">
|
|
<div>Broadcast to your friends</div>
|
|
<div
|
|
class="quote"
|
|
v-if="!isQuote && currentTask == 6"
|
|
@click="handQuote"
|
|
>
|
|
Broadcast
|
|
</div>
|
|
<div
|
|
class="verification"
|
|
v-if="!isQuote && currentTask == 6"
|
|
@click="handQuoteVerification"
|
|
>
|
|
Verify
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="serial-number"
|
|
:class="
|
|
isQuote == true ? 'serial-number-actave' : 'serial-number'
|
|
"
|
|
>
|
|
<div class="checkmark">
|
|
<img
|
|
v-if="!isQuote"
|
|
src="../../assets/svg/checkmark.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
src="../../assets/svg/checkmark-active.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg">
|
|
<img src="@/assets/img/task/one-bg.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
<ChainModel></ChainModel>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ChainModel from "@/components/home/ChainModel.vue";
|
|
import NavBar from "../layout/navber.vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import {
|
|
beginclaim,
|
|
Claim,
|
|
UserStatus,
|
|
UserInfo,
|
|
totalClaimed,
|
|
getJoin,
|
|
} from "@/api/User";
|
|
import { useChainStore } from "@/store/chain";
|
|
import { useAppStore } from "@/store/app";
|
|
import { ref, onMounted, watch, reactive, nextTick, inject } from "vue";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { hasMetamask } from "@/utils/chain.util";
|
|
import { message } from "ant-design-vue";
|
|
const addNotification = inject("addNotification");
|
|
const chain = useChainStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const isDiscode = ref(false);
|
|
const userInfo = reactive({});
|
|
const joinDiscode = ref(false);
|
|
const isTwitter = ref(false);
|
|
const isFollowCEBG = ref(false);
|
|
const isQuote = ref(false);
|
|
const currentTask = ref(1);
|
|
const isClaim = ref(false);
|
|
const count = ref(0);
|
|
const lastResq = reactive({});
|
|
const AppModule = useAppStore();
|
|
const isBalance = ref(0);
|
|
const isMobile = () => {
|
|
const userAgent = navigator.userAgent;
|
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
|
userAgent
|
|
);
|
|
};
|
|
async function login(event) {
|
|
var next = window.location.href;
|
|
|
|
if (isMobile() && !hasMetamask()) {
|
|
///debugger
|
|
var url = `https://metamask.app.link/dapp/${next}`;
|
|
location.href = url;
|
|
} else {
|
|
if (!chain.logined) {
|
|
// 没有登录情况下执行登录
|
|
await chain.chainManager.login();
|
|
// console.log("logined:", chain.chainManager.isLogined);
|
|
chain.logined = chain.chainManager.isLogined;
|
|
if (chain.logined) {
|
|
currentTask.value = 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const assign = (source, target) => {
|
|
if (target === undefined || target === null) {
|
|
throw new TypeError("Cannot convert undefined or null to object");
|
|
}
|
|
|
|
for (let key in target) {
|
|
source[key] = target[key];
|
|
}
|
|
};
|
|
const updateLogin = async () => {
|
|
currentTask.value = 2;
|
|
};
|
|
const handTaskHome = () => {
|
|
//router.push("/quest");
|
|
const code = route.query.code;
|
|
if (code) {
|
|
router.push({ path: "/quest", query: { code: code } });
|
|
} else {
|
|
router.push("/quest");
|
|
}
|
|
};
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 10) {
|
|
return (
|
|
address.substring(0, 3) + "..." + address.substring(address.length - 4)
|
|
);
|
|
} else if (address.length > 0 && address.length < 10) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
const handDiscodes = async () => {
|
|
const codeChallenge = Date.now();
|
|
let currentAddress = window.location.href;
|
|
const state = window.btoa(
|
|
`${AppModule.accountId}|${codeChallenge}|${currentAddress}`
|
|
);
|
|
const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${state}`;
|
|
|
|
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=500,height=600,left=100,top=100`;
|
|
// let discordWindow = window.open(url, "discord login", params);
|
|
window.location.href = url;
|
|
// const checkClosed = setInterval(function () {
|
|
// if (discordWindow.closed) {
|
|
// clearInterval(checkClosed);
|
|
// // clearInterval(timeoutId);
|
|
// checkUserStatus();
|
|
// // call your API here or any function you want to execute.
|
|
// }
|
|
// }, 1000); // check every second
|
|
};
|
|
const checkUserStatus = async () => {
|
|
try {
|
|
const resq = await UserStatus({ account: AppModule.accountId });
|
|
|
|
if (resq.discord_used == 1) {
|
|
addNotification(
|
|
"Failed to connect This discord account already bound to another address"
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (resq && resq.status[1] == 1) {
|
|
isDiscode.value = true;
|
|
currentTask.value = 3;
|
|
|
|
// console.log("Success! UserStatus successfully obtained.");
|
|
const resu = await UserInfo({ account: AppModule.accountId });
|
|
if (resu) {
|
|
assign(userInfo, resu);
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 15) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"..." +
|
|
address.substring(address.length - 6)
|
|
);
|
|
} else if (address.length > 0 && address.length < 15) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
|
|
if (userInfo.twitter) {
|
|
userInfo.twitter = formatAddress(userInfo.twitter);
|
|
}
|
|
console.log(userInfo.twitter);
|
|
|
|
if (userInfo.discord) {
|
|
userInfo.discord = formatAddress(userInfo.discord);
|
|
}
|
|
}
|
|
} else {
|
|
if (resq.errcode == 0 && resq.status[1] == 0) {
|
|
addNotification("Fail,Please Join Discord; ");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
addNotification("An error occurred: ");
|
|
}
|
|
};
|
|
const handDiscode = async () => {
|
|
let checkCount = 0;
|
|
const maxCheckCount = 10;
|
|
let timeoutId = null;
|
|
|
|
let currentAddress = window.location.href;
|
|
const codeChallenge = uuidv4();
|
|
const state = `${AppModule.accountId}|${codeChallenge}|${encodeURIComponent(
|
|
currentAddress
|
|
)}`;
|
|
const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${encodeURIComponent(
|
|
state
|
|
)}`;
|
|
|
|
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=500,height=600,left=100,top=100`;
|
|
let discordWindow = window.open(url, "discord login", params);
|
|
|
|
const checkUserStatus = async () => {
|
|
try {
|
|
const resq = await UserStatus({ account: AppModule.accountId });
|
|
|
|
if (resq.discord_used == 1) {
|
|
addNotification(
|
|
"You have already performed transactions with your account on another wallet"
|
|
);
|
|
clearInterval(timeoutId);
|
|
return;
|
|
}
|
|
|
|
if (resq && resq.status[1] == 1) {
|
|
isDiscode.value = true;
|
|
currentTask.value = 3;
|
|
clearInterval(timeoutId);
|
|
// console.log("Success! UserStatus successfully obtained.");
|
|
const resu = await UserInfo({ account: AppModule.accountId });
|
|
if (resu) {
|
|
assign(userInfo, resu);
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 15) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"..." +
|
|
address.substring(address.length - 6)
|
|
);
|
|
} else if (address.length > 0 && address.length < 15) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
|
|
if (userInfo.twitter) {
|
|
userInfo.twitter = formatAddress(userInfo.twitter);
|
|
}
|
|
console.log(userInfo.twitter);
|
|
|
|
if (userInfo.discord) {
|
|
userInfo.discord = formatAddress(userInfo.discord);
|
|
}
|
|
}
|
|
} else {
|
|
checkCount++;
|
|
if (checkCount >= maxCheckCount) {
|
|
console.log("Failed to obtain UserStatus after 10 attempts.");
|
|
clearInterval(timeoutId); // Stop the loop after max attempts
|
|
if (resq.errcode == 0 && resq.status[1] == 0) {
|
|
addNotification("Fail,Please get the role");
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
addNotification("An error occurred: ");
|
|
clearInterval(timeoutId); // Stop the loop if there's an error
|
|
}
|
|
};
|
|
|
|
// Start the loop
|
|
timeoutId = setInterval(checkUserStatus, 2000);
|
|
};
|
|
|
|
const handJoinDiscode = () => {
|
|
const url = "https://discord.gg/A9rbzeAT2t";
|
|
window.open(url, "_blank", "width=500,height=600");
|
|
// window.location.href = url
|
|
};
|
|
const createDebouncedFunction = (func, delay) => {
|
|
let debounceTimer;
|
|
return async function () {
|
|
const context = this,
|
|
args = arguments;
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(
|
|
async () => await func.apply(context, args),
|
|
delay
|
|
);
|
|
};
|
|
};
|
|
|
|
const handDiscodeVerification = createDebouncedFunction(async () => {
|
|
try {
|
|
const resq = await UserStatus({ account: AppModule.accountId });
|
|
if (resq) {
|
|
if (resq && resq.status[2] == 1) {
|
|
joinDiscode.value = true;
|
|
currentTask.value = 4;
|
|
}
|
|
if (resq.errcode == 0) {
|
|
if (resq && resq.status[2] == 0) {
|
|
addNotification("Please Try again");
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
}
|
|
}, 1000);
|
|
const handTwitters = async () => {
|
|
const clientId = "Y2FyVU5GN1hFMjFKWkJFaGxiem86MTpjaQ";
|
|
const codeChallenge = uuidv4();
|
|
console.log("codeChallenge: " + codeChallenge);
|
|
const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
|
|
const state = `${AppModule.accountId}|${codeChallenge}`;
|
|
const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
|
|
redirectUri
|
|
)}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
|
|
state
|
|
)}`;
|
|
|
|
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
|
|
let twitterWindow = window.open(url, "twitter login", params);
|
|
|
|
if (twitterWindow === null) {
|
|
console.log("Failed to open window");
|
|
} else {
|
|
console.log("Window opened successfully");
|
|
console.log("Window opened successfully", twitterWindow);
|
|
}
|
|
// const checkClosed = setInterval(function () {
|
|
// if (twitterWindow.closed) {
|
|
// debugger
|
|
// clearInterval(checkClosed);
|
|
// // clearInterval(timeoutId);
|
|
// checkUserStatustw();
|
|
// // call your API here or any function you want to execute.
|
|
// }
|
|
// }, 1000); // check every second
|
|
};
|
|
|
|
const checkUserStatustw = async () => {
|
|
try {
|
|
const resq = await UserStatus({ account: AppModule.accountId });
|
|
|
|
// if (resq.discord_used == 1) {
|
|
// addNotification(
|
|
// "Failed to connect This discord account already bound to another address"
|
|
// );
|
|
// return ;
|
|
// }
|
|
|
|
if (resq && resq.status[3] == 1) {
|
|
isDiscode.value = true;
|
|
currentTask.value = 5;
|
|
|
|
// console.log("Success! UserStatus successfully obtained.");
|
|
const resu = await UserInfo({ account: AppModule.accountId });
|
|
if (resu) {
|
|
assign(userInfo, resu);
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 15) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"..." +
|
|
address.substring(address.length - 6)
|
|
);
|
|
} else if (address.length > 0 && address.length < 15) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
|
|
if (userInfo.twitter) {
|
|
userInfo.twitter = formatAddress(userInfo.twitter);
|
|
}
|
|
console.log(userInfo.twitter);
|
|
|
|
if (userInfo.discord) {
|
|
userInfo.discord = formatAddress(userInfo.discord);
|
|
}
|
|
}
|
|
} else {
|
|
if (resq.errcode == 0 && resq.status[3] == 0) {
|
|
addNotification("Please Try again");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
addNotification("An error occurred: ");
|
|
}
|
|
};
|
|
const handTwitter = async () => {
|
|
console.log("handTwitter");
|
|
let checkCount = 0;
|
|
const maxCheckCount = 18;
|
|
let timeoutId = null;
|
|
let errorTimeoutId = null;
|
|
let currentAddress = window.location.href;
|
|
const clientId = "Y2FyVU5GN1hFMjFKWkJFaGxiem86MTpjaQ";
|
|
const codeChallenge = Date.now();
|
|
console.log("codeChallenge: " + codeChallenge);
|
|
const redirectUri = "https://oauth-svr.cebggame.com/twitter/redirect_uri";
|
|
const state = window.btoa(
|
|
`${AppModule.accountId}|${codeChallenge}|${currentAddress}`
|
|
);
|
|
const url = `https://twitter.com/i/oauth2/authorize?client_id=${clientId}&code_challenge=${codeChallenge}&code_challenge_method=plain&redirect_uri=${encodeURIComponent(
|
|
redirectUri
|
|
)}&response_type=code&scope=tweet.read+users.read+follows.read+offline.access+like.read&state=${encodeURIComponent(
|
|
state
|
|
)}`;
|
|
|
|
let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
|
|
/// window.open(url, "twitter login", params);
|
|
window.location.href = url;
|
|
// const checkUserStatus = async () => {
|
|
// try {
|
|
// const resq = await UserStatus({ account: AppModule.accountId });
|
|
|
|
// if (resq && resq.status[3] == 1) {
|
|
// isTwitter.value = true;
|
|
// currentTask.value = 5;
|
|
// clearInterval(timeoutId);
|
|
// console.log("Success! UserStatus successfully obtained.");
|
|
// const resu = await UserInfo({ account: AppModule.accountId });
|
|
// if (resu) {
|
|
// // userInfo.value = resq
|
|
// assign(userInfo, resu);
|
|
// console.log(userInfo.twitter, "-=-=-userInfo.twitter");
|
|
// const formatAddress = (address) => {
|
|
// if (address.length >= 15) {
|
|
// return (
|
|
// address.substring(0, 6) +
|
|
// "..." +
|
|
// address.substring(address.length - 6)
|
|
// );
|
|
// } else if (address.length > 0 && address.length < 15) {
|
|
// return address;
|
|
// } else {
|
|
// return "-";
|
|
// }
|
|
// };
|
|
|
|
// if (userInfo.twitter) {
|
|
// userInfo.twitter = formatAddress(userInfo.twitter);
|
|
// }
|
|
// ///console.log(userInfo.twitter);
|
|
|
|
// if (userInfo.discord) {
|
|
// userInfo.discord = formatAddress(userInfo.discord);
|
|
// }
|
|
// }
|
|
// } else {
|
|
// checkCount++;
|
|
// if (checkCount >= maxCheckCount) {
|
|
// console.log("Failed to obtain UserStatus after 10 attempts.");
|
|
// clearInterval(timeoutId); // Stop the loop after max attempts
|
|
// if (resq.errcode == 0 && resq.status[3] == 0) {
|
|
// addNotification("Please Try again");
|
|
// }
|
|
// }
|
|
// }
|
|
// } catch (error) {
|
|
// // console.error("An error occurred:", error);
|
|
// addNotification("An error occurred: ");
|
|
// clearInterval(timeoutId); // Stop the loop if there's an error
|
|
// }
|
|
// };
|
|
// timeoutId = setInterval(checkUserStatus, 2000);
|
|
};
|
|
|
|
// Start the loop
|
|
|
|
const handFollowCEBG = () => {
|
|
const url = "https://twitter.com/_CounterFire";
|
|
window.open(url, "_blank", "width=500,height=600");
|
|
// window.location.href = url
|
|
};
|
|
|
|
const handFollowCEBGVerification = createDebouncedFunction(async () => {
|
|
try {
|
|
const resq = await UserStatus({
|
|
account: AppModule.accountId,
|
|
request_next: 4,
|
|
});
|
|
if (resq) {
|
|
if (resq && resq.status[4] == 1) {
|
|
isFollowCEBG.value = true;
|
|
currentTask.value = 6;
|
|
}
|
|
}
|
|
if (resq.errcode == 0) {
|
|
if (resq && resq.status[4] == 0) {
|
|
addNotification("Please Try again");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
}
|
|
}, 1000); // 300 ms 的延迟
|
|
const handQuote = () => {
|
|
const code = 214045605309445;
|
|
const text =
|
|
"Adorable! join with me in @_CounterFire,Bring Gacha home with you \nShe will unveil even more rewards as she bursts out of her shell.\n#CounterFire Now available on Google Play,A new evolution about #Web3Gaming";
|
|
const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
|
text
|
|
)}&url=https://m.counterfire.games/?code=${code}`;
|
|
window.open(url, "_blank", "width=500,height=600");
|
|
};
|
|
|
|
const handQuoteVerification = createDebouncedFunction(async () => {
|
|
try {
|
|
const resq = await UserStatus({
|
|
account: AppModule.accountId,
|
|
request_next: 5,
|
|
});
|
|
if (resq) {
|
|
if (resq && resq.status[5] == 1) {
|
|
isQuote.value = true;
|
|
// isClaim.value = true;
|
|
const resjoin = await getJoin({
|
|
account: AppModule.accountId,
|
|
invite_code: route.query.code,
|
|
});
|
|
if (resq && (!resq.claim || Number(resq.claim) == 0) && resq.status.every((status) => status == 1)) {
|
|
isClaim.value = true;
|
|
isBalance.value = Number(resq.claim);
|
|
} else {
|
|
isClaim.value = false;
|
|
isBalance.value = Number(resq.claim);
|
|
}
|
|
|
|
let resqd = await Claim({
|
|
account: AppModule.accountId,
|
|
claim: resq.claim,
|
|
});
|
|
}
|
|
}
|
|
if (resq.errcode == 0) {
|
|
if (resq && resq.status[5] == 0) {
|
|
addNotification("Please Try again");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// console.error("An error occurred:", error);
|
|
}
|
|
}, 1000);
|
|
const handClaim = async () => {
|
|
if (
|
|
isDiscode.value &&
|
|
joinDiscode.value &&
|
|
isTwitter.value &&
|
|
isFollowCEBG.value &&
|
|
isQuote.value &&
|
|
chain.logined
|
|
) {
|
|
let res = await beginclaim({ account: AppModule.accountId });
|
|
|
|
if (res.errcode == 0) {
|
|
if (res.sign && res.sign.length > 0) {
|
|
const data = {
|
|
address: res.sign[0],
|
|
startTime: res.sign[1],
|
|
saltNonce: res.sign[2],
|
|
signature: res.sign[3],
|
|
};
|
|
console.log(data);
|
|
const resClaim = await chain.chainManager.bc.claimReward(
|
|
res.sign[0],
|
|
res.sign[1],
|
|
res.sign[2],
|
|
res.sign[3]
|
|
);
|
|
console.log(resClaim);
|
|
if (!resClaim) {
|
|
return;
|
|
}
|
|
let resq = await Claim({
|
|
account: AppModule.accountId,
|
|
claim: resClaim.transactionHash,
|
|
});
|
|
if (resq.errcode == 0) {
|
|
addNotification("Successful");
|
|
isClaim.value = false;
|
|
isBalance.value = 1;
|
|
}
|
|
if (resq.errcode !== 0) {
|
|
addNotification("Please Try again");
|
|
// status[1];
|
|
}
|
|
}
|
|
}
|
|
if (res.errcode !== 0) {
|
|
addNotification("Failed to obtain signature");
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => chain.logined,
|
|
async (newValue, oldValue) => {
|
|
// console.log("logined changed from", oldValue, "to", newValue);
|
|
if (chain.logined == true) {
|
|
currentTask.value = 2;
|
|
}
|
|
const resq = await UserStatus({ account: AppModule.accountId ,invite_code: route.query.code});
|
|
if (resq) {
|
|
if (chain.logined == true) {
|
|
currentTask.value = 2;
|
|
}
|
|
|
|
if (resq && resq.status[1] == 1) {
|
|
isDiscode.value = true;
|
|
currentTask.value = 3;
|
|
}
|
|
if (resq && resq.status[2] == 1) {
|
|
joinDiscode.value = true;
|
|
currentTask.value = 4;
|
|
}
|
|
if (resq && resq.status[3] == 1) {
|
|
isTwitter.value = true;
|
|
currentTask.value = 5;
|
|
}
|
|
if (resq && resq.status[4] == 1) {
|
|
isFollowCEBG.value = true;
|
|
currentTask.value = 6;
|
|
}
|
|
if (resq && resq.status[5] == 1) {
|
|
isQuote.value = true;
|
|
}
|
|
if (resq && (!resq.claim || Number(resq.claim) == 0) && resq.status.every((status) => status == 1)) {
|
|
isClaim.value = true;
|
|
isBalance.value = Number(resq.claim);
|
|
} else {
|
|
isClaim.value = false;
|
|
isBalance.value = Number(resq.claim);
|
|
}
|
|
let resqd = await Claim({
|
|
account: AppModule.accountId,
|
|
claim: resq.claim,
|
|
});
|
|
}
|
|
|
|
if (resq && resq.status.every((status) => status == 1)) {
|
|
const res = await getJoin({
|
|
account: AppModule.accountId,
|
|
invite_code: route.query.code,
|
|
});
|
|
}
|
|
|
|
// console.log(res);
|
|
const resc = await totalClaimed();
|
|
if (resc) {
|
|
count.value = resc.count;
|
|
}
|
|
if (resc.errcode !== 0) {
|
|
addNotification("Please Try again");
|
|
}
|
|
|
|
const resu = await UserInfo({ account: AppModule.accountId });
|
|
|
|
if (resu) {
|
|
// userInfo.value = resq
|
|
assign(userInfo, resu);
|
|
console.log(userInfo.twitter, "-=-=-userInfo.twitter");
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 15) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"..." +
|
|
address.substring(address.length - 6)
|
|
);
|
|
} else if (address.length > 0 && address.length < 15) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
|
|
if (userInfo.twitter) {
|
|
userInfo.twitter = formatAddress(userInfo.twitter);
|
|
}
|
|
console.log(userInfo.twitter);
|
|
|
|
if (userInfo.discord) {
|
|
userInfo.discord = formatAddress(userInfo.discord);
|
|
}
|
|
}
|
|
////console.log(resq);
|
|
// if (res) {
|
|
// isClaim.value = true;
|
|
// }
|
|
}
|
|
);
|
|
onMounted(async () => {
|
|
const resc = await totalClaimed();
|
|
if (resc) {
|
|
count.value = resc.count;
|
|
}
|
|
if (chain.logined == true) {
|
|
if (chain.logined == true) {
|
|
currentTask.value = 2;
|
|
}
|
|
const resq = await UserStatus({ account: AppModule.accountId,invite_code: route.query.code });
|
|
|
|
if (resq) {
|
|
if (chain.logined == true) {
|
|
currentTask.value = 2;
|
|
}
|
|
if (resq && resq.status[1] == 1) {
|
|
isDiscode.value = true;
|
|
currentTask.value = 3;
|
|
}
|
|
|
|
if (resq && resq.status[2] == 1) {
|
|
joinDiscode.value = true;
|
|
currentTask.value = 4;
|
|
}
|
|
if (resq && resq.status[3] == 1) {
|
|
isTwitter.value = true;
|
|
currentTask.value = 5;
|
|
}
|
|
if (resq && resq.status[4] == 1) {
|
|
isFollowCEBG.value = true;
|
|
currentTask.value = 6;
|
|
}
|
|
if (resq && resq.status[5] == 1) {
|
|
isQuote.value = true;
|
|
}
|
|
if (resq && (!resq.claim || Number(resq.claim) == 0) && resq.status.every((status) => status == 1)) {
|
|
isClaim.value = true;
|
|
isBalance.value = Number(resq.claim);
|
|
} else {
|
|
isClaim.value = false;
|
|
isBalance.value = Number(resq.claim);
|
|
}
|
|
|
|
if (resq && resq.status.every((status) => status == 1)) {
|
|
const res = await getJoin({
|
|
account: AppModule.accountId,
|
|
invite_code: route.query.code,
|
|
});
|
|
}
|
|
}
|
|
const resu = await UserInfo({ account: AppModule.accountId });
|
|
|
|
if (resu) {
|
|
// userInfo.value = resq
|
|
assign(userInfo, resu);
|
|
const formatAddress = (address) => {
|
|
if (address.length >= 15) {
|
|
return (
|
|
address.substring(0, 6) +
|
|
"..." +
|
|
address.substring(address.length - 6)
|
|
);
|
|
} else if (address.length > 0 && address.length < 15) {
|
|
return address;
|
|
} else {
|
|
return "-";
|
|
}
|
|
};
|
|
|
|
if (userInfo.twitter) {
|
|
userInfo.twitter = formatAddress(userInfo.twitter);
|
|
}
|
|
|
|
if (userInfo.discord) {
|
|
userInfo.discord = formatAddress(userInfo.discord);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.task-one-header {
|
|
// height: 65px;
|
|
}
|
|
|
|
.task-one {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
background-color: #413319;
|
|
z-index: 0; /* 将 z-index 改为 0 */
|
|
.bg {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
bottom: 0;
|
|
color: transparent;
|
|
img {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
// z-index: 0;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
height: calc(100% - 101px);
|
|
justify-content: center;
|
|
align-items: center;
|
|
.center {
|
|
width: 100%;
|
|
height: 95%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.content-left {
|
|
// padding-top: 100px;
|
|
display: flex;
|
|
//width: 310px;
|
|
// height: 100%;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.twist-egg {
|
|
width: 529px;
|
|
height: 529px;
|
|
margin: 0 auto;
|
|
|
|
// margin-bottom: 34px;
|
|
// margin-top: 10px;
|
|
border: 1px solid #ffba00;
|
|
border-radius: 20px 20px 20px 20px;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 20px 20px 20px 20px;
|
|
}
|
|
/// box-shadow: 0px 0px 97px 3px rgba(255, 253, 71, 0.4);
|
|
}
|
|
.participants-content {
|
|
width: 60%;
|
|
}
|
|
.participants {
|
|
font-size: 18px;
|
|
font-family: "Arial";
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
// margin-top: 38px;
|
|
color: #ffffff;
|
|
//margin-bottom: 10px;
|
|
}
|
|
.return {
|
|
width: 100%;
|
|
font-size: 40px;
|
|
font-family: "GemunuExtraBold";
|
|
font-weight: 400;
|
|
display: flex;
|
|
margin-top: 28px;
|
|
margin-bottom: 31px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
.return-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-right: 28px;
|
|
}
|
|
}
|
|
}
|
|
.claim-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
//margin-bottom: 25px;
|
|
}
|
|
.bottom-content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 47px;
|
|
.claim {
|
|
width: 219px;
|
|
height: 67px;
|
|
// background: #2d2b24;
|
|
// border-radius: 12px;
|
|
cursor: pointer;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
line-height: 67px;
|
|
font-size: 24px;
|
|
font-family: "SAIRABLACK";
|
|
color: #706b58;
|
|
background: url("../../assets/img/task/claim-btn.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.claim-active {
|
|
width: 219px;
|
|
height: 67px;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
background: url("../../assets/img/task/claim-btn-active.png") no-repeat;
|
|
background-size: contain;
|
|
// margin-left: 20px;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
line-height: 67px;
|
|
font-family: "SAIRABLACK";
|
|
font-size: 24px;
|
|
//background: #ffd200;
|
|
// border-radius: 12px;
|
|
}
|
|
}
|
|
|
|
.content-right {
|
|
// padding-top: 95px;
|
|
height: 50%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 32px;
|
|
font-family: "SAIRABLACK";
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
margin-top: 40px;
|
|
margin-bottom: 19px;
|
|
}
|
|
}
|
|
}
|
|
.task-right-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32px;
|
|
padding-left: 20px;
|
|
color: #a79f9f;
|
|
width: 696px;
|
|
height: 55px;
|
|
font-family: "Arial";
|
|
font-size: 22px;
|
|
background: rgba(40, 33, 20, 0.6);
|
|
border: 1px solid #ece8ed;
|
|
// opacity: 0.6;
|
|
border-radius: 12px;
|
|
}
|
|
.task-right-item-actave {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32px;
|
|
padding-left: 20px;
|
|
color: #fff;
|
|
font-family: "Arial";
|
|
width: 696px;
|
|
height: 55px;
|
|
font-size: 22px;
|
|
background: rgba(96, 255, 0, 0.32);
|
|
border: 1px solid #60ff00;
|
|
// opacity: 0.6;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.task-right-item-current {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32px;
|
|
padding-left: 20px;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-family: "Arial";
|
|
width: 696px;
|
|
height: 55px;
|
|
background: rgba(40, 33, 20, 0.6);
|
|
border: 1px solid #fff;
|
|
// opacity: 0.6;
|
|
border-radius: 12px;
|
|
}
|
|
.connect-now {
|
|
// width: 140px; // adjust as needed
|
|
height: 38px;
|
|
margin-left: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
line-height: 38px;
|
|
color: #fff;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.connect-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.serial-number {
|
|
margin-right: 10px;
|
|
width: 28px;
|
|
height: 28px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
position: relative;
|
|
background: #211e18;
|
|
border-radius: 50%;
|
|
.checkmark {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 3px;
|
|
img {
|
|
width: 29px;
|
|
height: 21px;
|
|
}
|
|
}
|
|
}
|
|
.serial-number-actave {
|
|
width: 28px;
|
|
height: 28px;
|
|
position: relative;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
line-height: 28px;
|
|
color: #fff;
|
|
//border: 1px solid #ccc;
|
|
margin-right: 10px;
|
|
background: #211e18;
|
|
.checkmark {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 3px;
|
|
img {
|
|
width: 29px;
|
|
height: 21px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #ccc;
|
|
position: relative;
|
|
}
|
|
|
|
.checkbox::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
width: 5px;
|
|
height: 10px;
|
|
border: 2px solid #000;
|
|
border-top: none;
|
|
border-right: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.checkbox:checked::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.participants {
|
|
}
|
|
.discord-account {
|
|
width: 111px;
|
|
height: 31px;
|
|
line-height: 28px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
margin-left: 10px;
|
|
}
|
|
.discord {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.join-discode {
|
|
display: flex;
|
|
align-items: center;
|
|
.join-btn {
|
|
width: 81px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
.verification {
|
|
width: 101px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
.verification {
|
|
width: 101px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
.connect-twitter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.twitter-account {
|
|
font-size: 18px;
|
|
font-family: "MEurostile";
|
|
font-weight: 400;
|
|
// color: #ffffff;
|
|
width: 111px;
|
|
height: 31px;
|
|
cursor: pointer;
|
|
line-height: 31px;
|
|
text-align: center;
|
|
margin-left: 10px;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
.follow-content {
|
|
display: flex;
|
|
align-items: center;
|
|
.follow-cebg {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
width: 91px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 10px;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
.broadcast-content {
|
|
display: flex;
|
|
align-items: center;
|
|
.quote {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
// width: 91px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 10px;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
.gacha-guest {
|
|
// width: 185px;
|
|
font-family: "SAIRABLACK";
|
|
// line-height: 30px;
|
|
}
|
|
.account {
|
|
max-width: 340px; /* 框的最小宽度 */
|
|
width: auto; /* 宽度根据内容自适应 */
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding-left: 10px;
|
|
padding-right: 10px; /* 为了保持右侧的空间 */
|
|
border-radius: 15px;
|
|
margin-left: 10px;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
@media screen and (max-width: 1440px) {
|
|
/* 在此处插入你希望在屏幕宽度大于1440px时应用的样式 */
|
|
.center {
|
|
// height: 98% !important;
|
|
}
|
|
.return {
|
|
//margin-bottom: 10px;
|
|
}
|
|
|
|
/* 更多的样式代码 */
|
|
}
|
|
// @media screen and (max-height: 700px) {
|
|
// .task-one {
|
|
// height: auto;
|
|
// min-height: 0;
|
|
// }
|
|
|
|
// }
|
|
</style>
|