AI generation React
This commit is contained in:
@@ -0,0 +1,234 @@
|
||||
// components/Lobby.js
|
||||
import React, { useState } from 'react';
|
||||
import './Lobby.css';
|
||||
|
||||
const Lobby = ({
|
||||
onCreateRoom,
|
||||
onJoinRoom,
|
||||
players,
|
||||
roomCode,
|
||||
isHost,
|
||||
onStartGame,
|
||||
gameSettings,
|
||||
setGameSettings
|
||||
}) => {
|
||||
const [playerName, setPlayerName] = useState("");
|
||||
const [playerAvatar, setPlayerAvatar] = useState("👤");
|
||||
const [joinCode, setJoinCode] = useState("");
|
||||
const [showCreateForm, setShowCreateForm] = useState(true);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
const avatars = ["👤", "👨💻", "👩🎨", "👨🚀", "🦸♂️", "🦸♀️", "🐱", "🐶", "🦊", "🐼"];
|
||||
|
||||
const handleCreateSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (playerName.trim()) {
|
||||
onCreateRoom(playerName, playerAvatar);
|
||||
}
|
||||
};
|
||||
|
||||
const handleJoinSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (playerName.trim() && joinCode.trim()) {
|
||||
onJoinRoom(playerName, playerAvatar, joinCode);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lobby-container">
|
||||
<div className="lobby-card">
|
||||
<div className="lobby-header">
|
||||
<h1>🎮 Игровое лобби</h1>
|
||||
<p>Присоединяйтесь к викторине или создайте свою комнату</p>
|
||||
</div>
|
||||
|
||||
<div className="lobby-tabs">
|
||||
<button
|
||||
className={`tab ${showCreateForm ? 'active' : ''}`}
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
>
|
||||
Создать комнату
|
||||
</button>
|
||||
<button
|
||||
className={`tab ${!showCreateForm ? 'active' : ''}`}
|
||||
onClick={() => setShowCreateForm(false)}
|
||||
>
|
||||
Присоединиться
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCreateForm ? (
|
||||
<form onSubmit={handleCreateSubmit} className="lobby-form">
|
||||
<div className="form-group">
|
||||
<label>Ваше имя:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={playerName}
|
||||
onChange={(e) => setPlayerName(e.target.value)}
|
||||
placeholder="Введите ваше имя"
|
||||
maxLength="20"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Выберите аватар:</label>
|
||||
<div className="avatar-selection">
|
||||
{avatars.map(avatar => (
|
||||
<div
|
||||
key={avatar}
|
||||
className={`avatar-option ${playerAvatar === avatar ? 'selected' : ''}`}
|
||||
onClick={() => setPlayerAvatar(avatar)}
|
||||
>
|
||||
<span className="avatar-emoji">{avatar}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Настройки комнаты:</label>
|
||||
<button
|
||||
type="button"
|
||||
className="settings-button"
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
>
|
||||
⚙️ Настройки игры
|
||||
</button>
|
||||
|
||||
{showSettings && (
|
||||
<div className="game-settings">
|
||||
<div className="setting-item">
|
||||
<label>Время на вопрос (секунд):</label>
|
||||
<select
|
||||
value={gameSettings.timePerQuestion}
|
||||
onChange={(e) => setGameSettings({
|
||||
...gameSettings,
|
||||
timePerQuestion: parseInt(e.target.value)
|
||||
})}
|
||||
>
|
||||
<option value="15">15 секунд</option>
|
||||
<option value="30">30 секунд</option>
|
||||
<option value="45">45 секунд</option>
|
||||
<option value="60">60 секунд</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="setting-item">
|
||||
<label>Сложность:</label>
|
||||
<select
|
||||
value={gameSettings.difficulty}
|
||||
onChange={(e) => setGameSettings({
|
||||
...gameSettings,
|
||||
difficulty: e.target.value
|
||||
})}
|
||||
>
|
||||
<option value="easy">Легкая</option>
|
||||
<option value="medium">Средняя</option>
|
||||
<option value="hard">Сложная</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="setting-item">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={gameSettings.showCorrectAnswer}
|
||||
onChange={(e) => setGameSettings({
|
||||
...gameSettings,
|
||||
showCorrectAnswer: e.target.checked
|
||||
})}
|
||||
/>
|
||||
Показывать правильный ответ после вопроса
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button type="submit" className="create-button">
|
||||
Создать комнату 🚀
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleJoinSubmit} className="lobby-form">
|
||||
<div className="form-group">
|
||||
<label>Ваше имя:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={playerName}
|
||||
onChange={(e) => setPlayerName(e.target.value)}
|
||||
placeholder="Введите ваше имя"
|
||||
maxLength="20"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Выберите аватар:</label>
|
||||
<div className="avatar-selection">
|
||||
{avatars.map(avatar => (
|
||||
<div
|
||||
key={avatar}
|
||||
className={`avatar-option ${playerAvatar === avatar ? 'selected' : ''}`}
|
||||
onClick={() => setPlayerAvatar(avatar)}
|
||||
>
|
||||
<span className="avatar-emoji">{avatar}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Код комнаты:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
|
||||
placeholder="Введите код комнаты"
|
||||
maxLength="6"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="join-button">
|
||||
Присоединиться 🎮
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{roomCode && (
|
||||
<div className="room-info">
|
||||
<h3>Ваша комната:</h3>
|
||||
<div className="room-code">
|
||||
Код: <strong>{roomCode}</strong>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(roomCode)}
|
||||
className="copy-button"
|
||||
>
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
<div className="players-list">
|
||||
<h4>Игроки в комнате ({players.length}):</h4>
|
||||
{players.map(player => (
|
||||
<div key={player.id} className="lobby-player">
|
||||
<span className="player-avatar">{player.avatar}</span>
|
||||
<span className="player-name">{player.name}</span>
|
||||
{player.isHost && <span className="host-tag">Хост</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isHost && players.length > 0 && (
|
||||
<button onClick={onStartGame} className="start-game-btn">
|
||||
Начать игру 🎯
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lobby;
|
||||
Reference in New Issue
Block a user