Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 10x 10x 10x 10x 10x 2x 2x 2x 2x 10x 10x 1x 10x 1x 1x 1x 1x 1x 10x 1x 1x 1x 1x 1x 3x 1x 1x 1x 1x 2x 2x 2x 2x 1x 10x 1x 1x 1x | import React, { useContext, useState } from 'react';
import './Lobby.css';
import { useWebSocket, WebSocketContext } from '../../WebSocketContext';
import {playPopSound} from "../SoundEffects/playPopSound";
function Lobby({ lobbyCode }) {
const [playing, setPlaying] = useState(false);
const [copied, setCopied] = useState(false);
const [playerCount, setPlayerCount] = useState(1);
const { send } = useContext(WebSocketContext);
const handleMessage = (message) => {
Iif (!message) return;
const data = message.data;
Eif (data &&
data.type === "lobby_lifecycle" &&
data.lifecycle_type === "player_count") {
setPlayerCount(data.count);
}
};
useWebSocket(handleMessage);
const sendStartGame = () => {
send({
data: {
type: "lobby_lifecycle",
lifecycle_type: "game_start",
}
});
};
const copyCode = () => {
const URL = window.location.protocol + "//" + window.location.hostname + "/" + encodeURIComponent(lobbyCode);
navigator.clipboard.writeText(URL);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
}
const playAll = () => {
Iif (playing) return;
Iif (!lobbyCode) return;
const names = lobbyCode.split('-');
Iif (names.length !== 3) return;
const paths = names.map(n =>
`/audio/${n.toLowerCase().replace(' ', '_')}.mp3`
);
let idx = 0;
const audio = new Audio(paths[0]);
setPlaying(true);
audio.addEventListener('ended', () => {
idx += 1;
if (idx < paths.length) {
audio.src = paths[idx];
audio.play().catch(() => { });
} else E{
setPlaying(false);
}
});
audio.play().catch(() => setPlaying(false));
};
return (
<div className="lobby-content">
<div className="player-status">
<h3>Players in Lobby: {Math.min(playerCount, 4)} / 4</h3>
{playerCount < 2 && <h4>Waiting for more players to join...</h4>}
{(playerCount == 2 || playerCount == 3) && <h4>You have company! Wait for more players or start game now!</h4>}
{playerCount >= 4 && <h4>Max players have joined!</h4>}
</div>
<div className="lobby-actions">
<button
className="start-button"
onClick={() => {sendStartGame(); playPopSound()}}
disabled={playerCount < 2}
>
Start Game
</button>
<button
className="play-all-btn"
onClick={() => {playAll(); playPopSound()}}
disabled={playing || !lobbyCode || lobbyCode.split('-').length !== 3} >
{playing ? '🗣️' : '🔊'}
</button>
<button
className="copy-link-btn"
onClick={() => {copyCode(); playPopSound()}}>
{copied ? '✅' : '🔗'}
</button>
</div>
</div >
);
}
export default Lobby;
|