@dcl/playground-assets 7.0.6-3942933325.commit-70f967f → 7.0.6-3987590195.commit-4fc1536

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

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/sdk",
-  "version": "7.0.6-3942933325.commit-70f967f",
+  "version": "7.0.6-3987590195.commit-4fc1536",
   "description": "",
   "main": "./index.js",
   "typings": "./index.d.ts",
@@ -37,5 +37,5 @@
     "displayName": "SDK",
     "tsconfig": "./tsconfig.json"
   },
-  "commit": "70f967f506b6e27be0877901c693a1d5089b1bf4"
+  "commit": "4fc1536e9bdd2501b3d9918ec7345084f7a49aca"
 }

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

@@ -1,4 +1,4 @@
-import { engine, YGFlexDirection, BackgroundTextureMode } from '@dcl/sdk/ecs'
+import { engine } from '@dcl/sdk/ecs'
 import { Color4 } from '@dcl/sdk/math'
 import ReactEcs, {
   UiEntity,
@@ -34,7 +34,7 @@ const options = [
         }}
         uiBackground={{
           color: tint2,
-          textureMode: BackgroundTextureMode.STRETCH,
+          textureMode: 'stretch',
           texture: {
             src
           }
@@ -58,7 +58,7 @@ const options = [
         }}
         uiBackground={{
           color: tint,
-          textureMode: BackgroundTextureMode.NINE_SLICES,
+          textureMode: 'nine-slices',
           texture: {
             src
           }
@@ -87,7 +87,7 @@ const options = [
         }}
         uiBackground={{
           color: tint,
-          textureMode: BackgroundTextureMode.NINE_SLICES,
+          textureMode: 'nine-slices',
           texture: {
             src: centeredImage
           }
@@ -107,7 +107,7 @@ const options = [
           height: 256
         }}
         uiBackground={{
-          textureMode: BackgroundTextureMode.NINE_SLICES,
+          textureMode: 'nine-slices',
           texture: {
             src: centeredImage
           },
@@ -135,7 +135,7 @@ const options = [
           height: 128 + Math.sin(dt * 0.2) * 64
         }}
         uiBackground={{
-          textureMode: BackgroundTextureMode.CENTER,
+          textureMode: 'center',
           texture: {
             src: centeredImage
           }
@@ -153,7 +153,7 @@ const options = [
           height: 128 + Math.sin(dt * 0.2) * 64
         }}
         uiBackground={{
-          textureMode: BackgroundTextureMode.CENTER,
+          textureMode: 'center',
           avatarTexture: {
             userId: userId ?? ''
           }
@@ -177,7 +177,7 @@ export const ui = () => {
       uiTransform={{
         width: '100%',
         height: '50%',
-        flexDirection: YGFlexDirection.YGFD_COLUMN,
+        flexDirection: 'column',
         margin: { left: 300 }
       }}
       uiBackground={{ color: Color4.Black() }}

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

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

package/dist/playground/snippets/ui.tsx

@@ -7,9 +7,6 @@ import {
   InputAction,
   inputSystem,
   PointerEvents,
-  YGAlign,
-  YGDisplay,
-  YGJustify,
   PointerEventType
 } from '@dcl/sdk/ecs'
 import { Vector3, Color4, Quaternion } from '@dcl/sdk/math'
@@ -30,9 +27,9 @@ export const uiComponent = () => (
       uiTransform={{
         width: '100%',
         height: '20%',
-        justifyContent: YGJustify.YGJ_CENTER,
-        alignItems: YGAlign.YGA_CENTER,
-        display: YGDisplay.YGD_FLEX
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex'
       }}
     >
       <Label
@@ -45,9 +42,9 @@ export const uiComponent = () => (
       uiTransform={{
         width: '100%',
         height: '20%',
-        justifyContent: YGJustify.YGJ_CENTER,
-        alignItems: YGAlign.YGA_CENTER,
-        display: YGDisplay.YGD_FLEX
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex'
       }}
     >
       <Label
@@ -60,9 +57,9 @@ export const uiComponent = () => (
       uiTransform={{
         width: '100%',
         height: '100px',
-        justifyContent: YGJustify.YGJ_CENTER,
-        alignItems: YGAlign.YGA_CENTER,
-        display: YGDisplay.YGD_FLEX
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex'
       }}
     >
       <Label

package/dist/playground-assets.d.ts

@@ -1,5 +1,10 @@
 import _m0 from 'protobufjs/minimal';
 
+/**
+ * @public
+ */
+export declare type AlignType = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around';
+
 export declare const AMOUNT_VERSION_AVAILABLE: number;
 
 export declare const Animator: AnimatorComponentDefinitionExtended;
@@ -1247,6 +1252,11 @@ export declare type DeleteEntityMessageBody = {
     entityId: Entity;
 };
 
+/**
+ * @public
+ */
+export declare type DisplayType = 'flex' | 'none';
+
 /**
  * @public
  */
@@ -1369,6 +1379,16 @@ export declare type ExcludeUndefined<T> = {
  */
 export declare const executeTask: (task: Task<unknown>) => void;
 
+/**
+ * @public
+ */
+export declare type FlexDirectionType = 'row' | 'column' | 'column-reverse' | 'row-reverse';
+
+/**
+ * @public
+ */
+export declare type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
+
 /** @public */
 export declare type FloatArray = number[];
 
@@ -1810,12 +1830,17 @@ export declare namespace JSX {
     }
 }
 
+/**
+ * @public
+ */
+export declare type JustifyType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+
 export declare type Key = number | string;
 
 /**
  * @public
  */
-export declare function Label(props: EntityPropTypes & UiTextProps): ReactEcs.JSX.Element;
+export declare function Label(props: EntityPropTypes & UiLabelProps): ReactEcs.JSX.Element;
 
 export declare type Listeners = {
     onMouseDown?: Callback;
@@ -2865,6 +2890,11 @@ export declare const onVideoEvent: Observable<{
     totalVideoLength: number;
 }>;
 
+/**
+ * @public
+ */
+export declare type OverflowType = 'hidden' | 'scroll' | 'visible';
+
 export declare interface PBAnimationState {
     name: string;
     clip: string;
@@ -3893,6 +3923,11 @@ export declare type Position = {
     left: PositionUnit;
 };
 
+/**
+ * @public
+ */
+export declare type PositionType = 'absolute' | 'relative';
+
 export declare type PositionUnit = `${number}px` | `${number}%` | number;
 
 export declare type PutComponentMessage = CrdtMessageHeader & PutComponentMessageBody;
@@ -4517,6 +4552,11 @@ export declare const enum TextAlignMode {
     TAM_BOTTOM_RIGHT = 8
 }
 
+/**
+ * @public
+ */
+export declare type TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
 /** @public */
 export declare const TextShape: ComponentDefinition<PBTextShape>;
 
@@ -4542,6 +4582,11 @@ export declare const enum TextureFilterMode {
     TFM_TRILINEAR = 2
 }
 
+/**
+ * @public
+ */
+export declare type TextureFilterType = 'point' | 'bi-linear' | 'tri-linear';
+
 /**
  * @public
  */
@@ -4556,6 +4601,22 @@ export declare type TextureHelper = {
     Avatar: (avatarTexture: AvatarTexture) => TextureUnion;
 };
 
+/**
+ * @public
+ * NINE_SLICES - https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html (Slicing section)
+ * https://forum.unity.com/threads/how-does-slicing-in-ui-tookkit-works.1235863/
+ * https://docs.unity3d.com/Manual/9SliceSprites.html
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
+
+ * CENTER - CENTER enables the texture to be rendered centered in relation to the
+ * element. If the element is smaller than the texture then the background
+ * should use the element as stencil to cut off the out-of-bounds area
+
+ * STRETCH - STRETCH enables the texture to cover all the area of the container,
+ * adopting its aspect ratio.
+ */
+export declare type TextureMode = 'nine-slices' | 'center' | 'stretch';
+
 export declare interface TextureUnion {
     tex?: {
         $case: "texture";
@@ -4581,6 +4642,11 @@ export declare const enum TextureWrapMode {
     TWM_MIRROR_ONCE = 3
 }
 
+/**
+ * @public
+ */
+export declare type TextureWrapType = 'repeat' | 'clamp' | 'mirror' | 'mirror-once';
+
 /**
  * Constant used to convert a value to gamma space
  * @public
@@ -4650,7 +4716,11 @@ export declare type TransportMessage = Omit<ReceiveMessage, 'data'>;
  * @public
  */
 export declare type UiAvatarTexture = {
-    avatarTexture?: AvatarTexture;
+    avatarTexture?: {
+        userId: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
 
 /** @public */
@@ -4659,12 +4729,17 @@ export declare const UiBackground: ComponentDefinition<PBUiBackground>;
 /**
  * @public
  */
-export declare type UiBackgroundProps = Partial<Omit<PBUiBackground, 'texture'>> & UiTextureUnion;
+export declare type UiBackgroundProps = {
+    color?: PBColor4 | undefined;
+    textureMode?: TextureMode;
+    textureSlices?: BorderRect | undefined;
+    uvs?: number[];
+} & UiTextureUnion;
 
 /**
  * @public
  */
-export declare type UiButtonProps = PBUiText & {
+export declare type UiButtonProps = UiLabelProps & {
     type?: 'primary' | 'secondary';
 };
 
@@ -4676,8 +4751,10 @@ export declare const UiDropdown: ComponentDefinition<PBUiDropdown>;
 /**
  * @public
  */
-export declare type UiDropdownProps = Partial<PBUiDropdown> & {
+export declare type UiDropdownProps = Partial<Omit<PBUiDropdown, 'textAlign' | 'font'>> & {
     onChange?(value: number): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };
 
 /** @public */
@@ -4688,19 +4765,36 @@ export declare const UiDropdownResult: ComponentDefinition<PBUiDropdownResult>;
  */
 export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
 
+/**
+ * @public
+ */
+export declare type UiFontType = 'sans-serif' | 'serif' | 'monospace';
+
 /** @public */
 export declare const UiInput: ComponentDefinition<PBUiInput>;
 
 /**
  * @public
  */
-export declare type UiInputProps = PBUiInput & {
+export declare type UiInputProps = Omit<PBUiInput, 'font' | 'textAlign'> & {
     onChange?(value: string): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };
 
 /** @public */
 export declare const UiInputResult: ComponentDefinition<PBUiInputResult>;
 
+/**
+ * @public
+ */
+export declare type UiLabelProps = Omit<PBUiText, 'textAlign' | 'font'> & {
+    /** default='middle-center' */
+    textAlign?: TextAlignType | undefined;
+    /** default='sans-serif' */
+    font?: UiFontType | undefined;
+};
+
 export declare type Uint32 = number;
 
 /**
@@ -4711,16 +4805,15 @@ export declare type uint32 = number;
 /** @public */
 export declare const UiText: ComponentDefinition<PBUiText>;
 
-/**
- * @public
- */
-export declare type UiTextProps = PBUiText;
-
 /**
  * @public
  */
 export declare type UiTexture = {
-    texture?: Texture;
+    texture?: {
+        src: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
 
 /**
@@ -4735,14 +4828,14 @@ export declare const UiTransform: ComponentDefinition<PBUiTransform>;
  * @public
  */
 export declare interface UiTransformProps {
-    display?: YGDisplay;
+    display?: DisplayType;
     flex?: number;
-    justifyContent?: YGJustify;
-    positionType?: YGPositionType;
-    alignItems?: YGAlign;
-    alignSelf?: YGAlign;
-    alignContent?: YGAlign;
-    flexDirection?: YGFlexDirection;
+    justifyContent?: JustifyType;
+    positionType?: PositionType;
+    alignItems?: AlignType;
+    alignSelf?: AlignType;
+    alignContent?: AlignType;
+    flexDirection?: FlexDirectionType;
     position?: Partial<Position>;
     padding?: Partial<Position>;
     margin?: Partial<Position>;
@@ -4752,11 +4845,11 @@ export declare interface UiTransformProps {
     maxWidth?: PositionUnit;
     minHeight?: PositionUnit;
     maxHeight?: PositionUnit;
-    flexWrap?: YGWrap;
+    flexWrap?: FlexWrapType;
     flexBasis?: number;
     flexGrow?: number;
     flexShrink?: number;
-    overflow?: YGOverflow;
+    overflow?: OverflowType;
 }
 
 /**