139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js";
|
|
import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js";
|
|
|
|
export default class Field
|
|
{
|
|
/**
|
|
* @param {Tileset} tileset
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} index
|
|
*/
|
|
constructor(tileset, x = 0, y = 0, index = -1)
|
|
{
|
|
this.tileset = tileset;
|
|
this.index = index;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.isEntrancePoint = false;
|
|
this.isTargetPoint = false;
|
|
this.entrancePoint = null;
|
|
this.targetPoint = null;
|
|
|
|
this.initHtml();
|
|
this.initEventListeners();
|
|
}
|
|
|
|
initEventListeners()
|
|
{
|
|
this.htmlElement.addEventListener(
|
|
'mousedown', (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._setupBackgroundImage();
|
|
this._setupBackgroundPosition();
|
|
}
|
|
|
|
_setupBackgroundImage()
|
|
{
|
|
const url = this.index >= -1
|
|
? this.tileset.image.src
|
|
: this.tileset.background.image.src;
|
|
|
|
this.htmlElement.style.backgroundImage = 'url("' + url + '")';
|
|
}
|
|
|
|
_setupBackgroundPosition()
|
|
{
|
|
const position = this.index >= -1
|
|
? -this.index * this.tileset.getTileWidth()
|
|
: ((this.index + 2) % this.tileset.background.tiles) * this.tileset.getTileWidth();
|
|
|
|
this.htmlElement.style.backgroundPositionX = String(position) + 'px';
|
|
}
|
|
|
|
addSelector()
|
|
{
|
|
let hoverElement = document.createElement('div');
|
|
hoverElement.classList.add('selection');
|
|
|
|
this.htmlElement.appendChild(hoverElement);
|
|
}
|
|
|
|
setIndex(index)
|
|
{
|
|
this.index = index;
|
|
this._setupBackgroundPosition();
|
|
this._setupBackgroundImage();
|
|
}
|
|
|
|
setEntrancePoint(bool)
|
|
{
|
|
this.isEntrancePoint = bool;
|
|
|
|
if (this.isEntrancePoint) {
|
|
this.entrancePoint = document.createElement('div');
|
|
this.entrancePoint.classList.add('entrance');
|
|
|
|
this.htmlElement.appendChild(this.entrancePoint);
|
|
} else {
|
|
if (this.entrancePoint instanceof HTMLElement) {
|
|
this.entrancePoint.remove();
|
|
this.entrancePoint = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
setTargetPoint(bool)
|
|
{
|
|
this.isTargetPoint = bool;
|
|
|
|
if (this.isTargetPoint) {
|
|
this.targetPoint = document.createElement('div');
|
|
this.targetPoint.classList.add('target');
|
|
|
|
this.htmlElement.appendChild(this.targetPoint);
|
|
} else {
|
|
if (this.targetPoint instanceof HTMLElement) {
|
|
this.targetPoint.remove();
|
|
this.targetPoint = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
getElement()
|
|
{
|
|
return this.htmlElement;
|
|
}
|
|
}
|