Party Social Docs
  • Welcome
  • Definitions
  • OAUTH 2.0
    • Sign In with Party Social
  • CUSTOM CLIENT
    • Create a Custom Client
  • EVENTS
    • Intro
    • Client Events
    • Server Events
    • Custom Events
  • API
    • Users
    • Games
      • Discovery
    • Challenges
Powered by GitBook
On this page
  • Setup
  • Design your page
  • Add Sign In With Party Social to Your Client
  • Get Game Info from the URL
  • Play the Game
  • Share Your URL
  • Adding Support for Guest Players

Was this helpful?

  1. CUSTOM CLIENT

Create a Custom Client

PreviousSign In with Party SocialNextIntro

Last updated 7 months ago

Was this helpful?

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

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

Sign In with Party Social