115 lines
5.3 KiB
TypeScript
115 lines
5.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useGame } from '../hooks/GameContext';
|
|
import WebApp from '@twa-dev/sdk';
|
|
|
|
const StartScreen: React.FC = () => {
|
|
const { createRoom, joinRoom } = useGame();
|
|
const [name, setName] = useState('');
|
|
const [roomId, setRoomId] = useState('');
|
|
const [activeTab, setActiveTab] = useState<'create' | 'join'>('create');
|
|
|
|
useEffect(() => {
|
|
// Auto-fill name from Telegram if available
|
|
if (WebApp.initDataUnsafe?.user?.first_name) {
|
|
setName(WebApp.initDataUnsafe.user.first_name);
|
|
}
|
|
}, []);
|
|
|
|
const handleCreate = () => {
|
|
console.log("Create button clicked. Name:", name);
|
|
if (!name) {
|
|
console.warn("Name is empty, aborting creation.");
|
|
return;
|
|
}
|
|
createRoom(name, WebApp.initDataUnsafe?.user?.id?.toString());
|
|
};
|
|
|
|
const handleJoin = () => {
|
|
if (!name || !roomId) return;
|
|
joinRoom(roomId, name, WebApp.initDataUnsafe?.user?.id?.toString());
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-screen p-4 space-y-8">
|
|
<h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
|
|
Alias
|
|
</h1>
|
|
|
|
<div className="w-full max-w-sm bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 shadow-xl border border-gray-700">
|
|
<div className="flex space-x-2 mb-6 bg-gray-900/50 p-1 rounded-lg">
|
|
<button
|
|
onClick={() => setActiveTab('create')}
|
|
className={`flex-1 py-2 rounded-md text-sm font-medium transition-all ${
|
|
activeTab === 'create' ? 'bg-blue-600 text-white shadow-lg' : 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Создать
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('join')}
|
|
className={`flex-1 py-2 rounded-md text-sm font-medium transition-all ${
|
|
activeTab === 'join' ? 'bg-blue-600 text-white shadow-lg' : 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Войти
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-400 mb-1 ml-1">Твое имя</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Введите имя..."
|
|
className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all text-white placeholder-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
{activeTab === 'join' && (
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-400 mb-1 ml-1">Номер комнаты</label>
|
|
<input
|
|
type="number"
|
|
value={roomId}
|
|
onChange={(e) => setRoomId(e.target.value)}
|
|
placeholder="1234"
|
|
className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all text-white placeholder-gray-600 font-mono tracking-widest text-center text-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={activeTab === 'create' ? handleCreate : handleJoin}
|
|
className="w-full py-3 mt-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white font-bold rounded-xl shadow-lg transform transition-all active:scale-95"
|
|
>
|
|
{activeTab === 'create' ? 'Создать комнату' : 'Присоединиться'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
const response = await fetch('/api/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: "Hello from frontend test" })
|
|
});
|
|
const data = await response.text();
|
|
console.log("API Test Response:", data);
|
|
} catch (error) {
|
|
console.error("API Test Error:", error);
|
|
}
|
|
}}
|
|
className="w-full max-w-sm mt-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-bold rounded-xl shadow-lg transform transition-all active:scale-95"
|
|
>
|
|
Test API
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StartScreen;
|