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

package/prefabs/rustic-square-stool/scripts/seat.ts

@@ -0,0 +1,191 @@
+// Sit on this seat: click a sit spot -> the avatar is placed on it facing forward
+// and a looping sitting emote plays; moving cancels the emote engine-side (the
+// same mechanism the Creator Hub's seat smart items and Genesis Plaza use — no
+// avatar attach). Spots are child entities named "Sit Spot…" carrying only a
+// Transform; this script gives them their collider and pointer event at runtime.
+// With no such children (the standalone Sit Spot prefab), the entity itself is
+// the spot.
+import {
+  ColliderLayer,
+  InputAction,
+  Material,
+  MeshCollider,
+  MeshRenderer,
+  Schemas,
+  Transform,
+  VisibilityComponent,
+  engine,
+  pointerEventsSystem,
+  type Entity,
+  type LastWriteWinElementSetComponentDefinition
+} from '@dcl/sdk/ecs'
+import { Quaternion, Vector3 } from '@dcl/sdk/math'
+import { isServer } from '@dcl/sdk/network'
+import { movePlayerTo, triggerEmote, triggerSceneEmote } from '~system/RestrictedActions'
+
+const SPOT_NAME_PREFIX = 'sit spot'
+const HOVER_TEXT = 'Sit Here'
+const MAX_DISTANCE = 6
+const EMOTE_DELAY_S = 0.25
+const SITTING_EMOTES = ['sittingChair1', 'sittingChair2']
+// emote .glb files bundled in this prefab's folder (Genesis Plaza-style custom
+// poses, played via triggerSceneEmote); empty = the predefined chair emotes
+const SCENE_EMOTES: string[] = []
+
+// the Plaza-style "you can sit here" hint: a small glowing dot floating over
+// each free spot, pulsing gently, shown only to nearby players
+const DOT_VISIBLE_DIST = 10
+const DOT_OCCUPIED_DIST = 0.9
+const DOT_HEIGHT = 0.55
+const DOT_SIZE = 0.09
+const DOT_PULSE = 0.25
+
+type NameValue = { value: string }
+type NameComponent = LastWriteWinElementSetComponentDefinition<NameValue>
+
+// Every placed seat prefab bundles its own copy of this script (prefab folders are
+// self-contained), so the component may already be defined by a sibling copy.
+function nameComponent(): NameComponent {
+  const existing = engine.getComponentOrNull('core-schema::Name')
+  if (existing !== null) return existing as NameComponent
+  return engine.defineComponent('core-schema::Name', { value: Schemas.String })
+}
+
+function isSpotName(name: unknown): boolean {
+  return typeof name === 'string' && name.toLowerCase().startsWith(SPOT_NAME_PREFIX)
+}
+
+function sceneRelativeTransform(entity: Entity): { position: Vector3; rotation: Quaternion } {
+  const chain: Entity[] = []
+  let cursor = entity
+  while (cursor !== engine.RootEntity && chain.length < 32) {
+    chain.push(cursor)
+    const t = Transform.getOrNull(cursor)
+    if (t === null) break
+    cursor = t.parent ?? engine.RootEntity
+  }
+  let position = Vector3.Zero()
+  let rotation = Quaternion.Identity()
+  let scale = Vector3.One()
+  for (const link of chain.reverse()) {
+    const t = Transform.getOrNull(link)
+    if (t === null) continue
+    const local = Vector3.create(
+      t.position.x * scale.x,
+      t.position.y * scale.y,
+      t.position.z * scale.z
+    )
+    position = Vector3.add(position, Vector3.rotate(local, rotation))
+    rotation = Quaternion.multiply(rotation, t.rotation)
+    scale = Vector3.create(scale.x * t.scale.x, scale.y * t.scale.y, scale.z * t.scale.z)
+  }
+  return { position, rotation }
+}
+
+export class Seat {
+  private emoteIn = 0
+  private time = 0
+  private dots: Array<{ spot: Entity; dot: Entity; visible: boolean }> = []
+
+  constructor(
+    public src: string,
+    public entity: Entity
+  ) {}
+
+  start(): void {
+    if (isServer()) { return }
+    const Name = nameComponent()
+    const spots: Entity[] = []
+    for (const [child, transform] of engine.getEntitiesWith(Transform)) {
+      if (transform.parent !== this.entity) continue
+      const name = Name.getOrNull(child)
+      if (name !== null && isSpotName(name.value)) spots.push(child)
+    }
+    if (spots.length === 0) spots.push(this.entity)
+
+    for (const spot of spots) {
+      MeshCollider.setBox(spot, ColliderLayer.CL_POINTER)
+      pointerEventsSystem.onPointerDown(
+        {
+          entity: spot,
+          opts: { button: InputAction.IA_POINTER, hoverText: HOVER_TEXT, maxDistance: MAX_DISTANCE }
+        },
+        () => this.sit(spot)
+      )
+      // no collider on the dot: clicks pass through to the spot beneath it
+      const dot = engine.addEntity()
+      Transform.create(dot, {
+        parent: spot,
+        position: Vector3.create(0, DOT_HEIGHT, 0),
+        scale: Vector3.create(DOT_SIZE, DOT_SIZE, DOT_SIZE)
+      })
+      MeshRenderer.setSphere(dot)
+      Material.setPbrMaterial(dot, {
+        albedoColor: { r: 1, g: 1, b: 1, a: 0.85 },
+        emissiveColor: { r: 1, g: 1, b: 1 },
+        emissiveIntensity: 2,
+        roughness: 1
+      })
+      VisibilityComponent.create(dot, { visible: false })
+      this.dots.push({ spot, dot, visible: false })
+    }
+  }
+
+  update(dt: number): void {
+    // The hint walks a transform chain per spot per frame, and a seat is placed
+    // by the dozen: without this the Multiplayer Server pays for every one.
+    if (isServer()) { return }
+    this.time += dt
+    this.updateDots()
+    if (this.emoteIn <= 0) return
+    this.emoteIn -= dt
+    if (this.emoteIn > 0) return
+    if (SCENE_EMOTES.length > 0) {
+      // src is the script's directory (custom/<slug>/scripts) — the emotes live
+      // one level up, in the placed prefab's own folder
+      const root = this.src.replace(/\/scripts\/?$/, '')
+      const emote = SCENE_EMOTES[Math.floor(Math.random() * SCENE_EMOTES.length)]
+      void triggerSceneEmote({ src: `${root}/${emote}`, loop: true })
+      return
+    }
+    const emote = SITTING_EMOTES[Math.floor(Math.random() * SITTING_EMOTES.length)]
+    void triggerEmote({ predefinedEmote: emote })
+  }
+
+  private updateDots(): void {
+    const player = Transform.getOrNull(engine.PlayerEntity)?.position
+    const pulse = 1 + DOT_PULSE * Math.sin(this.time * 3)
+    for (const entry of this.dots) {
+      let visible = false
+      if (player !== undefined) {
+        const world = sceneRelativeTransform(entry.spot).position
+        const dist = Vector3.distance(player, world)
+        // hidden while someone (you) is on the spot — a glow over a seated
+        // avatar's head reads as a bug, not a hint
+        visible = dist < DOT_VISIBLE_DIST && dist > DOT_OCCUPIED_DIST
+      }
+      if (entry.visible !== visible) {
+        entry.visible = visible
+        VisibilityComponent.getMutable(entry.dot).visible = visible
+      }
+      if (visible) {
+        Transform.getMutable(entry.dot).scale = Vector3.create(
+          DOT_SIZE * pulse,
+          DOT_SIZE * pulse,
+          DOT_SIZE * pulse
+        )
+      }
+    }
+  }
+
+  private sit(spot: Entity): void {
+    const world = sceneRelativeTransform(spot)
+    const forward = Vector3.rotate(Vector3.Forward(), world.rotation)
+    void movePlayerTo({
+      newRelativePosition: world.position,
+      avatarTarget: Vector3.add(world.position, forward)
+    })
+    // let the teleport settle before the emote starts, or the walk cancels it
+    this.emoteIn = EMOTE_DELAY_S
+  }
+}

package/prefabs/server-clock/ai.md

@@ -0,0 +1,67 @@
+---
+prefab: server-clock
+claims-messages: runtime.timeSync, runtime.timeSyncResponse
+---
+
+# Server Clock — AI guide
+
+One clock every player agrees on: the Multiplayer Server's time, NTP-sampled by
+each client, so "the round ends at 12:04:30" means the same instant everywhere.
+
+The project copy is normally custom/server_clock/ — check what is on disk, a
+second copy is custom/server_clock_2/.
+
+## When to use
+
+Any shared deadline or shared elapsed time: a round timer, a countdown, a daily
+event, a scoreboard's "started at". Also just to show the time. Needs an
+scene with a Multiplayer Server (data.json requiresSdk: auth-server).
+
+## API
+
+    import { getServerTime, initTimeSync, isTimeSyncReady } from './runtime/timeSync'
+
+- getServerTime(): server-clock now, in epoch milliseconds. On the server it is
+  Date.now(); on a client it is Date.now() plus the measured offset.
+- isTimeSyncReady(): false until the first samples land (a client takes a moment
+  after joining, and re-syncs every minute). Until then getServerTime() is just
+  local time — show a placeholder rather than a wrong time.
+- initTimeSync(): starts the right half for the side it runs on. Idempotent, and
+  the placed prefab already calls it, so you only need it in a script that uses
+  the clock in a scene where the prefab might not be placed.
+
+Params of the prefab's script — set them in the placePrefab request:
+- label: text above the time (default 'SERVER TIME'; empty shows the time alone).
+- utc: true (default) shows UTC, false shows each viewer's own timezone. A shared
+  deadline every player reads should stay UTC — local time differs per player.
+- display: '3D text' (default) is floating text at the entity, '2D UI' is an
+  overlay on the player's client instead.
+- position: where the 2D overlay sits — 'top' (default), 'top left', 'top right'
+  or 'bottom'. Ignored for '3D text'.
+
+## Shared deadlines
+
+Express a deadline as an absolute server timestamp, share THAT, and derive the
+countdown locally every frame:
+
+    const endsAt = getServerTime() + 60_000
+    const secondsLeft = Math.max(0, Math.ceil((endsAt - getServerTime()) / 1000))
+
+## Do / Don't
+
+- DON'T build a countdown out of Date.now() or by accumulating dt: two players'
+  clocks differ by seconds and a reloading client loses its accumulator.
+- DON'T re-implement time sync or add another timestamp message. Import this
+  module; the message names it registers are the scene's, and a second registrar
+  collides with it.
+- DON'T format a time before isTimeSyncReady() — render '--:--:--' or hide it.
+- The server decides WHEN, the client only renders it. Anything that must be the
+  same for everyone (round end, spawn moment) is decided on the server side of
+  the bundle, with isServer() from '@dcl/sdk/network'.
+
+## Example
+
+"Show a 60-second round timer everyone sees the same": place Server Clock (or
+call initTimeSync() in a script of your own), store endsAt as a server timestamp
+when the round starts, and render Math.ceil((endsAt - getServerTime()) / 1000)
+in update() while isTimeSyncReady().

package/prefabs/server-clock/composite.json

@@ -0,0 +1,45 @@
+{
+  "version": 1,
+  "components": [
+    {
+      "name": "core-schema::Name",
+      "data": {
+        "0": {
+          "json": {
+            "value": "Server Clock"
+          }
+        }
+      }
+    },
+    {
+      "name": "core::TextShape",
+      "data": {
+        "0": {
+          "json": {
+            "text": "SERVER TIME\n--:--:--",
+            "fontSize": 4,
+            "textColor": { "r": 1, "g": 1, "b": 1, "a": 1 },
+            "outlineColor": { "r": 0, "g": 0, "b": 0 },
+            "outlineWidth": 0.1
+          }
+        }
+      }
+    },
+    {
+      "name": "asset-packs::Script",
+      "data": {
+        "0": {
+          "json": {
+            "value": [
+              {
+                "path": "{assetPath}/scripts/server-clock.ts",
+                "priority": 0,
+                "layout": "{\"params\":{},\"actions\":[]}"
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}

package/prefabs/server-clock/data.json

@@ -0,0 +1,24 @@
+{
+  "id": "9e37c253-b33e-4505-8231-530f62715d21",
+  "name": "Server Clock",
+  "description": "A clock showing NTP-synced server time, identical for every player. Runs on the Multiplayer Server.",
+  "category": "custom",
+  "group": "Multiplayer Server",
+  "tags": [
+    "multiplayer",
+    "server",
+    "clock",
+    "time"
+  ],
+  "requiresSdk": "auth-server",
+  "version": "1.0.0",
+  "changelog": [
+    {
+      "version": "1.0.0",
+      "notes": "Initial release: the Multiplayer Server's NTP-synced time, identical for every player, shown as 3D text at the item or as a 2D overlay on the player's client."
+    }
+  ],
+  "origin": {
+    "source": "builtin"
+  }
+}

package/prefabs/server-clock/scripts/clock-hud.tsx

@@ -0,0 +1,55 @@
+import ReactEcs, { Label, ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
+import { type Entity } from '@dcl/sdk/ecs'
+
+let label = ''
+let time = ''
+let mounted = false
+
+export function setClockHudText(nextLabel: string, nextTime: string): void {
+  label = nextLabel
+  time = nextTime
+}
+
+export type ClockHudPosition = 'top' | 'top left' | 'top right' | 'bottom'
+
+function justifyFor(where: ClockHudPosition): 'flex-start' | 'flex-end' | 'center' {
+  switch (where) {
+    case 'top left':
+      return 'flex-start'
+    case 'top right':
+      return 'flex-end'
+    default:
+      return 'center'
+  }
+}
+
+export function mountClockHud(entity: Entity, where: ClockHudPosition = 'top'): void {
+  if (mounted) return
+  mounted = true
+  const vertical = where === 'bottom' ? { bottom: 24, left: 0 } : { top: 24, left: 0 }
+  const justify = justifyFor(where)
+  ReactEcsRenderer.addUiRenderer(entity, () => (
+    <UiEntity
+      uiTransform={{
+        positionType: 'absolute',
+        position: vertical,
+        width: '100%',
+        padding: { left: 24, right: 24 },
+        justifyContent: justify,
+        alignItems: 'flex-start'
+      }}
+    >
+      <UiEntity
+        uiTransform={{
+          padding: { top: 6, bottom: 8, left: 18, right: 18 },
+          flexDirection: 'column',
+          alignItems: 'center'
+        }}
+        uiBackground={{ color: { r: 0.06, g: 0.09, b: 0.08, a: 0.6 } }}
+      >
+        {label !== '' ? <Label value={label} fontSize={12} color={{ r: 1, g: 1, b: 1, a: 0.75 }} /> : null}
+        <Label value={time === '' ? '--:--:--' : time} fontSize={26} color={{ r: 1, g: 1, b: 1, a: 1 }} />
+      </UiEntity>
+    </UiEntity>
+  ))
+}

package/prefabs/server-clock/scripts/server-clock.ts

@@ -0,0 +1,71 @@
+import { Entity, TextShape } from '@dcl/sdk/ecs'
+import { isServer } from '@dcl/sdk/network'
+import { initTimeSync, getServerTime, isTimeSyncReady } from '~runtime/timeSync'
+import { mountClockHud, setClockHudText } from './clock-hud'
+
+// Displays the Multiplayer Server's clock, NTP-synced, identical for every
+// player — as floating 3D text, or as a 2D overlay on the player's client. Both
+// halves start here: initTimeSync() registers the responder on the server and
+// the asking half on the client, so placing the item is all the setup there is.
+
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : `${n}`
+}
+
+export class ServerClock {
+  private accum = 0
+
+  constructor(
+    public src: string,
+    public entity: Entity,
+    /** Label above the time */ public label: string = 'SERVER TIME',
+    /** Show in UTC instead of each viewer's timezone */ public utc: boolean = true,
+    /** How the clock is shown */ public display: '3D text' | '2D UI' = '3D text',
+    /** Where the 2D UI sits in the player's view */ public position: 'top' | 'top left' | 'top right' | 'bottom' = 'top'
+  ) {}
+
+  private get onScreen(): boolean {
+    return this.display === '2D UI'
+  }
+
+  start(): void {
+    initTimeSync()
+    if (isServer()) return
+    if (this.onScreen) {
+      // the 3D text becomes the overlay — remove the placed shape
+      TextShape.deleteFrom(this.entity)
+      mountClockHud(this.entity, this.position)
+    }
+    this.render('--:--:--')
+  }
+
+  update(dt: number): void {
+    if (isServer()) return
+    this.accum += dt
+    if (this.accum < 0.25) return
+    this.accum = 0
+    if (!isTimeSyncReady()) return
+    this.render(this.formatTime(new Date(getServerTime())))
+  }
+
+  private formatTime(d: Date): string {
+    const parts = this.utc
+      ? [d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds()]
+      : [d.getHours(), d.getMinutes(), d.getSeconds()]
+    return parts.map(pad).join(':')
+  }
+
+  private render(time: string): void {
+    if (this.onScreen) {
+      setClockHudText(this.label, time)
+      return
+    }
+    TextShape.createOrReplace(this.entity, {
+      text: this.label === '' ? time : `${this.label}\n${time}`,
+      fontSize: 4,
+      textColor: { r: 1, g: 1, b: 1, a: 1 },
+      outlineColor: { r: 0, g: 0, b: 0 },
+      outlineWidth: 0.1
+    })
+  }
+}

package/prefabs/simple-chair/composite.json

@@ -0,0 +1,74 @@
+{
+  "version": 1,
+  "components": [
+    {
+      "name": "core::GltfContainer",
+      "data": {
+        "0": {
+          "json": {
+            "src": "{assetPath}/Chair_03.glb",
+            "visibleMeshesCollisionMask": 0,
+            "invisibleMeshesCollisionMask": 3
+          }
+        }
+      }
+    },
+    {
+      "name": "core-schema::Name",
+      "data": {
+        "0": {
+          "json": {
+            "value": "Simple Chair"
+          }
+        },
+        "513": {
+          "json": {
+            "value": "Sit Spot"
+          }
+        }
+      }
+    },
+    {
+      "name": "core::Transform",
+      "data": {
+        "513": {
+          "json": {
+            "position": {
+              "x": -0.32,
+              "y": 0.15,
+              "z": 0
+            },
+            "rotation": {
+              "x": 0,
+              "y": 0.7071067811865476,
+              "z": 0,
+              "w": -0.7071067811865475
+            },
+            "scale": {
+              "x": 1,
+              "y": 1,
+              "z": 1
+            },
+            "parent": 0
+          }
+        }
+      }
+    },
+    {
+      "name": "asset-packs::Script",
+      "data": {
+        "0": {
+          "json": {
+            "value": [
+              {
+                "path": "{assetPath}/scripts/seat.ts",
+                "priority": 0,
+                "layout": "{\"params\":{},\"actions\":[]}"
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}

package/prefabs/simple-chair/data.json

@@ -0,0 +1,34 @@
+{
+  "id": "fe41823d-a0ef-4152-bf66-b9f44cdcffa2",
+  "name": "Simple Chair",
+  "description": "A simple lightweight chair. Players can sit on it.",
+  "category": "custom",
+  "tags": [
+    "seat",
+    "furniture",
+    "sit"
+  ],
+  "version": "1.1.0",
+  "changelog": [
+    {
+      "version": "1.1.0",
+      "notes": "The seat no longer runs on the Multiplayer Server, where it was walking every sit spot's transform chain each frame for nobody to see."
+    },
+    {
+      "version": "1.0.1",
+      "notes": "Ships the model's texture, which was missing from the folder — without it the model rendered blank white in-world."
+    },
+    {
+      "version": "1.0.0",
+      "notes": "Initial release"
+    }
+  ],
+  "origin": {
+    "source": "builtin"
+  },
+  "requiredPermissions": [
+    "ALLOW_TO_MOVE_PLAYER_INSIDE_SCENE",
+    "ALLOW_TO_TRIGGER_AVATAR_EMOTE"
+  ],
+  "group": "Seats"
+}