From ae55536dabe72c741b8068a26831aca35b27ad44 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 2 Apr 2024 23:11:03 +0800
Subject: [PATCH] =?UTF-8?q?theme-gamer=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/game/components/GameEmbed.js      | 157 +++++++++++++++++++++++
 themes/game/components/GameListRecent.js |   2 +-
 themes/game/index.js                     | 132 ++-----------------
 3 files changed, 168 insertions(+), 123 deletions(-)
 create mode 100644 themes/game/components/GameEmbed.js

diff --git a/themes/game/components/GameEmbed.js b/themes/game/components/GameEmbed.js
new file mode 100644
index 00000000..3b9ffcaa
--- /dev/null
+++ b/themes/game/components/GameEmbed.js
@@ -0,0 +1,157 @@
+import { Draggable } from '@/components/Draggable'
+import { siteConfig } from '@/lib/config'
+import { deepClone } from '@/lib/utils'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import DownloadButton from './DownloadButton'
+import FullScreenButton from './FullScreenButton'
+
+/**
+ * 嵌入游戏
+ * @param {*} param0
+ * @returns
+ */
+export default function GameEmbed({ post, siteInfo }) {
+  const game = deepClone(post)
+
+  // 提示用户在新窗口打开
+  // const new_window = game?.ext?.new_window || false
+  const new_window = true
+  const url = game?.ext?.href
+  const [loading, setLoading] = useState(true)
+  const [tipNewWindow, setTipNewWindow] = useState(new_window)
+
+  /**
+   * 新窗口中打开
+   */
+  const openInNewWindow = () => {}
+
+  // 将当前游戏加入到最近游玩
+  useEffect(() => {
+    // 更新最新游戏
+    const recentGames = localStorage.getItem('recent_games')
+      ? JSON.parse(localStorage.getItem('recent_games'))
+      : []
+
+    const existedIndex = recentGames.findIndex(item => item?.id === game?.id)
+    if (existedIndex === -1) {
+      recentGames.unshift(game) // 将游戏插入到数组头部
+    } else {
+      // 如果游戏已存在于数组中，将其移至数组头部
+      const existingGame = recentGames.splice(existedIndex, 1)[0]
+      recentGames.unshift(existingGame)
+    }
+    localStorage.setItem('recent_games', JSON.stringify(recentGames))
+
+    const iframe = document.getElementById('game-wrapper')
+
+    // 定义一个函数来处理iframe加载成功事件
+    function iframeLoaded() {
+      if (game) {
+        setLoading(false)
+      }
+    }
+
+    // 绑定加载事件
+    if (iframe?.attachEvent) {
+      iframe?.attachEvent('onload', iframeLoaded)
+    } else {
+      if (iframe) iframe.onload = iframeLoaded
+    }
+
+    // 更改iFrame的title
+    if (
+      document
+        ?.getElementById('game-wrapper')
+        ?.contentDocument.querySelector('title')?.textContent
+    ) {
+      document
+        .getElementById('game-wrapper')
+        .contentDocument.querySelector('title').textContent = `${
+        game?.title || ''
+      } - Play ${game?.title || ''} on ${siteConfig('TITLE')}`
+    }
+  }, [game])
+
+  return (
+    <div
+      className={`${url ? '' : 'hidden'} bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative`}>
+      {/* 移动端返回主页按钮 */}
+      <Draggable stick='left'>
+        <div
+          style={{ left: '0px', top: '1rem' }}
+          className='fixed xl:hidden group space-x-1 flex items-center z-20 pr-3 pl-1 bg-[#202030] rounded-r-2xl  shadow-lg '>
+          <Link
+            href='/'
+            className='px-1 py-3 hover:scale-125 duration-200 transition-all'
+            passHref>
+            <i className='fas fa-arrow-left' />
+          </Link>{' '}
+          <span
+            className='text-white font-serif'
+            onClick={() => {
+              document.querySelector('.game-info').scrollIntoView({
+                behavior: 'smooth',
+                block: 'end',
+                inline: 'nearest'
+              })
+            }}>
+            G
+          </span>
+        </div>
+      </Draggable>
+
+      {/* 新窗口打开遮罩 */}
+      {tipNewWindow && (
+        <div className='absolute z-20 bg-black bg-opacity-50 w-full h-full flex items-center justify-center'>
+          <div className='w-80 h-80 bg-white rounded-lg text-center flex items-center justify-center'>
+            <div>
+              <p>Click to start the game.</p>
+              <button
+                onClick={openInNewWindow}
+                className='m-4 px-6 py-2 bg-blue-500 rounded-lg text-white shadow-md'>
+                OK
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Loading遮罩 */}
+      {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 items-center'>
+              <i className='fas fa-spinner animate-spin'></i>
+              {siteInfo?.title || siteConfig('TITLE')}
+            </h2>
+            <h3 className='text-xl text-white'>
+              {siteInfo?.description || siteConfig('DESCRIPTION')}
+            </h3>
+          </div>
+
+          {/* 游戏封面图 */}
+          {game?.pageCoverThumbnail && (
+            <img
+              src={game?.pageCoverThumbnail}
+              className='w-full h-full object-cover blur-md absolute top-0 left-0 z-0'
+            />
+          )}
+        </div>
+      )}
+      <iframe
+        id='game-wrapper'
+        src={url}
+        className={`relative w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden`}
+      />
+
+      {/* 游戏窗口装饰器 */}
+      {url && !loading && (
+        <div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center z-10 md:absolute'>
+          <DownloadButton />
+          <FullScreenButton />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/themes/game/components/GameListRecent.js b/themes/game/components/GameListRecent.js
index f03fef3e..dd4840c4 100644
--- a/themes/game/components/GameListRecent.js
+++ b/themes/game/components/GameListRecent.js
@@ -33,7 +33,7 @@ export const GameListRecent = ({ maxCount = 14 }) => {
   return (
     <>
       <div className='game-list-recent-wrapper w-full max-w-full overflow-x-auto pt-4 px-2'>
-        <div className='game-grid flex gap-2'>
+        <div className='game-grid md:flex grid grid-flow-col gap-2'>
           {components?.map((ItemComponent, index) => {
             return ItemComponent
           })}
diff --git a/themes/game/index.js b/themes/game/index.js
index af3ecd27..0c01b1a4 100644
--- a/themes/game/index.js
+++ b/themes/game/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import Comment from '@/components/Comment'
-import { Draggable } from '@/components/Draggable'
 import { AdSlot } from '@/components/GoogleAdsense'
 import replaceSearchResult from '@/components/Mark'
 import NotionPage from '@/components/NotionPage'
@@ -17,9 +16,8 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
 import BlogPostBar from './components/BlogPostBar'
-import DownloadButton from './components/DownloadButton'
 import { Footer } from './components/Footer'
-import FullScreenButton from './components/FullScreenButton'
+import GameEmbed from './components/GameEmbed'
 import { GameListIndexCombine } from './components/GameListIndexCombine'
 import { GameListRelate } from './components/GameListRealate'
 import { GameListRecent } from './components/GameListRecent'
@@ -277,61 +275,12 @@ const LayoutArchive = props => {
 const LayoutSlug = props => {
   const { post, siteInfo, allNavPages, recommendPosts, lock, validPassword } =
     props
-  const game = deepClone(post)
-  const [loading, setLoading] = useState(true)
-  const url = game?.ext?.href
+
   const relateGames = recommendPosts
   const randomGames = shuffleArray(deepClone(allNavPages))
 
   // 初始化可安装应用
-  initialPWA(game, siteInfo)
-
-  // 将当前游戏加入到最近游玩
-  useEffect(() => {
-    // 更新最新游戏
-    const recentGames = localStorage.getItem('recent_games')
-      ? JSON.parse(localStorage.getItem('recent_games'))
-      : []
-
-    const existedIndex = recentGames.findIndex(item => item?.id === game?.id)
-    if (existedIndex === -1) {
-      recentGames.unshift(game) // 将游戏插入到数组头部
-    } else {
-      // 如果游戏已存在于数组中，将其移至数组头部
-      const existingGame = recentGames.splice(existedIndex, 1)[0]
-      recentGames.unshift(existingGame)
-    }
-    localStorage.setItem('recent_games', JSON.stringify(recentGames))
-
-    const iframe = document.getElementById('game-wrapper')
-
-    // 定义一个函数来处理iframe加载成功事件
-    function iframeLoaded() {
-      if (game) {
-        setLoading(false)
-      }
-    }
-
-    // 绑定加载事件
-    if (iframe?.attachEvent) {
-      iframe?.attachEvent('onload', iframeLoaded)
-    } else {
-      if (iframe) iframe.onload = iframeLoaded
-    }
-
-    // 更改iFrame的title
-    if (
-      document
-        ?.getElementById('game-wrapper')
-        ?.contentDocument.querySelector('title')?.textContent
-    ) {
-      document
-        .getElementById('game-wrapper')
-        .contentDocument.querySelector('title').textContent = `${
-        game?.title || ''
-      } - Play ${game?.title || ''} on ${siteConfig('TITLE')}`
-    }
-  }, [game])
+  initialPWA(post, siteInfo)
 
   return (
     <>
@@ -339,89 +288,28 @@ const LayoutSlug = props => {
 
       {!lock && (
         <div id='article-wrapper' className='md:px-2'>
-          {/* 游戏区域 */}
           <div className='game-detail-wrapper w-full grow flex md:px-2'>
-            {/* 移动端返回主页按钮 */}
-            <Draggable stick='left'>
-              <div
-                style={{ left: '0px', top: '1rem' }}
-                className='fixed xl:hidden group space-x-1 flex items-center z-20 pr-3 pl-1 bg-[#202030] rounded-r-2xl  shadow-lg '>
-                <Link
-                  href='/'
-                  className='px-1 py-3 hover:scale-125 duration-200 transition-all'
-                  passHref>
-                  <i className='fas fa-arrow-left' />
-                </Link>{' '}
-                <span
-                  className='text-white font-serif'
-                  onClick={() => {
-                    document.querySelector('.game-info').scrollIntoView({
-                      behavior: 'smooth',
-                      block: 'end',
-                      inline: 'nearest'
-                    })
-                  }}>
-                  G
-                </span>
-              </div>
-            </Draggable>
-
             <div className={`w-full py-1 md:py-4 `}>
-              {/* 游戏区  */}
-              <div
-                className={`${url ? '' : 'hidden'} bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative`}>
-                {/* Loading遮罩 */}
-                {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 items-center'>
-                        <i className='fas fa-spinner animate-spin'></i>
-                        {siteInfo?.title || siteConfig('TITLE')}
-                      </h2>
-                      <h3 className='text-xl text-white'>
-                        {siteInfo?.description || siteConfig('DESCRIPTION')}
-                      </h3>
-                    </div>
+              {/* 游戏窗口 */}
+              <GameEmbed post={post} siteInfo={siteInfo} />
 
-                    {/* 游戏封面图 */}
-                    {game?.pageCoverThumbnail && (
-                      <img
-                        src={game?.pageCoverThumbnail}
-                        className='w-full h-full object-cover blur-md absolute top-0 left-0 z-0'
-                      />
-                    )}
-                  </div>
-                )}
-
-                <iframe
-                  id='game-wrapper'
-                  src={url}
-                  className={`relative w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden`}
-                />
-
-                {/* 游戏窗口装饰器 */}
-                {game && !loading && (
-                  <div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center z-10 md:absolute'>
-                    <DownloadButton />
-                    <FullScreenButton />
-                  </div>
-                )}
-              </div>
-
-              {/* 游戏资讯 */}
+              {/* 资讯 */}
               <div className='game-info dark:text-white py-4 px-2 md:px-0 mt-14 md:mt-0'>
                 {/* 关联游戏 */}
                 <div className='w-full'>
                   <GameListRelate posts={relateGames} />
                 </div>
 
-                {game && (
+                {/* 详情描述 */}
+                {post && (
                   <div className='bg-white shadow-md my-2 p-2 rounded-md dark:bg-black'>
                     <PostInfo post={post} />
                     <NotionPage post={post} />
                     {/* 广告嵌入 */}
                     <AdSlot />
+                    {/* 分享栏目 */}
                     <ShareBar post={post} />
+                    {/* 评论区 */}
                     <Comment frontMatter={post} />
                   </div>
                 )}