skull-game.tsx

"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skull, Zap, Snowflake, Bomb, Clock, Heart, Play, Pause, RotateCcw } from "lucide-react"

interface GameCell {
  id: number
  type: "empty" | "skull" | "freeze" | "destroy" | "time" | "penalty"
  fuseTime: number
  maxFuseTime: number
  isExploding: boolean
}

interface GameState {
  score: number
  lives: number
  level: number
  speed: number
  isPlaying: boolean
  isPaused: boolean
  gameOver: boolean
}

const INITIAL_GAME_STATE: GameState = {
  score: 0,
  lives: 3,
  level: 1,
  speed: 1,
  isPlaying: false,
  isPaused: false,
  gameOver: false,
}

const CELL_TYPES = {
  skull: { weight: 70, points: 10, color: "text-red-500" },
  freeze: { weight: 8, points: 50, color: "text-blue-500" },
  destroy: { weight: 8, points: 100, color: "text-yellow-500" },
  time: { weight: 10, points: 25, color: "text-green-500" },
  penalty: { weight: 4, points: -50, color: "text-purple-500" },
}

export default function SkullGame() {
  const [gameState, setGameState] = useState<GameState>(INITIAL_GAME_STATE)
  const [cells, setCells] = useState<GameCell[]>(() =>
    Array.from({ length: 12 }, (_, i) => ({
      id: i,
      type: "empty",
      fuseTime: 0,
      maxFuseTime: 3000,
      isExploding: false,
    })),
  )
  const [effects, setEffects] = useState<{ [key: number]: string }>({})
  const gameLoopRef = useRef<NodeJS.Timeout>()
  const spawnTimerRef = useRef<NodeJS.Timeout>()

  const getRandomCellType = useCallback(() => {
    const rand = Math.random() * 100
    let cumulative = 0

    for (const [type, config] of Object.entries(CELL_TYPES)) {
      cumulative += config.weight
      if (rand <= cumulative) {
        return type as keyof typeof CELL_TYPES
      }
    }
    return "skull"
  }, [])

  const spawnItem = useCallback(() => {
    if (!gameState.isPlaying || gameState.isPaused) return

    setCells((prevCells) => {
      const emptyCells = prevCells.filter((cell) => cell.type === "empty")
      if (emptyCells.length === 0) return prevCells

      const activeCells = prevCells.filter((cell) => cell.type !== "empty").length
      const maxActive = Math.min(3 + Math.floor(gameState.level / 2), 5)

      if (activeCells >= maxActive) return prevCells

      const randomEmptyCell = emptyCells[Math.floor(Math.random() * emptyCells.length)]
      const cellType = getRandomCellType()
      const baseFuseTime = 3000 - gameState.level * 200
      const fuseTime = Math.max(1000, baseFuseTime)

      return prevCells.map((cell) =>
        cell.id === randomEmptyCell.id
          ? {
              ...cell,
              type: cellType,
              fuseTime: fuseTime,
              maxFuseTime: fuseTime,
              isExploding: false,
            }
          : cell,
      )
    })
  }, [gameState.isPlaying, gameState.isPaused, gameState.level, getRandomCellType])

  const updateFuses = useCallback(() => {
    if (!gameState.isPlaying || gameState.isPaused) return

    setCells((prevCells) => {
      return prevCells.map((cell) => {
        if (cell.type === "empty" || cell.isExploding) return cell

        const newFuseTime = cell.fuseTime - 50

        if (newFuseTime <= 0) {
          // Explode
          if (cell.type === "skull" || cell.type === "penalty") {
            setGameState((prev) => ({ ...prev, lives: prev.lives - 1 }))
          }

          setEffects((prev) => ({ ...prev, [cell.id]: "explosion" }))
          setTimeout(() => {
            setEffects((prev) => {
              const newEffects = { ...prev }
              delete newEffects[cell.id]
              return newEffects
            })
          }, 500)

          return {
            ...cell,
            type: "empty",
            fuseTime: 0,
            isExploding: false,
          }
        }

        return { ...cell, fuseTime: newFuseTime }
      })
    })
  }, [gameState.isPlaying, gameState.isPaused])

  const handleCellClick = useCallback(
    (cellId: number) => {
      if (!gameState.isPlaying || gameState.isPaused) return

      setCells((prevCells) => {
        const cell = prevCells.find((c) => c.id === cellId)
        if (!cell || cell.type === "empty") return prevCells

        const cellConfig = CELL_TYPES[cell.type]
        const newGameState = { ...gameState }

        // Handle different cell types
        switch (cell.type) {
          case "skull":
            newGameState.score += cellConfig.points
            break
          case "freeze":
            newGameState.score += cellConfig.points
            // Freeze all fuses for 2 seconds
            setCells((cells) => cells.map((c) => ({ ...c, fuseTime: c.fuseTime + 2000 })))
            setEffects((prev) => ({ ...prev, [cellId]: "freeze" }))
            break
          case "destroy":
            newGameState.score += cellConfig.points
            // Destroy all skulls
            setCells((cells) => cells.map((c) => (c.type === "skull" ? { ...c, type: "empty", fuseTime: 0 } : c)))
            setEffects((prev) => ({ ...prev, [cellId]: "destroy" }))
            break
          case "time":
            newGameState.score += cellConfig.points
            // Add time to all fuses
            setCells((cells) => cells.map((c) => ({ ...c, fuseTime: c.fuseTime + 1000 })))
            setEffects((prev) => ({ ...prev, [cellId]: "time" }))
            break
          case "penalty":
            newGameState.score = Math.max(0, newGameState.score + cellConfig.points)
            newGameState.lives -= 1
            setEffects((prev) => ({ ...prev, [cellId]: "penalty" }))
            break
        }

        setGameState(newGameState)

        // Clear effect after animation
        setTimeout(() => {
          setEffects((prev) => {
            const newEffects = { ...prev }
            delete newEffects[cellId]
            return newEffects
          })
        }, 500)

        return prevCells.map((c) => (c.id === cellId ? { ...c, type: "empty", fuseTime: 0, isExploding: false } : c))
      })
    },
    [gameState],
  )

  const startGame = useCallback(() => {
    setGameState((prev) => ({ ...prev, isPlaying: true, gameOver: false, isPaused: false }))

    // Game loop for updating fuses
    gameLoopRef.current = setInterval(updateFuses, 50)

    // Spawn timer
    const spawnInterval = Math.max(500, 2000 - gameState.level * 100)
    spawnTimerRef.current = setInterval(spawnItem, spawnInterval)
  }, [updateFuses, spawnItem, gameState.level])

  const pauseGame = useCallback(() => {
    setGameState((prev) => ({ ...prev, isPaused: !prev.isPaused }))
  }, [])

  const resetGame = useCallback(() => {
    setGameState(INITIAL_GAME_STATE)
    setCells(
      Array.from({ length: 12 }, (_, i) => ({
        id: i,
        type: "empty",
        fuseTime: 0,
        maxFuseTime: 3000,
        isExploding: false,
      })),
    )
    setEffects({})

    if (gameLoopRef.current) clearInterval(gameLoopRef.current)
    if (spawnTimerRef.current) clearInterval(spawnTimerRef.current)
  }, [])

  // Level progression
  useEffect(() => {
    if (gameState.score > 0 && gameState.score % 500 === 0) {
      setGameState((prev) => ({
        ...prev,
        level: prev.level + 1,
        speed: Math.min(prev.speed + 0.2, 3),
      }))
    }
  }, [gameState.score])

  // Game over check
  useEffect(() => {
    if (gameState.lives <= 0 && gameState.isPlaying) {
      setGameState((prev) => ({ ...prev, gameOver: true, isPlaying: false }))
      if (gameLoopRef.current) clearInterval(gameLoopRef.current)
      if (spawnTimerRef.current) clearInterval(spawnTimerRef.current)
    }
  }, [gameState.lives, gameState.isPlaying])

  // Cleanup
  useEffect(() => {
    return () => {
      if (gameLoopRef.current) clearInterval(gameLoopRef.current)
      if (spawnTimerRef.current) clearInterval(spawnTimerRef.current)
    }
  }, [])

  const getCellIcon = (cell: GameCell) => {
    switch (cell.type) {
      case "skull":
        return <Skull className="w-8 h-8" />
      case "freeze":
        return <Snowflake className="w-8 h-8" />
      case "destroy":
        return <Bomb className="w-8 h-8" />
      case "time":
        return <Clock className="w-8 h-8" />
      case "penalty":
        return <Zap className="w-8 h-8" />
      default:
        return null
    }
  }

  const getCellColor = (cell: GameCell) => {
    if (cell.type === "empty") return ""
    return CELL_TYPES[cell.type]?.color || "text-gray-500"
  }

  const getFuseProgress = (cell: GameCell) => {
    if (cell.type === "empty") return 0
    return ((cell.maxFuseTime - cell.fuseTime) / cell.maxFuseTime) * 100
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-red-900 to-black p-4">
      <div className="max-w-md mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-4xl font-bold text-white mb-2 flex items-center justify-center gap-2">
            <Skull className="w-8 h-8 text-red-500" />
            Skull Rush
          </h1>
          <p className="text-gray-300 text-sm">Click the skulls before they explode!</p>
        </div>

        {/* Game Stats */}
        <div className="grid grid-cols-2 gap-4 mb-6">
          <Card className="bg-black/50 border-red-500/30">
            <CardContent className="p-3">
              <div className="text-center">
                <div className="text-2xl font-bold text-white">{gameState.score}</div>
                <div className="text-xs text-gray-400">SCORE</div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-black/50 border-red-500/30">
            <CardContent className="p-3">
              <div className="text-center">
                <div className="flex items-center justify-center gap-1">
                  {Array.from({ length: gameState.lives }).map((_, i) => (
                    <Heart key={i} className="w-4 h-4 text-red-500 fill-current" />
                  ))}
                </div>
                <div className="text-xs text-gray-400">LIVES</div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid grid-cols-2 gap-4 mb-6">
          <Badge variant="outline" className="justify-center py-2 border-yellow-500/50 text-yellow-400">
            Level {gameState.level}
          </Badge>
          <Badge variant="outline" className="justify-center py-2 border-blue-500/50 text-blue-400">
            Speed {gameState.speed.toFixed(1)}x
          </Badge>
        </div>

        {/* Game Grid */}
        <div className="grid grid-cols-3 gap-3 mb-6 aspect-square">
          {cells.map((cell) => (
            <Card
              key={cell.id}
              className={`relative bg-black/70 border-2 transition-all duration-200 cursor-pointer hover:scale-105 ${
                cell.type !== "empty" ? "border-red-500/50 bg-red-900/20" : "border-gray-700/50"
              } ${effects[cell.id] ? "animate-pulse" : ""}`}
              onClick={() => handleCellClick(cell.id)}
            >
              <CardContent className="p-0 h-full flex items-center justify-center relative overflow-hidden">
                {cell.type !== "empty" && (
                  <>
                    {/* Fuse Progress */}
                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
                      <div
                        className="h-full bg-gradient-to-r from-yellow-500 to-red-500 transition-all duration-75"
                        style={{ width: `${getFuseProgress(cell)}%` }}
                      />
                    </div>

                    {/* Icon */}
                    <div className={`${getCellColor(cell)} ${cell.fuseTime < 500 ? "animate-bounce" : ""}`}>
                      {getCellIcon(cell)}
                    </div>

                    {/* Effects */}
                    {effects[cell.id] === "explosion" && (
                      <div className="absolute inset-0 bg-red-500 animate-ping rounded" />
                    )}
                    {effects[cell.id] === "freeze" && (
                      <div className="absolute inset-0 bg-blue-500/30 animate-pulse rounded" />
                    )}
                    {effects[cell.id] === "destroy" && (
                      <div className="absolute inset-0 bg-yellow-500/30 animate-pulse rounded" />
                    )}
                    {effects[cell.id] === "time" && (
                      <div className="absolute inset-0 bg-green-500/30 animate-pulse rounded" />
                    )}
                    {effects[cell.id] === "penalty" && (
                      <div className="absolute inset-0 bg-purple-500/30 animate-pulse rounded" />
                    )}
                  </>
                )}
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Game Controls */}
        <div className="flex gap-3 justify-center">
          {!gameState.isPlaying && !gameState.gameOver && (
            <Button onClick={startGame} className="bg-green-600 hover:bg-green-700">
              <Play className="w-4 h-4 mr-2" />
              Start Game
            </Button>
          )}

          {gameState.isPlaying && (
            <Button onClick={pauseGame} variant="outline">
              <Pause className="w-4 h-4 mr-2" />
              {gameState.isPaused ? "Resume" : "Pause"}
            </Button>
          )}

          <Button onClick={resetGame} variant="outline">
            <RotateCcw className="w-4 h-4 mr-2" />
            Reset
          </Button>
        </div>

        {/* Game Over */}
        {gameState.gameOver && (
          <Card className="mt-6 bg-red-900/50 border-red-500">
            <CardContent className="p-6 text-center">
              <h2 className="text-2xl font-bold text-white mb-2">Game Over!</h2>
              <p className="text-gray-300 mb-4">Final Score: {gameState.score}</p>
              <p className="text-gray-300 mb-4">Level Reached: {gameState.level}</p>
              <Button onClick={resetGame} className="bg-red-600 hover:bg-red-700">
                Play Again
              </Button>
            </CardContent>
          </Card>
        )}

        {/* Instructions */}
        <Card className="mt-6 bg-black/30 border-gray-700/50">
          <CardContent className="p-4">
            <h3 className="text-white font-semibold mb-2">How to Play:</h3>
            <ul className="text-gray-300 text-sm space-y-1">
              <li>• Click skulls before they explode</li>
              <li>
                • <Snowflake className="w-3 h-3 inline text-blue-400" /> Freeze: Slows all fuses
              </li>
              <li>
                • <Bomb className="w-3 h-3 inline text-yellow-400" /> Destroy: Clears all skulls
              </li>
              <li>
                • <Clock className="w-3 h-3 inline text-green-400" /> Time: Adds fuse time
              </li>
              <li>
                • <Zap className="w-3 h-3 inline text-purple-400" /> Penalty: Avoid these!
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}