Merge pull request #17 from dapp-craft/main

Adding support for 'auto' text size

README.md

@@ -599,21 +599,22 @@ The player advances through each entry by clicking the mouse button. Once the la
 The script must adhere to the following schema:
 
 ```ts
-class Dialog {
-	text: string
-	name?: string
-	fontSize?: number
-	offsetX?: number
-	offsetY?: number
-	typeSpeed?: number
-	isEndOfDialog?: boolean
-	triggeredByNext?: () => void
-	portrait?: ImageData
-	image?: ImageData
-	isQuestion?: boolean
-	buttons?: ButtonData[]
-	audio?: string
-	skipable?: boolean
+class  Dialog {
+  text: string
+  windowHeight?: 'auto' | number
+  name?: string
+  fontSize?: number
+  offsetX?: number
+  offsetY?: number
+  typeSpeed?: number
+  isEndOfDialog?: boolean
+  triggeredByNext?: () =>  void
+  portrait?: ImageData
+  image?: ImageData
+  isQuestion?:boolean
+  buttons?: ButtonData[]
+  audio?: string
+  skipable?: boolean
 }
 ```
 
@@ -651,6 +652,8 @@ When on a question entry, you must provide at least the following for each butto
 
 - `goToDialog`: _(number | string)_ The index or name of the next dialog entry to display when activated.
 
+- `size`: _('auto' | number)_ The size of the button.
+
 > TIP: It's always better to refer to an entry by name, since the array index might shift if you add more entries and it can get hard to keep track of these references.
 
 You can also set the following:

demo/.dclignore

@@ -0,0 +1,20 @@
+.*
+bin/*.map
+package-lock.json
+yarn-lock.json
+build.json
+export
+tsconfig.json
+tslint.json
+node_modules
+*.ts
+*.tsx
+.vscode
+Dockerfile
+dist
+README.md
+*.blend
+*.fbx
+*.zip
+*.rar
+src

demo/.gitignore

@@ -0,0 +1,9 @@
+package-lock.json
+*.js
+node_modules
+bin/
+.DS_Store
+**/.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

demo/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "dcl-project",
+  "version": "1.0.0",
+  "description": "SDK7 Template scene",
+  "scripts": {
+    "start": "sdk-commands start",
+    "deploy": "sdk-commands deploy",
+    "build": "sdk-commands build",
+    "upgrade-sdk": "npm install --save-dev @dcl/sdk@latest",
+    "upgrade-sdk:next": "npm install --save-dev @dcl/sdk@next",
+    "link-sdk": "cd node_modules/@dcl/sdk && npm link && cd ../js-runtime && npm link"
+  },
+  "devDependencies": {
+    "@dcl/js-runtime": "7.3.36",
+    "@dcl/sdk": "latest",
+    "@dcl/asset-packs": "latest"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=6.0.0"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120,
+    "trailingComma": "none"
+  }
+}

demo/scene.json

@@ -0,0 +1,53 @@
+{
+	"ecs7": true,
+	"runtimeVersion": "7",
+	"display": {
+		"title": "SDK7 Scene Template",
+		"description": "template scene with SDK7",
+		"navmapThumbnail": "images/scene-thumbnail.png",
+		"favicon": "favicon_asset"
+	},
+	"owner": "",
+	"contact": {
+		"name": "SDK",
+		"email": ""
+	},
+	"main": "bin/index.js",
+	"tags": [],
+	"scene": {
+		"parcels": [
+			"0,0"
+		],
+		"base": "0,0"
+	},
+	"spawnPoints": [
+		{
+			"name": "spawn1",
+			"default": true,
+			"position": {
+				"x": [
+					0,
+					3
+				],
+				"y": [
+					0,
+					0
+				],
+				"z": [
+					0,
+					3
+				]
+			},
+			"cameraTarget": {
+				"x": 8,
+				"y": 1,
+				"z": 8
+			}
+		}
+	],
+	"requiredPermissions": [
+		"ALLOW_TO_TRIGGER_AVATAR_EMOTE",
+		"ALLOW_TO_MOVE_PLAYER_INSIDE_SCENE"
+	],
+	"featureToggles": {}
+}

demo/src/index.ts

@@ -0,0 +1,34 @@
+import * as npc from 'dcl-npc-toolkit'
+import { MeshCollider } from '@dcl/sdk/ecs'
+import { Quaternion, Vector3 } from '@dcl/sdk/math'
+import { setupUi } from './uiComp'
+
+export function main() {
+
+    setupUi()
+
+    let myNPC = npc.create(
+        { position: Vector3.create(8, 1, 8), rotation: Quaternion.Zero(), scale: Vector3.create(1, 1, 1) },
+        {
+            type: npc.NPCType.CUSTOM,
+            model: 'models/hi.glb',
+            portrait: { path: 'images/hi.png', height: 220, width: 220 },
+            onActivate: () => {
+                npc.talk(myNPC, [
+                    {
+                        text: `Quest Overview: In the mystical realm of Eldoria, a sinister force has swept through the winter lands, freezing the hearts of magical creatures and stealing the essence of Frostfire Crystals - the source of warmth and magic. As a valiant hero, you are called upon to embark on a quest to restore balance and save the fantastical festivities. `,
+                        windowHeight: 'auto',
+                        isQuestion: true,
+                        buttons: [
+                            { label: `Restore magic!`, goToDialog: 0, size: 'auto'},
+                            { label: `Crystal theft`, goToDialog: 0, size: 'auto'},
+                            { label: `Icy crisis`, goToDialog: 0, size: 100},
+                            { label: `Heroes darkness.`, goToDialog: 0 },
+                        ],
+                    }
+                ])
+            }
+        }
+    )
+    MeshCollider.setBox(myNPC)
+}

demo/src/uiComp.tsx

@@ -0,0 +1,18 @@
+import ReactEcs, { ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
+import * as npc from 'dcl-npc-toolkit'
+
+export function setupUi() {
+  ReactEcsRenderer.setUiRenderer(uiComponent)
+}
+
+const uiComponent = () => (
+  <UiEntity
+    uiTransform={{
+      width: '100%',
+      height: '100%',
+    }}
+  >
+    <npc.NpcUtilsUi/>
+  </UiEntity>
+
+)

demo/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "strict": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "extends": "@dcl/sdk/types/tsconfig.ecs7.json"
+}

package.json

@@ -11,17 +11,24 @@
     "type": "git",
     "url": "https://github.com/decentraland-scenes/dcl-npc-toolkit.git"
   },
-  "keywords": ["decentraland", "sdk7", "sdk 7", "sdk utils", "npc", "sdk library"],
+  "keywords": [
+    "decentraland",
+    "sdk7",
+    "sdk 7",
+    "sdk utils",
+    "npc",
+    "sdk library"
+  ],
   "author": "Decentraland",
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/decentraland-scenes/dcl-npc-toolkit/issues"
   },
   "homepage": "https://github.com/decentraland-scenes/dcl-npc-toolkit#readme",
   "devDependencies": {
+    "@dcl-sdk/utils": "latest",
     "@dcl/sdk": "latest",
-    "typescript": "^5.0.2",
-    "@dcl-sdk/utils": "latest"
+    "typescript": "^5.0.2"
   },
   "files": [
     "dist"

src/dialog.ts

@@ -187,14 +187,53 @@ export function getButtonText(button:number){
     return text
 }
 
+export function getbuttonSize(button:number) {
+  let ButtonSize: number | string | undefined
+  if (activeNPC != 0 && npcDialogComponent.has(activeNPC)) {
+      let dialogData = npcDialogComponent.get(activeNPC);
+      if (dialogData.isQuestion && dialogData.buttons > button) {
+          if (dialogData.script[dialogData.index].buttons[button].size !== undefined) {
+              ButtonSize = dialogData.script[dialogData.index].buttons[button]?.size;
+          }
+      }
+  }
+  return ButtonSize
+}
+
 export function getFontSize(){
     return !isActiveNpcSet() ? 22 : npcDialogComponent.get(activeNPC).fontSize
 }
 
+export function getButtonFontSize(button:number){
+  let ButtonFontSize: number = 0
+  if (activeNPC != 0 && npcDialogComponent.has(activeNPC)) {
+      let dialogData = npcDialogComponent.get(activeNPC);
+      if (dialogData.isQuestion && dialogData.buttons > button) {
+          if (dialogData.script[dialogData.index].buttons[button].fontSize !== undefined) {
+            ButtonFontSize = dialogData.script[dialogData.index].buttons[button]?.fontSize;
+          } else {ButtonFontSize = 16}
+      }
+  }
+  return ButtonFontSize
+}
+
 export function displayDialog(){
     return !isActiveNpcSet() ? false :  npcDialogComponent.get(activeNPC).visible
 }
 
+export function getWindowHeight() {
+  let windowHeights: number | string | undefined
+  if (activeNPC != 0 && npcDialogComponent.has(activeNPC)) {
+      let dialogData = npcDialogComponent.get(activeNPC);
+      if (dialogData.isQuestion) {
+          if (dialogData.script[dialogData.index].windowHeight !== undefined) {
+            windowHeights = dialogData.script[dialogData.index]?.windowHeight;
+          }
+      }
+  }
+  return windowHeights
+}
+
 export function displayButton(button:number){
     return !isActiveNpcSet() ? false :  npcDialogComponent.get(activeNPC).isQuestion && npcDialogComponent.get(activeNPC).buttons >= button
 }
@@ -658,4 +697,4 @@ while(dialogData.visibleChars < dialogData.fullText.length && dialogData.fullTex
   dialogData.visibleChars+=1
 }
 return
-}
+}

src/types.ts

@@ -23,6 +23,7 @@ import { Vector3 } from '@dcl/sdk/math'
  */
 export type Dialog = {
   text: string
+  windowHeight?: 'auto' | number
   name?: string
   fontSize?: number
   offsetX?: number
@@ -80,6 +81,7 @@ export type ButtonData = {
   fontSize?: number
   offsetX?: number
   offsetY?: number
+  size?: number | 'auto'
 }
 
 export enum ButtonStyles {