diff --git a/tilorswift/index.html b/tilorswift/index.html index bf27117..e563adc 100644 --- a/tilorswift/index.html +++ b/tilorswift/index.html @@ -7,7 +7,9 @@ -
+ \ No newline at end of file diff --git a/tilorswift/js/ButtonTile.js b/tilorswift/js/ButtonTile.js new file mode 100644 index 0000000..51dc7ed --- /dev/null +++ b/tilorswift/js/ButtonTile.js @@ -0,0 +1,25 @@ +import Field from "./Field.js"; +import TilorswiftButtonTileClickedEvent from "./events/TilorswiftButtonTileClickedEvent.js"; + +export default class ButtonTile extends Field +{ + 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 TilorswiftButtonTileClickedEvent(this)); + } + ) + } +} \ No newline at end of file diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js index 2198597..0a4340b 100644 --- a/tilorswift/js/Field.js +++ b/tilorswift/js/Field.js @@ -3,21 +3,26 @@ import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js export default class Field { - className = 'field'; - constructor(tileset, index = 0) { this.tileset = tileset; this.index = index; - this.htmlElement = document.createElement('td'); - this.init(); + this.initHtml(); + this.initEventListeners(); } - init() + initEventListeners() { this.htmlElement.addEventListener( - 'mousedown', () => { - window.dispatchEvent(new TilorswiftFieldClickedEvent(this)); + 'mousedown', (event) => { + console.log(event); + window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button)); + } + ); + + this.htmlElement.addEventListener( + 'contextmenu', (event) => { + window.dispatchEvent(new TilorswiftFieldClickedEvent(this), event.button); } ); @@ -26,14 +31,28 @@ export default class Field 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); diff --git a/tilorswift/js/Mouse.js b/tilorswift/js/Mouse.js index 30b9c60..3c87a14 100644 --- a/tilorswift/js/Mouse.js +++ b/tilorswift/js/Mouse.js @@ -18,6 +18,8 @@ export default class Mouse window.addEventListener( 'mouseup', (event) => { + console.log(this); + switch (event.button) { case 0: this.isPressedLeft = false; @@ -52,6 +54,7 @@ export default class Mouse switch (event.button) { case 0: this.isPressedLeft = true; + console.log(this); break; case 1: this.isPressedMiddle = true; @@ -59,7 +62,6 @@ export default class Mouse case 2: this.isPressedRight = true; } - } ); } diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js index f8ae4cb..fb3f7ee 100644 --- a/tilorswift/js/Terrain.js +++ b/tilorswift/js/Terrain.js @@ -1,5 +1,6 @@ import Field from "./Field.js"; import Tileset from "./Tileset.js"; +import TilorswiftEvent from "./events/TilorswiftEvent.js"; export default class Terrain { @@ -37,6 +38,13 @@ export default class Terrain this.fields.push(row); this.htmlElement.appendChild(tr); } + + window.addEventListener( + TilorswiftEvent.BUTTON_TILE_CLICKED, + (event) => { + this.brushTileIndex = event.button.index; + } + ) } getElement() @@ -44,6 +52,11 @@ export default class Terrain return this.htmlElement; } + getTileset() + { + return this.tileset; + } + setFieldIndex(x, y, index) { this.fields[y][x].setIndex(index); diff --git a/tilorswift/js/events/TilorswiftButtonTileClickedEvent.js b/tilorswift/js/events/TilorswiftButtonTileClickedEvent.js new file mode 100644 index 0000000..8759af3 --- /dev/null +++ b/tilorswift/js/events/TilorswiftButtonTileClickedEvent.js @@ -0,0 +1,9 @@ +import TilorswiftEvent from "./TilorswiftEvent.js"; + +export default class TilorswiftButtonTileClickedEvent extends Event +{ + constructor(button) { + super(TilorswiftEvent.BUTTON_TILE_CLICKED); + this.button = button; + } +} \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftEvent.js b/tilorswift/js/events/TilorswiftEvent.js index a30532d..e5f6aba 100644 --- a/tilorswift/js/events/TilorswiftEvent.js +++ b/tilorswift/js/events/TilorswiftEvent.js @@ -1,6 +1,7 @@ const TilorswiftEvent = { - FIELD_CLICKED: 'fieldclicked', - FIELD_ENTERED: 'fieldentered', + FIELD_CLICKED: 'fieldClicked', + FIELD_ENTERED: 'fieldEntered', + BUTTON_TILE_CLICKED: 'buttonTileClicked', }; export default TilorswiftEvent; \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftFieldClickedEvent.js b/tilorswift/js/events/TilorswiftFieldClickedEvent.js index a184912..26b5e20 100644 --- a/tilorswift/js/events/TilorswiftFieldClickedEvent.js +++ b/tilorswift/js/events/TilorswiftFieldClickedEvent.js @@ -1,19 +1,18 @@ import TilorswiftEvent from "./TilorswiftEvent.js"; -export default class TilorswiftFieldClickedEvent extends CustomEvent +export default class TilorswiftFieldClickedEvent extends Event { - constructor(field) + constructor(field, button) { - super( - TilorswiftEvent.FIELD_CLICKED, - { - detail: {field: field} - } - ); + console.log('So kommt der Scheiß hier rein: ' + button); + super(TilorswiftEvent.FIELD_CLICKED); + + this.field = field; + this.button = button; } getField() { - return this.detail.field; + return this.field; } } \ No newline at end of file diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index 1fad25a..9925c28 100644 --- a/tilorswift/js/module.js +++ b/tilorswift/js/module.js @@ -2,22 +2,49 @@ import Terrain from "./Terrain.js"; import FileLoader from "../../js/FileLoader.js"; import TilorswiftEvent from "./events/TilorswiftEvent.js"; import Mouse from "./Mouse.js"; +import Tileset from "./Tileset.js"; +import ButtonTile from "./ButtonTile.js"; + +let loader = new FileLoader('../levels/level.json'); let image = new Image(); image.src = '../graphics/tileset-landscape01.jpg'; image.onload = function () { - let loader = new FileLoader('../levels/level.json'); let terrain = Terrain.createFromJson(loader.getContent()); let map = document.getElementById('map'); map.appendChild(terrain.getElement()); + let menuTileset = document.getElementById('tileset'); + + let tileset = new Tileset(image, 8, 3); + + for (let t = 0; t < tileset.tiles; t++) { + let button = new ButtonTile(tileset, t); + menuTileset.appendChild(button.getElement()); + } + let mouse = new Mouse(); window.addEventListener( TilorswiftEvent.FIELD_CLICKED, (event) => { - event.getField().setIndex(terrain.brushTileIndex); + console.log(event); + switch (event.button) { + case 0: + event.getField().setIndex(terrain.brushTileIndex); + break; + case 2: + event.getField().setIndex(-1); + break; + } + } + ); + + window.addEventListener( + 'contextmenu', + (event) => { + event.preventDefault(); } ); @@ -26,6 +53,8 @@ image.onload = function () { (event) => { if (mouse.isPressedLeft) { event.getField().setIndex(terrain.brushTileIndex); + } else if (mouse.isPressedRight) { + event.getField().setIndex(-1); } } ); diff --git a/tilorswift/style.css b/tilorswift/style.css index a9243ae..d3be950 100644 --- a/tilorswift/style.css +++ b/tilorswift/style.css @@ -1,6 +1,7 @@ body { padding: 0; margin: 0; + overflow: hidden; } #level { @@ -11,7 +12,26 @@ body { .row { } -.field { +#menu { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 96px; + background-color: grey; + box-shadow: 0 0 20px black; +} + +#map { + position: fixed; + top: 0; + left: 96px; + right: 0; + bottom: 0; + overflow: scroll; +} + +.field, .button-tile { border: 0; padding: 0; margin: 0;