From 77fc43aac2703ec150e167072a695f0c4a5995b3 Mon Sep 17 00:00:00 2001
From: Gonzalo DCL <gonzalo@decentraland.org>
Date: Wed, 21 Aug 2024 15:47:42 -0300
Subject: [PATCH] step 2: handle players queue

---
 example-scene/src/factory.ts |  4 +-
 example-scene/src/index.ts   | 32 ++++++++++++---
 example-scene/src/ui.tsx     | 79 ------------------------------------
 3 files changed, 28 insertions(+), 87 deletions(-)
 delete mode 100644 example-scene/src/ui.tsx

diff --git a/example-scene/src/factory.ts b/example-scene/src/factory.ts
index 0a16afd..c5bf37d 100644
--- a/example-scene/src/factory.ts
+++ b/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() })
diff --git a/example-scene/src/index.ts b/example-scene/src/index.ts
index 43af2b6..e7291bf 100644
--- a/example-scene/src/index.ts
+++ b/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()
+  }
 }
diff --git a/example-scene/src/ui.tsx b/example-scene/src/ui.tsx
deleted file mode 100644
index a2f0fdf..0000000
--- a/example-scene/src/ui.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import {
-  engine,
-  Transform,
-} from '@dcl/sdk/ecs'
-import { Color4 } from '@dcl/sdk/math'
-import ReactEcs, { Button, Label, ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
-import { Cube } from './components'
-import { createCube } from './factory'
-
-export function setupUi() {
-  ReactEcsRenderer.setUiRenderer(uiComponent)
-}
-
-const uiComponent = () => (
-  <UiEntity
-    uiTransform={{
-      width: 400,
-      height: 230,
-      margin: '16px 0 8px 270px',
-      padding: 4,
-    }}
-    uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
-  >
-    <UiEntity
-      uiTransform={{
-        width: '100%',
-        height: '100%',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }}
-      uiBackground={{ color: Color4.fromHexString("#70ac76ff") }}
-    >
-      <UiEntity
-        uiTransform={{
-          width: '100%',
-          height: 50,
-          margin: '8px 0'
-        }}
-        uiBackground={{
-          textureMode: 'center',
-          texture: {
-            src: 'images/scene-thumbnail.png',
-          },
-        }}
-        uiText={{ value: 'SDK7', fontSize: 18 }}
-      />
-      <Label
-        onMouseDown={() => {console.log('Player Position clicked !')}}
-        value={`Player: ${getPlayerPosition()}`}
-        fontSize={18}
-        uiTransform={{ width: '100%', height: 30 } }
-      />
-      <Label
-        onMouseDown={() => {console.log('# Cubes clicked !')}}
-        value={`# Cubes: ${[...engine.getEntitiesWith(Cube)].length}`}
-        fontSize={18}
-        uiTransform={{ width: '100%', height: 30 } }
-      />
-      <Button
-        uiTransform={{ width: 100, height: 40, margin: 8 }}
-        value='Spawn cube'
-        variant='primary'
-        fontSize={14}
-        onMouseDown={() => {
-          createCube(1 + Math.random() * 8, Math.random() * 8, 1 + Math.random() * 8, false)
-        }}
-      />
-     </UiEntity>
-  </UiEntity>
-)
-
-function getPlayerPosition() {
-  const playerPosition = Transform.getOrNull(engine.PlayerEntity)
-  if (!playerPosition) return ' no data yet'
-  const { x, y, z } = playerPosition.position
-  return `{X: ${x.toFixed(2)}, Y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }`
-}
-