feat(gacha): render the beta wish in portrait

/api/gachabeta now returns a portrait video with the requested width as its long edge: 640 renders 360x640 and 854 renders 480x854. The request body is unchanged, and /api/gacha stays landscape. The pack sits higher so it stays in frame while the card rises.

renderer/src/gacha-beta/page/page.css

@@ -30,7 +30,7 @@ body {
 
 /* Sit the pack below centre so the card rising out of it stays in frame. */
 #stage .recap-pack-stack {
-  margin: 24vh 0 0;
+  margin: 14vh 0 0;
   width: min(36vh, 60vw);
 }
 

renderer/src/gacha-beta/wish-plan.js

@@ -6,6 +6,7 @@
 
 import path from 'node:path';
 import {getRankLetter, getRarityPalette} from '../remotion/gacha-timeline.js';
+import {gachaFrameSizes} from '../schemas/gacha-request.js';
 
 /** @typedef {import('../schemas/gacha-request.js').GachaRenderRequest} GachaRenderRequest */
 /** @typedef {import('../remotion/gacha-timeline.js').GachaRarity} GachaRarity */
@@ -25,6 +26,15 @@ export const wishTimeline = Object.freeze({
   dragEnd: 1,
 });
 
+/**
+ * The beta wish is portrait: the request's `width` (640 or 854) is the long
+ * edge, so the frame is the /api/gacha frame turned upright.
+ *
+ * @param {GachaRenderRequest['width']} width
+ * @returns {{width: number, height: number}}
+ */
+export const getWishFrameSize = (width) => ({width: gachaFrameSizes[width], height: width});
+
 /** pack-cards rarity profile and glow preset for each requested rarity. */
 const rarityLooks = Object.freeze({
   3: {rarity: 'rare', glow: /** @type {const} */ ('silver')},

renderer/src/render/render-gacha-beta.js

@@ -7,13 +7,13 @@ import {ensureBrowser, makeCancelSignal, RenderInternals} from '@remotion/render
 import {
   gachaBetaTotalSeconds,
   getDragPointer,
+  getWishFrameSize,
   getWishPageProps,
   resolveWishAsset,
   wishOrigin,
 } from '../gacha-beta/wish-plan.js';
 import {RenderTimeoutError} from '../lib/render-errors.js';
 import {cleanupTempDir, createRenderTempDir} from '../lib/tmp-files.js';
-import {gachaFrameSizes} from '../schemas/gacha-request.js';
 import {createCdpConnection} from './cdp-pipe.js';
 
 /**
@@ -158,7 +158,10 @@ export const closeGachaBetaBrowser = async () => {
  * @returns {Promise<void>}
  */
 export const warmGachaBetaBrowser = async () => {
-  await renderGachaBetaVideo({label: 'Warm-up', rarity: 5, fps: 24, width: 640, seed: 1}, {timeoutInMilliseconds: 120000});
+  await renderGachaBetaVideo(
+    {label: 'Warm-up', rarity: 5, fps: 24, width: 640, seed: 1},
+    {timeoutInMilliseconds: 120000},
+  );
 };
 
 /**
@@ -194,13 +197,13 @@ const captureFrames = async (cdp, sessionId, request, dir, guard) => {
    */
   const send = (method, params) => guard(cdp.send(method, params, sessionId));
   /** @param {string} expression */
-  const evaluate = async (expression) => (await send('Runtime.evaluate', {expression, returnByValue: true})).result?.value;
+  const evaluate = async (expression) =>
+    (await send('Runtime.evaluate', {expression, returnByValue: true})).result?.value;
 
   await send('Page.enable');
   await send('Fetch.enable', {patterns: [{urlPattern: '*'}]});
   await send('Emulation.setDeviceMetricsOverride', {
-    width: request.width,
-    height: gachaFrameSizes[request.width],
+    ...getWishFrameSize(request.width),
     deviceScaleFactor: 1,
     mobile: false,
   });