Kopie van https://gitlab.com/studieverenigingvia/ict/centurion met een paar aanpassingen
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
7.6 KiB
219 lines
7.6 KiB
import React, {MouseEvent, useState} from 'react';
|
|
import {Button, Card, Col, Divider, Form, Input, InputNumber, Row, Select} from "antd"
|
|
import {red} from '@ant-design/colors';
|
|
|
|
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) => {
|
|
// 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) {
|
|
connection.requestStart(seekTime * 1000);
|
|
}
|
|
|
|
function handleJoin(e: MouseEvent) {
|
|
connection.requestReady();
|
|
}
|
|
|
|
function applyRoomId(v: number) {
|
|
connection.requestJoin(v).then(v => {
|
|
setJoiningLobby(false);
|
|
setJoinLobbyError(!v);
|
|
})
|
|
setJoiningLobby(true)
|
|
}
|
|
|
|
function handleJoinRandomLobby() {
|
|
connection.requestJoinRandom()
|
|
setJoinLobbyError(false);
|
|
}
|
|
|
|
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 || ''))
|
|
}
|
|
|
|
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>
|
|
<Col className="centurion-title" span={24}>
|
|
<div className="beer-flipped">
|
|
<img src={beer} className={`beer ${isConnected ? 'connected' : 'connecting'}`} alt="beer"/>
|
|
</div>
|
|
<span className="text">Centurion!</span>
|
|
<img src={beer} className={`beer ${isConnected ? 'connected' : 'connecting'}`} alt="beer"/>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="hints" span={24}>
|
|
<div>Honderd minuten...</div>
|
|
<div>Honderd shots...</div>
|
|
<div>Kun jij het aan?</div>
|
|
</Col>
|
|
</Row>
|
|
<br/>
|
|
|
|
{!isConnected &&
|
|
<Row justify="center">
|
|
<Col className="lobby-connecting">
|
|
<h2>Verbinden...</h2>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
|
|
{isConnected &&
|
|
<Row justify="center">
|
|
<Col xs={24} sm={16} md={12} xl={10}>
|
|
<Card>
|
|
<h3>Huidige lobby: <b>{room?.id || 'Geen lobby'}</b></h3>
|
|
|
|
{/*<span>Verbonden met {connectionType}</span>*/}
|
|
|
|
{room &&
|
|
<span>
|
|
{userCount === 1 ?
|
|
<p>Er is één gebruiker aanwezig.</p>
|
|
:
|
|
<p>Er zijn {userCount} gebruikers aanwezig.</p>
|
|
}
|
|
</span>
|
|
}
|
|
{room &&
|
|
<span>Deel de link met je vrienden om mee te doen!</span>
|
|
}
|
|
<br/>
|
|
<br/>
|
|
|
|
{room && (isLeader ? leaderConfig : nonLeaderConfig)}
|
|
|
|
<Divider/>
|
|
|
|
<Row justify="center">
|
|
<Col>
|
|
<InputNumber
|
|
style={{'width': 'calc(100% - 150px)'}}
|
|
min={1}
|
|
max={100000}
|
|
value={selectedRoomId || room?.id || 0}
|
|
onChange={(v) => setSelectedRoomId(v || 0)}/>
|
|
|
|
<Button
|
|
style={{'width': '150px'}}
|
|
type="primary"
|
|
loading={joiningLobby}
|
|
onClick={() => {
|
|
applyRoomId(selectedRoomId)
|
|
}}>Verander van lobby</Button>
|
|
|
|
{joinLobbyError &&
|
|
<span style={{color: red[4]}}>Die lobby bestaat niet</span>
|
|
}
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row justify="center">
|
|
<span className={'lobby-options-or'}>of</span>
|
|
</Row>
|
|
|
|
<Row justify="center">
|
|
<Col>
|
|
<Button type="primary"
|
|
onClick={() => {
|
|
handleJoinRandomLobby()
|
|
}}>Join een willekeurige lobby</Button>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Lobby;
|
|
|