init game theme

2026-06-05 23:16:52 +00:00 · 2024-03-18 18:57:49 +08:00
parent fc3e60e94c
commit ff77d30cae
41 changed files with 2366 additions and 0 deletions
--- a/themes/game/components/GameListRealate.js
+++ b/themes/game/components/GameListRealate.js
@@ -0,0 +1,76 @@
+/* eslint-disable @next/next/no-img-element */
+import { deepClone } from '@/lib/utils'
+import { useState } from 'react'
+
+/**
+ * 游戏列表- 关联游戏，在详情页展示
+ * @returns
+ */
+export const GameListRelate = ({ games }) => {
+  const gamesClone = deepClone(games)
+
+  // 构造一个List<Component>
+  const components = []
+  const maxCount = 24
+
+  let index = 0
+  // 无限循环
+  while (gamesClone?.length > 0 && index < maxCount) {
+    const item = gamesClone.shift()
+    components.push(<GameItem key={index} item={item} isLargeCard={true} />)
+    index++
+    continue
+  }
+
+  return (
+    <div className='game-list-wrapper w-full max-w-full overflow-x-auto'>
+      <div className='game-grid grid grid-flow-col gap-2'>
+        {components?.map((ItemComponent, index) => {
+          return ItemComponent
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 游戏=单卡
+ * @param {*} param0
+ * @returns
+ */
+const GameItem = ({ item, isLargeCard }) => {
+  const { id, title, img, video } = item
+  const [showType, setShowType] = useState('img') // img or video
+
+  return (
+    <a
+      href={`/game/${id}`}
+      onMouseOver={() => {
+        setShowType('video')
+      }}
+      onMouseOut={() => {
+        setShowType('img')
+      }}
+      title={title}
+      className={`card-single w-24 h-24 relative shadow rounded-md overflow-hidden flex justify-center items-center 
+                group   hover:border-purple-400`}>
+      <div className='text-sm text-center absolute bottom-0 invisible group-hover:bottom-2 group-hover:visible transition-all duration-200 text-white z-30'>
+        {title}
+      </div>
+      <div className='h-1/2 w-full absolute left-0 bottom-0 z-20 opacity-0 group-hover:opacity-75 transition-all duration-200'>
+        <div className='h-full w-full absolute bg-gradient-to-b from-transparent to-black'></div>
+      </div>
+
+      {showType === 'video' && (
+        <video className={`z-10 object-cover w-full h-24 absolute overflow-hidden`} loop='true' autoPlay preload='none'>
+          <source src={video} type='video/mp4' />
+        </video>
+      )}
+      <img
+        className='w-24 h-24 absolute object-cover group-hover:scale-105 duration-100 transition-all'
+        src={img}
+        alt={title}
+      />
+    </a>
+  )
+}