Spaces:

Nymbo
/

Sprite-Animation-Viewer

Running

App Files Files Community

Nymbo commited on Apr 26

Commit

c431ae8

verified ·

1 Parent(s): 9e092f7

Update index.html

Browse files

Files changed (1) hide show

index.html +799 -19

index.html CHANGED Viewed

@@ -1,19 +1,799 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sprite Animation Viewer</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, sans-serif;
+        }
+        body {
+            background-color: #121212;
+            color: #e0e0e0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            width: 100%;
+            max-width: 900px;
+            background-color: #1e1e1e;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #3498db;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .settings {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+            color: #3498db;
+        }
+        input[type="number"], input[type="file"], input[type="range"] {
+            width: 100%;
+            padding: 8px;
+            border-radius: 5px;
+            border: 1px solid #333;
+            background-color: #2a2a2a;
+            color: #e0e0e0;
+        }
+        button {
+            background-color: #3498db;
+            color: #121212;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+            margin-right: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        button:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 15px 0;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .canvas-container {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+            border: 2px solid #3498db;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
+            padding: 10px;
+            background-color: #0a0a0a;
+        }
+        canvas {
+            background-color: #0a0a0a;
+            max-width: 100%;
+            height: auto;
+            image-rendering: pixelated;
+        }
+        .sprite-info {
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #242424;
+            border-radius: 5px;
+            border-left: 3px solid #3498db;
+        }
+        .fps-display {
+            margin-left: 10px;
+            font-weight: bold;
+            color: #3498db;
+        }
+        .preview-container {
+            margin-top: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+        }
+        .frame-preview {
+            border: 2px solid #333;
+            border-radius: 5px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.2s, border-color 0.2s;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+        }
+        .frame-preview:hover {
+            transform: scale(1.05);
+        }
+        .frame-preview.active {
+            border-color: #3498db;
+            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
+        }
+        .full-sprite-preview-container {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: #242424;
+            border-radius: 5px;
+            border-left: 3px solid #3498db;
+        }
+        .full-sprite-preview-container h3 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            color: #3498db;
+            font-size: 16px;
+        }
+        .preview-area {
+            width: 100%;
+            overflow-x: auto;
+            overflow-y: auto;
+            background-color: #1a1a1a;
+            border-radius: 4px;
+            padding: 10px;
+            max-height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .preview-area img {
+            max-width: 100%;
+            max-height: 180px;
+            object-fit: contain;
+            image-rendering: pixelated;
+        }
+        .no-sprite-message {
+            color: #666;
+            text-align: center;
+            font-style: italic;
+        }
+        select.row-select {
+            width: 100%;
+            padding: 8px;
+            border-radius: 5px;
+            border: 1px solid #333;
+            background-color: #2a2a2a;
+            color: #e0e0e0;
+            cursor: pointer;
+        }
+        select.row-select:focus {
+            border-color: #3498db;
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
+        }
+        input[type="range"].slider {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: #1a1a1a;
+            outline: none;
+            margin-top: 8px;
+        }
+        input[type="range"].slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #3498db;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        input[type="range"].slider::-webkit-slider-thumb:hover {
+            background: #2980b9;
+            transform: scale(1.1);
+        }
+        input[type="range"].slider::-moz-range-thumb {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #3498db;
+            cursor: pointer;
+            border: none;
+            transition: all 0.2s;
+        }
+        input[type="range"].slider::-moz-range-thumb:hover {
+            background: #2980b9;
+            transform: scale(1.1);
+        }
+        .example-desc {
+            font-size: 0.85em;
+            margin-top: 5px;
+            color: #777;
+            font-style: italic;
+        }
+        .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .speed-control input[type="range"] {
+            flex: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Sprite Animation Viewer</h1>
+        <div class="settings">
+            <div class="form-group">
+                <label for="spriteFile">Upload Sprite Sheet:</label>
+                <input type="file" id="spriteFile" accept="image/png,image/jpeg">
+            </div>
+            <div class="form-group">
+                <button id="loadExampleBtn" aria-label="Load example sprite sheet">Load Example</button>
+                <p class="example-desc">Try a lotus flower blooming animation</p>
+            </div>
+            <div class="form-group">
+                <label for="tileWidth" id="tileWidthLabel">Tile Width (px):</label>
+                <input type="number" id="tileWidth" value="64" min="1" max="512">
+                <input type="range" id="tileWidthSlider" min="1" max="512" value="64" class="slider" aria-labelledby="tileWidthLabel">
+            </div>
+            <div class="form-group">
+                <label for="tileHeight" id="tileHeightLabel">Tile Height (px):</label>
+                <input type="number" id="tileHeight" value="64" min="1" max="512">
+                <input type="range" id="tileHeightSlider" min="1" max="512" value="64" class="slider" aria-labelledby="tileHeightLabel">
+            </div>
+            <div class="form-group">
+                <label for="frameCount" id="frameCountLabel">Frame Count:</label>
+                <input type="number" id="frameCount" value="10" min="1" max="50">
+                <input type="range" id="frameCountSlider" min="1" max="50" value="10" class="slider" aria-labelledby="frameCountLabel">
+            </div>
+            <div class="form-group">
+                <label for="rowSelect">Color Variant:</label>
+                <select id="rowSelect" class="row-select">
+                    <option value="0">Row 1</option>
+                    <option value="1">Row 2</option>
+                    <option value="2">Row 3</option>
+                    <option value="3">Row 4</option>
+                    <option value="4">Row 5</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="directionSelect">Animation Direction:</label>
+                <select id="directionSelect" class="row-select">
+                    <option value="ltr">Left to Right</option>
+                    <option value="rtl">Right to Left</option>
+                    <option value="ttb">Top to Bottom</option>
+                    <option value="btt">Bottom to Top</option>
+                    <option value="alternate">Alternate (Ping-Pong)</option>
+                    <option value="random">Random</option>
+                </select>
+            </div>
+        </div>
+        <div class="sprite-info" id="spriteInfo">
+            No sprite loaded yet.
+        </div>
+        <div class="full-sprite-preview-container">
+            <h3>Full Sprite Sheet Preview</h3>
+            <div class="preview-area" id="fullSpritePreview">
+                <p class="no-sprite-message">Upload a sprite sheet to see preview</p>
+            </div>
+        </div>
+        <div class="controls">
+            <button id="playPauseBtn" aria-label="Play animation">Play</button>
+            <button id="resetBtn" aria-label="Reset animation">Reset</button>
+            <div class="speed-control">
+                <label for="fpsRange" id="fpsLabel">Speed: </label>
+                <input type="range" id="fpsRange" min="1" max="60" value="10" aria-labelledby="fpsLabel">
+                <span class="fps-display" id="fpsDisplay" aria-live="polite">10 FPS</span>
+            </div>
+        </div>
+        <div class="canvas-container">
+            <canvas id="animationCanvas" aria-label="Sprite animation display"></canvas>
+        </div>
+        <div class="preview-container" id="framePreviewContainer" role="list" aria-label="Animation frames preview"></div>
+    </div>
+    <script>
+        // Get all the DOM elements we'll need
+        const spriteFileInput = document.getElementById('spriteFile');
+        const tileWidthInput = document.getElementById('tileWidth');
+        const tileHeightInput = document.getElementById('tileHeight');
+        const frameCountInput = document.getElementById('frameCount');
+        const tileWidthSlider = document.getElementById('tileWidthSlider');
+        const tileHeightSlider = document.getElementById('tileHeightSlider');
+        const frameCountSlider = document.getElementById('frameCountSlider');
+        const rowSelectInput = document.getElementById('rowSelect');
+        const directionSelectInput = document.getElementById('directionSelect');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const fpsRange = document.getElementById('fpsRange');
+        const fpsDisplay = document.getElementById('fpsDisplay');
+        const canvas = document.getElementById('animationCanvas');
+        const ctx = canvas.getContext('2d');
+        const spriteInfo = document.getElementById('spriteInfo');
+        const framePreviewContainer = document.getElementById('framePreviewContainer');
+        const fullSpritePreview = document.getElementById('fullSpritePreview');
+        const loadExampleBtn = document.getElementById('loadExampleBtn');
+        // Animation state
+        let spriteImage = null;
+        let currentFrame = 0;
+        let isPlaying = false;
+        let animationInterval = null;
+        let fps = 10;
+        let currentRow = 0; // Track which row/color variant is selected
+        let direction = 'ltr'; // Animation direction
+        let isReversing = false; // For alternating animation
+        // Initialize with default sizes
+        canvas.width = 128;
+        canvas.height = 128;
+        // Load the example image
+        loadExampleBtn.addEventListener('click', () => {
+            // Example image - the lotus flower blooming animation
+            const exampleImageUrl = 'lotus_bloom.png'; // This should be the path to your lotus flower image
+            // Create an image from the example URL
+            spriteImage = new Image();
+            spriteImage.onload = () => {
+                // Set appropriate defaults for this specific sprite sheet
+                tileWidthInput.value = 64;
+                tileWidthSlider.value = 64;
+                tileHeightInput.value = 64;
+                tileHeightSlider.value = 64;
+                frameCountInput.value = 16; // Assuming 16 frames in the animation
+                frameCountSlider.value = 16;
+                updateSpriteInfo();
+                updateFullSpritePreview();
+                reset();
+                createFramePreviews();
+            };
+            spriteImage.onerror = () => {
+                alert('Could not load example image. Make sure "lotus_bloom.png" is in the same directory as this HTML file.');
+            };
+            spriteImage.src = exampleImageUrl;
+        });
+        // Handle file upload
+        spriteFileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                // Create image from uploaded file
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    spriteImage = new Image();
+                    spriteImage.onload = () => {
+                        updateSpriteInfo();
+                        updateFullSpritePreview();
+                        reset();
+                        createFramePreviews();
+                    };
+                    spriteImage.src = event.target.result;
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        // Update the full sprite sheet preview
+        function updateFullSpritePreview() {
+            fullSpritePreview.innerHTML = '';
+            if (!spriteImage) {
+                fullSpritePreview.innerHTML = '<p class="no-sprite-message">Upload a sprite sheet to see preview</p>';
+                return;
+            }
+            // Create a copy of the sprite image for the preview
+            const previewImg = document.createElement('img');
+            previewImg.src = spriteImage.src;
+            previewImg.alt = 'Full sprite sheet preview';
+            // Add the image to the preview container
+            fullSpritePreview.appendChild(previewImg);
+        }
+        // Update sprite sheet information display
+        function updateSpriteInfo() {
+            if (!spriteImage) return;
+            const tileWidth = parseInt(tileWidthInput.value);
+            const tileHeight = parseInt(tileHeightInput.value);
+            const frameCount = parseInt(frameCountInput.value);
+            // Update canvas size to match tile size (scaled up by 2x for better visibility)
+            canvas.width = tileWidth * 2;
+            canvas.height = tileHeight * 2;
+            // Calculate how many frames can fit in the image
+            const framesPerRow = Math.floor(spriteImage.width / tileWidth);
+            const totalRows = Math.floor(spriteImage.height / tileHeight);
+            const maxPossibleFrames = framesPerRow * totalRows;
+            // Update the row selector to match the actual number of rows in the sprite sheet
+            rowSelectInput.innerHTML = '';
+            for (let i = 0; i < totalRows; i++) {
+                const option = document.createElement('option');
+                option.value = i;
+                option.textContent = `Row ${i+1} ${i === 0 ? '(Top)' : i === totalRows-1 ? '(Bottom)' : ''}`;
+                rowSelectInput.appendChild(option);
+            }
+            spriteInfo.innerHTML = `
+                Sprite Sheet: ${spriteImage.width}x${spriteImage.height}px<br>
+                Tile Size: ${tileWidth}x${tileHeight}px<br>
+                Frames: ${frameCount} per row<br>
+                Rows/Variants: ${totalRows}<br>
+                Layout: ${framesPerRow} frames per row<br>
+                Animation: ${getDirectionDescription()}
+            `;
+            // Set current row to match the select value
+            currentRow = parseInt(rowSelectInput.value);
+        }
+        // Get a user-friendly description of the current animation direction
+        function getDirectionDescription() {
+            switch (directionSelectInput.value) {
+                case 'ltr': return 'Left to Right';
+                case 'rtl': return 'Right to Left';
+                case 'ttb': return 'Top to Bottom';
+                case 'btt': return 'Bottom to Top';
+                case 'alternate': return 'Alternating (Ping-Pong)';
+                case 'random': return 'Random Frame Order';
+                default: return 'Left to Right';
+            }
+        }
+        // Create individual frame previews
+        function createFramePreviews() {
+            framePreviewContainer.innerHTML = '';
+            if (!spriteImage) return;
+            const tileWidth = parseInt(tileWidthInput.value);
+            const tileHeight = parseInt(tileHeightInput.value);
+            const frameCount = parseInt(frameCountInput.value);
+            const row = currentRow;
+            for (let i = 0; i < frameCount; i++) {
+                // Create a canvas for each frame preview
+                const previewCanvas = document.createElement('canvas');
+                previewCanvas.width = tileWidth;
+                previewCanvas.height = tileHeight;
+                previewCanvas.style.width = '64px'; // Smaller display size
+                previewCanvas.style.height = '64px';
+                previewCanvas.className = 'frame-preview';
+                previewCanvas.setAttribute('role', 'listitem');
+                previewCanvas.setAttribute('aria-label', `Frame ${i+1}`);
+                if (i === currentFrame) {
+                    previewCanvas.classList.add('active');
+                    previewCanvas.setAttribute('aria-current', 'true');
+                }
+                const previewCtx = previewCanvas.getContext('2d');
+                previewCtx.imageSmoothingEnabled = false;
+                // Calculate position in sprite sheet
+                const framesPerRow = Math.floor(spriteImage.width / tileWidth);
+                const col = i % framesPerRow;
+                // Draw the frame from the current row
+                previewCtx.drawImage(
+                    spriteImage,
+                    col * tileWidth,
+                    row * tileHeight,
+                    tileWidth,
+                    tileHeight,
+                    0,
+                    0,
+                    tileWidth,
+                    tileHeight
+                );
+                // Add click handler to select frame
+                previewCanvas.addEventListener('click', () => {
+                    currentFrame = i;
+                    updateActivePreviews();
+                    drawFrame();
+                });
+                framePreviewContainer.appendChild(previewCanvas);
+            }
+        }
+        // Update which preview is marked as active
+        function updateActivePreviews() {
+            const previews = document.querySelectorAll('.frame-preview');
+            previews.forEach((preview, index) => {
+                if (index === currentFrame) {
+                    preview.classList.add('active');
+                    preview.setAttribute('aria-current', 'true');
+                } else {
+                    preview.classList.remove('active');
+                    preview.removeAttribute('aria-current');
+                }
+            });
+        }
+        // Draw the current frame
+        function drawFrame() {
+            if (!spriteImage) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const tileWidth = parseInt(tileWidthInput.value);
+            const tileHeight = parseInt(tileHeightInput.value);
+            const frameCount = parseInt(frameCountInput.value);
+            const row = currentRow;
+            // Ensure currentFrame is within bounds
+            currentFrame = currentFrame % frameCount;
+            // Calculate position in sprite sheet
+            const framesPerRow = Math.floor(spriteImage.width / tileWidth);
+            const col = currentFrame % framesPerRow;
+            // Draw the frame - maintain crisp pixel art by using imageSmoothingEnabled = false
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(
+                spriteImage,
+                col * tileWidth,
+                row * tileHeight,
+                tileWidth,
+                tileHeight,
+                0,
+                0,
+                canvas.width,
+                canvas.height
+            );
+            updateActivePreviews();
+            // Update canvas aria-label for accessibility
+            canvas.setAttribute('aria-label', `Sprite animation display - Frame ${currentFrame + 1} of ${frameCount}, Row ${currentRow + 1}, Direction: ${getDirectionDescription()}`);
+        }
+        // Animation loop
+        function animate() {
+            if (!isPlaying) return;
+            clearInterval(animationInterval);
+            animationInterval = setInterval(() => {
+                // Update the current frame based on direction
+                updateFrameBasedOnDirection();
+                drawFrame();
+            }, 1000 / fps);
+        }
+        // Update the frame based on selected direction
+        function updateFrameBasedOnDirection() {
+            const frameCount = parseInt(frameCountInput.value);
+            direction = directionSelectInput.value;
+            switch (direction) {
+                case 'ltr':
+                    // Left to right (increment frame horizontally)
+                    currentFrame = (currentFrame + 1) % frameCount;
+                    break;
+                case 'rtl':
+                    // Right to left (decrement frame horizontally)
+                    currentFrame = (currentFrame - 1 + frameCount) % frameCount;
+                    break;
+                case 'ttb':
+                    // Top to bottom (increment row)
+                    currentFrame = currentFrame;  // Keep the same frame
+                    const totalRows = Math.floor(spriteImage.height / parseInt(tileHeightInput.value));
+                    currentRow = (currentRow + 1) % totalRows;
+                    break;
+                case 'btt':
+                    // Bottom to top (decrement row)
+                    currentFrame = currentFrame;  // Keep the same frame
+                    const rows = Math.floor(spriteImage.height / parseInt(tileHeightInput.value));
+                    currentRow = (currentRow - 1 + rows) % rows;
+                    break;
+                case 'alternate':
+                    // Ping-pong between first and last frame
+                    if (!isReversing) {
+                        currentFrame++;
+                        if (currentFrame >= frameCount - 1) {
+                            isReversing = true;
+                        }
+                    } else {
+                        currentFrame--;
+                        if (currentFrame <= 0) {
+                            isReversing = false;
+                        }
+                    }
+                    break;
+                case 'random':
+                    // Jump to a random frame
+                    let newFrame;
+                    do {
+                        newFrame = Math.floor(Math.random() * frameCount);
+                    } while (newFrame === currentFrame && frameCount > 1);
+                    currentFrame = newFrame;
+                    break;
+            }
+        }
+        // Play/Pause button
+        playPauseBtn.addEventListener('click', () => {
+            isPlaying = !isPlaying;
+            playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';
+            playPauseBtn.setAttribute('aria-label', isPlaying ? 'Pause animation' : 'Play animation');
+            if (isPlaying) {
+                animate();
+            } else {
+                clearInterval(animationInterval);
+            }
+        });
+        // Reset button
+        resetBtn.addEventListener('click', reset);
+        function reset() {
+            currentFrame = 0;
+            isReversing = false; // Reset the alternating direction state
+            drawFrame();
+        }
+        // FPS (speed) control
+        fpsRange.addEventListener('input', (e) => {
+            fps = parseInt(e.target.value);
+            fpsDisplay.textContent = `${fps} FPS`;
+            if (isPlaying) {
+                animate();
+            }
+        });
+        // Update when parameters change
+        tileWidthInput.addEventListener('input', () => {
+            tileWidthSlider.value = tileWidthInput.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        tileHeightInput.addEventListener('input', () => {
+            tileHeightSlider.value = tileHeightInput.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        frameCountInput.addEventListener('input', () => {
+            frameCountSlider.value = frameCountInput.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        // Slider event listeners
+        tileWidthSlider.addEventListener('input', () => {
+            tileWidthInput.value = tileWidthSlider.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        tileHeightSlider.addEventListener('input', () => {
+            tileHeightInput.value = tileHeightSlider.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        frameCountSlider.addEventListener('input', () => {
+            frameCountInput.value = frameCountSlider.value;
+            updateSpriteInfo();
+            createFramePreviews();
+            drawFrame();
+        });
+        // Listen for row selection changes
+        rowSelectInput.addEventListener('change', () => {
+            currentRow = parseInt(rowSelectInput.value);
+            createFramePreviews();
+            drawFrame();
+        });
+        // Listen for direction selection changes
+        directionSelectInput.addEventListener('change', () => {
+            // Update direction - the actual change happens in the animation loop
+            direction = directionSelectInput.value;
+            // Reset alternating state when changing direction
+            isReversing = false;
+            // Create new frame previews if we've changed to a vertical animation
+            if (direction === 'ttb' || direction === 'btt') {
+                createFramePreviews();
+            }
+            // If we're actively playing, restart the animation with the new direction
+            if (isPlaying) {
+                animate();
+            }
+            // Update the sprite info to show the new direction
+            if (spriteImage) {
+                updateSpriteInfo();
+            }
+        });
+        // Initial drawing
+        drawFrame();
+    </script>
+</body>
+</html>