mr-crocs-adventures/tilorswift/js/Field.js

import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js";
import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js";

export default class Field
{
    constructor(tileset, index = 0)
    {
        this.tileset = tileset;
        this.index = index;
        this.initHtml();
        this.initEventListeners();
    }

    initEventListeners()
    {
        this.htmlElement.addEventListener(
            'mousedown', (event) => {
                console.log(event);
                window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button));
            }
        );

        this.htmlElement.addEventListener(
            'contextmenu', (event) => {
                window.dispatchEvent(new TilorswiftFieldClickedEvent(this), event.button);
            }
        );

        this.htmlElement.addEventListener(
            'mouseenter', () => {
                window.dispatchEvent(new TilorswiftFieldEnteredEvent(this));
            }
        );
    }

    initHtml()
    {
        this.htmlElement = document.createElement('td');
        this.className = 'field';
        this.setupElement();
        this.addSelector();
    }

    setupElement()
    {
        this.htmlElement.classList.add(this.className);
        this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
        this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileHeight() + 'px';
        this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
        this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
    }

    addSelector()
    {
        let hoverElement = document.createElement('div');
        hoverElement.classList.add('selection');
        this.htmlElement.appendChild(hoverElement);
    }

    setIndex(index)
    {
        this.index = index;
        this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
    }

    getElement()
    {
        return this.htmlElement;
    }
}