step 2: handle players queue

example-scene/src/factory.ts

@@ -14,7 +14,7 @@ import { Color4 } from '@dcl/sdk/math'
 import { getRandomHexColor } from './utils'
 
 // Cube factory
-export function createCube(x: number, y: number, z: number, spawner = true): Entity {
+export function createCube(x: number, y: number, z: number, color?: Color4): Entity {
   const entity = engine.addEntity()
 
   // Used to track the cubes
@@ -25,7 +25,7 @@ export function createCube(x: number, y: number, z: number, spawner = true): Ent
   // set how the cube looks and collides
   MeshRenderer.setBox(entity)
   MeshCollider.setBox(entity)
-  Material.setPbrMaterial(entity, { albedoColor: Color4.fromHexString(getRandomHexColor()) })
+  Material.setPbrMaterial(entity, { albedoColor: color ?? Color4.fromHexString(getRandomHexColor()) })
 
   // Make the cube spin, with the circularSystem
   Spinner.create(entity, { speed: 100 * Math.random() })

example-scene/src/index.ts

@@ -1,13 +1,13 @@
 // We define the empty imports so the auto-complete feature works as expected.
-import {} from '@dcl/sdk/math'
-import { engine } from '@dcl/sdk/ecs'
+import { Color4 } from '@dcl/sdk/math'
+import { engine, pointerEventsSystem } from '@dcl/sdk/ecs'
 
 import { changeColorSystem, circularSystem } from './systems'
-import { setupUi } from './ui'
 
-import { initLibrary } from '@dcl-sdk/mini-games/src'
+import { initLibrary, queue } from '@dcl-sdk/mini-games/src'
 import { syncEntity } from '@dcl/sdk/network'
 import players from '@dcl/sdk/players'
+import { createCube } from './factory'
 
 // make sure to put this line outside the main function.
 initLibrary(engine, syncEntity, players, {
@@ -20,6 +20,26 @@ export function main() {
   engine.addSystem(circularSystem)
   engine.addSystem(changeColorSystem)
 
-  // draw UI. Here is the logic to spawn cubes.
-  setupUi()
+  const playGameCube = createCube(2, 1, 2, Color4.Green())
+  const finishCube = createCube(2, 4, 2, Color4.Red())
+
+  // Add player to the qeue.
+  pointerEventsSystem.onPointerDown({ entity: playGameCube, opts: { hoverText: 'Start game' } }, () => {
+    queue.addPlayer()
+    console.log('Current queue', queue.getQueue())
+  })
+
+  // End Game.
+  pointerEventsSystem.onPointerDown({ entity: finishCube, opts: { hoverText: 'Finish game' } }, () => {
+    queue.setNextPlayer()
+    console.log('Current queue', queue.getQueue())
+  })
+
+  queue.listeners.onActivePlayerChange = (player) => {
+    console.log('active player changed', player)
+    console.log('Current queue', queue.getQueue())
+    // here you can set the logic to start the new game
+    // such as reset the old state, move the player inside the area, set a coutner to start the game, etc.
+    // game.startNewGame()
+  }
 }