@dcl/playground-assets 7.21.0 → 7.21.1-22917715332.commit-e5d969d

package/dist/playground/sdk/dcl-sdk.package.json

@@ -1,39 +0,0 @@
-{
-  "name": "@dcl/sdk",
-  "description": "",
-  "version": "7.21.0",
-  "author": "Decentraland",
-  "dependencies": {
-    "@dcl/ecs": "file:../ecs",
-    "@dcl/ecs-math": "2.1.0",
-    "@dcl/explorer": "1.0.164509-20240802172549.commit-fb95b9b",
-    "@dcl/js-runtime": "file:../js-runtime",
-    "@dcl/react-ecs": "file:../react-ecs",
-    "@dcl/sdk-commands": "file:../sdk-commands",
-    "text-encoding": "0.7.0"
-  },
-  "keywords": [],
-  "license": "Apache-2.0",
-  "main": "./index.js",
-  "minCliVersion": "3.14.1",
-  "repository": {
-    "url": "git+https://github.com/decentraland/js-sdk-toolchain",
-    "directory": "packages/@dcl/sdk"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "start": "npm run build && tsc -p tsconfig.json --watch"
-  },
-  "tsdoc": {
-    "tsdocFlavor": "AEDoc"
-  },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "SDK",
-    "tsconfig": "./tsconfig.json"
-  },
-  "types": "./index.d.ts",
-  "typings": "./index.d.ts",
-  "commit": "9d0cc3ae3ae3f717a56275731d6bc478bc48fb67"
-}

package/dist/playground/snippets/billboard.ts

@@ -1,111 +0,0 @@
-import {
-  Entity,
-  engine,
-  Material,
-  Transform,
-  MeshRenderer,
-  Billboard,
-  BillboardMode,
-  TextShape,
-  Schemas
-} from '@dcl/sdk/ecs'
-import { Vector3, Color3, Color4 } from '@dcl/sdk/math'
-
-function createPlaneTexture(x: number, y: number, z: number): Entity {
-  const meshEntity = engine.addEntity()
-
-  Material.create(meshEntity, {
-    material: {
-      $case: 'pbr',
-      pbr: {
-        texture: {
-          tex: {
-            $case: 'texture',
-            texture: { src: 'models/polaroid2.png' }
-          }
-        }
-      }
-    }
-  })
-  Transform.create(meshEntity, {
-    position: { x, y, z },
-    scale: Vector3.create(2, 2, 2)
-  })
-  MeshRenderer.create(meshEntity, {
-    mesh: {
-      $case: 'plane',
-      plane: {
-        uvs: [...Array.from({ length: 40 }, () => 0), 0, 1, 1, 1, 1, 0, 0, 0]
-      }
-    }
-  })
-  return meshEntity
-}
-
-function createBillboards() {
-  const plane1 = createPlaneTexture(8, 3, 1)
-  const plane2 = createPlaneTexture(12, 3, 1)
-  createPlaneTexture(4, 3, 1)
-
-  const plane5 = createPlaneTexture(8, 3, 8)
-  const plane4 = createPlaneTexture(12, 3, 8)
-  createPlaneTexture(4, 3, 8)
-
-  Billboard.create(plane1, {
-    billboardMode: BillboardMode.BM_Y
-  })
-  Billboard.create(plane2)
-  Billboard.create(plane4, {
-    billboardMode: BillboardMode.BM_ALL
-  })
-  Billboard.create(plane5, {
-    billboardMode: BillboardMode.BM_Y
-  })
-}
-
-function createTextShape(text: string, position: Vector3, textColor: Color4) {
-  const entity = engine.addEntity()
-  Transform.create(entity, { position })
-  return TextShape.create(entity, {
-    text,
-    fontSize: 3,
-    outlineWidth: 0.1,
-    outlineColor: Color3.Black(),
-    textColor
-  })
-}
-
-function createTextShapes() {
-  const regularColor = Color4.create(1, 0.2, 0.8, 0.8)
-  const oppositeColor = Color4.create(0.8, 0.2, 1, 0.8)
-
-  createTextShape('Regular, only Y-rotation', Vector3.create(8, 1, 1), regularColor)
-  createTextShape('Regular', Vector3.create(12, 1, 1), regularColor)
-  createTextShape('Without billboard', Vector3.create(4, 1, 1), regularColor)
-  createTextShape('Opposite, only Y', Vector3.create(8, 1, 8), oppositeColor)
-  createTextShape('Opposite', Vector3.create(12, 1, 8), oppositeColor)
-  createTextShape('Without billboard', Vector3.create(4, 1, 8), oppositeColor)
-}
-
-createBillboards()
-createTextShapes()
-
-const BouncingBillboard = engine.defineComponent('bouncing billboard', {
-  t: Schemas.Number,
-  originalPosition: Schemas.Vector3
-})
-
-engine.addSystem((dt: number) => {
-  for (const [entity] of engine.getEntitiesWith(Billboard, Transform)) {
-    if (BouncingBillboard.getOrNull(entity) === null) {
-      BouncingBillboard.create(entity, {
-        originalPosition: Transform.get(entity).position
-      })
-    }
-
-    const bounce = BouncingBillboard.getMutable(entity)
-    bounce.t += dt
-
-    Transform.getMutable(entity).position.y = bounce.originalPosition.y + 0.05 * Math.sin(10 * bounce.t)
-  }
-})

package/dist/playground/snippets/cube-spawner.ts

@@ -1,38 +0,0 @@
-import { Entity, engine, pointerEventsSystem, Transform, MeshRenderer, MeshCollider, InputAction } from '@dcl/sdk/ecs'
-import { Quaternion, Vector3 } from '@dcl/sdk/math'
-
-// Cube factory
-function createCube(x: number, y: number, z: number): Entity {
-  const meshEntity = engine.addEntity()
-  Transform.create(meshEntity, { position: { x, y, z } })
-  MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
-  MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
-
-  return meshEntity
-}
-
-// Systems
-function circularSystem(dt: number) {
-  const entitiesWithMeshRenderer = engine.getEntitiesWith(MeshRenderer, Transform)
-  for (const [entity, _meshRenderer, _transform] of entitiesWithMeshRenderer) {
-    const mutableTransform = Transform.getMutable(entity)
-
-    mutableTransform.rotation = Quaternion.multiply(
-      mutableTransform.rotation,
-      Quaternion.fromAngleAxis(dt * 10, Vector3.Up())
-    )
-  }
-}
-
-// Init
-const initEntity = createCube(8, 1, 8)
-pointerEventsSystem.onPointerDown(
-  { entity: initEntity, opts: { button: InputAction.IA_PRIMARY, hoverText: 'Press E to spawn' } },
-  () => {
-    createCube(1 + Math.random() * 8, Math.random() * 8, 1 + Math.random() * 8)
-  }
-)
-
-engine.addSystem(circularSystem)
-
-export {}

package/dist/playground/snippets/info.json

@@ -1 +0,0 @@
-[{"name":"Billboard","category":"sample","path":"billboard.ts"},{"name":"Cube Spawner","category":"sample","path":"cube-spawner.ts"},{"name":"Material","category":"component","path":"material.ts"},{"name":"Mesh","category":"component","path":"mesh.ts"},{"name":"Pointer Events","category":"sample","path":"pointer-events.ts"},{"name":"Raycast Hit","category":"component","path":"raycast-hit.ts"},{"name":"Raycast Hit many","category":"sample","path":"raycast-hit-many.ts"},{"name":"Container","category":"ui","path":"ui.tsx"},{"name":"UiBackground component","category":"ui","path":"ui-backgrounds.tsx"},{"name":"Dropdown element","category":"ui","path":"ui-dropdown.tsx"}]

package/dist/playground/snippets/material.ts

@@ -1,50 +0,0 @@
-import { Entity, engine, Transform, MeshRenderer, Material, MaterialTransparencyMode } from '@dcl/sdk/ecs'
-
-function createSphere(x: number, y: number, z: number): Entity {
-  const meshEntity = engine.addEntity()
-  Transform.create(meshEntity, { position: { x, y, z } })
-  MeshRenderer.create(meshEntity, { mesh: { $case: 'sphere', sphere: {} } })
-  return meshEntity
-}
-
-Material.create(createSphere(15, 1, 15), {
-  material: {
-    $case: 'pbr',
-    pbr: {
-      albedoColor: { r: 0, g: 0, b: 1, a: 1 },
-      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
-      metallic: 0.8,
-      roughness: 0.1
-    }
-  }
-})
-
-Material.create(createSphere(13, 1, 15), {
-  material: {
-    $case: 'pbr',
-    pbr: {
-      albedoColor: { r: 1, g: 1, b: 0, a: 1 },
-      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
-      metallic: 0.1,
-      roughness: 0.8,
-
-      alphaTest: 0.2,
-      transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
-    }
-  }
-})
-
-Material.create(createSphere(11, 1, 15), {
-  material: {
-    $case: 'pbr',
-    pbr: {
-      albedoColor: { r: 0, g: 0, b: 1, a: 1 },
-      reflectivityColor: { r: 0.5, g: 0.5, b: 0.5 },
-      metallic: 0.1,
-      roughness: 0.1
-    }
-  }
-})
-
-// add textures
-export {}

package/dist/playground/snippets/mesh.ts

@@ -1,63 +0,0 @@
-import { engine, Transform, MeshRenderer, MeshCollider } from '@dcl/sdk/ecs'
-
-enum Mesh {
-  BOX,
-  CYLINDER,
-  SPHERE,
-  CONE
-}
-
-function createMesh(x: number, y: number, z: number, mesh: Mesh, withCollider: boolean = false) {
-  const meshEntity = engine.addEntity()
-  Transform.create(meshEntity, { position: { x, y, z } })
-
-  switch (mesh) {
-    case Mesh.BOX:
-      MeshRenderer.create(meshEntity, {
-        mesh: { $case: 'box', box: { uvs: [] } }
-      })
-      if (withCollider) MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
-      break
-    case Mesh.SPHERE:
-      MeshRenderer.create(meshEntity, { mesh: { $case: 'sphere', sphere: {} } })
-      if (withCollider)
-        MeshCollider.create(meshEntity, {
-          mesh: { $case: 'sphere', sphere: {} }
-        })
-      break
-    case Mesh.CONE:
-    case Mesh.CYLINDER:
-      MeshRenderer.create(meshEntity, {
-        mesh: {
-          $case: 'cylinder',
-          cylinder: {
-            radiusBottom: 1,
-            radiusTop: mesh === Mesh.CONE ? 0 : 1
-          }
-        }
-      })
-      if (withCollider)
-        MeshCollider.create(meshEntity, {
-          mesh: {
-            $case: 'cylinder',
-            cylinder: {
-              radiusBottom: 1,
-              radiusTop: mesh === Mesh.CONE ? 0 : 1
-            }
-          }
-        })
-      break
-  }
-  return meshEntity
-}
-
-createMesh(15, 1, 15, Mesh.BOX)
-createMesh(12, 1, 15, Mesh.CONE)
-createMesh(9, 1, 15, Mesh.SPHERE)
-createMesh(6, 1, 15, Mesh.CYLINDER)
-createMesh(15, 1, 1, Mesh.BOX, true)
-createMesh(12, 1, 1, Mesh.CONE, true)
-createMesh(9, 1, 1, Mesh.SPHERE, true)
-createMesh(6, 1, 1, Mesh.CYLINDER, true)
-
-export {}

package/dist/playground/snippets/pointer-events.ts

@@ -1,59 +0,0 @@
-import {
-  Entity,
-  engine,
-  Transform,
-  MeshRenderer,
-  MeshCollider,
-  InputAction,
-  PBPointerEvents_Entry,
-  PointerEvents,
-  PointerEventType
-} from '@dcl/sdk/ecs'
-
-// Cube factory
-function createCube(x: number, y: number, z: number, pointerEvents: PBPointerEvents_Entry[]): Entity {
-  const meshEntity = engine.addEntity()
-  Transform.create(meshEntity, { position: { x, y, z } })
-  MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
-  MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
-
-  PointerEvents.create(meshEntity, { pointerEvents })
-
-  return meshEntity
-}
-
-createCube(15, 1, 15, [
-  {
-    eventType: PointerEventType.PET_DOWN,
-    eventInfo: {
-      button: InputAction.IA_PRIMARY,
-      hoverText: 'PrimaryDown',
-      maxDistance: 5,
-      showFeedback: true
-    }
-  }
-])
-
-createCube(13, 1, 15, [
-  {
-    eventType: PointerEventType.PET_UP,
-    eventInfo: {
-      button: InputAction.IA_SECONDARY,
-      hoverText: 'Secondary Up',
-      maxDistance: 5,
-      showFeedback: true
-    }
-  }
-])
-
-createCube(11, 1, 15, [
-  {
-    eventType: PointerEventType.PET_HOVER_ENTER,
-    eventInfo: {
-      button: InputAction.IA_ANY,
-      hoverText: 'Infinity Hover',
-      maxDistance: 10000000,
-      showFeedback: true
-    }
-  }
-])

package/dist/playground/snippets/raycast-hit-many.ts

@@ -1,64 +0,0 @@
-import {
-  engine,
-  Transform,
-  MeshRenderer,
-  MeshCollider,
-  InputAction,
-  pointerEventsSystem,
-  Raycast,
-  RaycastQueryType,
-  RaycastResult
-} from '@dcl/sdk/ecs'
-import { Vector3 } from '@dcl/sdk/math'
-
-function createCube(x: number, y: number, z: number, scaleMultiplier: number = 1) {
-  const cubeEntity = engine.addEntity()
-
-  Transform.create(cubeEntity, {
-    position: { x, y, z },
-    scale: { x: scaleMultiplier, y: scaleMultiplier, z: scaleMultiplier }
-  })
-
-  MeshRenderer.create(cubeEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
-  MeshCollider.create(cubeEntity, { mesh: { $case: 'box', box: {} } })
-
-  return cubeEntity
-}
-
-// Create cube to hit
-const cubeEntity = createCube(8, 1, 8)
-const _cubeEntity2 = createCube(8, 1, 13)
-const raycastEntity = engine.addEntity()
-
-// Add OnPointerDown component to cube entity to trigger ray casting on interaction
-pointerEventsSystem.onPointerDown(
-  { entity: cubeEntity, opts: { button: InputAction.IA_POINTER, hoverText: 'CAST RAY' } },
-  () => {
-    Raycast.createOrReplace(raycastEntity, {
-      direction: {
-        $case: 'localDirection',
-        localDirection: Vector3.Forward()
-      },
-      maxDistance: 16,
-      queryType: RaycastQueryType.RQT_QUERY_ALL
-    })
-  }
-)
-
-// System to detect new raycast responses and instantiate a cube where the ray hits
-let lastRaycastTimestamp = -1
-engine.addSystem(() => {
-  for (const [_entity, result] of engine.getEntitiesWith(RaycastResult)) {
-    const timestamp = result.timestamp ?? 0
-    if (result.hits?.length === 0 || timestamp <= lastRaycastTimestamp) continue
-    lastRaycastTimestamp = timestamp
-
-    if (result.hits[0] && result.hits[0].position) {
-      createCube(result.hits[0].position.x, result.hits[0].position.y, result.hits[0].position.z, 0.3)
-    }
-
-    console.log(`Hits (this should be '2' the first time): '${result.hits.length}'`)
-  }
-})
-
-export {}

package/dist/playground/snippets/raycast-hit.ts

@@ -1,65 +0,0 @@
-import {
-  engine,
-  Transform,
-  MeshRenderer,
-  MeshCollider,
-  InputAction,
-  pointerEventsSystem,
-  Raycast,
-  RaycastQueryType,
-  RaycastResult
-} from '@dcl/sdk/ecs'
-import { Vector3 } from '@dcl/sdk/math'
-
-function createCube(x: number, y: number, z: number, scaleMultiplier: number = 1) {
-  const cubeEntity = engine.addEntity()
-
-  Transform.create(cubeEntity, {
-    position: { x, y, z },
-    scale: { x: scaleMultiplier, y: scaleMultiplier, z: scaleMultiplier }
-  })
-
-  MeshRenderer.create(cubeEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
-  MeshCollider.create(cubeEntity, { mesh: { $case: 'box', box: {} } })
-
-  return cubeEntity
-}
-
-// Create cube to hit
-const cubeEntity = createCube(8, 1, 8)
-const raycastEntity = engine.addEntity()
-
-// Add OnPointerDown component to cube entity to trigger ray casting on interaction
-pointerEventsSystem.onPointerDown(
-  { entity: cubeEntity, opts: { button: InputAction.IA_POINTER, hoverText: 'CAST RAY' } },
-  () => {
-    Raycast.createOrReplace(raycastEntity, {
-      continuous: true,
-      timestamp: 0,
-      direction: {
-        $case: 'localDirection',
-        localDirection: Vector3.Forward()
-      },
-      maxDistance: 16,
-      queryType: RaycastQueryType.RQT_HIT_FIRST
-    })
-  }
-)
-
-// System to detect new raycast responses and instantiate a cube where the ray hits
-let lastRaycastTimestamp = -1
-engine.addSystem(() => {
-  for (const [_entity, result] of engine.getEntitiesWith(RaycastResult)) {
-    const timestamp = result.timestamp ?? 0
-    if (result.hits?.length === 0 || timestamp <= lastRaycastTimestamp) continue
-    lastRaycastTimestamp = timestamp
-
-    if (result.hits[0] && result.hits[0].position) {
-      createCube(result.hits[0].position.x, result.hits[0].position.y, result.hits[0].position.z, 0.3)
-    }
-
-    console.log(`Hits (this should be '1'): '${result.hits.length}'`)
-  }
-})
-
-export {}

package/dist/playground/snippets/ui-backgrounds.tsx

@@ -1,170 +0,0 @@
-import { engine } from '@dcl/sdk/ecs'
-import { Color4 } from '@dcl/sdk/math'
-import ReactEcs, { UiEntity, Label, ReactEcsRenderer, Dropdown } from '@dcl/sdk/react-ecs'
-
-const src = 'images/rounded_alpha_square.png'
-const centeredImage = 'images/ui_beam_up_bg.png'
-
-let dt = 0
-let userId: string | undefined
-
-engine.addSystem((t) => {
-  dt += t
-})
-
-let currentValue = 0
-const options = [
-  function StretchAndTint() {
-    const tint2 = Color4.lerp(Color4.Red(), Color4.Blue(), 1 + Math.sin(dt + Math.cos(dt * 0.3)) * 0.5)
-    return (
-      <UiEntity
-        uiTransform={{
-          width: `${(1 + Math.sin(dt) * 0.5) * 50}%`,
-          height: 244
-        }}
-        uiBackground={{
-          color: tint2,
-          textureMode: 'stretch',
-          texture: {
-            src
-          }
-        }}
-      >
-        <Label value="STRETCH + TINT\n(borders are deformed)" fontSize={29} />
-      </UiEntity>
-    )
-  },
-  function NineSlicesAndTint() {
-    const tint = Color4.lerp(Color4.Red(), Color4.Blue(), 1 + Math.sin(dt + Math.cos(dt * 0.3)) * 0.5)
-    return (
-      <UiEntity
-        uiTransform={{
-          width: `${(1 + Math.sin(dt) * 0.5) * 50}%`,
-          height: 128
-        }}
-        uiBackground={{
-          color: tint,
-          textureMode: 'nine-slices',
-          texture: {
-            src
-          }
-        }}
-      >
-        <Label value="NINE_SLICES + TINT" color={Color4.Black()} fontSize={29} />
-      </UiEntity>
-    )
-  },
-  function NineSlicesAndTint() {
-    const tint = Color4.lerp(
-      Color4.fromHexString('#336613ff'),
-      Color4.fromHexString('#f099f3ff'),
-      1 + Math.sin(dt) * 0.5
-    )
-
-    return (
-      <UiEntity
-        uiTransform={{
-          width: 200,
-          height: (1 + Math.sin(dt) * 0.5) * 200
-        }}
-        uiBackground={{
-          color: tint,
-          textureMode: 'nine-slices',
-          texture: {
-            src: centeredImage
-          }
-        }}
-      >
-        <Label value="NINE_SLICES + TINT" color={Color4.Red()} fontSize={29} />
-      </UiEntity>
-    )
-  },
-  function NineSlicesAndMargin() {
-    const margin = (1 + Math.cos(dt * 0.3)) * 0.1
-
-    return (
-      <UiEntity
-        uiTransform={{
-          width: 256,
-          height: 256
-        }}
-        uiBackground={{
-          textureMode: 'nine-slices',
-          texture: {
-            src: centeredImage
-          },
-          textureSlices: {
-            top: margin,
-            bottom: margin,
-            left: margin,
-            right: margin
-          }
-        }}
-      >
-        <Label value={`NINE_SLICES (with margins ${margin.toFixed(2)})`} color={Color4.Red()} fontSize={29} />
-      </UiEntity>
-    )
-  },
-  function Center() {
-    return (
-      <UiEntity
-        uiTransform={{
-          width: 250 + Math.cos(dt) * 100,
-          height: 128 + Math.sin(dt * 0.2) * 64
-        }}
-        uiBackground={{
-          textureMode: 'center',
-          texture: {
-            src: centeredImage
-          }
-        }}
-      >
-        <Label value="CENTER" color={Color4.Green()} fontSize={29} />
-      </UiEntity>
-    )
-  },
-  function AvatarTexture() {
-    return (
-      <UiEntity
-        uiTransform={{
-          width: 250 + Math.cos(dt) * 100,
-          height: 128 + Math.sin(dt * 0.2) * 64
-        }}
-        uiBackground={{
-          textureMode: 'center',
-          avatarTexture: {
-            userId: userId ?? ''
-          }
-        }}
-      >
-        <Label value="CENTER" color={Color4.Green()} fontSize={29} />
-      </UiEntity>
-    )
-  }
-]
-
-function selectOption(index: number) {
-  currentValue = index
-}
-
-export const ui = () => {
-  const Renderer = options[currentValue] || (() => null)
-
-  return (
-    <UiEntity
-      uiTransform={{
-        width: '100%',
-        height: '50%',
-        flexDirection: 'column',
-        margin: { left: 300 }
-      }}
-      uiBackground={{ color: Color4.Black() }}
-    >
-      <Label value="Select an example from below" />
-      <Dropdown options={options.map(($) => $.name)} onChange={selectOption} />
-      <Renderer />
-    </UiEntity>
-  )
-}
-
-ReactEcsRenderer.setUiRenderer(ui)

package/dist/playground/snippets/ui-dropdown.tsx

@@ -1,28 +0,0 @@
-import { Color4 } from '@dcl/sdk/math'
-import ReactEcs, { UiEntity, Label, ReactEcsRenderer, Dropdown } from '@dcl/sdk/react-ecs'
-
-const colorList = ['Red', 'Green', 'Blue', 'Black', 'White', 'Purple', 'Magenta', 'Yellow', 'Gray', 'Teal', 'Clear']
-
-let selectedColorIndex = 0
-
-function selectOption(index: number) {
-  selectedColorIndex = index
-}
-
-export const ui = () => {
-  return (
-    <UiEntity
-      uiTransform={{
-        width: '100%',
-        height: '3000px',
-        flexDirection: 'column'
-      }}
-      uiBackground={{ color: (Color4 as any)[colorList[selectedColorIndex]]() }}
-    >
-      <Label value="Select a color" fontSize={29} />
-      <Dropdown options={colorList} onChange={selectOption} />
-    </UiEntity>
-  )
-}
-
-ReactEcsRenderer.setUiRenderer(ui)