SkateSpots/scripts/make-android-splash.mjs

62 lines
2.3 KiB
JavaScript

/**
* Generate Android launch-screen bitmaps from the tracked brand source.
*
* `resources/splash.png` is the orange SkateSpots wheel. Capacitor's generated
* `android/` tree ships a stock blue placeholder, so every release must rebuild
* these drawables. Keeps the native first frame on-brand before the animated
* web splash takes over.
*/
import { mkdir } from 'node:fs/promises';
import { dirname, resolve } from 'node:path';
import sharp from 'sharp';
const ROOT = resolve(import.meta.dirname, '..');
const SOURCE = resolve(ROOT, 'resources/splash.png');
const RES = resolve(ROOT, 'android/app/src/main/res');
const TARGETS = [
['drawable/splash.png', 480, 320],
['drawable-land-mdpi/splash.png', 480, 320],
['drawable-land-hdpi/splash.png', 800, 480],
['drawable-land-xhdpi/splash.png', 1280, 720],
['drawable-land-xxhdpi/splash.png', 1600, 960],
['drawable-land-xxxhdpi/splash.png', 1920, 1280],
['drawable-port-mdpi/splash.png', 320, 480],
['drawable-port-hdpi/splash.png', 480, 800],
['drawable-port-xhdpi/splash.png', 720, 1280],
['drawable-port-xxhdpi/splash.png', 960, 1600],
['drawable-port-xxxhdpi/splash.png', 1280, 1920],
];
const glow = (width, height) => Buffer.from(`
<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="g" cx="50%" cy="50%" r="38%">
<stop offset="0" stop-color="#ff6a00" stop-opacity="0.30"/>
<stop offset="0.55" stop-color="#ff0040" stop-opacity="0.08"/>
<stop offset="1" stop-color="#050505" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#g)"/>
</svg>`);
for (const [relative, width, height] of TARGETS) {
const logoSize = Math.max(64, Math.round(Math.min(width, height) * 0.3));
const logo = await sharp(SOURCE)
.resize(logoSize, logoSize, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
.png()
.toBuffer();
const out = resolve(RES, relative);
await mkdir(dirname(out), { recursive: true });
await sharp({
create: { width, height, channels: 4, background: '#050505' },
})
.composite([
{ input: glow(width, height), blend: 'over' },
{ input: logo, gravity: 'center' },
])
.png()
.toFile(out);
console.log(`splash ${relative} ${width}x${height}`);
}