last update

src/chain/ChainManager.ts

@@ -64,13 +64,14 @@ export default class ChainManager {
     return this.bc.currentChain;
   }
 
-  public async login() {
+  public async login(type:any) {
     if (!AppModule.step) {
       try {
-        await this.bc.connect(true);
+        await this.bc.connect(true,type);
         await this.checkNance();
       } catch (err) {
         message.error(err.message, 5);
+        this.bc.walletType = 0
         await this.bc.disconnect();
         await Promise.reject(err);
       }
@@ -93,6 +94,7 @@ export default class ChainManager {
       });
       AppModule.updateStep(1);
     } catch (err) {
+      this.bc.walletType = 0
       console.log(err);
       await Promise.reject(err);
     }

src/chain/blockchain.ts

@@ -90,7 +90,7 @@ export class Blockchain {
     if (this.walletType === 1) {
       this.provider = await this.connectMetaMask();
     } else if (this.walletType === 2) {
-      this.provider = await this.connectWalletConnect();
+      this.provider = await this.connectokxwallet();
     }
     if (!this.provider) {
       return;
@@ -150,28 +150,58 @@ export class Blockchain {
     }
   }
 
-  public async connect(isManual = false) {
+  public async connect(isManual = false, type) {
-    // if (isMobile()) {
+    if (isMobile()) {
-    //   if (hasMetamask()) {
+      if (type == 1) {
-    //     this.walletType = 1;
+        if (!hasMetamask()) {
-    //   } else {
+          var next = window.location.href;
-    //     this.walletType = 2;
+          var url = `https://metamask.app.link/dapp/${next}`;
-    //   }
+          location.href = url;
-    // } else {
+        } else {
-    //   if (hasMetamask()) {
+          this.walletType = 1;
-    //     if (isManual && !this.walletType) {
+        }
-    //       this.walletType = await this.selectWallet();
+      } else if (type == 2) {
-    //     }
+        const ua = navigator.userAgent;
-    //   } else {
+        const isIOS = /iphone|ipad|ipod|ios/i.test(ua);
-    //     this.walletType = 2;
+        const isAndroid = /android|XiaoMi|MiuiBrowser/i.test(ua);
-    //   }
+        const isMobile = isIOS || isAndroid;
-    // }
+        const isOKApp = /OKApp/i.test(ua);
-    this.walletType = 1;
+
-    if (isManual || this.isWalletConnect) {
+        if (isMobile && isOKApp) {
+          this.walletType = 2;
+        } else {
+          var next = window.location.href;
+          window.open(`okx://wallet/dapp/details?dappUrl=${next}`);
+        }
+      }
+    } else {
+      // debugger
+      if (type == 1) {
+        if (hasMetamask()) {
+          if (isManual && !this.walletType) {
+            this.walletType = 1;
+          }
+        } else {
+          this.walletType = 1;
+        }
+      } else if (type == 2) {
+        if (typeof window.okxwallet !== "undefined") {
+          if (isManual && !this.walletType) {
+            this.walletType = 2;
+          }
+        } else {
+          this.walletType = 2;
+        }
+      }
+    }
+
+    // this.walletType = 1;
+    if (isManual) {
       await this.connectWallet(isManual);
     }
   }
 
+
   /**
    * show wallet picker
    * @return {Promise<number>}
@@ -209,8 +239,10 @@ export class Blockchain {
     });
   }
 
+  
   public async connectMetaMask() {
     let provider = null;
+    /// debugger
     if (typeof window.ethereum !== "undefined") {
       provider = window.ethereum;
       try {
@@ -232,7 +264,45 @@ export class Blockchain {
     } else if (window.celo) {
       provider = window.celo;
     } else {
-      throw new Error("Cannot find Metamask");
+      this.walletType = 0;
+
+      setTimeout(function () {
+        window.open("https://metamask.io/download/", "_blank");
+      }, 2200);
+      throw new Error("No Web3 Provider found");
+    }
+    return provider;
+  }
+
+  public async connectokxwallet() {
+    let provider = null;
+    if (typeof window.okxwallet !== "undefined") {
+      provider = window.okxwallet;
+      try {
+        await provider.request({ method: "eth_requestAccounts" });
+      } catch (error: any) {
+        if (error.code === -32002) {
+          // const hexChainId = toHexChainId(this.currentChain)
+          // await provider.request({
+          //   method: 'wallet_switchEthereumChain',
+          //   params: [{ chainId: hexChainId }]
+          // })
+          throw new Error(
+            "OKX Wallet not login, Open OKX Wallet and login first"
+          );
+        } else {
+          this.walletType = 0;
+          throw new Error("User Rejected");
+        }
+      }
+    } else {
+      this.walletType = 0;
+
+      setTimeout(function () {
+        window.open("https://www.okx.com/download", "_blank");
+      }, 2200);
+
+      throw new Error("No Web3 Provider found");
     }
     return provider;
   }

src/components/about/TeamMember.vue

@@ -39,15 +39,15 @@ const teamMembers = [
       "Founder of Bubble Candy Studio to build Counter Fire",
     ],
   },
-  {
+  // {
-    name: "Yoda",
+  //   name: "Yoda",
-    title: "Gaming Economist",
+  //   title: "Gaming Economist",
-    description: [
+  //   description: [
-      "Gaming data expert in Giant Interactive",
+  //     "Gaming data expert in Giant Interactive",
-      "Core data officer of Foxconn Group(TPE:2354)",
+  //     "Core data officer of Foxconn Group(TPE:2354)",
-      " Gaming Economist in Bubble Candy Studio",
+  //     " Gaming Economist in Bubble Candy Studio",
-    ],
+  //   ],
-  },
+  // },
   {
     name: "SUPER G",
     title: "Producer",

src/components/about/TeamVision.vue

@@ -72,7 +72,7 @@ line-height: 36px;
 
 .team-members {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 }
 .background-image {
   position: absolute;

src/components/home/GameVideo.vue

@@ -41,9 +41,7 @@
         <SwiperSlide v-for="(item, index) of imageList" :key="index">
           <div
             :class="
-              index == activeIndex
+              index == activeIndex ? 'active-thumbnail' : 'inactive-thumbnail'
-                ? 'active-thumbnail'
-                : 'inactive-thumbnail'
             "
           >
             <img class="img" :src="item.imgSrc" />
@@ -95,10 +93,8 @@ const imageList = ref([
 ]);
 const thumbsSwiper = ref(null);
 
-
 const updateThumbnailsOpacity = (swiper) => {
   activeIndex.value = swiper.realIndex;
-  
 };
 const setThumbsSwiper = (swiper) => {
   thumbsSwiper.value = swiper;
@@ -126,10 +122,9 @@ onMounted(() => {});
     position: absolute;
     left: 165px;
     top: 94px;
-    img{
+    img {
-     width: 312px; 
+      width: 312px;
     }
-    
   }
   .background-img {
     position: absolute;
@@ -143,15 +138,13 @@ onMounted(() => {});
 }
 
 .active-thumbnail {
-  
+  img {
-  img{
     opacity: 1;
   }
-  
 }
 
 .inactive-thumbnail {
-  img{
+  img {
     opacity: 0.5;
   }
 }
@@ -295,9 +288,17 @@ onMounted(() => {});
 // }
 
 :deep(.swiper-button-prev::after) {
-  content: url("../../assets/img/home/gameWeb_p3_arrow1.png");
+  content: "";
+  background: url("../../assets/img/home/gameWeb_p3_arrow1.png") no-repeat;
+  background-size: 100% 100%;
+  width: 39px;
+  height: 38px;
 }
 :deep(.swiper-button-next::after) {
-  content: url("../../assets/img/home/gameWeb_p3_arrow12.png");
+  content: "";
+  background: url("../../assets/img/home/gameWeb_p3_arrow12.png") no-repeat;
+  background-size: 100% 100%;
+  width: 39px;
+  height: 38px;
 }
 </style>

src/components/home/HeroCard.vue

@@ -51,7 +51,7 @@
         <SwiperSlide v-for="(slide, index) in heroSlides" :key="slide.label">
           <!-- 插入每个slide的内容 -->
           <div
-            :class="selectHeroIdenx == index ?  'hero-img-active' : 'hero-img'"
+            :class="selectHeroIdenx == index ? 'hero-img-active' : 'hero-img'"
             @click="selectChange(index)"
           >
             <img :src="slide.imgUrl" alt="Character Image" />
@@ -149,9 +149,9 @@ const onSlideChange = (swiper) => {
   // console.log("Slide changed to index:", swiper.realIndex);headeyop
   selectHeroIdenx.value = swiper.realIndex;
 };
-const selectChange=(index)=>{
+const selectChange = (index) => {
-selectHeroIdenx.value = index
+  selectHeroIdenx.value = index;
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -225,23 +225,23 @@ selectHeroIdenx.value = index
       //   margin: 0 auto;
     }
     .hero-img {
-      width: 131px;
+      // width: 131px;
-      height: 131px;
+      // height: 131px;
-      img {
+      // img {
-        width: 100%;
+      //   width: 100%;
-        height: 100%;
+      //   height: 100%;
-      }
+      // }
       //   background: #2a2b3e;
       //   border-radius: 20px;
     }
     .hero-img-active {
       background-color: #3ddbe1;
-      width: 132px;
+      // width: 132px;
-      height: 132px;
+      // height: 132px;
-      img {
+      // img {
-        width: 100%;
+      //   width: 100%;
-        height: 100%;
+      //   height: 100%;
-      }
+      // }
     }
     .swiper {
       //   width: 100%;
@@ -275,12 +275,16 @@ selectHeroIdenx.value = index
 }
 .swiper-button-next::after,
 :deep(.swiper-button-prev::after) {
-  content: url("../../assets/img/home/gameWeb_p3_arrow1.png");
+  content: "";
+  background: url("../../assets/img/home/gameWeb_p3_arrow1.png") no-repeat;
+  background-size: 100% 100%;
   width: 39px;
   height: 48px;
 }
 :deep(.swiper-button-next::after) {
-  content: url("../../assets/img/home/gameWeb_p3_arrow12.png");
+  content: "";
+  background: url("../../assets/img/home/gameWeb_p3_arrow12.png") no-repeat;
+  background-size: 100% 100%;
   width: 39px;
   height: 48px;
 }

src/components/layout/NavBar.vue

@@ -36,10 +36,24 @@
       </div>
 
       <div class="header-right">
-        <div class="metaMask-login" v-if="!chain.logined" @click="login">
+        <div class="metaMask-login" v-if="!chain.logined" @click="handlLogin">
           <div class="matamask">
             <div>Login</div>
           </div>
+          <div v-show="loginShowMenu" class="menu">
+            <div class="menu-item" @click="login(1)">
+              <div class="login-icon">
+                <img src="../../assets/img/home/login_icon_Meta.png" alt="" />
+              </div>
+              <div>MetaMask Wallet</div>
+            </div>
+            <div class="menu-item" @click="login(2)">
+              <div class="login-icon">
+                <img src="../../assets/img/home/login_icon_OKX.png" alt="" />
+              </div>
+              <div>OKEx Wallet</div>
+            </div>
+          </div>
         </div>
         <div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
           <div class="matamask">
@@ -69,52 +83,8 @@ const router = useRouter();
 const route = useRoute();
 const chain = useChainStore();
 const app = useAppStore();
-
-function click(event) {
-  router.push(event.key);
-}
-
-//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
-const { copied, error, reset, copyToClipboard } = useCopyToClipboard();
-
-const message = copied.value
-  ? "Text copied!"
-  : "Click the button to copy text.";
-const formatAddress = computed(() => {
-  const accountId = AppModule.accountId;
-  if (!accountId) return "-";
-  if (accountId.length >= 10) {
-    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
-  }
-  return accountId;
-});
-
-async function login(event) {
-  var next = window.location.href;
-  if (!hasMetamask()) {
-    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;
-    }
-  }
-}
-const logout = async () => {
-  await chain.chainManager.logout();
-  window.location.reload();
-  // console.log("logined:", chain.chainManager.isLogined);
-  chain.logined = chain.chainManager.isLogined;
-  window.location.reload();
-};
-const handlHome = () => {
-  router.push("/");
-};
 const showMenu = ref(false);
+const loginShowMenu = ref(false);
 const dropdownVisible = ref(false);
 const activeIndex = ref(0);
 const navList = reactive([
@@ -164,6 +134,49 @@ const navList = reactive([
   },
 ]);
 
+function click(event) {
+  router.push(event.key);
+}
+
+//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
+const { copied, error, reset, copyToClipboard } = useCopyToClipboard();
+
+const message = copied.value
+  ? "Text copied!"
+  : "Click the button to copy text.";
+const formatAddress = computed(() => {
+  const accountId = AppModule.accountId;
+  if (!accountId) return "-";
+  if (accountId.length >= 10) {
+    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
+  }
+  return accountId;
+});
+
+async function login(type) {
+
+  if (!chain.logined) {
+    //没有登录情况下执行登录
+
+    await chain.chainManager.login(type);
+    // console.log("logined:", chain.chainManager.isLogined);
+    chain.logined = chain.chainManager.isLogined;
+  }
+}
+const handlLogin = () => {
+  loginShowMenu.value = !loginShowMenu.value;
+};
+const logout = async () => {
+  await chain.chainManager.logout();
+  window.location.reload();
+  // console.log("logined:", chain.chainManager.isLogined);
+  chain.logined = chain.chainManager.isLogined;
+  window.location.reload();
+};
+const handlHome = () => {
+  router.push("/");
+};
+
 function handNavCurent(nav) {
   activeIndex.value = nav.id;
   if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
@@ -394,52 +407,7 @@ watchEffect(() => {
   justify-content: center;
   align-items: center;
   // right: 11px;
-  .community-dropdown {
-    position: relative;
-  }
-  .community-btn {
-    width: 218px;
-    height: 68px;
-    background: #2a2b3e;
-    margin-right: 10px;
-    text-align: center;
-    line-height: 68px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 20px;
-    font-family: "Poppins";
-    font-weight: 400;
-    color: #eeecff;
-    border-radius: 10px;
-  }
-  /* 鼠标悬浮时显示下拉菜单 */
-  .community-dropdown:hover .dropdown-content {
-    display: block;
-  }
 
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #252636;
-    border-radius: 10px;
-    // border-radius: 0px 0px 10px 10px;
-    width: 218px;
-    z-index: 1;
-    top: 100%; /* 将下拉菜单放在按钮下方 */
-    text-align: center;
-  }
-
-  .dropdown-content a {
-    display: block;
-    padding: 10px 20px;
-    text-decoration: none;
-    color: #fff;
-    font-size: 16px;
-  }
-
-  .dropdown-content :hover {
-    background-color: #2a2b3e;
-  }
   .metaMask-logo {
     width: 60px;
     height: 60px;
@@ -461,7 +429,45 @@ watchEffect(() => {
     font-family: "Poppins";
     font-weight: 400;
     color: #eeecff;
+    position: relative;
     border-radius: 10px;
+    .menu {
+      position: absolute;
+      top: 75px;
+      right: 0px;
+       width: 218px;
+      z-index: 1;
+      text-align: center;
+      padding: 5px 0;
+      background-color: #252636;
+      border-radius: 5px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+      list-style: none;
+
+      transition: all 0.3s ease-out;
+    }
+    li {
+      margin: 5px 0;
+    }
+
+    .menu-item {
+      padding-left: 8px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      color: #f5f5f5;
+      display: flex;
+      .login-icon {
+        width: 28px;
+        margin-right: 3px;
+        height: 28px;
+      }
+      .title {
+        margin-right: 10px;
+      }
+    }
+    a:hover {
+      background-color: #f5f5f5;
+    }
   }
   .metaMask-login-active {
     width: 218px;
@@ -478,38 +484,40 @@ watchEffect(() => {
     font-weight: 400;
     color: #eeecff;
     border-radius: 10px;
-  }
+    .menu {
-  .menu {
+      position: absolute;
-    position: absolute;
+      top: 100%;
-    top: 100%;
+      right: 0px;
-    right: 0px;
+      width: 218px;
-    width: 218px;
+      z-index: 1;
-    z-index: 1;
+      text-align: center;
-    text-align: center;
+      padding: 10px 0;
-    padding: 10px 0;
+      background-color: #252636;
-    background-color: #252636;
+      border-radius: 5px;
-    border-radius: 5px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+      list-style: none;
-    list-style: none;
 
-    transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
-  }
+    }
-  li {
+    li {
-    margin: 5px 0;
+      margin: 5px 0;
-  }
+     
-
+    }
-  .menu-item {
+
-    padding: 5px 15px;
+    .menu-item {
-    color: #f5f5f5;
+      padding: 5px 15px;
-    display: flex;
+      color: #f5f5f5;
-    // padding-top: 10px;
+      display: flex;
-    justify-content: center;
+       font-size: 18px;
-    .title {
+      // padding-top: 10px;
-      margin-right: 10px;
+      justify-content: center;
+      .title {
+        margin-right: 10px;
+      }
+    }
+    a:hover {
+      background-color: #f5f5f5;
     }
-  }
-  a:hover {
-    background-color: #f5f5f5;
   }
 }
 

src/views/HomeView.vue

@@ -43,17 +43,16 @@
 </template>
 
 <script setup>
-//  引入想要效果模块
+
 import { ref, reactive, onMounted, onUnmounted } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import Banner from "../components/home/banner.vue";
+import Banner from "../components/home/Banner.vue";
 import WhatCounterFire from "../components/home/WhatCounterFire.vue";
 import HeroWeaponChipSelector from "../components/home/HeroWeaponChipSelector.vue";
 import GameFeatures from "../components/home/GameFeatures.vue";
 import HomeFooter from "../components/home/HomeFooter.vue";
 import GameVideo from "../components/home/GameVideo.vue";
 import { Pagination, Navigation, Mousewheel } from "swiper/modules";
-// 引入样式
 import "swiper/css";
 import "swiper/css/autoplay";
 import "swiper/css/effect-fade";
@@ -78,6 +77,7 @@ const updateOrientation = () => {
   isLandscape.value = orientation === 90 || orientation === -90;
 };
 
+
 function goToSlide(position) {
   if (swiperInstance.value) {
     swiperInstance.value.slideTo(position);