Create a Custom Client

Creating a custom Party Social game client requires knowledge of Socket.io.

Setup

First, create a HTML file and import Socket.io

index.html
<head>
    <title>Your Page Title Here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.socket.io/4.7.3/socket.io.min.js"></script>
</head>

Design your page

Make sure your client can support as many game types as possible!

Add Sign In With Party Social to Your Client

Sign In with Party Social

Get Game Info from the URL

Now that the user is authorized, they can join games with your client. To have people use your client, give them your play page, which they can choose to use in the "Custom Client" advanced play setting. If a user chooses to use your client, they will be redirecteded to the page they input. On your play page, you can get the game info from the URL.

For the docs, we will use the URL below. However, your URL can be anything you like. Use {GAME} as a placeholder for the game's ID. You can also use {TYPE} as a placeholder for the game mode (WYR, NHIE, etc.).

https://example.com/play?game={GAME}
const params = new URLSearchParams(window.location.search)
const game = params.get('game')

Play the Game

Here is a basic example for a web-based Would You Rather game.

    const params = new URLSearchParams(window.location.search)  
    const game = params.get('game')

    const socket = io(`https://party-social.com`, {
      extraHeaders: {
        game,
        authorization: localStorage.getItem('user')
      }
    });

    socket.connect()

    socket.on('connected', data => {
    if(!data.user.host) document.getElementById('next').style.display = 'none' 
    })

    document.getElementById('opt1').addEventListener('click', () => {
      if(voted) return
      socket.emit('vote', 1)
      document.getElementById('opt1').style.backgroundColor = 'green'
      document.getElementById('opt2').style.backgroundColor = 'gray'
      voted = true;
    }) 

    document.getElementById('opt2').addEventListener('click', () => {
      if(voted) return
      socket.emit('vote', 2)
      document.getElementById('opt2').style.backgroundColor = 'green'
      document.getElementById('opt1').style.backgroundColor = 'gray'
      voted = true;
    })

   socket.on('new_question', (data) => {
      console.log('new question')
      document.getElementById('opt1').innerHTML = data.opt1
      document.getElementById('opt2').innerHTML = data.opt2
      document.getElementById('opt1').style.backgroundColor = 'rgb(0,0,190)'
      document.getElementById('opt2').style.backgroundColor = 'rgb(190,0,0)'
      voted = false
    })

    document.getElementById('next').onclick = () => {
     socket.emit('next')
    }

Share Your URL

Share your URL and let others use your client by inputting the URL in the "Custom Game Client" in the Advanced Play Settings.

Adding Support for Guest Players

To allow users to play as guests with a custom name, leave authorization empty and set the name header to the guest's name. Omitting this will result in the guest being named Guest

PreviousSign In with Party SocialNextIntro

Last updated

Was this helpful?