{"version":3,"file":"spin_sheet-Cz2N8pz_.js","names":[],"sources":["../../../app/frontend/lib/model_preview/spin_sheet.ts"],"sourcesContent":["// A 32-frame, 8 × 4 sheet. Day starts at the same angle as the still image.\nexport const SPIN_FRAMES = 32\nexport const SPIN_COLUMNS = 8\nexport const SPIN_ROWS = 4\nexport const SPIN_FRAME_PX = 512\nexport const SPIN_STEP_MS = 100\n\nconst CYCLES = [\"day\", \"dusk\", \"night\", \"dawn\"] as const\nexport type SpinCycle = (typeof CYCLES)[number]\n\nexport function spinFrame(index: number) {\n  return {\n    cycle: CYCLES[Math.floor(index / (SPIN_FRAMES / CYCLES.length))] as SpinCycle,\n    turnDeg: (index * 360) / SPIN_FRAMES,\n    column: index % SPIN_COLUMNS,\n    row: Math.floor(index / SPIN_COLUMNS)\n  }\n}\n\n// The CSS that shows one frame of the sheet over the whole picture.\nexport function spinFrameStyle(url: string, index: number) {\n  const { column, row } = spinFrame(index)\n  const last = SPIN_COLUMNS - 1\n  return {\n    backgroundImage: `url(\"${url}\")`,\n    backgroundSize: `${SPIN_COLUMNS * 100}% ${SPIN_ROWS * 100}%`,\n    backgroundPosition: `${(column / last) * 100}% ${(row / (SPIN_ROWS - 1)) * 100}%`\n  }\n}\n"],"mappings":"AAOA,IAAM,EAAS,CAAC,MAAO,OAAQ,QAAS,MAAM,EAG9C,SAAgB,EAAU,EAAe,CACvC,MAAO,CACL,MAAO,EAAO,KAAK,MAAM,GAAA,GAAuB,EAAO,OAAO,GAC9D,QAAU,EAAQ,IAAA,GAClB,OAAQ,EAAA,EACR,IAAK,KAAK,MAAM,EAAA,CAAoB,CACtC,CACF,CAGA,SAAgB,EAAe,EAAa,EAAe,CACzD,GAAM,CAAE,SAAQ,OAAQ,EAAU,CAAK,EAEvC,MAAO,CACL,gBAAiB,QAAQ,EAAI,IAC7B,eAAgB,YAChB,mBAAoB,GAAI,EAAS,EAAQ,IAAI,IAAK,EAAA,EAAyB,IAAI,EACjF,CACF"}