Add some better comments and organization to swf_assets/show.js

Mostly headers, a comment that was out of date, and a function I moved
to be in a slightly more sensible spot!
This commit is contained in:
Emi Matchu 2025-01-04 13:47:23 -08:00
parent 3940513244
commit 39e6872f59

View file

@ -25,6 +25,10 @@ let numFramesSinceLastLog = 0;
// State for error reporting.
let hasLoggedRenderError = false;
////////////////////////////////////////////////////
//////// Loading the library and its assets ////////
////////////////////////////////////////////////////
function loadImage(src) {
const image = new Image();
image.crossOrigin = "anonymous";
@ -64,8 +68,8 @@ async function getLibrary() {
// One more loading step as part of loading this library is loading the
// images it uses for sprites.
//
// TODO: I guess the manifest has these too, so we could put them in preload
// meta tags to get them here faster?
// NOTE: We also read these from the manifest, and include them in the
// document as preload meta tags, to get them moving faster.
const librarySrcDir = libraryUrl.split("/").slice(0, -1).join("/");
const manifestImages = new Map(
library.properties.manifest.map(({ id, src }) => [
@ -96,6 +100,10 @@ async function getLibrary() {
return library;
}
/////////////////////////////////////
//////// Rendering the movie ////////
/////////////////////////////////////
function buildMovieClip(library) {
let constructorName;
try {
@ -151,6 +159,22 @@ function updateCanvasDimensions() {
movieClip.scaleY = internalHeight / library.properties.height;
}
window.addEventListener("resize", () => {
updateCanvasDimensions();
// Redraw the stage with the new dimensions - but with `tickOnUpdate` set
// to `false`, so that we don't advance by a frame. This keeps us
// really-paused if we're paused, and avoids skipping ahead by a frame if
// we're playing.
stage.tickOnUpdate = false;
updateStage();
stage.tickOnUpdate = true;
});
////////////////////////////////////////////////////
//// Monitoring and controlling animation state ////
////////////////////////////////////////////////////
async function startMovie() {
// Load the movie's library (from the JS file already run), and use it to
// build a movie clip.
@ -274,6 +298,10 @@ function getInitialPlayingStatus() {
}
}
//////////////////////////////////////////
//// Syncing with the parent document ////
//////////////////////////////////////////
/**
* Recursively scans the given MovieClip (or child createjs node), to see if
* there are any animated areas.
@ -312,18 +340,6 @@ function sendMessage(message) {
parent.postMessage(message, document.location.origin);
}
window.addEventListener("resize", () => {
updateCanvasDimensions();
// Redraw the stage with the new dimensions - but with `tickOnUpdate` set
// to `false`, so that we don't advance by a frame. This keeps us
// really-paused if we're paused, and avoids skipping ahead by a frame if
// we're playing.
stage.tickOnUpdate = false;
updateStage();
stage.tickOnUpdate = true;
});
window.addEventListener("message", ({ data }) => {
// NOTE: For more sensitive messages, it's important for security to also
// check the `origin` property of the incoming event. But in this case, I'm
@ -339,6 +355,10 @@ window.addEventListener("message", ({ data }) => {
}
});
/////////////////////////////////
//// The actual entry point! ////
/////////////////////////////////
startMovie()
.then(() => {
sendStatus();