|
|
|
|
@ -1,33 +1,40 @@ |
|
|
|
|
import React, {MouseEvent, useState} from 'react'; |
|
|
|
|
import {Input, Button, Card, Col, InputNumber, Row, Space, Divider} from "antd" |
|
|
|
|
import { red } from '@ant-design/colors'; |
|
|
|
|
import {Button, Card, Col, Divider, Form, Input, InputNumber, Row, Select} from "antd" |
|
|
|
|
import {red} from '@ant-design/colors'; |
|
|
|
|
|
|
|
|
|
import connection, {useIsConnected, useRoom} from "../lib/Connection"; |
|
|
|
|
import connection, {useConfig, useIsConnected, useRoom} from "../lib/Connection"; |
|
|
|
|
|
|
|
|
|
import "../css/lobby.sass"; |
|
|
|
|
import beer from "../img/beer.png" |
|
|
|
|
import {RoomOptions} from "../types/types"; |
|
|
|
|
|
|
|
|
|
const {Option} = Select; |
|
|
|
|
|
|
|
|
|
const Lobby = (props: any) => { |
|
|
|
|
const [seekTime, setSeekTime] = useState(0); |
|
|
|
|
// Form/control states.
|
|
|
|
|
const [selectedRoomId, setSelectedRoomId] = useState(1); |
|
|
|
|
|
|
|
|
|
const [seekTime, setSeekTime] = useState(0); |
|
|
|
|
const [timelineName, setTimelineName] = useState(null); |
|
|
|
|
const [joiningLobby, setJoiningLobby] = useState(false); |
|
|
|
|
const [joinLobbyError, setJoinLobbyError] = useState(false); |
|
|
|
|
|
|
|
|
|
// Room and logic states.
|
|
|
|
|
const isConnected = useIsConnected(); |
|
|
|
|
const room = useRoom(); |
|
|
|
|
const config = useConfig(); |
|
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
const connectionType = connection.socket.io.engine.transport.name; |
|
|
|
|
|
|
|
|
|
let isLeader = room?.isLeader || false; |
|
|
|
|
let userCount = room?.userCount || 0; |
|
|
|
|
|
|
|
|
|
function handleRequestStartClicked(e: MouseEvent) { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
|
connection.requestStart(); |
|
|
|
|
connection.requestStart(seekTime * 1000); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function handleJoin(e: MouseEvent) { |
|
|
|
|
// connection.requestStart();
|
|
|
|
|
connection.requestReady(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function applyRoomId(v: number) { |
|
|
|
|
@ -38,44 +45,79 @@ const Lobby = (props: any) => { |
|
|
|
|
setJoiningLobby(true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function joinRandomLobby() { |
|
|
|
|
function handleJoinRandomLobby() { |
|
|
|
|
connection.requestJoinRandom() |
|
|
|
|
setJoinLobbyError(false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// const {socket} = useSocket("welcome", async (obj: any) => {
|
|
|
|
|
// if (lobbyQueryId) {
|
|
|
|
|
// // lobbyId is already defined, this means we have a queryparam set.
|
|
|
|
|
// await onChangeLobbyInput(lobbyQueryId);
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// console.log("Got welcome", lobbyQueryId);
|
|
|
|
|
//
|
|
|
|
|
// setLobbyId(obj.room.name);
|
|
|
|
|
// setIsLeader(socket.id === obj.room.leaderId);
|
|
|
|
|
// setUserCount(obj.room.users?.length || 0);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// const socketRef = useRef<SocketIOClient.Socket>(socket);
|
|
|
|
|
|
|
|
|
|
async function onChangeRoomInput(i: any) { |
|
|
|
|
// setLobbyId(i);
|
|
|
|
|
// const result: any = await emit(connection.socket, 'join_room', i);
|
|
|
|
|
// setIsLeader(connection.socket.id === result.room.leaderId);
|
|
|
|
|
// setUserCount(result.room.users?.length || 0);
|
|
|
|
|
// connection.requestJoin(i);
|
|
|
|
|
function handleTimelineNameSet(timelineName: any) { |
|
|
|
|
setTimelineName(timelineName); |
|
|
|
|
connection.setRoomOptions(new RoomOptions( |
|
|
|
|
seekTime || 0, |
|
|
|
|
timelineName || room?.timelineName || '')) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function handleSetSeekTime(seekTime: number) { |
|
|
|
|
setSeekTime(seekTime); |
|
|
|
|
connection.setRoomOptions(new RoomOptions( |
|
|
|
|
seekTime * 1000 || 0, |
|
|
|
|
timelineName || room?.timelineName || '')) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// async function wrapper() {
|
|
|
|
|
// const result: any = await emit(connection.current, 'room_info');
|
|
|
|
|
// setIsLeader(connection.current.id === result.room.leaderId);
|
|
|
|
|
// setUserCount(result.room.users?.length || 0);
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// wrapper();
|
|
|
|
|
// }, []);
|
|
|
|
|
let leaderConfig = ( |
|
|
|
|
<Row justify="center"> |
|
|
|
|
<Col> |
|
|
|
|
<Form |
|
|
|
|
layout='horizontal' |
|
|
|
|
labelCol={{span: 8}} |
|
|
|
|
wrapperCol={{span: 24}} |
|
|
|
|
> |
|
|
|
|
<Form.Item label="Starttijd"> |
|
|
|
|
<Input |
|
|
|
|
type="number" |
|
|
|
|
suffix="sec" |
|
|
|
|
value={seekTime} |
|
|
|
|
onChange={v => handleSetSeekTime(parseInt(v.target.value) || 0)}/> |
|
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
|
|
<Form.Item label="Nummer"> |
|
|
|
|
<Select defaultValue={(room && room.timelineName) || ''} |
|
|
|
|
onChange={e => handleTimelineNameSet(e)}> |
|
|
|
|
{config && config.availableTimelines.map((item, i) => |
|
|
|
|
<Option key={item} value={item}>{item}</Option> |
|
|
|
|
)} |
|
|
|
|
</Select> |
|
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
block |
|
|
|
|
type="primary" |
|
|
|
|
onClick={handleRequestStartClicked}>Start</Button> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
let nonLeaderConfig = ( |
|
|
|
|
<Row justify="center"> |
|
|
|
|
<Col> |
|
|
|
|
<p> |
|
|
|
|
We gaan luisteren naar <b>{room && room.timelineName}</b> en |
|
|
|
|
{room?.running && <span> zijn al gestart!</span>} |
|
|
|
|
{!room?.running && <span> starten op {room?.seekTime} seconden</span>} |
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
block |
|
|
|
|
type="primary" |
|
|
|
|
disabled={!room || room.readyToParticipate} |
|
|
|
|
onClick={handleJoin}>{room && room.readyToParticipate ? 'Wachten op het startsein' : 'Kom erbij'}</Button> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
return ( |
|
|
|
|
<div className="lobby"> |
|
|
|
|
<Row> |
|
|
|
|
@ -106,51 +148,28 @@ const Lobby = (props: any) => { |
|
|
|
|
|
|
|
|
|
{isConnected && |
|
|
|
|
<Row justify="center"> |
|
|
|
|
<Col xs={12} sm={10} md={10} xl={6}> |
|
|
|
|
<Col xs={24} sm={16} md={12} xl={10}> |
|
|
|
|
<Card> |
|
|
|
|
<h3>Huidige lobby: <b>{room?.id || 'Geen lobby'}</b></h3> |
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
{/*<span>Verbonden met {connectionType}</span>*/} |
|
|
|
|
|
|
|
|
|
{room && |
|
|
|
|
<span> |
|
|
|
|
{userCount === 1 ? |
|
|
|
|
<p>Er is één gebruiker aanwezig.</p> |
|
|
|
|
: |
|
|
|
|
<p>Er zijn {userCount} gebruikers aanwezig.</p> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<p>{isLeader ? 'Jij bent de baas van deze lobby.' : 'Wachten tot de baas de mix start.'}</p> |
|
|
|
|
|
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
{isLeader && |
|
|
|
|
<span>Start de mix op |
|
|
|
|
<Input |
|
|
|
|
type="number" |
|
|
|
|
min={0} |
|
|
|
|
max={60000} |
|
|
|
|
suffix="sec" |
|
|
|
|
value={seekTime} |
|
|
|
|
onChange={v => setSeekTime(parseInt(v.target.value) || 0)}/> |
|
|
|
|
</span> |
|
|
|
|
} |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
{isLeader ? |
|
|
|
|
<Button |
|
|
|
|
block |
|
|
|
|
type="primary" |
|
|
|
|
onClick={handleRequestStartClicked}>Start</Button> |
|
|
|
|
: |
|
|
|
|
<Button |
|
|
|
|
block |
|
|
|
|
type="primary" |
|
|
|
|
disabled={!room} |
|
|
|
|
onClick={handleJoin}>Join</Button> |
|
|
|
|
{room && |
|
|
|
|
<span>Deel de link met je vrienden om mee te doen!</span> |
|
|
|
|
} |
|
|
|
|
<br/> |
|
|
|
|
<br/> |
|
|
|
|
|
|
|
|
|
{room && (isLeader ? leaderConfig : nonLeaderConfig)} |
|
|
|
|
|
|
|
|
|
<Divider/> |
|
|
|
|
|
|
|
|
|
@ -185,7 +204,7 @@ const Lobby = (props: any) => { |
|
|
|
|
<Col> |
|
|
|
|
<Button type="primary" |
|
|
|
|
onClick={() => { |
|
|
|
|
joinRandomLobby() |
|
|
|
|
handleJoinRandomLobby() |
|
|
|
|
}}>Join een willekeurige lobby</Button> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
|
Florens Douwes
5 years ago