Mal/mr-crocs-adventures
Mal
/
mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Intelligent graphic sets implemented

This commit is contained in:
Mal 2023-09-24 01:48:01 +02:00
parent 6f548a1b47
commit e6c247c655
12 changed files with 319 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/GraphicSet.js
View File

@ -6,7 +6,8 @@ let GraphicSet = [
scale: 3,
backgroundColor: '#6096ff',
backgroundImage: null,
tilePreview: 5
tilePreview: 5,
primaryTiles: 8,
},
{
name: 'Moon',
@ -15,7 +16,8 @@ let GraphicSet = [
scale: 3,
backgroundColor: 'black',
backgroundImage: 'background_earth.jpg',
tilePreview: 1
tilePreview: 1,
primaryTiles: 2,
},
{
name: 'Death Star',
@ -24,7 +26,8 @@ let GraphicSet = [
scale: 1,
backgroundColor: '#171721',
backgroundImage: null,
tilePreview: 1
tilePreview: 1,
primaryTiles: 6,
}
];

2
js/Level.js
View File

@ -79,7 +79,7 @@ export default class Level
let loader = new FileLoader(filename);
loader.onLoad = (data) => {
const json = JSON.parse(data);
const level = new Level(Terrain.createFromJson(json));
const level = new Level(Terrain.createFromJson(json));
level.setGravity(json.gravity);
callback(level);

1
tilorswift/js/Brush.js
View File

@ -5,5 +5,6 @@ export default class Brush
constructor()
{
this.mode = BrushMode.TERRAIN;
this.isIntelligent = false;
}
}

2
tilorswift/js/ButtonTile.js
View File

@ -5,7 +5,7 @@ export default class ButtonTile extends Field
{
constructor(tileset, index = 0)
{
super(tileset, index);
super(tileset, 0, 0, index);
}
initHtml() {

4
tilorswift/js/Field.js
View File

@ -3,10 +3,12 @@ import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js
export default class Field
{
constructor(tileset, index = -1)
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.initHtml();

71
tilorswift/js/Terrain.js
View File

@ -75,14 +75,13 @@ export default class Terrain
_insertRow(index = undefined)
{
let row = [];
let tr = document.createElement('tr');
const row = [];
const tr = document.createElement('tr');
for (let col = 0; col < this.tilesX; col++) {
let field = new Field(this.tileset);
let td = field.getElement();
const field = new Field(this.tileset, col, this.fields.length);
row.push(field);
tr.appendChild(td);
tr.appendChild(field.getElement());
}
if (index === undefined || index >= this.tilesY - 1) {
@ -183,10 +182,10 @@ export default class Terrain
static createFromJson(levelData)
{
let graphicSet = GraphicSet[levelData.tileset];
const graphicSet = GraphicSet[levelData.tileset];
let tileset = new Tileset(levelData.tileset);
let terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
const tileset = new Tileset(levelData.tileset);
const terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
terrain.backgroundImage = graphicSet.backgroundImage ?? undefined;
for (let y = 0; y < levelData.rows; y++) {
@ -203,4 +202,60 @@ export default class Terrain
return terrain;
}
getFieldNeighbours(field)
{
const neighbours = [];
for (let x = Math.max(0, field.x - 1); x < Math.min(this.tilesX, field.x + 2); x++) {
for (let y = Math.max(0, field.y - 1); y < Math.min(this.tilesY, field.y + 2); y++) {
if (field.x === x && field.y === y) {
continue;
}
neighbours.push(this.fields[y][x]);
}
}
return neighbours;
}
hasFieldNeighbour(field, offsetX, offsetY)
{
const x = field.x + offsetX;
const y = field.y + offsetY;
if (x < 0 || x > this.tilesX - 1) {
return true;
}
if (y < 0 || y > this.tilesY - 1) {
return true;
}
return this.fields[y][x].index > -1;
}
getFieldNeighbourCode(field)
{
let code = '';
if (!this.hasFieldNeighbour(field, -1, 0)) {
code += 'l';
}
if (!this.hasFieldNeighbour(field, 0, -1)) {
code += 't';
}
if (!this.hasFieldNeighbour(field, 1, 0)) {
code += 'r';
}
if (!this.hasFieldNeighbour(field, 0, 1)) {
code += 'b';
}
return code;
}
}

13
tilorswift/js/Tileset.js
View File

@ -10,6 +10,7 @@ export default class Tileset
this.image.src = '../' + Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
this.tiles = GraphicSet[this.setId].tiles;
this.scale = GraphicSet[this.setId].scale;
this.primaryTiles = GraphicSet[this.setId].primaryTiles;
}
getWidth()
@ -31,4 +32,16 @@ export default class Tileset
{
return this.image.height * this.scale;
}
hasExtendedTiles()
{
return GraphicSet[this.setId].tiles > GraphicSet[this.setId].primaryTiles ;
}
getTileIndexFactor(code)
{
const CODES = ['ltr', 't', 'r', 'b', 'l', 'lt', 'tr', 'ltb', 'tb', 'trb', 'lb', 'rb', 'ltrb', 'lr', 'lrb'];
return CODES.indexOf(code) + 1;
}
}

80
tilorswift/js/Tilorswift.js
View File

@ -26,6 +26,7 @@ import DialogAddColumns from "./dialog/DialogAddColumns.js";
import Terrain from "./Terrain.js";
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
import Level from "../../js/Level.js";
import {IntelligentBrushSwitch} from "./menu/IntelligentBrushSwitch.js";
export default class Tilorswift
{
@ -37,6 +38,8 @@ export default class Tilorswift
this.widgetBar = new WidgetBar('widget-bar');
this.tilesetPicker = new TilesetPickerWidget(this.tileset, this.brush);
this.widgetBar.addWidget(this.tilesetPicker);
this.intelligentBrushSwitch = new IntelligentBrushSwitch(this.tilesetPicker, this.brush);
this.widgetBar.addWidget(this.intelligentBrushSwitch);
this.entrancePicker = new EntrancePointWidget(this.widgetBar, this.brush);
this.widgetBar.addWidget(this.entrancePicker);
this.targetPicker = new TargetPointWidget(this.widgetBar, this.brush);
@ -124,6 +127,8 @@ export default class Tilorswift
this.map.innerHTML = '';
this.map.appendChild(this.level.terrain.getElement());
this.tilesetPicker.reloadTileset(this.tileset);
this.initializeIntelligentBrushWidget();
}
saveLevelToFile()
@ -155,6 +160,63 @@ export default class Tilorswift
return true;
}
initializeIntelligentBrushWidget()
{
if (this.tileset.hasExtendedTiles()) {
this.intelligentBrushSwitch.enable();
this.intelligentBrushSwitch.switchOn();
} else {
this.intelligentBrushSwitch.switchOff();
this.intelligentBrushSwitch.disable();
}
}
createNewTerrain(tilesetIndex, tilesX, tilesY)
{
this.tileset = new Tileset(tilesetIndex);
this.level.terrain = new Terrain(this.tileset, tilesX, tilesY, GraphicSet[tilesetIndex].backgroundColor);
document.body.style.backgroundColor = this.level.getBackgroundColor();
if (GraphicSet[tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("../' + Setting.GRAPHICS_LOCATION + GraphicSet[tilesetIndex].backgroundImage + '")';
} else {
document.body.style.backgroundImage = 'none';
}
this.map.innerHTML = '';
this.map.appendChild(this.level.terrain.getElement());
this.tilesetPicker.reloadTileset(this.tileset);
this.initializeIntelligentBrushWidget();
}
addTerrain(field)
{
if (this.brush.isIntelligent) {
const index = this.level.terrain.brushTileIndex + this.tileset.primaryTiles * this.tileset.getTileIndexFactor(
this.level.terrain.getFieldNeighbourCode(field)
);
field.setIndex(index % this.tileset.tiles);
for (const neighbour of this.level.terrain.getFieldNeighbours(field)) {
if (neighbour.index === -1) {
continue;
}
const neighbourIndex = (neighbour.index % this.tileset.primaryTiles) + this.tileset.primaryTiles * this.tileset.getTileIndexFactor(
this.level.terrain.getFieldNeighbourCode(neighbour)
);
neighbour.setIndex(neighbourIndex);
}
} else {
field.setIndex(this.level.terrain.brushTileIndex);
}
}
addEventListeners()
{
window.addEventListener(
@ -163,7 +225,7 @@ export default class Tilorswift
if (this.brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
event.getField().setIndex(this.level.terrain.brushTileIndex);
this.addTerrain(event.getField());
break;
case 2:
event.getField().setIndex(-1);
@ -198,7 +260,7 @@ export default class Tilorswift
TilorswiftEvent.FIELD_ENTERED,
(event) => {
if (this.mouse.isPressedLeft) {
event.getField().setIndex(this.level.terrain.brushTileIndex);
this.addTerrain(event.getField());
} else if (this.mouse.isPressedRight) {
event.getField().setIndex(-1);
}
@ -257,19 +319,7 @@ export default class Tilorswift
window.addEventListener(
TilorswiftEvent.NEW_TERRAIN,
(event) => {
this.tileset = new Tileset(event.tilesetIndex);
this.level.terrain = new Terrain(this.tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
document.body.style.backgroundColor = this.level.getBackgroundColor();
if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("../' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
} else {
document.body.style.backgroundImage = 'none';
}
this.map.innerHTML = '';
this.map.appendChild(this.level.terrain.getElement());
this.tilesetPicker.reloadTileset(this.tileset);
this.createNewTerrain(event.tilesetIndex, event.tilesX, event.tilesY);
}
);

58
tilorswift/js/menu/IntelligentBrushSwitch.js Normal file
View File

@ -0,0 +1,58 @@
import Widget from "./Widget.js";
import {Switch} from "./Switch.js";
export class IntelligentBrushSwitch extends Widget
{
constructor(tilesetPicker, brush) {
super('Intelligenter Pinsel');
this.tilesetPicker = tilesetPicker;
this.brush = brush;
this.switch = new Switch();
this.switch.onToggle = (status) => {
if (this.isActive) {
this.setIntelligentBrush(status);
}
}
this.htmlElement.appendChild(this.switch.htmlElement);
if (tilesetPicker.tileset.hasExtendedTiles()) {
this.setIntelligentBrush(true);
}
}
switchOn()
{
if (!this.switch.status) {
this.switch.toggle()
this.setIntelligentBrush(true);
}
}
switchOff()
{
if (this.switch.status) {
this.switch.toggle()
this.setIntelligentBrush(false);
}
}
setIntelligentBrush(status)
{
this.brush.isIntelligent = status;
this.tilesetPicker.updateExtendedTileVisibility();
}
enable() {
super.enable();
this.switch.enable();
}
disable() {
super.disable();
this.switch.disable();
}
}

50
tilorswift/js/menu/Switch.js Normal file
View File

@ -0,0 +1,50 @@
export class Switch
{
constructor(status = false) {
this.htmlElement = document.createElement('div');
this.htmlElement.classList.add('switch');
this.slider = document.createElement('div');
this.slider.classList.add('switch-slider');
this.htmlElement.appendChild(this.slider);
this.status = status;
this.isEnabled = true;
this.updateSlider();
this.onToggle = () => {}
this.htmlElement.addEventListener(
'click',
() => {
if (!this.isEnabled) {
return;
}
this.toggle();
this.onToggle(this.status);
}
)
}
toggle()
{
this.status = !this.status;
this.updateSlider();
}
updateSlider()
{
this.slider.classList.add(this.status ? 'switch-slider-on' : 'switch-slider-off');
this.slider.classList.remove(this.status ? 'switch-slider-off' : 'switch-slider-on');
}
enable()
{
this.isEnabled = true;
}
disable()
{
this.isEnabled = false;
}
}

17
tilorswift/js/menu/TilesetPickerWidget.js
View File

@ -24,7 +24,7 @@ export default class TilesetPickerWidget extends Widget
this.brush.mode = BrushMode.TERRAIN;
}
}
)
);
}
loadTileset()
@ -61,7 +61,7 @@ export default class TilesetPickerWidget extends Widget
{
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.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
return htmlElementSelector;
@ -76,4 +76,17 @@ export default class TilesetPickerWidget extends Widget
{
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';
}
}
}
}

44
tilorswift/style.css
View File

@ -3,6 +3,16 @@
to { width: 512px; }
}
@keyframes switch-toggle-on {
from {left: 0}
to {left: 50%}
}
@keyframes switch-toggle-off {
from {left: 50%}
to {left: 0}
}
body {
padding: 0;
margin: 0;
@ -299,8 +309,34 @@ input[type="file"] {
padding: 10px;
}
/*
tr:hover > td > .selection {
opacity: 0.5;
.switch {
position: relative;
border-radius: 16px;
border: 2px solid #333333;
width: 100%;
height: 32px;
cursor: pointer;
background-color: #777777;
}
.switch-slider {
position: absolute;
border-radius: 14px;
width: 50%;
height: 100%;
border: 1px solid white;
}
.switch-slider-on {
left: 50%;
background-color: #2222aa;
animation-name: switch-toggle-on;
animation-duration: 0.2s;
}
.switch-slider-off {
left: 0;
background-color: #888888;
animation-name: switch-toggle-off;
animation-duration: 0.2s;
}
*/