@dcl/playground-assets 7.0.6-3807227301.commit-1045452 → 7.0.6-3808564125.commit-7a2650b

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

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/sdk",
-  "version": "7.0.6-3807227301.commit-1045452",
+  "version": "7.0.6-3808564125.commit-7a2650b",
   "description": "",
   "main": "./index.js",
   "typings": "./index.d.ts",
@@ -25,5 +25,5 @@
     "@dcl/unity-renderer": "1.0.68557-20221221195847.commit-f743b85"
   },
   "minCliVersion": "3.14.1",
-  "commit": "104545291581dd38595dbfc46135d0f573d306ff"
+  "commit": "7a2650b741ac5f5a5d3f00ac1c955e5f773d679a"
 }

package/dist/playground/snippets/info.json

@@ -1 +1 @@
-[{"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":"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/pointer-events.ts

@@ -5,8 +5,8 @@ import {
   MeshRenderer,
   MeshCollider,
   InputAction,
-  PBPointerHoverFeedback_Entry,
-  PointerHoverFeedback,
+  PBPointerEvents_Entry,
+  PointerEvents,
   PointerEventType
 } from '@dcl/sdk/ecs'
 
@@ -15,13 +15,15 @@ function createCube(
   x: number,
   y: number,
   z: number,
-  pointerEvents: PBPointerHoverFeedback_Entry[]
+  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: {} } })
-  PointerHoverFeedback.create(meshEntity, { pointerEvents })
+
+  PointerEvents.create(meshEntity, { pointerEvents })
+
   return meshEntity
 }
 

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

@@ -0,0 +1,192 @@
+import { engine, YGFlexDirection, BackgroundTextureMode } from '@dcl/sdk/ecs'
+import { Color4 } from '@dcl/sdk/math'
+import ReactEcs, {
+  UiEntity,
+  Label,
+  ReactEcsRenderer,
+  Dropdown
+} from '@dcl/sdk/react-ecs'
+
+type GenesisPlazaContent = string
+const src: GenesisPlazaContent = 'images/rounded_alpha_square.png'
+const centeredImage: GenesisPlazaContent = '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: BackgroundTextureMode.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: BackgroundTextureMode.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: BackgroundTextureMode.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: BackgroundTextureMode.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: BackgroundTextureMode.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: BackgroundTextureMode.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: YGFlexDirection.YGFD_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

@@ -0,0 +1,32 @@
+import {
+  YGFlexDirection,
+} from '@dcl/sdk/ecs'
+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: YGFlexDirection.YGFD_COLUMN
+      }}
+      uiBackground={{ color: (Color4 as any)[colorList[selectedColorIndex]]() }}
+    >
+      <Label value="Select a color"  fontSize={29} />
+      <Dropdown options={colorList} onChange={selectOption} />
+    </UiEntity>
+  )
+}
+
+
+ReactEcsRenderer.setUiRenderer(ui)

package/dist/playground/snippets/ui.tsx

@@ -6,14 +6,14 @@ import {
   MeshCollider,
   InputAction,
   inputSystem,
-  PointerHoverFeedback,
+  PointerEvents,
   YGAlign,
   YGDisplay,
   YGJustify,
   PointerEventType
 } from '@dcl/sdk/ecs'
 import { Vector3, Color4, Quaternion } from '@dcl/sdk/math'
-import ReactEcs, { UiEntity, ReactEcsRenderer } from '@dcl/sdk/react-ecs'
+import ReactEcs, { UiEntity, Label, ReactEcsRenderer } from '@dcl/sdk/react-ecs'
 
 let counter = 0
 
@@ -24,7 +24,7 @@ export const uiComponent = () => (
       height: 400,
       margin: { top: '35px', left: '500px' }
     }}
-    uiBackground={{ backgroundColor: Color4.create(0.5, 0.8, 0.1, 0.6) }}
+    uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
   >
     <UiEntity
       uiTransform={{
@@ -35,9 +35,10 @@ export const uiComponent = () => (
         display: YGDisplay.YGD_FLEX
       }}
     >
-      <UiEntity
-        uiText={{ value: 'SDK 7', fontSize: 80 }}
-        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      <Label
+        value="SDK 7"
+        fontSize={80}
+        uiBackground={{ color: Color4.fromHexString('#fbf0f0') }}
       />
     </UiEntity>
     <UiEntity
@@ -49,9 +50,10 @@ export const uiComponent = () => (
         display: YGDisplay.YGD_FLEX
       }}
     >
-      <UiEntity
-        uiText={{ value: `Counter: ${counter}`, fontSize: 60 }}
-        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      <Label
+        value={`Counter: ${counter}`}
+        fontSize={60}
+        uiBackground={{ color: Color4.fromHexString('#fbf0f0') }}
       />
     </UiEntity>
     <UiEntity
@@ -63,9 +65,10 @@ export const uiComponent = () => (
         display: YGDisplay.YGD_FLEX
       }}
     >
-      <UiEntity
-        uiText={{ value: `Player: ${getPlayerPosition()}`, fontSize: 40 }}
-        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
+      <Label
+        value={`Player: ${getPlayerPosition()}`}
+        fontSize={40}
+        uiBackground={{ color: Color4.fromHexString('#fbf0f0') }}
       />
     </UiEntity>
   </UiEntity>
@@ -87,7 +90,7 @@ function createCube(x: number, y: number, z: number, spawner = true): Entity {
   MeshRenderer.create(meshEntity, { mesh: { $case: 'box', box: { uvs: [] } } })
   MeshCollider.create(meshEntity, { mesh: { $case: 'box', box: {} } })
   if (spawner) {
-    PointerHoverFeedback.create(meshEntity, {
+    PointerEvents.create(meshEntity, {
       pointerEvents: [
         {
           eventType: PointerEventType.PET_DOWN,
@@ -121,7 +124,7 @@ function circularSystem(dt: number) {
 }
 
 function spawnerSystem() {
-  const clickedCubes = engine.getEntitiesWith(PointerHoverFeedback)
+  const clickedCubes = engine.getEntitiesWith(PointerEvents)
   for (const [entity] of clickedCubes) {
     if (
       inputSystem.isTriggered(