Spaces:

Smusl
/

anycoder-30fce9d5

Runtime error

App Files Files Community

Smusl commited on 10 days ago

Commit

b742fd9

verified ·

1 Parent(s): 0276fa8

Upload pages/index.js with huggingface_hub

Browse files

Files changed (1) hide show

pages/index.js +218 -0

pages/index.js ADDED Viewed

	@@ -0,0 +1,218 @@

+import { useState, useEffect } from 'react'
+import Head from 'next/head'
+export default function Home() {
+  const [players, setPlayers] = useState([
+    { id: 1, name: 'Player1', x: 100, y: 200, hasStick: true },
+    { id: 2, name: 'Player2', x: 400, y: 200, hasStick: false },
+    { id: 3, name: 'Player3', x: 250, y: 350, hasStick: false }
+  ])
+  const [selectedPlayer, setSelectedPlayer] = useState(null)
+  const [messages, setMessages] = useState([])
+  const [gameStarted, setGameStarted] = useState(false)
+  const handlePlayerClick = (clickedPlayer) => {
+    if (!selectedPlayer || !gameStarted) return
+    if (selectedPlayer.id === clickedPlayer.id) {
+      setSelectedPlayer(null)
+      return
+    }
+    if (selectedPlayer.hasStick) {
+      const distance = Math.sqrt(
+        Math.pow(clickedPlayer.x - selectedPlayer.x, 2) +
+        Math.pow(clickedPlayer.y - selectedPlayer.y, 2)
+      )
+      if (distance <= 150) {
+        const newMessage = {
+          id: Date.now(),
+          from: selectedPlayer.name,
+          to: clickedPlayer.name,
+          text: `Вы ударили палкой игрока ${clickedPlayer.name}`
+        }
+        setMessages(prev => [newMessage, ...prev].slice(0, 5))
+        setPlayers(prev => prev.map(p =>
+          p.id === selectedPlayer.id ? { ...p, hasStick: false } :
+          p.id === clickedPlayer.id ? { ...p, hasStick: true } : p
+        ))
+      }
+    }
+    setSelectedPlayer(null)
+  }
+  const movePlayer = (playerId, newX, newY) => {
+    setPlayers(prev => prev.map(p =>
+      p.id === playerId ? { ...p, x: newX, y: newY } : p
+    ))
+  }
+  const handleKeyPress = (e) => {
+    if (!selectedPlayer || !gameStarted) return
+    const step = 20
+    let newX = selectedPlayer.x
+    let newY = selectedPlayer.y
+    switch(e.key) {
+      case 'ArrowUp':
+      case 'w':
+        newY = Math.max(50, newY - step)
+        break
+      case 'ArrowDown':
+      case 's':
+        newY = Math.min(450, newY + step)
+        break
+      case 'ArrowLeft':
+      case 'a':
+        newX = Math.max(50, newX - step)
+        break
+      case 'ArrowRight':
+      case 'd':
+        newX = Math.min(550, newX + step)
+        break
+    }
+    movePlayer(selectedPlayer.id, newX, newY)
+    setSelectedPlayer(prev => ({ ...prev, x: newX, y: newY }))
+  }
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyPress)
+    return () => window.removeEventListener('keydown', handleKeyPress)
+  }, [selectedPlayer, gameStarted])
+  return (
+    <>
+      <Head>
+        <title>Stick Battle Game</title>
+        <meta name="description" content="Hit players with sticks!" />
+      </Head>
+      <div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 p-4">
+        <div className="max-w-6xl mx-auto">
+          <header className="bg-white rounded-lg shadow-md p-4 mb-6">
+            <div className="flex justify-between items-center">
+              <h1 className="text-2xl font-bold text-gray-800">Stick Battle Game</h1>
+              <a
+                href="https://huggingface.co/spaces/akhaliq/anycoder"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:text-blue-800 underline"
+              >
+                Built with anycoder
+              </a>
+            </div>
+          </header>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <div className="bg-white rounded-lg shadow-md p-6">
+                <div className="mb-4 flex justify-between items-center">
+                  <h2 className="text-xl font-semibold text-gray-700">Game Arena</h2>
+                  <button
+                    onClick={() => setGameStarted(!gameStarted)}
+                    className={`px-4 py-2 rounded font-medium transition-colors ${
+                      gameStarted
+                        ? 'bg-red-500 hover:bg-red-600 text-white'
+                        : 'bg-green-500 hover:bg-green-600 text-white'
+                    }`}
+                  >
+                    {gameStarted ? 'Stop Game' : 'Start Game'}
+                  </button>
+                </div>
+                <div className="relative bg-gradient-to-b from-green-100 to-green-200 rounded-lg h-96 border-4 border-green-400 overflow-hidden">
+                  {gameStarted && (
+                    <>
+                      {players.map(player => (
+                        <div
+                          key={player.id}
+                          onClick={() => handlePlayerClick(player)}
+                          className={`absolute cursor-pointer transition-all duration-200 transform hover:scale-110 ${
+                            selectedPlayer?.id === player.id ? 'ring-4 ring-blue-400' : ''
+                          }`}
+                          style={{ left: `${player.x}px`, top: `${player.y}px` }}
+                        >
+                          <div className="relative">
+                            <div className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-bold shadow-lg ${
+                              selectedPlayer?.id === player.id ? 'bg-blue-600' : 'bg-purple-600'
+                            }`}>
+                              {player.name[0]}
+                            </div>
+                            {player.hasStick && (
+                              <div className="absolute -right-6 top-4 text-2xl transform rotate-45">
+                                🏏
+                              </div>
+                            )}
+                            <div className="text-xs text-center mt-1 font-semibold text-gray-700">
+                              {player.name}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </>
+                  )}
+                  {!gameStarted && (
+                    <div className="flex items-center justify-center h-full">
+                      <p className="text-gray-600 text-lg">Click "Start Game" to begin!</p>
+                    </div>
+                  )}
+                </div>
+                {gameStarted && (
+                  <div className="mt-4 p-3 bg-blue-50 rounded border border-blue-200">
+                    <p className="text-sm text-blue-700">
+                      <strong>How to play:</strong> Click a player to select, use arrow keys or WASD to move.
+                      Hit other players when you have the stick (🏏)!
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="lg:col-span-1">
+              <div className="bg-white rounded-lg shadow-md p-6">
+                <h2 className="text-xl font-semibold text-gray-700 mb-4">Battle Log</h2>
+                <div className="space-y-2 max-h-96 overflow-y-auto">
+                  {messages.length === 0 ? (
+                    <p className="text-gray-500 text-sm italic">No hits yet...</p>
+                  ) : (
+                    messages.map(msg => (
+                      <div key={msg.id} className="p-3 bg-gray-50 rounded border-l-4 border-red-400">
+                        <p className="text-sm font-medium text-gray-700">{msg.from}</p>
+                        <p className="text-xs text-gray-600 mt-1">{msg.text}</p>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 mt-6">
+                <h2 className="text-xl font-semibold text-gray-700 mb-4">Players</h2>
+                <div className="space-y-2">
+                  {players.map(player => (
+                    <div key={player.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                      <div className="flex items-center space-x-2">
+                        <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                          {player.name[0]}
+                        </div>
+                        <span className="text-sm font-medium text-gray-700">{player.name}</span>
+                      </div>
+                      {player.hasStick && (
+                        <span className="text-xl">🏏</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}