theme-game loading & animate

themes/game/components/GameListIndexCombine.js

@@ -37,8 +37,14 @@ export const GameListIndexCombine = ({ posts }) => {
       // 试图将4合一卡组塞满
       while (gamesClone?.length > 0 && groupItems.length < 4) {
         const item = gamesClone.shift()
-        if (item.tags?.some(t => t === siteConfig('GAME_RECOMMEND_TAG', 'Recommend', CONFIG))) {
-          components.push(<GameItem key={index} item={item} isLargeCard={true} />)
+        if (
+          item.tags?.some(
+            t => t === siteConfig('GAME_RECOMMEND_TAG', 'Recommend', CONFIG)
+          )
+        ) {
+          components.push(
+            <GameItem key={index} item={item} isLargeCard={true} />
+          )
           continue
         } else {
           groupItems.push(item)
@@ -53,7 +59,9 @@ export const GameListIndexCombine = ({ posts }) => {
         // 剩余的4合一不满4个的给他放大卡
         while (groupItems.length > 0) {
           const item = groupItems.shift()
-          components.push(<GameItem key={index++} item={item} isLargeCard={true} />)
+          components.push(
+            <GameItem key={index++} item={item} isLargeCard={true} />
+          )
         }
       }
     }
@@ -107,7 +115,9 @@ const GameAd = () => {
  */
 const GameItemGroup = ({ items }) => {
   return (
-    <div className='card-group h-[20rem] w-full grid grid-cols-2 grid-rows-2 gap-2'>
+    <div
+      data-wow-delay='.2s'
+      className='wow fadeInUp card-group h-[20rem] w-full grid grid-cols-2 grid-rows-2 gap-2'>
       {items.map((item, index) => (
         <GameItem key={index} item={item} />
       ))}
@@ -124,7 +134,9 @@ const GameItem = ({ item, isLargeCard }) => {
   const { title } = item
   const img = item.pageCoverThumbnail
   const [showType, setShowType] = useState('img') // img or video
-  const url = checkContainHttp(item.slug) ? sliceUrlFromHttp(item.slug) : `${siteConfig('SUB_PATH', '')}/${item.slug}`
+  const url = checkContainHttp(item.slug)
+    ? sliceUrlFromHttp(item.slug)
+    : `${siteConfig('SUB_PATH', '')}/${item.slug}`
   const video = item?.ext?.video
   return (
     <Link
@@ -136,7 +148,8 @@ const GameItem = ({ item, isLargeCard }) => {
         setShowType('img')
       }}
       title={title}
-      className={`card-single ${
+      data-wow-delay='.2s'
+      className={`wow fadeInUp  card-single ${
         isLargeCard ? 'h-[20rem]' : 'h-full'
       } w-full relative shadow rounded-md overflow-hidden flex justify-center items-center
                 group   hover:border-purple-400`}>

themes/game/index.js

@@ -6,6 +6,7 @@ import replaceSearchResult from '@/components/Mark'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
+import { loadWowJS } from '@/lib/plugins/wow'
 import { deepClone, isBrowser, shuffleArray } from '@/lib/utils'
 import Link from 'next/link'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
@@ -69,6 +70,7 @@ const LayoutBase = props => {
         ? JSON.parse(localStorage.getItem('recent_games'))
         : []
     )
+    loadWowJS()
   }, [])
 
   return (
@@ -306,7 +308,7 @@ const LayoutSlug = props => {
     // 定义一个函数来处理iframe加载成功事件
     function iframeLoaded() {
       if (game) {
-        setLoading(false)
+        // setLoading(false)
       }
     }
 
@@ -371,7 +373,7 @@ const LayoutSlug = props => {
                 {loading && (
                   <div className='absolute z-20 w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md overflow-hidden '>
                     <div className='z-20 absolute bg-black bg-opacity-75 w-full h-full flex flex-col gap-4 justify-center items-center'>
-                      <h2 className='text-3xl text-white flex gap-2'>
+                      <h2 className='text-3xl text-white flex gap-2 items-center'>
                         <i className='fas fa-spinner animate-spin'></i>
                         {siteConfig('TITLE')}
                       </h2>