d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-20 07:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme-game 调整

Browse Source
This commit is contained in:
tangly1024
2024-04-05 22:06:52 +08:00
parent 522bbea0a1
commit 274f49d877
5 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
public/games-external/common/index.htm
View File

@@ -1,30 +1,29 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="robots" content="noindex, nofollow" />
<meta name="robots" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen iFrame</title> <title>Full Screen iFrame</title>
<style> <style>
html, html,
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
#myIframe { #myIframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
/* 可选：移除边框 */ /* 可选：移除边框 */
} }
</style> </style>
</head> </head>
<body> <body>
<!-- <div style="position: absolute; <!-- <div style="position: absolute;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
@@ -32,17 +31,18 @@
<button onclick="toggleFullScreen()">Toggle Full Screen</button> <button onclick="toggleFullScreen()">Toggle Full Screen</button>
</div> --> </div> -->
<iframe id="myIframe" allowfullscreen="allowfullscreen" allow="autoplay" scrolling="no"></iframe> <iframe
id="myIframe"
allowfullscreen="true"
allow="autoplay;fullscreen"
scrolling="auto"
></iframe>
<!-- https://letsplay247.github.io/cz.html?n=space-wars-battleground --> <!-- https://letsplay247.github.io/cz.html?n=space-wars-battleground -->
<script> <script>
var myParam = location.search.split('n=')[1] var myParam = location.search.split('n=')[1]
document.getElementById("myIframe").src = myParam; document.getElementById('myIframe').src = myParam
</script> </script>
<script src="/js/fullscreen.js" type="text/javascript"></script> <script src="/js/fullscreen.js" type="text/javascript"></script>
</body>
</body> </html>
</html>

74
themes/game/components/GameEmbed.js
View File

@@ -19,35 +19,57 @@ export default function GameEmbed({ post, siteInfo }) {
// 提示用户在新窗口打开 // 提示用户在新窗口打开
const [tipNewWindow, setTipNewWindow] = useState(newWindow) const [tipNewWindow, setTipNewWindow] = useState(newWindow)
const [url, setUrl] = useState(originUrl)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
/** /**
* 新窗口中打开 * 新窗口中打开游戏。
* 并且在回到此页面后后刷新iframe，尝试重新加载iframe
*/ */
const openInNewWindow = () => { const openInNewWindow = () => {
// 关闭提示框
setTipNewWindow(false) setTipNewWindow(false)
setTimeout(function () { // 添加监听器
setUrl('') document.addEventListener('visibilitychange', handleVisibilityChange)
setUrl(originUrl)
}, 10000) // 10000毫秒 = 10秒 // 定义监听器函数
function handleVisibilityChange() {
if (document.visibilityState === 'hidden') {
// console.log("用户切换到了其他标签页");
} else {
// console.log("用户回到了当前页面");
// 刷新网页
reloadIframe()
// 移除监听器
document.removeEventListener('visibilitychange', handleVisibilityChange)
}
}
}
/**
* 隐藏提示框
*/
const hiddenTips = () => {
setTipNewWindow(false)
}
function reloadIframe() {
var iframe = document.getElementById('game-wrapper')
iframe.contentWindow.location.reload()
}
// 定义一个函数来处理iframe加载成功事件
function iframeLoaded() {
if (game) {
setLoading(false)
}
} }
// 将当前游戏加入到最近游玩
useEffect(() => { useEffect(() => {
// 切换游戏时更新 // 是否弹窗提示新网页打开
setUrl(originUrl)
setTipNewWindow(newWindow) setTipNewWindow(newWindow)
const iframe = document.getElementById('game-wrapper') const iframe = document.getElementById('game-wrapper')
// 定义一个函数来处理iframe加载成功事件
function iframeLoaded() {
if (game) {
setLoading(false)
}
}
// 绑定加载事件 // 绑定加载事件
if (iframe?.attachEvent) { if (iframe?.attachEvent) {
iframe?.attachEvent('onload', iframeLoaded) iframe?.attachEvent('onload', iframeLoaded)
@@ -67,11 +89,11 @@ export default function GameEmbed({ post, siteInfo }) {
game?.title || '' game?.title || ''
} - Play ${game?.title || ''} on ${siteConfig('TITLE')}` } - Play ${game?.title || ''} on ${siteConfig('TITLE')}`
} }
}, [game]) }, [post])
return ( return (
<div <div
className={`${url ? '' : 'hidden'} bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative`}> className={`${originUrl ? '' : 'hidden'} bg-black w-full xl:h-[calc(100vh-8rem)] h-screen rounded-md relative`}>
{/* 移动端返回主页按钮 */} {/* 移动端返回主页按钮 */}
<Draggable stick='left'> <Draggable stick='left'>
<div <div
@@ -103,22 +125,18 @@ export default function GameEmbed({ post, siteInfo }) {
<div <div
id='open-tips' id='open-tips'
className={`animate__animated animate__fadeIn bottom-8 right-4 absolute z-20 flex items-end justify-end`}> className={`animate__animated animate__fadeIn bottom-8 right-4 absolute z-20 flex items-end justify-end`}>
<div className='relative w-80 h-auto bg-white rounded-lg p-2'> <div className='relative w-96 h-auto bg-white rounded-lg p-2'>
<div className='absolute right-2'> <div className='absolute right-2'>
<button <button className='text-xl p-2' onClick={hiddenTips}>
className='text-xl p-2'
onClick={() => {
setTipNewWindow(false)
}}>
<i className='fas fa-times'></i> <i className='fas fa-times'></i>
</button> </button>
</div> </div>
<div className='p-2'> <div className='p-2 text-lg'>
If the game fails to load, please try accessing the{' '} If the game fails to load, please try accessing the{' '}
<a <a
className='underline text-blue-500' className='underline text-blue-500'
rel='noReferrer' rel='noReferrer'
href={`${url?.replace('/games-external/common/index.htm?n=', '')}`} href={`${originUrl?.replace('/games-external/common/index.htm?n=', '')}`}
target='_blank' target='_blank'
onClick={openInNewWindow}> onClick={openInNewWindow}>
source webpage source webpage
@@ -153,12 +171,12 @@ export default function GameEmbed({ post, siteInfo }) {
)} )}
<iframe <iframe
id='game-wrapper' id='game-wrapper'
src={url} src={originUrl}
className={`relative w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden`} className={`relative w-full xl:h-[calc(100vh-8rem)] h-screen md:rounded-md overflow-hidden`}
/> />
{/* 游戏窗口装饰器 */} {/* 游戏窗口装饰器 */}
{url && !loading && ( {originUrl && !loading && (
<div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center z-10 md:absolute'> <div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center z-10 md:absolute'>
<DownloadButton /> <DownloadButton />
<FullScreenButton /> <FullScreenButton />

3
themes/game/components/Header.js
View File

@@ -5,7 +5,8 @@ import Logo from './Logo'
* 顶栏 * 顶栏
* @returns * @returns
*/ */
export default function Header({ siteInfo }) { export default function Header(props) {
const { siteInfo } = props
const { setSideBarVisible } = useGameGlobal() const { setSideBarVisible } = useGameGlobal()
return ( return (
<header className='z-20'> <header className='z-20'>

4
themes/game/components/SideBarContent.js
View File

@@ -9,7 +9,7 @@ import Logo from './Logo'
/** /**
* 侧拉抽屉的内容 * 侧拉抽屉的内容
*/ */
export default function SideBarContent({ allNavPages }) { export default function SideBarContent({ allNavPages, siteInfo }) {
const { sideBarVisible, setSideBarVisible, filterGames, setFilterGames } = const { sideBarVisible, setSideBarVisible, filterGames, setFilterGames } =
useGameGlobal() useGameGlobal()
const inputRef = useRef(null) // 创建对输入框的引用 const inputRef = useRef(null) // 创建对输入框的引用
@@ -50,7 +50,7 @@ export default function SideBarContent({ allNavPages }) {
return ( return (
<div className='px-3'> <div className='px-3'>
<div className='py-2 flex justify-between'> <div className='py-2 flex justify-between'>
<Logo /> <Logo siteInfo={siteInfo} />
<button <button
onClick={() => { onClick={() => {
setSideBarVisible(false) setSideBarVisible(false)

9
themes/game/index.js
View File

@@ -122,7 +122,7 @@ const LayoutBase = props => {
onClose={() => { onClose={() => {
setSideBarVisible(false) setSideBarVisible(false)
}}> }}>
<SideBarContent {...props} /> <SideBarContent siteInfo={siteInfo} {...props} />
</SideBarDrawer> </SideBarDrawer>
</div> </div>
</ThemeGlobalGame.Provider> </ThemeGlobalGame.Provider>
@@ -136,12 +136,13 @@ const LayoutBase = props => {
* @returns * @returns
*/ */
const LayoutIndex = props => { const LayoutIndex = props => {
const { tagOptions, currentTag, categoryOptions, currentCategory } = props const { tagOptions, currentTag, categoryOptions, currentCategory, siteInfo } =
props
return ( return (
<> <>
{/* 首页移动端顶部导航 */} {/* 首页移动端顶部导航 */}
<div className='p-2 xl:hidden'> <div className='p-2 xl:hidden'>
<Header /> <Header siteInfo={siteInfo} />
</div> </div>
{/* 最近游戏 */} {/* 最近游戏 */}
<GameListRecent /> <GameListRecent />
@@ -297,7 +298,7 @@ const LayoutSlug = props => {
recentGames.unshift(existingGame) recentGames.unshift(existingGame)
} }
localStorage.setItem('recent_games', JSON.stringify(recentGames)) localStorage.setItem('recent_games', JSON.stringify(recentGames))
}, []) }, [post])
return ( return (
<> <>