Ilia Denisov
d0f860a33e
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Has been skipped
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m30s
A 96x96 transparent Lottie for the VK app loading screen: the «Э» tile (score 8) drops in under gravity, lands with a soft cushion squash (left/right edges bulge convex, corners follow via a chordal spline), springs back and loops (~1.1s). A warm glint is caught on the bounce. Pure 2D shapes (ddd:0) for player compatibility; ~11KB (<24KB limit). Glyphs are real LiberationSans outlines (Arial-metric, matching the game's font stack). Includes a reproducible, dependency-light build pipeline (build/generate.js + extract.js + glyphs.json) and a README. The preview GIF's green-baize background is preview-only; the asset itself is transparent.
32 lines
1.8 KiB
JavaScript
32 lines
1.8 KiB
JavaScript
'use strict';
|
|
const fs = require('fs');
|
|
const data = fs.readFileSync(process.argv[2] || 'erudit.json', 'utf8');
|
|
const lottiePath = __dirname + '/node_modules/lottie-web/build/player/lottie.min.js';
|
|
const html = `<!doctype html><html><head><meta charset="utf8"><style>
|
|
body{margin:0;background:#2b2b2b;font-family:sans-serif;color:#ccc}
|
|
.row{display:flex;gap:18px;padding:18px;align-items:flex-end;flex-wrap:wrap}
|
|
.cell{text-align:center}
|
|
.chk{background-image:linear-gradient(45deg,#8a8a8a 25%,transparent 25%),linear-gradient(-45deg,#8a8a8a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8a8a8a 75%),linear-gradient(-45deg,transparent 75%,#8a8a8a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#b5b5b5}
|
|
.s96{width:96px;height:96px}.big{width:336px;height:336px}small{font-size:11px}
|
|
</style></head><body><div class="row" id="row"></div>
|
|
<script src="./lottie.min.js"></script>
|
|
<script>
|
|
const animationData=${data};window.AD=animationData;
|
|
const row=document.getElementById('row');window.anims=[];
|
|
function make(cls,frame,label){
|
|
const cell=document.createElement('div');cell.className='cell';
|
|
const box=document.createElement('div');box.className='chk '+cls;cell.appendChild(box);
|
|
cell.appendChild(document.createElement('br'));
|
|
const cap=document.createElement('small');cap.textContent=label;cell.appendChild(cap);
|
|
row.appendChild(cell);
|
|
const a=lottie.loadAnimation({container:box,renderer:'svg',loop:false,autoplay:false,animationData:JSON.parse(JSON.stringify(animationData))});
|
|
a.addEventListener('DOMLoaded',()=>a.goToAndStop(frame,true));
|
|
window.anims.push(a);
|
|
}
|
|
[0,22,45,68].forEach(f=>make('s96',f,'f'+f));
|
|
make('big',22,'f22 x3.5');
|
|
window.__ready=true;
|
|
</script></body></html>`;
|
|
fs.writeFileSync(process.argv[3] || 'preview.html', html);
|
|
console.log('wrote', process.argv[3] || 'preview.html');
|