Mal/mr-crocs-adventures
1
0
Fork 0
mirror of https://git.leinelab.org/Mal/mr-crocs-adventures.git synced 2025-09-11 02:57:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Graveyard terrain and background tiles implemented

Browse Source
This commit is contained in:
Mal
2025-05-16 23:08:35 +02:00
parent e97c04ed19
commit fc990c12aa
25 changed files with 504 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
tilorswift/js/Field.js
View File

@@ -3,6 +3,12 @@ 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;
@@ -11,6 +17,9 @@ export default class Field
this.y = y;
this.isEntrancePoint = false;
this.isTargetPoint = false;
this.entrancePoint = null;
this.targetPoint = null;
this.initHtml();
this.initEventListeners();
}
@@ -50,21 +59,42 @@ export default class Field
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';
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 % 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.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
this._setupBackgroundPosition();
this._setupBackgroundImage();
}
setEntrancePoint(bool)
@@ -72,9 +102,15 @@ export default class Field
this.isEntrancePoint = bool;
if (this.isEntrancePoint) {
this.htmlElement.classList.add('entrance');
this.entrancePoint = document.createElement('div');
this.entrancePoint.classList.add('entrance');
this.htmlElement.appendChild(this.entrancePoint);
} else {
this.htmlElement.classList.remove('entrance');
if (this.entrancePoint instanceof HTMLElement) {
this.entrancePoint.remove();
this.entrancePoint = null;
}
}
}
@@ -83,9 +119,15 @@ export default class Field
this.isTargetPoint = bool;
if (this.isTargetPoint) {
this.htmlElement.classList.add('target');
this.targetPoint = document.createElement('div');
this.targetPoint.classList.add('target');
this.htmlElement.appendChild(this.targetPoint);
} else {
this.htmlElement.classList.remove('target');
if (this.targetPoint instanceof HTMLElement) {
this.targetPoint.remove();
this.targetPoint = null;
}
}
}