Lobby System

Hey guys

I need a queue system where I collect for example 20 players, and when it's ready a timer starts and then sends those clients into a game state.

Anyone done something similar?

Also how do go about having "Rounds" that are 10 seconds long each, like an quiz game perhaps?

Any insights be useful

Hey @patrykmaron,

For the "lobby" system, you can let players connect into your room handler, and only start the match when the client count reaches the number you specify. That's exactly what I'm doing on Crash Racing - the game only starts after having 4 players - or after a timeout of 10 seconds.

Example

onJoin (client, options: any) {
    if (this.clients.length === 10) {
        // change the state to notify clients the game has been started
        this.state.started = true;

        // additionally, you may lock the room to prevent new clients from joining it
        this.lock()
    }
}

For the "rounds", you can either use JavaScript's setTimeout(), or the built-in this.clock.setTimeout(), which returns an Delayed instance, which you can pause/resume/clear later (http://colyseus.io/docs/api-room/#clock-clocktimer)

Slightly rewritten example:

onInit () {
  // auto-start the state after 10 seconds
  this.autoStartTimeout = this.clock.setTimeout(() => this.start(), 10 * 1000); 
}

onJoin () {
  if (this.clients.length === 10) {
    this.autoStartTimeout.clear();
    this.start();
  }
}

start () {
  // change the state to notify clients the game has been started
  this.state.started = true;

  // additionally, you may lock the room to prevent new clients from joining it
  this.lock()
}

Note that this code wasn't tested, there might be some issue on it. Cheers!

Thanks thats all great, I got a grip of it!

May I ask you about the clock timer and rendering a countdown?

start(){
// change the state to notify clients the game has been started
this.state.started = true;

if (this.state.started = true){
    // additionally, you may lock the room to prevent new clients from joining it
    this.lock()
    this.state.messages.push("COUNTDOWN SHALL BEGIN!");

    this.clock.currentTime = 10;
    this.clock.running = true;
    
    this.state.messages.push(`${ this.clock.currentTime.toString()}`)
} 

Im trying to have a countdown running and refresh on start(), however it only outputs me a "0"? any thoughts?

Hi @patrykmaron,

I've just added a page for Timing Events on the docs site: http://colyseus.io/docs/api-timing-events/

I'm afraid your code isn't working properly because the currentTime property is read-only.

Ideally, you'd register an interval using clock.setInterval(), and update the state setting the countdown time. Like:

Server-side:

onInit () {
  this.state.countdown = 10;

  this.countdownInterval = this.clock.setInterval(() => {
    this.state.countdown--;

    if (this.state.countdown === 0) {
      this.countdownInterval.clear();
      this.start();
    }
  }, 1000);
}

Client-side:

room.listen("countdown", (change) {
  console.log(change.value) // => 10..., 9..., 8...
});

Cheers

Thanks for the awesome replies!

I was wondering how are you declaring the "countdownInterval" ?

Thanks :)

Hey @patrykmaron,

I've just released a new version of the module (0.8.11) to allow importing these definitions easily through:

import { Room, Delayed } from "colyseus";

class MyRoom extends Room {
  myTimeout: Delayed;

  onInit () {
    this.myTimeout = this.clock.setTimeout(() => {/* ... */}, 1000);
  }
}

Hope this helps! Cheers!

clocks do not work on javascript, in this code the message "timer" is not displayed.

this.clock.setInterval(() => {console.log("timer");}, 1000);

what am I doing wrong?

@Алексей-Андронов the clock only works if you set up the simulation interval.

I guess that's not intuitive, I'll fix this on version 0.9.0 too.