JSFiddle - React, Tailwind, and code Playground

by Marty Nelson

HTML

<script id='template' type='text/html'>
	<h1>Sprite Things</h1>
	
	{{#each sprites}}
		<li on-click='setFrame'>{{.id}}</li>
	{{/each}}
</script>

JavaScript

var repeater = [
    {id: "stalkerOne", width: 225, height: 432, left: 8, spriteSheetURL: "spriteSheets/stalkerone.jpg", rows: 5, columns: 5, totalFrames:  24},
    {id: "stalkerTwo", width: 175, height: 432, left: 230, spriteSheetURL: "spriteSheets/stalkertwo.jpg", rows: 6, columns: 5, totalFrames:  26},
    {id: "stalkerThree", width: 251, height: 432, left: 404, spriteSheetURL: "spriteSheets/stalkerthree.jpg", rows: 6, columns: 5, totalFrames:  28}
]

class CanvasSprite {
	constructor( id, width, height /*,...*/ ) {
		this.id = id;
		this.width = width;
		this.height = height;
		// ...
	}
	
	setFrame( frame ) {
		console.log( 'sprite', this.id, 'set frame', frame );
	}
}

var CanvasAnimation = Ractive.extend( {
    oninit() {
        var sprites = this.get('repeaters').map( function(repeater){    
            return new CanvasSprite(repeater.id, repeater.width, repeater.height, repeater.spriteSheetURL, repeater.rows, repeater.columns, repeater.totalFrames);
        });
		this.set({ sprites });

        this.on('setFrame', function (event) {
		    var sprite = event.context;
            var offsetY = event.original.clientY - event.node.getBoundingClientRect().top;
            var relY = offsetY/sprite.height;
            sprite.setFrame(relY);
        });
    },
	
	onrender: function () {
		// wait till render, otherwise nothing there!
		this.get( 'sprites' ).forEach( sprite => sprite.setFrame(0) );
	}
});       

var canvasAnimation = new CanvasAnimation({
    el: document.body,
    template: '#template',
    data: { repeaters: repeater }
});