diff --git a/renderer/src/gacha/page/page.css b/renderer/src/gacha/page/page.css index a229089..513c331 100644 --- a/renderer/src/gacha/page/page.css +++ b/renderer/src/gacha/page/page.css @@ -183,3 +183,13 @@ body { .wish-glint-flare::after { transform: rotate(90deg); } + +/* + * The moon in the card back's diamond seal, in the card's accent and sized to + * the diamond as on the pack (a 120px glyph in a 184px diamond). + */ +.recap-print-seal.wish-moon-seal > span { + color: var(--recap-back-accent, var(--accent, #e8c477)); + font-size: calc(26.83cqw * 120 / 184); + line-height: 1; +} diff --git a/renderer/src/gacha/page/page.js b/renderer/src/gacha/page/page.js index 49dfce3..e45e205 100644 --- a/renderer/src/gacha/page/page.js +++ b/renderer/src/gacha/page/page.js @@ -257,10 +257,40 @@ Element.prototype.animate = function (keyframes, options) { }; // Blank label and title keep the pack wrapper free of printed text. +/** + * The wish's emblem: the symbol of pack-cards' example Moon card (☽), flipped + * to its mirror-image crescent. + */ +const moon = '☾'; + +/** + * The moon as an image for the pack, which pack-cards prints in place of its + * default ✦ when the artwork carries a logo. It must be decoded before the + * pack draws its artwork. + */ +const moonLogo = new Image(132, 132); +moonLogo.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent( + `${moon}`, +)}`; +await moonLogo.decode(); + +/** + * The card back, in pack-cards' own print layout: the moon sits in the + * diamond seal in place of the default ✦, over the bot's name. + */ +const renderBack = () => { + const print = el('div', 'recap-card-print'); + const seal = el('span', 'recap-print-seal wish-moon-seal'); + seal.append(el('span', '', moon)); + print.append(el('span', 'recap-print-channel'), seal, el('span', 'recap-print-edition', 'miti99bot')); + return print; +}; + const view = createPackView(stage, { label: '', - artwork: wish.artwork, + artwork: {...wish.artwork, logo: moonLogo}, labels: {title: '', swipe: '', tap: ''}, + renderBack, appearance: {opening: 'animated', motion: 'interactive', glow: wish.glow, pack_zoom: true, rarities: engravings}, });