Add persistence of connection

This commit is contained in:
Lucien Astié 2024-08-09 18:35:57 +02:00
parent 012caef506
commit cbd500e13b
4 changed files with 126 additions and 9 deletions

View file

@ -19,6 +19,7 @@ export default function Home({ params }: roomProps) {
const [role, setRole] = useState("")
const [name, setName] = useState("")
const [avatar, setAvatar] = useState(defaultAvatarImage)
const [browserId, setBrowserId] = useState("")
const [gameStarted, setGameStarted] = useState(false)
const [gameEnded, setGameEnded] = useState(false)
@ -43,12 +44,15 @@ export default function Home({ params }: roomProps) {
setName(localName)
const localAvatar = localStorage.getItem('avatar')
setAvatar(localAvatar)
const localBrowserId = localStorage.getItem("browserId")
setBrowserId(localBrowserId)
// Listen for incoming setMessages
socketRef.current = io("ws://localhost:3000");
socketRef.current.on("connect", () => {
setIsConnected(true)
socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar})
socketRef.current.emit('room_connect', {id: id, name: localName, avatar: localAvatar, browserId: localBrowserId})
});
socketRef.current.on("new_player", (params) => {
@ -56,7 +60,7 @@ export default function Home({ params }: roomProps) {
})
socketRef.current.on("start_game", (params) => {
setQuestionNbr(oldQ => oldQ + 1)
setQuestionNbr(params.questionNbr)
setGameStarted(true)
setQuestionDisplayed(params.question)
setPossibleChoice(params.possibleChoice)

View file

@ -10,6 +10,7 @@ import Webcam from 'react-webcam'
export default function Home() {
const [name, setName] = useState("")
const [avatar, setAvatar] = useState(defaultAvatarImage)
const [browserId, setBrowserId] = useState("")
const [showWebcam, setShowWebcam] = useState(false)
const webcamRef = useRef()
const modal = useRef()
@ -27,6 +28,12 @@ export default function Home() {
})
}
function uuidv4() {
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
(+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
);
}
function takePictureAvatar() {
const imageSrc = webcamRef.current.getScreenshot()
setAndStoreAvatar(imageSrc)
@ -71,6 +78,7 @@ export default function Home() {
useEffect(() => {
let localName = localStorage.getItem("name")
let localAvatar = localStorage.getItem("avatar")
let localBrowserId = localStorage.getItem("browserId")
if(localName != null){
setName(localName)
} else {
@ -80,6 +88,14 @@ export default function Home() {
if(localAvatar != null) {
setAvatar(localAvatar)
}
if(localBrowserId != null) {
setBrowserId(localBrowserId)
} else {
let uuid = uuidv4()
setBrowserId(uuid)
localStorage.setItem("browserId", uuid)
}
}, [])
return (

View file

@ -7,6 +7,23 @@ const prenom = [
"Patrick",
"Agathe",
"Erneste",
"Gertrude",
"Eustache",
"Cunégonde",
"Barnabé",
"Arsène",
"Clotilde",
"Adélaïde",
"Rosalie",
"Firmin",
"Hortense",
"Gustave",
"Odile",
"Gontran",
"Léopoldine",
"Achille",
"Eugène",
"Gédéon",
]
const nom = [
@ -16,6 +33,25 @@ const nom = [
"Zigounette",
"Pissenlit",
"Détritus",
"Moufette",
"Panade",
"Boulet",
"Moustache",
"Tapage",
"Bidule",
"Patate",
"Clafoutis",
"Crouton",
"Bibelot",
"Pinceau",
"Chiffon",
"Trompette",
"Chipolata",
"Boussole",
"Touillette",
"Fanfreluche",
"Grenouille",
"Pamplemousse"
]
export function getUsername(){

View file

@ -11,6 +11,38 @@ const handler = app.getRequestHandler();
let active_rooms = {}
function findUserBySocketId(roomId, socketId){
let ans = null
active_rooms[roomId].users.forEach((player, index) => {
if(player.id == socketId){
ans = index
}
})
return ans
}
function findUserByBrowserId(roomId, browserId){
let ans = null
active_rooms[roomId].users.forEach((player, index) => {
if(player.browserId == browserId){
ans = index
}
})
return ans
}
function removeUnusedRoom(roomId){
let removeRoom = true
active_rooms[roomId].users.forEach((player) => {
if(player.connected == true){
removeRoom = false
}
})
if(removeRoom){
delete active_rooms[roomId]
}
}
app.prepare().then(() => {
const httpServer = createServer(handler);
@ -22,19 +54,31 @@ app.prepare().then(() => {
socket.on('room_connect', (params) => {
if(!Object.keys(active_rooms).includes(params.id)){
console.log("First person joined " + params.id + " ! " + params.name + " is owner.")
active_rooms[params.id] = [{id: socket.id, name: params.name, avatar: params.avatar, role: "owner", vote: ""}]
socket.emit("room_joined", {"room_users": active_rooms[params.id], "role": "owner"})
active_rooms[params.id] = { users: [{id: socket.id, name: params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "owner", vote: ""}]}
socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: "owner"})
} else {
socket.to(params.id).emit("new_player",{"id": socket.id, "name": params.name, avatar: params.avatar, role: "player"})
active_rooms[params.id].push({id: socket.id, name: params.name, avatar: params.avatar, role: "player", vote: ""})
socket.emit("room_joined", {"room_users": active_rooms[params.id], role: "player"})
let userIndexByBrowserId = findUserByBrowserId(params.id, params.browserId)
if(userIndexByBrowserId != null) {
active_rooms[params.id].users[userIndexByBrowserId].connected = true
active_rooms[params.id].users[userIndexByBrowserId].id = socket.id
socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: active_rooms[params.id].users[userIndexByBrowserId].role})
socket.emit("start_game",{possibleChoice: active_rooms[params.id].possibleChoice, question: active_rooms[params.id].question, questionNbr: active_rooms[params.id].questionNbr, duration: 15})
} else {
socket.to(params.id).emit("new_player",{"id": socket.id, "name": params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "player"})
active_rooms[params.id].users.push({id: socket.id, name: params.name, avatar: params.avatar, browserId: params.browserId, connected: true, role: "player", vote: ""})
socket.emit("room_joined", {"room_users": active_rooms[params.id].users, role: "player"})
console.log("New person joined " + params.id + " ! " + params.name + " is player.")
}
}
socket.join(params.id)
})
socket.on("start_game", (params) => {
socket.to(params.roomId).emit("start_game",{possibleChoice: params.possibleChoice, question: params.question, duration: params.duration})
active_rooms[params.roomId].question = params.question
active_rooms[params.roomId].questionNbr = 1
active_rooms[params.roomId].possibleChoice = params.possibleChoice
active_rooms[params.roomId].duration = params.duration
socket.to(params.roomId).emit("start_game",{possibleChoice: params.possibleChoice, question: params.question, questionNbr: 1, duration: params.duration})
})
socket.on("reset_game", (params) => {
@ -42,6 +86,10 @@ app.prepare().then(() => {
})
socket.on("next_question", (params) => {
active_rooms[params.roomId].question = params.question
active_rooms[params.roomId].questionNbr += 1
active_rooms[params.roomId].possibleChoice = params.possibleChoice
active_rooms[params.roomId].duration = params.duration
socket.to(params.roomId).emit("next_question",{possibleChoice: params.possibleChoice, question: params.question, duration: params.duration})
})
@ -49,6 +97,19 @@ app.prepare().then(() => {
console.log(params)
socket.to(params.roomId).emit("player_choice", {choice: params.choice, player: params.player})
})
socket.on("disconnecting", (reason) => {
for (const room of socket.rooms) {
if (room !== socket.id) {
let roomUserIndex = findUserBySocketId(room, socket.id)
if(roomUserIndex != null){
active_rooms[room].users[roomUserIndex].connected = false
socket.to(room).emit("player_disconnected")
removeUnusedRoom(room)
}
}
}
})
// ...
});