← back to Wallpaper Paint Antics

scripts/build.mjs

17 lines

import fs from 'node:fs';
import path from 'node:path';
const root=path.resolve(import.meta.dirname,'..');
const slugs=['01-runaway-roll','02-splash-of-personality','03-great-wall-off'];
fs.mkdirSync(path.join(root,'episodes'),{recursive:true});
for(let i=0;i<3;i++){
  const html=`<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=1080,height=1920"><title>Wallo & Pippa — ${slugs[i]}</title>
<style>@font-face{font-family:'Archivo Black';src:url('assets/archivo.ttf')}@font-face{font-family:'Space Mono';src:url('assets/space-mono.ttf')}html,body{margin:0;width:1080px;height:1920px;overflow:hidden}#root{position:relative;width:1080px;height:1920px;overflow:hidden}.clip{position:absolute;inset:0;width:1080px;height:1920px}canvas{width:1080px;height:1920px}.font-preload{position:absolute;opacity:0;font-family:'Archivo Black'} .font-preload.mono{font-family:'Space Mono'}</style>
<script src="assets/gsap.min.js"></script></head><body data-episode="${i}"><div id="root" data-composition-id="main" data-start="0" data-width="1080" data-height="1920" data-duration="20" data-fps="30"><section class="clip" data-start="0" data-duration="20" data-track-index="0"><canvas id="stage" width="1080" height="1920" aria-label="Two animated decorators performing a comedy routine"></canvas><span class="font-preload">Wallo</span><span class="font-preload mono">Pippa</span></section><audio id="soundtrack" src="assets/short-${i+1}.wav" data-start="0" data-duration="20" data-track-index="1"></audio></div><script src="animation.js"></script></body></html>`;
  const bundled=html.replace('<section class="clip"','<section id="cartoon-scene" class="clip"').replace('<script src="animation.js"></script>','<script>'+fs.readFileSync(path.join(root,'animation.js'),'utf8')+'</script>');
  fs.writeFileSync(path.join(root,'episodes',slugs[i]+'.html'),bundled.replaceAll('assets/','../assets/'));
  if(i===0)fs.writeFileSync(path.join(root,'index.html'),bundled);
  const obsolete=path.join(root,slugs[i]+'.html');if(fs.existsSync(obsolete))fs.unlinkSync(obsolete);
}
console.log('Built three deterministic 20-second compositions.');