diff --git a/package.json b/package.json index b274221..9b16e88 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "jsx-in-ttpg", "license": "UNLICENSE", - "version": "1.1.3", + "version": "1.1.4", "scripts": { "build": "tsup src/index.ts --format cjs,esm --dts --no-splitting", "clean": "rm -rf ./dist", diff --git a/src/index.ts b/src/index.ts index 09848d2..a87ada3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,8 +24,8 @@ import { Player, TextJustification, VerticalAlignment, - UIElement, - ScreenUIElement, + WebBrowser, + WidgetSwitcher, } from "@tabletop-playground/api"; type CanvasChild = { @@ -42,7 +42,7 @@ type BoxChild = { weight?: number; }; -export const useRef = (initial: T | null = null): RefHandle => { +export const useRef = (initial: T | null = null): RefHandle => { const ref = { current: initial, clear: () => { @@ -71,8 +71,8 @@ export const render = (children: JSXNode): Widget => { type ArrayOr = T | T[]; export type JSXNode = JSX.Element; -export type RefHandle = { current: T | null; clear: () => void }; -export type RefObject = { current: T | null }; +export type RefHandle = { current: T | null; clear: () => void }; +export type RefObject = { current: T | null }; type PossibleChildren = JSX.Element | ArrayOr | ArrayOr> | ArrayOr> | TextNode; export type TextNode = ArrayOr; @@ -115,6 +115,8 @@ export type JsxInTTPGElement = T extends SelectionBox ? JSX.IntrinsicElements["select"] : T extends Slider ? JSX.IntrinsicElements["slider"] : T extends TextBox ? JSX.IntrinsicElements["input"] : + T extends WebBrowser ? JSX.IntrinsicElements["browser"] : + T extends WidgetSwitcher ? JSX.IntrinsicElements["switch"] : never; const ensureWidgets = (...children: PossibleChildren[]): Widget[] => { @@ -252,6 +254,10 @@ const createElement = (tag: T, attr return sliderElement(attrs as JSX.IntrinsicElements["slider"]); case "input": return inputElement(attrs as JSX.IntrinsicElements["input"]); + case "browser": + return browserElement(attrs as JSX.IntrinsicElements["browser"]); + case "switch": + return switchElement(attrs as JSX.IntrinsicElements["switch"], ensureWidgets(...children)); } }; @@ -626,6 +632,40 @@ const inputElement = (attrs: JSX.IntrinsicElements["input"]) => { return element; }; +const browserElement = (attrs: JSX.IntrinsicElements["browser"]) => { + const element = new WebBrowser(); + doCommon(element, attrs); + if (attrs.onChange) { + element.onURLChanged.add(attrs.onChange); + } + if (attrs.onLoadFinish) { + element.onLoadFinished.add(attrs.onLoadFinish); + } + if (attrs.onLoadStart) { + element.onLoadStarted.add(attrs.onLoadStart); + } + if (attrs.url) { + element.setURL(attrs.url); + } + return element; +}; + +const switchElement = (attrs: JSX.IntrinsicElements["switch"], children?: Widget[]) => { + const element = new WidgetSwitcher(); + doCommon(element, attrs); + if (attrs.value) { + if (attrs.value instanceof Widget) { + element.setActiveWidget(attrs.value); + } else { + element.setActiveIndex(attrs.value); + } + } + if (children) { + children.forEach(element.addChild); + } + return element; +}; + const INPUT_TYPES = { string: 0, float: 1, @@ -932,6 +972,23 @@ declare global { fontPackage?: string; } ); + browser: { + ref?: { current: WebBrowser | null }; + disabled?: boolean; + hidden?: boolean; + onLoadStart?: () => void; + onLoadFinish?: () => void; + onChange?: () => void; + url?: string; + children?: never; + }; + switch: { + ref?: { current: WidgetSwitcher | null }; + disabled?: boolean; + hidden?: boolean; + children?: ArrayOr; + value?: number | Widget; + }; } } }