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

1
tilorswift/js/BrushMode.js
View File

@@ -2,6 +2,7 @@ const BrushMode = {
TERRAIN: 1,
ENTRANCE: 2,
EXIT: 3,
BACKGROUND: 4,
};
export default BrushMode;

30
tilorswift/js/ButtonBackgroundTile.js Normal file
View File

@@ -0,0 +1,30 @@
import ButtonTile from "./ButtonTile.js";
import TilorswiftButtonBackgroundTileClickedEvent from "./events/TilorswiftButtonBackgroundTileClickedEvent.js";
import Tileset from "./Tileset.js";
export default class ButtonBackgroundTile extends ButtonTile
{
/**
* @param {Tileset} tileset
* @param {number} index
*/
constructor(tileset, index = 0)
{
super(tileset, index);
}
initHtml() {
this.htmlElement = document.createElement('div');
this.className = 'field';
this.setupElement();
}
initEventListeners() {
this.htmlElement.addEventListener(
'mousedown',
() => {
window.dispatchEvent(new TilorswiftButtonBackgroundTileClickedEvent(this));
}
)
}
}

5
tilorswift/js/ButtonTile.js
View File

@@ -1,8 +1,13 @@
import Field from "./Field.js";
import TilorswiftButtonTileClickedEvent from "./events/TilorswiftButtonTileClickedEvent.js";
import Tileset from "./Tileset.js";
export default class ButtonTile extends Field
{
/**
* @param {Tileset} tileset
* @param {number} index
*/
constructor(tileset, index = 0)
{
super(tileset, 0, 0, index);

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;
}
}
}

27
tilorswift/js/Terrain.js
View File

@@ -5,9 +5,17 @@ import GraphicSet from "../../js/GraphicSet.js";
export default class Terrain
{
/**
* @param {Tileset} tileset
* @param {number} tilesX
* @param {number} tilesY
* @param {string} backgroundColor
*/
constructor(tileset, tilesX, tilesY, backgroundColor = 'black')
{
/** @type {Tileset} */
this.tileset = tileset;
this.fields = [];
this.tilesX = tilesX;
this.tilesY = tilesY;
@@ -19,6 +27,7 @@ export default class Terrain
this.backgroundImage = undefined;
this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
this.brushBackdroundTileIndex = 0;
this.init();
}
@@ -38,7 +47,14 @@ export default class Terrain
(event) => {
this.brushTileIndex = event.button.index;
}
)
);
window.addEventListener(
TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
(event) => {
this.brushTileIndex = event.button.index;
}
);
}
getElement()
@@ -106,8 +122,6 @@ export default class Terrain
addColumns(index, quantity = 1)
{
console.log(this.fields);
for (let c = 0; c < quantity; c++) {
this._insertColumn(index);
this.tilesX++;
@@ -122,8 +136,6 @@ export default class Terrain
}
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
console.log(this.fields);
}
_insertColumn(index = undefined)
@@ -149,7 +161,7 @@ export default class Terrain
setEntrancePoint(tileX, tileY)
{
if (this.fields[tileY][tileX].index === -1) {
if (this.fields[tileY][tileX].index < 0) {
if (this.entranceTileX !== undefined && this.entranceTileY !== undefined) {
this.fields[this.entranceTileY][this.entranceTileX].setEntrancePoint(false);
}
@@ -163,7 +175,7 @@ export default class Terrain
setTargetPoint(tileX, tileY)
{
if (this.fields[tileY][tileX].index === -1) {
if (this.fields[tileY][tileX].index < 0) {
if (this.targetTileX !== undefined && this.targetTileY !== undefined) {
this.fields[this.targetTileY][this.targetTileX].setTargetPoint(false);
}
@@ -203,6 +215,7 @@ export default class Terrain
const graphicSet = GraphicSet[levelData.tileset];
const tileset = new Tileset(levelData.tileset);
const terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
terrain.backgroundImage = graphicSet.backgroundImage ?? undefined;

33
tilorswift/js/Tileset.js
View File

@@ -3,41 +3,74 @@ import Setting from "../../js/Setting.js";
export default class Tileset
{
/**
* @param {number} setId
*/
constructor(setId)
{
/** @type {number} */
this.setId = setId;
/** @type {Image} */
this.image = new Image();
this.image.src = '../' + Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
/** @type {number} */
this.tiles = GraphicSet[this.setId].tiles;
/** @type {number} */
this.scale = GraphicSet[this.setId].scale;
/** @type {number} */
this.primaryTiles = GraphicSet[this.setId].primaryTiles;
/** @type {{image: Image, tiles: number, scale: number}|null} */
this.background = null;
if (GraphicSet[this.setId].tilesetBackground !== null) {
const backgroundImage = new Image();
backgroundImage.src = '../' + Setting.TILESET_LOCATION +
GraphicSet[this.setId].tilesetBackground.path;
this.background = {
image: backgroundImage,
tiles: GraphicSet[this.setId].tilesetBackground.tiles,
scale: GraphicSet[this.setId].tilesetBackground.scale,
};
}
}
/** @returns {number} */
getWidth()
{
return this.image.width * this.scale;
}
/** @returns {number} */
getHeight()
{
return this.image.height * this.scale;
}
/** @returns {number} */
getTileWidth()
{
return this.image.width / this.tiles * this.scale;
}
/** @returns {number} */
getTileHeight()
{
return this.image.height * this.scale;
}
/** @returns {boolean} */
hasExtendedTiles()
{
return GraphicSet[this.setId].tiles > GraphicSet[this.setId].primaryTiles ;
}
/** @returns {number} */
getTileIndexFactor(code)
{
const CODES = ['ltr', 't', 'r', 'b', 'l', 'lt', 'tr', 'ltb', 'tb', 'trb', 'lb', 'rb', 'ltrb', 'lr', 'lrb'];

42
tilorswift/js/Tilorswift.js
View File

@@ -5,6 +5,7 @@ import Brush from "./Brush.js";
import Tileset from "./Tileset.js";
import WidgetBar from "./menu/WidgetBar.js";
import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
import BackgroundPickerWidget from "./menu/BackgroundPickerWidget.js";
import EntrancePointWidget from "./menu/EntrancePointWidget.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import Mouse from "./Mouse.js";
@@ -38,8 +39,8 @@ export default class Tilorswift
{
static EFFECT_NAMES = {
[SnowEffect.NAME]: 'Schnee',
[RainEffect.NAME]: 'Regen',
[ThunderstormEffect.NAME]: 'Gewitter',
[RainEffect.NAME]: 'Regen',
[ThunderstormEffect.NAME]: 'Gewitter',
}
constructor(level) {
@@ -52,6 +53,8 @@ export default class Tilorswift
this.widgetBar.addWidget(this.tilesetPicker);
this.intelligentBrushSwitch = new IntelligentBrushSwitch(this.tilesetPicker, this.brush);
this.widgetBar.addWidget(this.intelligentBrushSwitch);
this.backgroundPicker = new BackgroundPickerWidget(this.tileset, this.brush);
this.widgetBar.addWidget(this.backgroundPicker);
this.entrancePicker = new EntrancePointWidget(this.widgetBar, this.brush);
this.widgetBar.addWidget(this.entrancePicker);
this.targetPicker = new TargetPointWidget(this.widgetBar, this.brush);
@@ -77,7 +80,7 @@ export default class Tilorswift
const menuLevel = new MenuGroup('Level');
menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
menuLevel.addMenuEntry(new MainMenuEntry('Effekte...', TilorswiftMenuEffectsClickedEvent));
menuLevel.addMenuEntry(new MainMenuEntry('Effekte...', TilorswiftMenuEffectsClickedEvent));
this.mainbar.addMenuGroup(menuLevel);
document.body.appendChild(this.mainbar.getElement());
@@ -109,7 +112,7 @@ export default class Tilorswift
targetY: this.level.getTargetY(),
gravity: this.level.gravity,
matrix: matrix,
effects: this.level.fullscreenEffects.map((effect) => {return effect.getName()}),
effects: this.level.fullscreenEffects.map((effect) => {return effect.getName()}),
};
return JSON.stringify(data);
@@ -119,7 +122,6 @@ export default class Tilorswift
{
const dialog = new LoadLevelDialog();
dialog.onLoad = (json) => {
console.log(json);
this.tileset = new Tileset(JSON.parse(json).tileset);
this.level = Level.createFromJson(json);
this.loadLevel();
@@ -142,6 +144,7 @@ export default class Tilorswift
this.map.innerHTML = '';
this.map.appendChild(this.level.terrain.getElement());
this.tilesetPicker.reloadTileset(this.tileset);
this.backgroundPicker.reloadTileset(this.tileset);
this.initializeIntelligentBrushWidget();
}
@@ -222,10 +225,15 @@ export default class Tilorswift
}
}
addBackground(field)
{
field.setIndex(this.level.terrain.brushTileIndex);
}
updateNeighbours(field)
{
for (const neighbour of this.level.terrain.getFieldNeighbours(field)) {
if (neighbour.index === -1) {
if (neighbour.index <= -1) {
continue;
}
@@ -262,15 +270,24 @@ export default class Tilorswift
this.removeTerrain(event.getField());
break;
}
} else if (this.brush.mode === BrushMode.BACKGROUND && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
this.addBackground(event.getField());
break;
case 2:
this.removeTerrain(event.getField());
break;
}
} else if (this.brush.mode === BrushMode.ENTRANCE) {
if (event.getField().index === -1) {
if (event.getField().index < 0) {
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
this.level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
this.brush.mode = BrushMode.TERRAIN;
this.widgetBar.enableWidgets();
}
} else if (this.brush.mode === BrushMode.EXIT) {
if (event.getField().index === -1) {
if (event.getField().index < 0) {
const coordinates = this.level.terrain.getFieldCoordinates(event.getField());
this.level.terrain.setTargetPoint(coordinates.x, coordinates.y);
this.brush.mode = BrushMode.TERRAIN;
@@ -291,7 +308,14 @@ export default class Tilorswift
TilorswiftEvent.FIELD_ENTERED,
(event) => {
if (this.mouse.isPressedLeft) {
this.addTerrain(event.getField());
switch (this.brush.mode) {
case BrushMode.TERRAIN:
this.addTerrain(event.getField());
break;
case BrushMode.BACKGROUND:
this.addBackground(event.getField());
break;
}
} else if (this.mouse.isPressedRight) {
event.getField().setIndex(-1);
}

9
tilorswift/js/events/TilorswiftBackgroundButtonClickedEvent.js Normal file
View File

@@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftBackgroundButtonTileClickedEvent extends Event
{
constructor(button) {
super(TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED);
this.button = button;
}
}

9
tilorswift/js/events/TilorswiftButtonBackgroundTileClickedEvent.js Normal file
View File

@@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftButtonBackgroundTileClickedEvent extends Event
{
constructor(button) {
super(TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED);
this.button = button;
}
}

1
tilorswift/js/events/TilorswiftEvent.js
View File

@@ -2,6 +2,7 @@ const TilorswiftEvent = {
FIELD_CLICKED: 'fieldClicked',
FIELD_ENTERED: 'fieldEntered',
BUTTON_TILE_CLICKED: 'buttonTileClicked',
BACKGROUND_BUTTON_TILE_CLICKED: 'backgroundButtonTileClicked',
MENU_SAVE_CLICKED: 'menuSaveClicked',
MENU_OPEN_CLICKED: 'menuOpenClicked',
DIALOG_BUTTON_OK_CLICKED: 'dialogButtonOkClicked',

102
tilorswift/js/menu/BackgroundPickerWidget.js Normal file
View File

@@ -0,0 +1,102 @@
import Widget from "./Widget.js";
import BrushMode from "../BrushMode.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
import ButtonBackgroundTile from "../ButtonBackgroundTile.js";
import Tileset from "../Tileset.js";
export default class BackgroundPickerWidget extends Widget
{
constructor(tileset, brush)
{
super('Hintergrund');
this.tileset = tileset;
this.brush = brush;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.htmlElement.appendChild(this.htmlElementSelector);
this.loadTileset();
window.addEventListener(
TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
(event) => {
if (this.isActive) {
this.setTile(event.button.index);
this.brush.mode = BrushMode.BACKGROUND;
}
}
);
}
loadTileset()
{
if (this.tileset.background === null) {
this.htmlElement.style.backgroundImage = 'none';
return;
}
for (let t = -2; t >= -this.tileset.background.tiles - 1; t--) {
console.log(t);
const button = new ButtonBackgroundTile(this.tileset, t);
this.htmlElementSelector.appendChild(button.getElement());
}
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.background.image.src + '")';
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
}
/**
* @param {Tileset} tileset
*/
reloadTileset(tileset)
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
this.loadTileset();
}
createElementPicker()
{
const htmlElement = document.createElement('div');
htmlElement.id = 'tileset-picker';
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
return htmlElement;
}
createElementSelector()
{
const htmlElementSelector = document.createElement('div');
htmlElementSelector.id = 'tileset-selector-widget';
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
return htmlElementSelector;
}
setTile(index)
{
this.htmlElement.style.backgroundPosition = String(-this.tileset.getTileWidth() * index) + 'px ' + String(this.tileset.getTileHeight()) + 'px';
}
getElement()
{
return this.htmlElement;
}
updateExtendedTileVisibility()
{
const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles);
for (const index of this.htmlElementSelector.childNodes.keys()) {
if (index >= firstExtendedTileIndex) {
this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent
? 'none'
: 'inline-flex';
}
}
}
}

4
tilorswift/js/module.js
View File

@@ -8,6 +8,10 @@ const imageLoader = new ImageLoader();
for (const graphicSet of GraphicSet) {
imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tileset);
if (graphicSet.tilesetBackground !== null) {
imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tilesetBackground.path);
}
}
imageLoader.onLoad = () => {

3
tilorswift/style.css
View File

@@ -179,6 +179,9 @@ body {
display: inline-flex;
}
.entrance, .target {
width: 96px;
height: 96px;
position: absolute;
background-image: url("graphics/entrance-point.svg") !important;
background-size: contain !important;
background-position: center bottom !important;