Client Events

Your client should listen to these events.

Connected

When this is emitted, we recommend saving the player's UID to handle the kick feature gracefully.

Automatically sent when a user connects using socket.connect().

socket.on('connected', data => {
 // Do stuff to set up the game, like hiding host only buttons
if(sessionStorage.getItem('uid') == uid) {
    if(!document.getElementsByClassName('hostOnly')) return
    for(const el of document.getElementsByClassName('hostOnly')){
    el.style.display = 'inline-block'
    }
}
sessionStorage.setItem('uid', data.user.uid)
})

Parameters

Name	Type	About
data	Object	Object with game and user info. See structure below.

{
        gameType: 'wyr/nhie/etc',
        gameId: 'ID',
        user: {
            name:'Display Name',
            picture: 'https://example.com/pfp.png',
            uid:'UID',
            host: true || false
        },
        host: 'HOST UID'
    }

Player Join

socket.on('player_join', data => { })

Parameters

Name	Type	About
data	Object	Object with player information.

{
  "name": "NAME",
  "photoURL": "PHOTO URL",
  "uid": "UID"
}

Player Leave

socket.on('player_leave', uid => { })

Parameters

Name	Type	About
uid	String	The UID of the disconnecting player.

Votes

Get the votes sent from get_votes

WYR/TOD/NHIE

    socket.on('votes', (data) => {
      document.getElementById('votes').innerHTML = ''
      if(data.length == 0) return document.getElementById('votes').innerHTML = `<p>No votes for this option</p>`
      data.forEach((vote) => {
        document.getElementById('votes').innerHTML += `<p>${vote.name}</p>`
      })
    })

MLT

Word Wreck

Parameters

Name	Type	About
votes	Array	The votes, which are object containing the user's name & their answer.

New Question

Get the new data from next

    socket.on('new_question', question => {
        document.getElementById('q').innerHTML = question
    })

Parameters

Name	Type	About
question	String or object	The modes with one question will return the card content as a string. The ones with more than one will return an object, where opt1 is the first option and opt2 is the second.

Error

Listen for errors.

socket.on('connect_error', error => {
    console.error('Socket connection error:', error);
});

socket.on('disconnect', reason => {
    console.log('Socket disconnected:', reason);
});

socket.on('error', error => {
// { error:"The error:", fatal:true|false }
// If fatal is true, exit the page
})

Receive a Chat Message

Receive a chat message on the client.

 socket.on("message", data => {
 // add the chat message to your chat
})

Parameters

Name	Type	About
data	Object	An object containing the message (content) and author. See the structure below.

{
  content: "message",
  author: "Player Name"
}

Players

Get an array of players from get_players

socket.on('players', data => {
// show your player list
})

Parameters

Name	Type	About
data	Array	See structure below.

{
  id:"uid",
  name:"User",
  vote:0
}

Kicking a User

socket.on('removed', (id) => {
if(id == /* get saved uid from start_data */) // change the page
}

Additional Word Wreck Events

Since Word Wreck has more components to it, it has a few extra events.

Vote

This will emit when everyone has submitted an answer to vote on.

Do not confuse this with votes for the other modes. Word Wreck involves 2 components to a round, with the 2nd being voting. This is for this 2nd round, not to get votes.

socket.on('vote', voteOptions => {
        voteOptions.forEach(element => {
            document.getElementById('votes').innerHTML += `<button style="margin-right:10px;margin-bottom:10px;" onclick="vote('${element.user}')">${element.a}</button>`   
        });
    })

Parameters

Name	Type	About
voteOptions	Array	The answers to vote for. See structure below.

[
  {
    a: "ANSWER",
    user: "USER UID"
  }
]

Winner

When everyone has voted, this event will emit with the winner.

    socket.on('winner', winner => {
        const winnerA = winner.a.split('//')
        document.getElementById('winner').innerHTML = `The winner is ${winner.name}. They said "${winnerA}"`
        document.getElementById('wdiv').style.display = 'block'
    })

Parameters

Name	Type	About
winner	Object	The name of the winner and their answer. See structure below.

{
  a: "ANSWER",
  name: "WINNER NAME"
}

New Host

If a new host is assigned, reflect that in your app.

socket.on('new_host', (uid) => {
if(sessionStorage.getItem('uid') == uid) {
if(!document.getElementsByClassName('hostOnly')) return
for(const el of document.getElementsByClassName('hostOnly')){
el.style.display = 'inline-block'
}
}
})