@dcl-regenesislabs/web-editor 0.3.16-40498300506.commit-c2a0d59 → 0.3.16-40596302895.commit-0ee155d

package/prefabs/leaderboard/data.json

@@ -13,8 +13,12 @@
     "board"
   ],
   "requiresSdk": "auth-server",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "changelog": [
+    {
+      "version": "1.6.0",
+      "notes": "The on-screen board takes its place in the shared HUD layout, so it no longer overlaps other HUDs, and shows the top 5 on phones, whose screen is a third shorter."
+    },
     {
       "version": "1.5.0",
       "notes": "Before the first score the board tells players \"No scores yet — be the first!\" (or \"No times yet\" for times) instead of setup instructions, and its text wraps to stay inside the panel. A board placed before this keeps its old text size, where the new line already fits."

package/prefabs/leaderboard/scripts/leaderboard-hud.tsx

@@ -1,28 +1,29 @@
-import ReactEcs, { ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
-import type { Entity } from '@dcl/sdk/ecs'
-import { UI_CANVAS, sceneUiTheme } from '~runtime/uiTheme'
+import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs'
+import { isMobile } from '@dcl/sdk/platform'
+import { sceneUiTheme } from '~runtime/uiTheme'
 import { UiPanel, UiText } from '~runtime/uiComponents'
+import { addHudItem, HUD_COLUMN_WIDTH } from '~runtime/hudLayout'
 import { formatScore, rowLabel, type BoardRow, type BoardSort } from './pure/board'
 
-export function mountLeaderboardHud(entity: Entity, position: 'left' | 'right', read: () => {
+const ROW = 36
+
+export function mountLeaderboardHud(position: 'left' | 'right', read: () => {
   title: string; rows: BoardRow[]; sort: BoardSort; empty: string
-}): void {
-  ReactEcsRenderer.addUiRenderer(entity, () => {
+}): () => void {
+  return addHudItem(position === 'left' ? 'left' : 'right', () => {
     const theme = sceneUiTheme()
     const board = read()
-    const rows = board.rows.slice(0, 10)
-    return <UiEntity uiTransform={{ positionType: 'absolute', width: '100%', height: '100%', padding: 28,
-      justifyContent: position === 'left' ? 'flex-start' : 'flex-end', alignItems: 'center', pointerFilter: 'none' }}>
-      <UiPanel theme={theme} uiTransform={{ width: 420, height: 116 + Math.max(1, rows.length) * 40 }}>
-        <UiText value={board.title} color={theme.text} size={26} height={40} />
-        <UiText value={board.sort === 'asc' ? 'FASTEST TIMES' : 'HIGH SCORES'} color={theme.muted} size={14} height={24} />
-        {rows.length === 0 && <UiText value={board.empty} color={theme.muted} size={16} height={40} />}
-        {rows.map((row) => <UiEntity key={row.player} uiTransform={{ width: '100%', height: 40, pointerFilter: 'none' }}>
-          <UiText value={String(row.rank).padStart(2, '0')} color={theme.accentText} size={17} mono uiTransform={{ width: 42 }} height={40} />
-          <UiText value={rowLabel(row)} color={theme.text} size={18} uiTransform={{ width: 212 }} height={40} />
-          <UiText value={formatScore(row.score, board.sort)} color={theme.text} size={18} mono align="middle-right" uiTransform={{ width: 116 }} height={40} />
-        </UiEntity>)}
-      </UiPanel>
-    </UiEntity>
-  }, UI_CANVAS)
+    // a phone's screen is a third shorter
+    const rows = board.rows.slice(0, isMobile() ? 5 : 10)
+    return <UiPanel theme={theme} uiTransform={{ width: HUD_COLUMN_WIDTH, height: 100 + Math.max(1, rows.length) * ROW, padding: 20 }}>
+      <UiText value={board.title} color={theme.text} size={24} height={36} />
+      <UiText value={board.sort === 'asc' ? 'FASTEST TIMES' : 'HIGH SCORES'} color={theme.muted} size={16} height={24} />
+      {rows.length === 0 && <UiText value={board.empty} color={theme.muted} size={16} height={ROW} />}
+      {rows.map((row) => <UiEntity key={row.player} uiTransform={{ width: '100%', height: ROW, pointerFilter: 'none' }}>
+        <UiText value={String(row.rank).padStart(2, '0')} color={theme.accentText} size={16} mono uiTransform={{ width: 36 }} height={ROW} />
+        <UiText value={rowLabel(row)} color={theme.text} size={18} uiTransform={{ width: 176 }} height={ROW} />
+        <UiText value={formatScore(row.score, board.sort)} color={theme.text} size={18} mono align="middle-right" uiTransform={{ width: 88 }} height={ROW} />
+      </UiEntity>)}
+    </UiPanel>
+  }, { order: 20 })
 }

package/prefabs/leaderboard/scripts/leaderboard.ts

@@ -49,7 +49,7 @@ export class Leaderboard {
     if (isServer()) { return }
     if (this.display === '2D UI') {
       VisibilityComponent.createOrReplace(this.entity, { visible: false, propagateToChildren: true })
-      mountLeaderboardHud(this.entity, this.position, () => this.content())
+      mountLeaderboardHud(this.position, () => this.content())
       return
     }
     this.panel = this.findPanel()

package/prefabs/run-progress/ai.md

@@ -31,8 +31,9 @@ Configure the placed script, with one distinct courseId per course:
 - `collectibleAreas`: comma-separated Trigger Area names, each counts once per player.
 - `accentColor`: fallback six-digit hex color. Place UI Theme to style the entire scene together.
 - `collectibleVisuals`: comma-separated names of plain visual entities, matching collectibleAreas in order.
-- `hud`: "Full" (run panel, corner clock, controls), "Big timer" (one large
-  centred clock plus Restart and the results screen) or "Hidden" (draws nothing).
+- `hud`: "Full" (run panel and health on the left, clock and Restart on the right),
+  "Big timer" (one large clock at the top centre plus Restart and the results screen)
+  or "Hidden" (draws nothing). Both use the shared HUD layout and fit phones.
   The creator's HUD request is THIS setting: "one big timer" = "Big timer". For a
   custom HUD set "Hidden" and read `runOf()`; never draw a second clock beside it.
 

package/prefabs/run-progress/data.json

@@ -14,8 +14,12 @@
     "restart"
   ],
   "requiresSdk": "auth-server",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "changelog": [
+    {
+      "version": "1.4.0",
+      "notes": "The run HUD fits phones: Restart moves from the bottom-right corner (under the jump button) to under the clock, panels stack in the shared HUD layout instead of overlapping other HUDs, the controls hint matches the device, and the completion screen hides the touch controls while it is open."
+    },
     {
       "version": "1.3.1",
       "notes": "Hit points show unless Health & Respawn's Health Bar is turned off, so older Health & Respawn copies keep their bar."

package/prefabs/run-progress/scripts/run-progress.tsx

@@ -1,9 +1,7 @@
-import ReactEcs, { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
 import { engine, PlayerIdentityData, VisibilityComponent, type Entity } from '@dcl/sdk/ecs'
 import { isServer } from '@dcl/sdk/network'
 import { game, reportProblem } from '~runtime/game'
-import { RunHud } from '~runtime/gameHud'
-import { UI_CANVAS } from '~runtime/uiTheme'
+import { mountRunHud, type RunHudProps } from '~runtime/gameHud'
 import type { ColorHex, EntityName, EntityNames, ZoneName, ZoneNames } from '~runtime/authoring'
 import { createRun, restartRun, runOf } from '~runtime/runs'
 import { entityWorld, namedEntity } from '~runtime/sceneNames'
@@ -101,7 +99,7 @@ export class RunProgress {
     watch(this.finishArea, { type: 'finish' })
     this.points.forEach((area, index) => watch(area, { type: 'checkpoint', index }))
     this.items.forEach((id) => watch(id, { type: 'collect', id }))
-    if (this.hud !== 'Hidden') ReactEcsRenderer.addUiRenderer(this.entity, () => this.render(), UI_CANVAS)
+    if (this.hud !== 'Hidden') mountRunHud(() => this.hudProps())
   }
 
   update(): void {
@@ -150,21 +148,21 @@ export class RunProgress {
     }).finally(() => { this.pending = false })
   }
 
-  private render(): ReactEcs.JSX.Element {
+  private hudProps(): RunHudProps {
     const player = this.player()
     const state = this.current() ?? freshRun()
     const health = game.state.healthBar === false ? null : record(game.state.health)[player]
     const life = record(record(game.state.healthLife)[player])
-    return <RunHud
-      title={this.title} objective={this.objective} phase={state.phase}
-      elapsedMs={elapsedRun(state, game.now())} bestMs={state.bestMs}
-      checkpoint={state.checkpoint} checkpoints={this.points.length}
-      collected={state.collected.length} collectibles={this.items.length}
-      health={typeof health === 'number' ? health : null}
-      maxHealth={typeof game.state.healthMax === 'number' ? game.state.healthMax : 100}
-      respawnSeconds={life.dead === true && typeof life.respawnAt === 'number' ? Math.max(0, life.respawnAt - game.now()) / 1000 : 0}
-      notice={game.now() < this.noticeUntil ? this.notice : ''}
-      accentColor={this.accentColor} restart={() => this.restart()} hud={this.hud === 'Big timer' ? 'Big timer' : 'Full'}
-    />
+    return {
+      title: this.title, objective: this.objective, phase: state.phase,
+      elapsedMs: elapsedRun(state, game.now()), bestMs: state.bestMs,
+      checkpoint: state.checkpoint, checkpoints: this.points.length,
+      collected: state.collected.length, collectibles: this.items.length,
+      health: typeof health === 'number' ? health : null,
+      maxHealth: typeof game.state.healthMax === 'number' ? game.state.healthMax : 100,
+      respawnSeconds: life.dead === true && typeof life.respawnAt === 'number' ? Math.max(0, life.respawnAt - game.now()) / 1000 : 0,
+      notice: game.now() < this.noticeUntil ? this.notice : '',
+      accentColor: this.accentColor, restart: () => this.restart(), hud: this.hud === 'Big timer' ? 'Big timer' : 'Full'
+    }
   }
 }

package/prefabs/server-clock/ai.md

@@ -40,8 +40,8 @@ Params of the prefab's script — set them in the placePrefab request:
 - position: where the 2D overlay sits — 'top' (default), 'top left', 'top right'
   or 'bottom'. Ignored for '3D text'.
 
-The overlay uses UI Theme. Multiple placed clocks keep their own label, time and
-position; choose different corners so they remain visible.
+The overlay uses UI Theme and the shared HUD layout: HUDs in the same position
+stack instead of overlapping. Multiple placed clocks keep their own label and time.
 
 ## Shared deadlines
 

package/prefabs/server-clock/data.json

@@ -11,8 +11,12 @@
     "time"
   ],
   "requiresSdk": "auth-server",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "changelog": [
+    {
+      "version": "1.2.0",
+      "notes": "The 2D clock takes its place in the shared HUD layout, so it no longer overlaps other HUDs on any screen."
+    },
     {
       "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."

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

@@ -35,7 +35,7 @@ export class ServerClock {
     if (this.onScreen) {
       VisibilityComponent.createOrReplace(this.entity, { visible: false })
       TextShape.deleteFrom(this.entity)
-      mountStatusHud(this.entity, this.position, () => ({ label: this.label, value: this.time }))
+      mountStatusHud(this.position, () => ({ label: this.label, value: this.time }))
     }
     this.render('--:--:--')
   }

package/prefabs/ui-theme/ai.md

@@ -13,13 +13,15 @@ Place one UI Theme from the library. Pick Accent Color and Dark or Light in its
 - `accentColor`: six-digit hex color, edited with a color picker.
 - `appearance`: Dark or Light.
 
-For custom UI, import `sceneUiTheme` and `UI_CANVAS` from `~runtime/uiTheme`, and `UiPanel`, `UiText`, `UiButton`, `ProgressPips`, `UiNotice` from `~runtime/uiComponents`. Register with `ReactEcsRenderer.addUiRenderer(entity, render, UI_CANVAS)`. Keep viewport roots pointer-transparent and handlers on actual buttons. Labels and stacks need explicit dimensions. Inspect a screenshot in the real preview, including completion and a smaller viewport.
+For custom UI, import `sceneUiTheme` from `~runtime/uiTheme`, `UiPanel`, `UiText`, `UiButton`, `ProgressPips`, `UiNotice` from `~runtime/uiComponents`, and place every panel with `addHudItem(slot, render)` from `~runtime/hudLayout` (its header documents the slots) instead of `ReactEcsRenderer.addUiRenderer`. Each panel declares width and height and is at most `HUD_COLUMN_WIDTH` wide; handlers go on actual buttons. Inspect a screenshot in the real preview, including completion.
 
 `ColorHex`, `EntityName`, `EntityNames`, `ZoneName` and `ZoneNames` from `~runtime/authoring` are string aliases that give constructor parameters color or entity pickers. Plural references are ordered comma-separated names; creators pick and reorder them in the inspector. Names must be unique and contain no commas. The assistant can provide arrays to the plural parameters.
 
 ## Do / Don't
 
-- Use one theme per scene, readable text and small non-blocking HUDs.
+- Use one theme per scene, readable text (16 px or more) and small non-blocking HUDs.
+- Never put UI in the bottom corners or the screen's left edge: phones draw the joystick and the jump/E/F buttons there. Results, shops and rule cards use the `modal` slot, which hides the touch controls while open.
+- No hover-only states and no emoji in text; buttons at least 48 px tall.
 - Do not write a separate palette for each prefab or use default pink SDK buttons.
 - Verify running and finished states in a real preview screenshot.
 

package/prefabs/ui-theme/data.json

@@ -11,8 +11,12 @@
     "hud",
     "design"
   ],
-  "version": "1.0.0",
+  "version": "1.1.0",
   "changelog": [
+    {
+      "version": "1.1.0",
+      "notes": "Custom HUDs are placed through the shared HUD layout, which keeps them clear of the phone touch controls and of each other."
+    },
     {
       "version": "1.0.0",
       "notes": "One accent color and dark or light appearance shared by the scene's game HUDs, buttons, timers, leaderboards and results."