Game UI that gotta go fast

<template>
  <view class="hud">
    <text class="label">{{ hp }} / {{ maxHp }}</text>

    <view class="bar">
      <view class="fill" :style="{ width: fillPx }" />
    </view>

    <Button variant="ghost" @click="emit('pause')">PAUSE</Button>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Button from 'builtin/ui/controls/Button.uic';

const props = withDefaults(defineProps<{ hp?: number; maxHp?: number }>(), {
  hp: 100,
  maxHp: 100,
});
const emit = defineEmits<{ (e: 'pause'): void }>();

const BAR_W = 240;
// Bind px, not %: the interpolator animates plain px numbers, and a raw % snaps.
const fillPx = computed(() =>
  Math.round(BAR_W * Math.max(0, Math.min(1, props.hp / props.maxHp))),
);
</script>

<style>
:root {
  --hud-accent: #ef4444;
  --hud-surface: #0a0a0acc;
}

.hud {
  position: absolute;
  top: 16px;
  left: 16px;
  gap: 8px;                       /* flex-direction defaults to column here */
  padding: 12px 16px;
  background-color: var(--hud-surface);
  border-radius: 12px;
  -ui-backdrop-blur: 18px;
}

.label {
  font-size: 14px;
  color: #f5f5f5;
  letter-spacing: 0.08em;
}

.bar {
  width: 240px;
  height: 10px;
  border-radius: 999px;
  background-color: #ffffff1a;
  overflow: hidden;
}

.fill {
  height: 100%;
  background-image: linear-gradient(90deg, var(--hud-accent), #f97316);
  transition: width 180ms ease-out;
}

@media (max-width: 720px) {
  .bar { width: 140px; }
}
</style>

import { Behaviour, field } from '@engine/core';

/** Sits on the same entity as the core.UICanvas whose root is Hud.uix. */
export default class HudDriver extends Behaviour {
  @field({ type: 'f32', label: 'Max HP', min: 1 })
  maxHp = 100;

  private hp = 100;
  /** Read by the rest of the game — an emit is an INTENT, the game decides what it means. */
  paused = false;

  override onStart(): void {
    // The handle survives canvas remounts, so subscribe once, here.
    const unsubscribe = this.engine.ui?.getScreen(this.entity)?.on('pause', () => {
      this.paused = !this.paused;
    });
    if (unsubscribe) this.scope.register(unsubscribe); // torn down with the script
  }

  override onUpdate(dt: number): void {
    // setProps is a shallow-reactive merge — the screen re-renders itself.
    this.engine.ui?.getScreen(this.entity)?.setProps({
      hp: this.hp,
      maxHp: this.maxHp,
    });
  }
}

<template>
  <!-- nav-capture="x": while focused, left/right become @nav events instead of
       moving focus, so the gamepad scrubs the value. Up/down still leaves. -->
  <view
    class="slider"
    focusable
    nav-capture="x"
    @nav="onNav"
    @pointerdown="startDrag"
    @pointermove="onDrag"
  >
    <view class="track"><view class="fill" :style="{ width: fillPx }" /></view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{ value?: number; step?: number }>(), {
  value: 50,
  step: 5,
});
const emit = defineEmits<{ (e: 'update:value', v: number): void }>();

const WIDTH = 200;
const fillPx = computed(() => Math.round(WIDTH * props.value / 100));

function onNav(e: { dir: 'up' | 'down' | 'left' | 'right' }) {
  if (e.dir === 'left') emit('update:value', Math.max(0, props.value - props.step));
  if (e.dir === 'right') emit('update:value', Math.min(100, props.value + props.step));
}

// A press captures the node: moves and the release route here wherever the
// pointer goes, so dragging outside the track keeps working with no bookkeeping.
let dragging = false;
function startDrag(e: { x: number }) { dragging = true; apply(e.x); }
function onDrag(e: { x: number }) { if (dragging) apply(e.x); }
function apply(x: number) { /* … map logical x → value … */ }
</script>

<style>
/* Only shows for focus that ARRIVED BY NAVIGATION — a mouse user never
   gets a ring they did not ask for. */
.slider:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; }
</style>

<template>
  <view class="row">
    <button class="trigger" @click="open = !open">
      <text>OPTIONS</text>
    </button>

    <!-- z-index orders SIBLINGS only — it cannot lift this out of .row's clip.
         The overlay layer can: it paints on top of everything and hit-tests
         first, and it is also the documented answer to position: fixed. -->
    <Teleport to="overlay">
      <view v-if="open" class="scrim" @click="open = false" />
      <view v-if="open" class="menu">
        <slot />
      </view>
    </Teleport>
  </view>
</template>

<style>
.row { flex-direction: row; overflow: hidden; }

.scrim {
  position: absolute;
  inset: 0;
  background-color: #00000080;  /* painted, so it eats the outside click */
}

.menu {
  position: absolute;
  top: 64px;
  left: 24px;
  width: 220px;
  border-radius: 10px;
  background-color: var(--rp-menu-bg, #161616);
  -ui-backdrop-blur: 16px;

  /* Entry must be an ANIMATION: a transition never runs on a node's first
     style resolve, because there is no previous value to leave. */
  animation: pop 140ms ease-out;
}

@keyframes pop {
  from { opacity: 0; transform: translate(0, -6px); }
  to   { opacity: 1; transform: translate(0, 0); }
}
</style>

<template>
  <view ref="list" class="list" @scroll="onScroll">
    <view v-for="item in items" :key="item.id" class="row">
      <text>{{ item.label }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ items: { id: string; label: string }[] }>();

// A template ref on a primitive gives you the UINode itself.
const list = ref<{
  layoutH: number; scrollY: number; contentH: number;
  scrollTo(x: number, y: number): void;
} | null>(null);

function toBottom() {
  const el = list.value;
  if (el) el.scrollTo(0, el.contentH - el.layoutH);
}

function onScroll() {
  // @scroll is non-bubbling and fires after a wheel scroll moved this container.
  const el = list.value;
  if (el && el.scrollY + el.layoutH >= el.contentH - 4) loadMore();
}

function loadMore() { /* … */ }
</script>

<style>
/* auto folds to scroll and clip folds to hidden — no scrollbars are drawn
   either way, and hidden was never a scroll container. */
.list { height: 240px; overflow: scroll; gap: 4px; }
.row { flex-direction: row; padding: 8px 12px; }
</style>