#!/usr/bin/env bash
# Export every phone frame of one direction to <dir>/png/<frame-id>.png at 2x.
# Usage: [OUT_DIR=<dir>] docs/ux/directions/export-png.sh docs/ux/directions/<n>-<slug> [frame-id ...]
# OUT_DIR (optional) is where the PNGs go; default <dir>/png.
# Needs Google Chrome (macOS path below or CHROME=...). The page must implement ?list=1 and ?frame=<id>.
set -euo pipefail
dir="$(cd "$1" && pwd)"; shift
chrome="${CHROME:-/Applications/Google Chrome.app/Contents/MacOS/Google Chrome}"
page="file://$dir/index.html"
run() { "$chrome" --headless=new --disable-gpu --hide-scrollbars --no-first-run --virtual-time-budget=10000 "$@" 2>/dev/null; }
if [ "$#" -gt 0 ]; then ids=("$@"); else
  ids=()
  while IFS= read -r line; do ids+=("$line"); done < <(run --dump-dom "$page?list=1" \
    | sed -n '/<pre id="frame-list">/,/<\/pre>/p' | sed -e 's/<[^>]*>//g' | grep -v '^[[:space:]]*$')
fi
[ "${#ids[@]}" -gt 0 ] || { echo "no frames listed by $page?list=1" >&2; exit 1; }
out="${OUT_DIR:-$dir/png}"
mkdir -p "$out"
for id in "${ids[@]}"; do
  run --window-size=411,891 --force-device-scale-factor=2 --screenshot="$out/$id.png" "$page?frame=$id"
done
echo "exported ${#ids[@]} frames to $out"