@dcl-regenesislabs/web-editor 0.0.0-stage → 0.1.0

package/prefabs/admin-tools/scripts/tabs/video/ui.tsx

@@ -0,0 +1,243 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { Key, UiBackgroundProps, UiTransformProps } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+
+export const COLORS = {
+  white: Color4.White(),
+  black: Color4.Black(),
+  offWhite: Color4.fromHexString('#FCFCFC'),
+  gray: Color4.create(160 / 255, 155 / 255, 168 / 255, 1),
+  dim: Color4.fromHexString('#FFFFFFB2'),
+  surface: Color4.fromHexString('#43404A'),
+  line: Color4.create(1, 1, 1, 0.12),
+  accent: Color4.fromHexString('#00D3FF'),
+  success: Color4.fromHexString('#34CE77'),
+  successMuted: Color4.fromHexString('#274431'),
+  danger: Color4.fromHexString('#FB3B3B'),
+  transparent: Color4.create(0, 0, 0, 0)
+}
+
+export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'success' | 'danger'
+
+function background(variant: ButtonVariant, disabled: boolean): Color4.Mutable {
+  if (disabled && variant === 'success') return COLORS.successMuted
+  if (variant === 'primary') return COLORS.white
+  if (variant === 'success') return COLORS.success
+  if (variant === 'secondary') return COLORS.surface
+  return COLORS.transparent
+}
+
+function foreground(variant: ButtonVariant, disabled: boolean): Color4.Mutable {
+  if (disabled) return COLORS.gray
+  if (variant === 'primary' || variant === 'success') return COLORS.black
+  if (variant === 'danger') return COLORS.danger
+  return COLORS.white
+}
+
+export function Button(props: {
+  key?: Key
+  label?: string
+  icon?: string
+  iconRight?: string
+  variant?: ButtonVariant
+  disabled?: boolean
+  fontSize?: number
+  onClick: () => void
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  const variant = props.variant ?? 'secondary'
+  const disabled = props.disabled === true
+  const tint = foreground(variant, disabled)
+  const iconStyle: UiBackgroundProps = { textureMode: 'stretch', color: tint }
+  return (
+    <UiEntity
+      uiTransform={{
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 8,
+        padding: { left: 12, right: 12 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: background(variant, disabled) }}
+      onMouseDown={() => {
+        if (!disabled) props.onClick()
+      }}
+    >
+      {props.icon !== undefined ? (
+        <UiEntity
+          uiTransform={{ width: 22, height: 22, margin: { right: props.label === undefined ? 0 : 8 } }}
+          uiBackground={{ ...iconStyle, texture: { src: props.icon } }}
+        />
+      ) : null}
+      {props.label !== undefined ? (
+        <Label value={`<b>${props.label}</b>`} fontSize={props.fontSize ?? 16} color={tint} />
+      ) : null}
+      {props.iconRight !== undefined ? (
+        <UiEntity
+          uiTransform={{ width: 20, height: 20, margin: { left: 8 } }}
+          uiBackground={{ ...iconStyle, texture: { src: props.iconRight } }}
+        />
+      ) : null}
+    </UiEntity>
+  )
+}
+
+export function SectionLabel(props: {
+  text: string
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  return (
+    <Label
+      value={`<b>${props.text}</b>`}
+      fontSize={16}
+      color={COLORS.white}
+      textAlign="middle-left"
+      uiTransform={{ width: '100%', height: 24, margin: { top: 12, bottom: 4 }, ...props.uiTransform }}
+    />
+  )
+}
+
+export function Hint(props: {
+  text: string
+  color?: Color4.Mutable
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  return (
+    <Label
+      value={props.text}
+      fontSize={14}
+      color={props.color ?? COLORS.gray}
+      textAlign="top-left"
+      textWrap="wrap"
+      uiTransform={{ width: '100%', height: 'auto', ...props.uiTransform }}
+    />
+  )
+}
+
+export function Row(props: {
+  children?: ReactEcs.JSX.ReactNode
+  uiTransform?: UiTransformProps
+  uiBackground?: UiBackgroundProps
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 'auto',
+        flexDirection: 'row',
+        alignItems: 'center',
+        ...props.uiTransform
+      }}
+      uiBackground={props.uiBackground}
+    >
+      {props.children}
+    </UiEntity>
+  )
+}
+
+export function Column(props: {
+  children?: ReactEcs.JSX.ReactNode
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity uiTransform={{ width: '100%', flexDirection: 'column', ...props.uiTransform }}>
+      {props.children}
+    </UiEntity>
+  )
+}
+
+export function Divider(): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{ width: '100%', height: 1, margin: { top: 10, bottom: 10 } }}
+      uiBackground={{ color: COLORS.line }}
+    />
+  )
+}
+
+export function ErrorNote(props: { icon: string; text: string }): ReactEcs.JSX.Element {
+  return (
+    <Row uiTransform={{ margin: { top: 8 } }}>
+      <UiEntity
+        uiTransform={{ width: 16, height: 16, margin: { right: 6 } }}
+        uiBackground={{ textureMode: 'stretch', texture: { src: props.icon }, color: COLORS.danger }}
+      />
+      <Hint text={props.text} color={COLORS.danger} uiTransform={{ width: '90%' }} />
+    </Row>
+  )
+}
+
+export function IconLink(props: { icon: string; onClick: () => void }): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{ width: 22, height: 22 }}
+      uiBackground={{ textureMode: 'stretch', texture: { src: props.icon }, color: COLORS.white }}
+      onMouseDown={props.onClick}
+    />
+  )
+}
+
+export function SubHeader(props: {
+  icon: string
+  title: string
+  helpIcon?: string
+  onHelp?: () => void
+}): ReactEcs.JSX.Element {
+  return (
+    <Row uiTransform={{ justifyContent: 'space-between', margin: { bottom: 8 } }}>
+      <Row uiTransform={{ width: 'auto' }}>
+        <UiEntity
+          uiTransform={{ width: 24, height: 24, margin: { right: 8 } }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: props.icon },
+            color: COLORS.white
+          }}
+        />
+        <Label value={`<b>${props.title}</b>`} fontSize={18} color={COLORS.white} />
+      </Row>
+      {props.helpIcon !== undefined && props.onHelp !== undefined ? (
+        <IconLink icon={props.helpIcon} onClick={props.onHelp} />
+      ) : null}
+    </Row>
+  )
+}
+
+export function ReadOnlyField(props: {
+  value: string
+  actionLabel: string
+  onAction: () => void
+  children?: ReactEcs.JSX.ReactNode
+}): ReactEcs.JSX.Element {
+  return (
+    <Row
+      uiTransform={{
+        height: 42,
+        borderRadius: 8,
+        justifyContent: 'space-between',
+        margin: { top: 6, bottom: 6 }
+      }}
+      uiBackground={{ color: COLORS.offWhite }}
+    >
+      <Label
+        value={`<b>${props.value}</b>`}
+        fontSize={15}
+        color={COLORS.gray}
+        textAlign="middle-left"
+        uiTransform={{ margin: { left: 12 }, flexShrink: 1 }}
+      />
+      <Row uiTransform={{ width: 'auto', flexShrink: 0 }}>
+        {props.children}
+        <Button
+          label={props.actionLabel}
+          variant="text"
+          fontSize={15}
+          uiTransform={{ height: 32, margin: { right: 6 } }}
+          onClick={props.onAction}
+        />
+      </Row>
+    </Row>
+  )
+}

package/prefabs/admin-tools/scripts/types.ts

@@ -0,0 +1,46 @@
+// The contract between the panel shell (admin.tsx) and the tab components in
+// tabs/. Every tab is a plain function of TabProps returning react-ecs JSX; the
+// shell owns the tab bar, mounts exactly one tab at a time and passes the same
+// props to all of them. Adding a tab means adding a file that exports a TabSpec
+// and listing it in admin.tsx's TABS array — nothing else.
+import type { Entity } from '@dcl/sdk/ecs'
+import type ReactEcs from '@dcl/sdk/react-ecs'
+import type { AdminToolsValue } from './components'
+import type { AdminIcons } from './icons'
+import type { AdminMessageBus } from './message-bus'
+import type { AdminState, TabId } from './state'
+
+export interface AdminPlayer {
+  userId: string
+  name: string
+}
+
+export interface TabProps {
+  /** entity the admin prefab is attached to; owns TextAnnouncements + VideoControlState */
+  self: Entity
+  /** live asset-packs::AdminTools value authored in the inspector */
+  config: AdminToolsValue
+  /** mutable panel state — mutate in place, the next frame re-renders */
+  state: AdminState
+  /** prefab-relative texture paths */
+  icons: AdminIcons
+  /** the placed prefab's folder ('' when the scene root is the prefab folder) */
+  assetBase: string
+  /** wallet-validated command bus; null before initialisation completes */
+  bus: AdminMessageBus | null
+  /** the local player, or null while the profile is still loading */
+  player: AdminPlayer | null
+}
+
+export type TabComponent = (props: TabProps) => ReactEcs.JSX.Element | null
+
+export interface TabSpec {
+  id: TabId
+  /** tab-bar button texture; the panel header is the tab's own to render */
+  icon: keyof AdminIcons
+  /** whether the creator switched this control on in the inspector */
+  isEnabled: (config: AdminToolsValue) => boolean
+  /** hide the tab in local preview (moderation needs a signed identity) */
+  hiddenInPreview?: boolean
+  Component: TabComponent
+}

package/prefabs/admin-tools/scripts/ui.tsx

@@ -0,0 +1,122 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { Key, UiBackgroundProps, UiTransformProps } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+
+export const PANEL_BACKGROUND = Color4.create(0, 0, 0, 0.75)
+export const PANEL_WIDTH = 500
+export const TEXT_DIM = Color4.create(160 / 255, 155 / 255, 168 / 255, 1)
+
+export function Card(props: {
+  children?: ReactEcs.JSX.ReactNode
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        borderRadius: 12,
+        flexDirection: 'column',
+        margin: { top: 10 },
+        padding: { top: 24, right: 24, bottom: 24, left: 24 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: PANEL_BACKGROUND }}
+    >
+      {props.children}
+    </UiEntity>
+  )
+}
+
+export function CardHeader(props: { icon: string; title: string }): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 'auto',
+        margin: { bottom: 16 }
+      }}
+    >
+      <UiEntity
+        uiTransform={{ width: 30, height: 30 }}
+        uiBackground={{ textureMode: 'stretch', texture: { src: props.icon } }}
+      />
+      <Label
+        value={`<b>${props.title}</b>`}
+        fontSize={22}
+        color={Color4.White()}
+        textAlign="middle-left"
+        uiTransform={{ margin: { left: 10 } }}
+      />
+    </UiEntity>
+  )
+}
+
+export function IconButton(props: {
+  key?: Key
+  icon: string
+  active?: boolean
+  onClick: () => void
+  uiTransform?: UiTransformProps
+  iconBackground?: UiBackgroundProps
+}): ReactEcs.JSX.Element {
+  const active = props.active === true
+  return (
+    <UiEntity
+      uiTransform={{
+        width: 49,
+        height: 42,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        margin: { right: 8 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: active ? Color4.White() : Color4.create(0, 0, 0, 0) }}
+      onMouseDown={props.onClick}
+    >
+      <UiEntity
+        uiTransform={{ width: '70%', height: '70%' }}
+        uiBackground={{
+          textureMode: 'stretch',
+          texture: { src: props.icon },
+          color: active ? Color4.Black() : Color4.White(),
+          ...props.iconBackground
+        }}
+      />
+    </UiEntity>
+  )
+}
+
+export function TextButton(props: {
+  label: string
+  disabled?: boolean
+  onClick: () => void
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  const disabled = props.disabled === true
+  return (
+    <UiEntity
+      uiTransform={{
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        borderWidth: 2,
+        borderColor: disabled ? Color4.create(50 / 255, 50 / 255, 50 / 255, 1) : Color4.White(),
+        padding: { left: 14, right: 14 },
+        margin: { right: 8 },
+        ...props.uiTransform
+      }}
+      onMouseDown={() => {
+        if (!disabled) props.onClick()
+      }}
+    >
+      <Label
+        value={`<b>${props.label}</b>`}
+        fontSize={16}
+        color={disabled ? Color4.Gray() : Color4.White()}
+      />
+    </UiEntity>
+  )
+}

package/prefabs/announcer/ai.md

@@ -0,0 +1,76 @@
+---
+prefab: announcer
+claims-messages: announce
+---
+
+# Announcer — AI guide
+
+One line on every player's client, for a few seconds. The server says it; every
+client shows it.
+
+The project copy is normally custom/announcer/ — check what is on disk, a second
+copy is custom/announcer_2/.
+
+## When to use
+
+For moments: "The flag is taken", "Round over", "A climber made it". Place ONE
+anywhere; it is invisible. A second copy is a no-op (the first one owns the
+scene's UI).
+
+Do NOT use it for anything a late joiner must see — a score, a carrier, a
+countdown. Those are facts and belong in `game.state` with a board or a sign
+reading them.
+
+## API
+
+There is nothing to import. The channel is one broadcast name every script
+already has:
+
+    game.broadcast('announce', { text: 'Round over — the tower is rebuilt' })
+
+- WHICH SIDE: the call goes on the SERVER, inside the `if (isServer())` branch —
+  in a `game.onRequest`, `game.onRoundStart`, `game.every` or `game.onEnterArea`
+  handler. A broadcast from a client reaches nobody.
+- `game.broadcast('announce', { text }, player)` narrows it to one player — only
+  that player's client receives it.
+- The payload is `{ text }`; a plain string works too. Longer than 140 characters
+  is trimmed, and empty text shows nothing.
+- Do NOT register your own `game.onBroadcast('announce', …)`. Broadcast listeners
+  are many-per-name, so yours would not replace this prefab's client-side one —
+  it would run beside it and the line would be shown twice.
+
+Params of the prefab's script — set them in the placePrefab request:
+
+- `holdSeconds`: how long a message stays up (default 4, max 60).
+- `fontSize`: text size at 1920×1080 (default 32).
+
+## The scene's UI is single-owner
+
+Only one script per scene may draw UI. This prefab claims it at start and says so
+in the console if something else (Admin Tools, your own panel) already has it —
+in that case the announcements do not render. If you write a UI panel of your
+own, draw the announcement inside it instead of placing this prefab.
+
+## Do / Don't
+
+- DON'T announce from the client half of a script. `game.broadcast` is a server
+  verb; a client that calls it reaches nobody, itself included.
+- DON'T announce the same thing every frame. Broadcast it once, where the
+  decision is made — and `update()` runs on the server too, so a broadcast there
+  fires ~41 times a second.
+- DO pair it with a board: the announcement is the moment, the board is the fact.
+
+## Example
+
+"Tell everyone when someone takes the flag": in the server branch that decides it,
+
+    start(): void {
+      if (isServer()) {
+        game.onRequest('takeFlag', (_data, player) => {
+          game.setState({ flag: { carrier: player } })
+          game.broadcast('announce', { text: 'The flag is taken!' })
+          return { ok: true }
+        })
+        return
+      }
+    }

package/prefabs/announcer/composite.json

@@ -0,0 +1,31 @@
+{
+  "version": 1,
+  "components": [
+    {
+      "name": "core-schema::Name",
+      "data": {
+        "0": {
+          "json": {
+            "value": "Announcer"
+          }
+        }
+      }
+    },
+    {
+      "name": "asset-packs::Script",
+      "data": {
+        "0": {
+          "json": {
+            "value": [
+              {
+                "path": "{assetPath}/scripts/announcer.tsx",
+                "priority": 0,
+                "layout": "{\"params\":{},\"actions\":[]}"
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}

package/prefabs/announcer/data.json

@@ -0,0 +1,35 @@
+{
+  "id": "fb41d8d1-b842-437d-a830-f38379e74743",
+  "name": "Announcer",
+  "description": "Shows a message on every player's client — it fades, so lasting facts belong on a board. Works with: Game Flow.",
+  "category": "custom",
+  "group": "Multiplayer Server",
+  "tags": [
+    "multiplayer",
+    "server",
+    "announce",
+    "message",
+    "toast",
+    "ui"
+  ],
+  "requiresSdk": "auth-server",
+  "drivenBy": {
+    "rule": "This item shows nothing by itself — the server sends a line, and every player's client shows it for a few seconds.",
+    "code": "game.broadcast('announce', { text: 'Round over' })",
+    "next": "Press New script below and write that line inside the isServer() block it comes with — a third argument, the player, shows it on that one player's client only."
+  },
+  "version": "1.1.0",
+  "changelog": [
+    {
+      "version": "1.0.0",
+      "notes": "Initial release: server code anywhere in the scene calls game.broadcast('announce', { text }) and every player's client shows the line for a few seconds."
+    },
+    {
+      "version": "1.1.0",
+      "notes": "The placed item's Script card now shows the broadcast line that makes it speak, under its hold seconds and font size."
+    }
+  ],
+  "origin": {
+    "source": "builtin"
+  }
+}

package/prefabs/announcer/scripts/announcer.tsx

@@ -0,0 +1,79 @@
+// The server says something; every player sees it. One line, centred near the
+// top, gone a few seconds later.
+//
+// This is the listening half of the ordinary broadcast pair: server code
+// anywhere in the scene calls game.broadcast('announce', { text }) and this
+// piece draws it for every player. It is a moment, not a fact — a player who
+// arrives afterwards never sees it, which is why standings belong in game.state.
+import ReactEcs, { Label, ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+import type { Entity } from '@dcl/sdk/ecs'
+import { isServer } from '@dcl/sdk/network'
+import { game } from '~runtime/game'
+import { clampHold, toastText } from './pure/toast'
+
+const ANNOUNCE = 'announce'
+const VIRTUAL_CANVAS = { virtualWidth: 1920, virtualHeight: 1080 }
+const BACKDROP = Color4.create(0, 0, 0, 0.65)
+
+export class Announcer {
+  private text = ''
+  private leftS = 0
+
+  constructor(
+    public src: string,
+    public entity: Entity,
+    /** How long a message stays up. */
+    public holdSeconds: number = 4,
+    /** Text size at 1920×1080. */
+    public fontSize: number = 32
+  ) {}
+
+  start(): void {
+    if (isServer()) { return }
+    ReactEcsRenderer.addUiRenderer(this.entity, () => this.render(), VIRTUAL_CANVAS)
+    game.onBroadcast(ANNOUNCE, (data: unknown) => this.show(data))
+  }
+
+  update(dt: number): void {
+    if (isServer()) { return }
+    if (this.leftS <= 0) return
+    this.leftS -= dt
+    if (this.leftS <= 0) this.text = ''
+  }
+
+  private show(data: unknown): void {
+    const text = toastText(data)
+    if (text === null) return
+    this.text = text
+    this.leftS = clampHold(this.holdSeconds)
+  }
+
+  private render(): ReactEcs.JSX.Element | null {
+    if (this.text === '') return null
+    return (
+      <UiEntity
+        uiTransform={{
+          width: '100%',
+          height: '100%',
+          positionType: 'absolute',
+          alignItems: 'flex-start',
+          justifyContent: 'center'
+        }}
+      >
+        <UiEntity
+          uiTransform={{
+            margin: { top: 96 },
+            padding: { top: 12, bottom: 12, left: 28, right: 28 },
+            borderRadius: 12,
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+          uiBackground={{ color: BACKDROP }}
+        >
+          <Label value={this.text} fontSize={this.fontSize} color={Color4.White()} />
+        </UiEntity>
+      </UiEntity>
+    )
+  }
+}

package/prefabs/announcer/scripts/pure/toast.ts

@@ -0,0 +1,30 @@
+// The announcer's decisions, with no SDK and no I/O: what a message turns into,
+// and how long it stays. A message is a moment — the server says it once and it
+// fades, which is exactly why a player who joins afterwards never sees it.
+
+export const MAX_TEXT_CHARS = 140
+export const MIN_HOLD_S = 1
+export const MAX_HOLD_S = 60
+
+export function clampHold(seconds: number): number {
+  if (!Number.isFinite(seconds)) return 4
+  return Math.min(MAX_HOLD_S, Math.max(MIN_HOLD_S, Math.round(seconds)))
+}
+
+/**
+ * The line to show, or null when there is nothing sayable. Payloads come off the
+ * wire, so a missing field, a number, or a paragraph must all end somewhere
+ * predictable rather than in front of a player.
+ */
+export function toastText(data: unknown): string | null {
+  const value =
+    typeof data === 'string'
+      ? data
+      : typeof data === 'object' && data !== null
+        ? (data as Record<string, unknown>).text
+        : undefined
+  if (typeof value !== 'string') return null
+  const text = value.replace(/\s+/g, ' ').trim()
+  if (text === '') return null
+  return text.length > MAX_TEXT_CHARS ? `${text.slice(0, MAX_TEXT_CHARS - 1)}…` : text
+}