%%html

<body>
    <div>
        <canvas id="spriteContainer"> <!-- Within the base div is a canvas. An HTML canvas is used only for graphics. It allows the user to access some basic functions related to the image created on the canvas (including animation) -->
            <img id="dogSprite" src="/student/images/bunny_spritesheet.png">  <!-- change sprite here -->
        </canvas>
        <div id="controls"> <!--basic radio buttons which can be used to check whether each individual animaiton works -->
            <input type="radio" name="animation" id="back" checked>
            <label for="back">Back</label><br>
            <input type="radio" name="animation" id="right">
            <label for="right">Right</label><br>
            <input type="radio" name="animation" id="front">
            <label for="front">Front</label><br>
            <input type="radio" name="animation" id="left">
            <label for="left">Left</label><br>
        </div>
    </div>
</body>

<script>
    // start on page load
    window.addEventListener('load', function () {
        const canvas = document.getElementById('spriteContainer');
        const ctx = canvas.getContext('2d');
        const SPRITE_WIDTH = 48;  // matches sprite pixel width
        const SPRITE_HEIGHT = 64; // matches sprite pixel height
        const SCALE_FACTOR = 4;  // control size of sprite on canvas
        const FRAME_LIMIT = 3;  // number of frames per row, this code assume each row is same
        // const FRAME_RATE = 15;  // not used

        canvas.width = SPRITE_WIDTH * SCALE_FACTOR;
        canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;

        class Dog {
            constructor() {
                this.image = document.getElementById("dogSprite");
                this.spriteWidth = SPRITE_WIDTH;
                this.spriteHeight = SPRITE_HEIGHT;
                this.width = this.spriteWidth;
                this.height = this.spriteHeight;
                this.x = 0;
                this.y = 0;
                this.scale = SCALE_FACTOR;
                this.minFrame = 0;
                this.maxFrame = FRAME_LIMIT;
                this.frameX = 0;
                this.frameY = 0;
            }

            // draw dog object
            draw(context) {
                context.drawImage(
                    this.image,
                    this.frameX * this.spriteWidth,
                    this.frameY * this.spriteHeight,
                    this.spriteWidth,
                    this.spriteHeight,
                    this.x,
                    this.y,
                    this.width * this.scale,
                    this.height * this.scale
                );
            }

            // update frameX of object
            update() {
                if (this.frameX < this.maxFrame) {
                    this.frameX++;
                } else {
                    this.frameX = 0;
                }
            }
        }

        // dog object
        const dog = new Dog();

        // update frameY of dog object, action from idle, bark, walk radio control
        const controls = document.getElementById('controls');
        controls.addEventListener('click', function (event) {
            if (event.target.tagName === 'INPUT') {
                const selectedAnimation = event.target.id;
                switch (selectedAnimation) {
                    case 'back':
                        dog.frameY = 0;
                        break;
                    case 'right':
                        dog.frameY = 1;
                        break;
                    case 'front':
                        dog.frameY = 2;
                        break;
                    case 'left':
                        dog.frameY = 3;
                        break;
                    default:
                        break;
                }
            }
        });

        // Animation recursive control function
        let framesPerSecond = 100
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            link.draw(ctx);
            link.update();
             setTimeout(function() {
        requestAnimationFrame(animate);
        }, 1000 / framesPerSecond);
        }

        animate();
    });
</script>