Queue WebGL book reveal masks

public/js/book-pagination-module.js

@@ -21,6 +21,7 @@ class BookPaginationModule extends BaseModule {
         this.bindMethods([
             'initialize',
             'refreshFromHistory',
+            'preparePendingBlock',
             'buildSpreads',
             'layoutTextBlock',
             'getDropCapText',
@@ -50,6 +51,9 @@ class BookPaginationModule extends BaseModule {
         this.reportProgress(35, 'Preparing book pagination metrics');
         this.addEventListener(document, 'webgl-book:page-count-changed', this.handlePageCountChanged);
         this.addEventListener(document, 'story:history-updated', this.refreshFromHistory);
+        this.addEventListener(document, 'book-pagination:prepare-block', (event) => {
+            this.preparePendingBlock(event.detail?.block || event.detail || {});
+        });
         this.addEventListener(document, 'book-pagination:set-spread', (event) => {
             this.setCurrentSpread(event.detail?.spreadIndex);
         });
@@ -91,6 +95,54 @@ class BookPaginationModule extends BaseModule {
         this.publish();
     }
 
+    async preparePendingBlock(block = {}) {
+        const token = ++this.refreshToken;
+        const gameId = block.gameId || block.metadata?.gameId || this.storyHistory?.currentGameId || null;
+        const latestRenderedBlockId = Math.max(0, Number(this.storyHistory?.latestRenderedBlockId || 0));
+        const pendingBlockId = Math.max(0, Number(block.blockId || block.metadata?.blockId || 0));
+        if (!gameId || pendingBlockId <= 0 || typeof this.storyHistory?.getBlocksRange !== 'function') {
+            return null;
+        }
+
+        const historyBlocks = latestRenderedBlockId > 0
+            ? await this.storyHistory.getBlocksRange(gameId, 1, latestRenderedBlockId)
+            : [];
+        if (token !== this.refreshToken) return null;
+
+        const normalizedBlock = {
+            ...block,
+            type: block.kind || block.type || 'paragraph',
+            kind: block.kind || block.type || 'paragraph',
+            blockId: pendingBlockId,
+            gameId,
+            metadata: {
+                ...(block.metadata || {}),
+                blockId: pendingBlockId,
+                gameId
+            }
+        };
+        this.latestBlockId = pendingBlockId;
+        this.latestRenderedBlockId = latestRenderedBlockId;
+        this.spreads = this.buildSpreads([...historyBlocks, normalizedBlock]);
+        this.currentSpreadIndex = Math.max(0, Math.min(this.spreads.length - 1, this.currentSpreadIndex));
+        const targetSpread = this.spreads.find(spread => ['left', 'right'].some(side => {
+            const lines = Array.isArray(spread?.[side]) ? spread[side] : [];
+            return lines.some(line => Number(line?.blockId || 0) === pendingBlockId);
+        }));
+        if (targetSpread) this.currentSpreadIndex = targetSpread.index;
+        this.publish();
+        document.dispatchEvent(new CustomEvent('book-pagination:block-prepared', {
+            detail: {
+                blockId: pendingBlockId,
+                spread: this.getCurrentSpread(),
+                spreadIndex: this.currentSpreadIndex,
+                latestBlockId: this.latestBlockId,
+                latestRenderedBlockId: this.latestRenderedBlockId
+            }
+        }));
+        return this.getCurrentSpread();
+    }
+
     buildSpreads(blocks = []) {
         const spreads = [];
         let cursorLine = 0;