Add persistence of connection
This commit is contained in:
parent
012caef506
commit
cbd500e13b
4 changed files with 126 additions and 9 deletions
|
@ -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)
|
||||
|
|
16
app/page.tsx
16
app/page.tsx
|
@ -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 (
|
||||
|
|
|
@ -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(){
|
||||
|
|
73
server.mjs
73
server.mjs
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// ...
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue