"use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Sparkles, Volume2, VolumeX, Play, Pause, RotateCcw } from "lucide-react" import { soundManager } from "@/lib/sound-effects" export default function TestPage() { const [soundEnabled, setSoundEnabled] = useState(true) const [animationPaused, setAnimationPaused] = useState(false) const [animationStatus, setAnimationStatus] = useState("檢查中...") useEffect(() => { // 檢查動畫是否正常運作 const checkAnimations = () => { const testElement = document.createElement("div") testElement.className = "animate-pulse" testElement.style.position = "absolute" testElement.style.top = "-1000px" document.body.appendChild(testElement) const computedStyle = window.getComputedStyle(testElement) const animationName = computedStyle.animationName document.body.removeChild(testElement) if (animationName && animationName !== "none") { setAnimationStatus("✅ 動畫系統正常") } else { setAnimationStatus("❌ 動畫系統異常") } } setTimeout(checkAnimations, 1000) }, []) useEffect(() => { // 初始化音效系統 const initSound = async () => { const handleFirstInteraction = async () => { await soundManager.play("hover") document.removeEventListener("click", handleFirstInteraction) } document.addEventListener("click", handleFirstInteraction) } initSound() }, []) const playSound = async (soundName: string) => { if (soundEnabled) { await soundManager.play(soundName) } } const toggleSound = () => { setSoundEnabled(!soundEnabled) soundManager.toggle() } const toggleAnimation = () => { setAnimationPaused(!animationPaused) const style = document.createElement("style") style.textContent = animationPaused ? "" : ` * { animation-play-state: paused !important; } ` style.id = "animation-control" const existing = document.getElementById("animation-control") if (existing) { existing.remove() } if (!animationPaused) { document.head.appendChild(style) } } return (
{/* 星空背景 */}
{[...Array(30)].map((_, i) => (
))}
{/* Header */}

音效動畫測試中心

隱藏頁面
{/* Main Content */}
{/* 音效測試區 */} 音效測試區

音效說明:

  • 點擊音效:溫柔的水滴聲,用於按鈕點擊
  • 懸停音效:輕柔的鈴聲,用於滑鼠懸停
  • 提交音效:和諧的三音和弦,用於表單提交
  • 成功音效:豐富的四音和弦,用於操作成功
{/* 動畫測試區 */} 動畫測試區 {/* 許願瓶動畫展示 - 使用內聯樣式確保動畫運作 */}

許願瓶呼吸動畫

{/* 星光粒子 - 使用內聯動畫 */}
{/* 呼吸光暈 */}
{/* 動畫說明 */}

動畫說明:

  • 瓶身呼吸:6秒週期的上下浮動 + 亮度變化
  • 內部發光:4秒週期的脈動效果
  • 光暈呼吸:6秒週期的透明度和縮放變化
  • 星光粒子:4種不同的飄散動畫
{/* 動畫狀態顯示 */}
動畫系統狀態: {animationStatus}
{/* 內聯 CSS 動畫定義 */}
{/* 星光粒子測試區 */} ✨ 星光粒子動畫測試

Float 飄浮

8秒週期上下飄動

Drift 漂移

10秒週期左右漂移

Twinkle 閃爍

5秒週期透明度變化

Gentle 溫柔

12秒週期旋轉飄動

{/* 測試控制區 */} 🎛️ 測試控制

測試說明:

  • • 這是隱藏的測試頁面,訪問路徑:/test
  • • 可以單獨測試每個音效和動畫效果
  • • 使用右上角的控制按鈕來開關音效和暫停動畫
  • • 所有效果都會在實際頁面中正常運作
) }