Refactor/components enginem (#7)

* move all components to component prop inside the cache.engine

* move things around

src/components/Player.ts

@@ -0,0 +1,20 @@
+import { MapComponentDefinition, MapResult, ISchema } from '@dcl/sdk/ecs'
+
+/**
+ * @public
+ * SDK methods that the library receives on the initPlayersQueue
+ */
+export let Player: MapComponentDefinition<
+  MapResult<{
+    address: ISchema<string>
+    joinedAt: ISchema<number>
+    startPlayingAt: ISchema<number>
+    active: ISchema<boolean>
+  }>
+>
+/**
+ * @internal
+ */
+export function setPlayerComponent(playerComponent: typeof Player) {
+  Player = playerComponent
+}

src/gameConfig/index.ts → src/config/index.ts

@@ -12,24 +12,26 @@ const GAME_SERVER_CONFIG: Record<string, string> = {
   prd: 'https://exploration-games.decentraland.org' //PROD/live use this for launch
 }
 
-export let GAME_ID: string
 export let GAME_SERVER: string
-export let SCENE_PARENT: Entity
+export let sceneParentEntity: Entity
 
 export function init() {
-  const { config, engine, Transform } = getSDK()
+  const {
+    config,
+    engine,
+    components: { Transform }
+  } = getSDK()
 
-  GAME_ID = config.gameId
   let _env = config.environment
 
   if (_env !== ENV.PRD) _env = ENV.DEV
 
   GAME_SERVER = GAME_SERVER_CONFIG[_env]
 
-  SCENE_PARENT = engine.addEntity()
-  Transform.create(SCENE_PARENT, {
+  sceneParentEntity = engine.addEntity()
+  Transform.create(sceneParentEntity, {
     position: Vector3.create(8, 0, 8),
-    rotation: Quaternion.fromEulerDegrees(0, config.sceneRotation ? config.sceneRotation : 0, 0),
+    rotation: Quaternion.fromEulerDegrees(0, config.sceneRotation ?? 0, 0),
     scale: Vector3.One()
   })
 }

src/environment/index.ts

@@ -2,8 +2,11 @@ import { Quaternion, Vector3 } from '@dcl/sdk/math'
 
 import { getSDK } from '../sdk'
 
-export function initEnvironment() {
-  const { engine, Transform, GltfContainer } = getSDK()
+export function addEnvironment() {
+  const {
+    engine,
+    components: { Transform, GltfContainer }
+  } = getSDK()
   const environment = engine.addEntity()
   Transform.create(environment, {
     position: Vector3.create(8, 0, 8),

src/index.ts

@@ -1,34 +1,34 @@
-import { IEngine } from '@dcl/sdk/ecs'
+import { IEngine, TransformType } from '@dcl/sdk/ecs'
 import type playersType from '@dcl/sdk/players'
 import type { syncEntity as SyncEntityType } from '@dcl/sdk/network'
 
-import * as queue from './queue'
-import * as gameConfig from './gameConfig'
+import { startPlayersQueue } from './queue'
+import * as gameConfig from './config'
 import { setSDK } from './sdk'
-import { initEnvironment } from './environment'
+import { addEnvironment } from './environment'
 
-export type IConfig = {
+export type IOptions = {
   gameId: string
   environment: string
   gameTimeoutMs?: number
   sceneRotation?: number
+  queueDisplay?: TransformType
 }
 
 export let engine: IEngine
 export function initLibrary(
   engine: IEngine,
   syncEntity: typeof SyncEntityType,
   players: typeof playersType,
-  config: IConfig
+  options: IOptions
 ) {
-  setSDK({ engine, syncEntity, players, config })
-  initEnvironment()
-  queue.initPlayersQueue()
+  setSDK({ engine, syncEntity, players, config: options })
+  addEnvironment()
+  startPlayersQueue()
   gameConfig.init()
 }
-export * from './sdk'
-export * as queueDisplay from './queueDisplay'
+
 export * as ui from './ui'
-export { queue }
-export { SCENE_PARENT } from './gameConfig'
+export * as queue from './queue'
+export { sceneParentEntity } from './config'
 export * as utilities from './utilities'

src/queueDisplay/index.ts → src/queue/display/index.ts

@@ -1,7 +1,7 @@
 import { EasingFunction, Entity, TextAlignMode, TransformType } from '@dcl/sdk/ecs'
 import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math'
-import { getSDK } from '../sdk'
-import { queue } from '..'
+import { getSDK } from '../../sdk'
+import { queue } from '../..'
 
 export enum SCREENS {
   addToQueue,
@@ -24,7 +24,11 @@ let timer2 = 0
 let showEnterScreen = true
 
 export function init(transform: TransformType) {
-  const { engine, Transform, GltfContainer, Material, MeshRenderer, VisibilityComponent, players } = getSDK()
+  const {
+    engine,
+    components: { Transform, GltfContainer, Material, MeshRenderer, VisibilityComponent },
+    players
+  } = getSDK()
 
   currentScreen = SCREENS.addToQueue
   positionActive = transform
@@ -137,7 +141,10 @@ function getScreenUVs(screen: number): number[] {
 
 function enable() {
   if (active) return
-  const { engine, Transform, Tween } = getSDK()
+  const {
+    engine,
+    components: { Transform, Tween }
+  } = getSDK()
 
   active = true
   const { position } = Transform.get(frameEntity)
@@ -167,7 +174,10 @@ function enable() {
 
 function disable() {
   if (!active) return
-  const { engine, Transform, Tween } = getSDK()
+  const {
+    engine,
+    components: { Transform, Tween }
+  } = getSDK()
 
   active = false
   showEnterScreen = true
@@ -185,7 +195,10 @@ function disable() {
 }
 
 function setScreen(screenIndex: number) {
-  const { engine, VisibilityComponent, MeshRenderer } = getSDK()
+  const {
+    engine,
+    components: { VisibilityComponent, MeshRenderer }
+  } = getSDK()
 
   if (screenIndex === SCREENS.queueList) {
     engine.addSystem(updateListSystem)
@@ -200,7 +213,10 @@ function setScreen(screenIndex: number) {
 }
 
 function updateListSystem(dt: number) {
-  const { players, VisibilityComponent, TextShape } = getSDK()
+  const {
+    players,
+    components: { VisibilityComponent, TextShape }
+  } = getSDK()
 
   timer += dt
   if (timer < 1) {
@@ -230,3 +246,5 @@ function updateListSystem(dt: number) {
   VisibilityComponent.getMutable(waitingListEntity).visible = true
   VisibilityComponent.getMutable(myPosEntity).visible = true
 }
+
+export default init

src/queue/index.ts

@@ -1,5 +1,6 @@
-import { Entity, Schemas } from '@dcl/sdk/ecs'
-import { getSDK, Player, setPlayerComponent } from '../sdk'
+import { Entity } from '@dcl/sdk/ecs'
+import { getSDK } from '../sdk'
+import * as queueDisplay from './display'
 
 export type PlayerType = {
   address: string
@@ -14,35 +15,37 @@ export type PlayerType = {
 export const listeners: { onActivePlayerChange: (player: PlayerType) => void } = {
   onActivePlayerChange: () => {}
 }
+let initializedQueue = false
 /**
  * We need the engine, syncEntity and playerApi as params to avoid references to different engines
  * when working on development environments.
  */
-export function initPlayersQueue() {
-  const { engine, players } = getSDK()
-  const playerComponent = engine.defineComponent('sdk-utils/player:player', {
-    address: Schemas.String,
-    joinedAt: Schemas.Int64,
-    active: Schemas.Boolean,
-    startPlayingAt: Schemas.Int64
-  })
+export function startPlayersQueue() {
+  if (initializedQueue) return
+  initializedQueue = true
+  const { engine, players, config } = getSDK()
 
-  setPlayerComponent(playerComponent)
+  if (config.queueDisplay) {
+    queueDisplay.init(config.queueDisplay)
+  }
 
   players.onLeaveScene((userId: string) => {
     console.log('Player leave scene', userId)
     removePlayer(userId)
   })
 
   engine.addSystem(internalPlayerSystem())
-
   // TODO: TIME LIMIT PER GAME (startPlayingAt - TIME_LIMIT)
 }
 /**
  * Add current player to the queue
  */
 export function addPlayer() {
-  const { engine, syncEntity } = getSDK()
+  const {
+    engine,
+    syncEntity,
+    components: { Player }
+  } = getSDK()
   const userId = getUserId()
   if (!userId || isPlayerInQueue(userId)) {
     return
@@ -68,7 +71,10 @@ export function isActive(): boolean {
  * Get queue of players ordered
  */
 export function getQueue() {
-  const { engine } = getSDK()
+  const {
+    engine,
+    components: { Player }
+  } = getSDK()
   const queue = new Map<string, { player: PlayerType; entity: Entity }>()
   for (const [entity, player] of engine.getEntitiesWith(Player)) {
     if (!queue.has(player.address)) {
@@ -97,7 +103,10 @@ function getUserId() {
 }
 
 export function setNextPlayer() {
-  const { engine } = getSDK()
+  const {
+    engine,
+    components: { Player }
+  } = getSDK()
   const [_, activePlayer] = getActivePlayer()
 
   // Only run this if you are the active player, or there is no one assigned
@@ -174,7 +183,10 @@ function internalPlayerSystem() {
  * Check if the player is already in the Queue
  */
 function isPlayerInQueue(userId: string) {
-  const { engine } = getSDK()
+  const {
+    engine,
+    components: { Player }
+  } = getSDK()
 
   for (const [_, player] of engine.getEntitiesWith(Player)) {
     if (player.address === userId) {
@@ -189,7 +201,10 @@ function isPlayerInQueue(userId: string) {
  */
 function removePlayer(_userId?: string) {
   const userId = _userId ?? getUserId()
-  const { engine } = getSDK()
+  const {
+    engine,
+    components: { Player }
+  } = getSDK()
 
   if (!userId) {
     return
@@ -206,7 +221,10 @@ function removePlayer(_userId?: string) {
  * Get active player
  */
 function getActivePlayer(): [Entity, PlayerType] | [] {
-  const { engine } = getSDK()
+  const {
+    engine,
+    components: { Player }
+  } = getSDK()
 
   for (const [entity, player] of engine.getEntitiesWith(Player)) {
     if (player.active) {