Build a news ticker.

_renderItems(items) {
  // Render the headlines twice, each followed by its separator, so the two
  // halves are identical. Moving -50% then lands the second copy exactly
  // where the first started, and the loop restarts without a jump.
  const oneSet = items.map((item) =>
    `<span class="ticker-item"><span class="ticker-dot"></span>${escapeHtml(item)}</span>` +
    '<span class="ticker-separator"></span>'
  ).join('');
  this._content.innerHTML = oneSet + oneSet;
}

_applyPlayMode(loop) {
  if (!this._content) return;
  this._content.style.animationIterationCount = loop === false ? '1' : 'infinite';
  this._content.style.animationFillMode = loop === false ? 'forwards' : '';
}

_applyData(data) {
  if (!data) return;
  if (data.badge !== undefined) this._badge.textContent = data.badge;
  if (Array.isArray(data.items)) this._renderItems(data.items);
  if ('loop' in data) this._applyPlayMode(data.loop);
}

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

.ticker-track {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}

.ticker-content {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/**
 * The step a playAction() lands on, exactly as the spec defines it: `goto`
 * wins; otherwise the current step (-1 before the first play) plus `delta`,
 * which defaults to 1. A target at or past stepCount means "go to the end",
 * returned as undefined — so a second play on a one-step graphic takes it off
 * air instead of replaying it.
 */
function resolveTargetStep(currentStep, { goto, delta } = {}, stepCount = 1) {
  const target = Number.isInteger(goto) && goto >= 0
    ? goto
    : (currentStep ?? -1) + (Number.isInteger(delta) ? delta : 1);
  return target >= stepCount ? undefined : Math.max(target, 0);
}

// Each action takes the next revision number. Anything that finishes after a
// newer action has started checks it and backs off, so play → stop → play
// sent without waiting ends on air instead of hidden by the stale stop.
async playAction({ goto, delta, skipAnimation } = {}) {
  this._initDom();
  const target = resolveTargetStep(this._step, { goto, delta });
  if (target === undefined) {
    await this.stopAction({ skipAnimation });
    return { statusCode: 200, currentStep: undefined };
  }
  ++this._rev;
  this._step = target;
  this._root.classList.remove('out');
  if (skipAnimation) {
    this._root.classList.add('instant', 'visible');
    return { statusCode: 200, currentStep: this._step };
  }
  this._root.classList.remove('instant');
  // Force a reflow so the browser registers the starting state.
  void this._root.offsetWidth;
  this._root.classList.add('visible');
  await sleep(500);
  return { statusCode: 200, currentStep: this._step };
}

async stopAction({ skipAnimation } = {}) {
  this._initDom();
  const rev = ++this._rev;
  this._step = undefined;
  if (skipAnimation) {
    this._root.classList.add('instant');
    this._root.classList.remove('visible', 'out');
    return { statusCode: 200 };
  }
  this._root.classList.remove('instant');
  this._root.classList.add('out');
  await sleep(400);
  if (rev === this._rev) this._root.classList.remove('visible', 'out');
  return { statusCode: 200 };
}

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.ticker",
  "version": "1.0.0",
  "name": "News Ticker",
  "description": "Scrolling headline crawl with an infinite CSS loop. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 1,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "thumbnails": [
    {
      "file": "thumbnail.webp",
      "resolution": {
        "width": 1920,
        "height": 1080
      }
    }
  ],
  "schema": {
    "type": "object",
    "properties": {
      "badge": {
        "type": "string",
        "title": "Badge Text",
        "gddType": "single-line",
        "default": "Breaking"
      },
      "items": {
        "type": "array",
        "title": "Headlines",
        "items": {
          "type": "string",
          "gddType": "single-line"
        },
        "default": [
          "Heavy rain expected across the region from Thursday evening",
          "Local team books its place in the regional cup final",
          "City library extends weekend opening hours from next month",
          "Morning commute: delays on the northern line after signal fault"
        ]
      }
    }
  }
}