From 2fa3bf5a533902cf383be0469a01b02dd1ce566c Mon Sep 17 00:00:00 2001 From: Mal Date: Thu, 30 Jan 2020 20:51:29 +0100 Subject: [PATCH] Terrain brush implemented. --- tilorswift/index.html | 2 + tilorswift/js/Field.js | 19 ++++++ tilorswift/js/Mouse.js | 67 +++++++++++++++++++ tilorswift/js/Terrain.js | 2 +- tilorswift/js/events/TilorswiftEvent.js | 6 ++ .../js/events/TilorswiftFieldClickedEvent.js | 19 ++++++ .../js/events/TilorswiftFieldEnteredEvent.js | 18 +++++ tilorswift/js/module.js | 25 ++++++- tilorswift/style.css | 12 ++++ 9 files changed, 166 insertions(+), 4 deletions(-) create mode 100644 tilorswift/js/Mouse.js create mode 100644 tilorswift/js/events/TilorswiftEvent.js create mode 100644 tilorswift/js/events/TilorswiftFieldClickedEvent.js create mode 100644 tilorswift/js/events/TilorswiftFieldEnteredEvent.js diff --git a/tilorswift/index.html b/tilorswift/index.html index a338795..bf27117 100644 --- a/tilorswift/index.html +++ b/tilorswift/index.html @@ -7,5 +7,7 @@ +
+
\ No newline at end of file diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js index 1aadfe6..2198597 100644 --- a/tilorswift/js/Field.js +++ b/tilorswift/js/Field.js @@ -1,3 +1,6 @@ +import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js"; +import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js"; + export default class Field { className = 'field'; @@ -12,12 +15,28 @@ export default class Field init() { + this.htmlElement.addEventListener( + 'mousedown', () => { + window.dispatchEvent(new TilorswiftFieldClickedEvent(this)); + } + ); + + this.htmlElement.addEventListener( + 'mouseenter', () => { + window.dispatchEvent(new TilorswiftFieldEnteredEvent(this)); + } + ); + 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'; + + let hoverElement = document.createElement('div'); + hoverElement.classList.add('selection'); + this.htmlElement.appendChild(hoverElement); } setIndex(index) diff --git a/tilorswift/js/Mouse.js b/tilorswift/js/Mouse.js new file mode 100644 index 0000000..30b9c60 --- /dev/null +++ b/tilorswift/js/Mouse.js @@ -0,0 +1,67 @@ +export default class Mouse +{ + constructor() + { + this.isPressedLeft = false; + this.isPressedRight = false; + this.isPressedMiddle = false; + this.x = 0; + this.y = 0; + + this.addListenerMouseUp(); + this.addListenerMouseDown(); + this.addListenerMouseMove() + } + + addListenerMouseUp() + { + window.addEventListener( + 'mouseup', + (event) => { + switch (event.button) { + case 0: + this.isPressedLeft = false; + break; + case 1: + this.isPressedMiddle = false; + break; + case 2: + this.isPressedRight = false; + } + + } + ); + } + + addListenerMouseMove() + { + window.addEventListener( + 'mousemove', + (event) => { + this.x = event.clientX; + this.y = event.clientY; + } + ); + } + + addListenerMouseDown() + { + window.addEventListener( + 'mousedown', + (event) => { + switch (event.button) { + case 0: + this.isPressedLeft = true; + break; + case 1: + this.isPressedMiddle = true; + break; + case 2: + this.isPressedRight = true; + } + + } + ); + } + +} \ No newline at end of file diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js index f32ea8d..f8ae4cb 100644 --- a/tilorswift/js/Terrain.js +++ b/tilorswift/js/Terrain.js @@ -11,6 +11,7 @@ export default class Terrain this.tilesY = tilesY; this.backgroundColor = backgroundColor; this.htmlElement = document.createElement('table'); + this.brushTileIndex = 0; this.init(); } @@ -36,7 +37,6 @@ export default class Terrain this.fields.push(row); this.htmlElement.appendChild(tr); } - } getElement() diff --git a/tilorswift/js/events/TilorswiftEvent.js b/tilorswift/js/events/TilorswiftEvent.js new file mode 100644 index 0000000..a30532d --- /dev/null +++ b/tilorswift/js/events/TilorswiftEvent.js @@ -0,0 +1,6 @@ +const TilorswiftEvent = { + FIELD_CLICKED: 'fieldclicked', + FIELD_ENTERED: 'fieldentered', +}; + +export default TilorswiftEvent; \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftFieldClickedEvent.js b/tilorswift/js/events/TilorswiftFieldClickedEvent.js new file mode 100644 index 0000000..a184912 --- /dev/null +++ b/tilorswift/js/events/TilorswiftFieldClickedEvent.js @@ -0,0 +1,19 @@ +import TilorswiftEvent from "./TilorswiftEvent.js"; + +export default class TilorswiftFieldClickedEvent extends CustomEvent +{ + constructor(field) + { + super( + TilorswiftEvent.FIELD_CLICKED, + { + detail: {field: field} + } + ); + } + + getField() + { + return this.detail.field; + } +} \ No newline at end of file diff --git a/tilorswift/js/events/TilorswiftFieldEnteredEvent.js b/tilorswift/js/events/TilorswiftFieldEnteredEvent.js new file mode 100644 index 0000000..eaa1037 --- /dev/null +++ b/tilorswift/js/events/TilorswiftFieldEnteredEvent.js @@ -0,0 +1,18 @@ +import TilorswiftEvent from "./TilorswiftEvent.js"; + +export default class TilorswiftFieldEnteredEvent extends CustomEvent +{ + constructor(field) { + super( + TilorswiftEvent.FIELD_ENTERED, + { + detail: {field: field} + } + ); + } + + getField() + { + return this.detail.field; + } +} \ No newline at end of file diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index e5a27b8..1fad25a 100644 --- a/tilorswift/js/module.js +++ b/tilorswift/js/module.js @@ -1,13 +1,32 @@ import Terrain from "./Terrain.js"; import FileLoader from "../../js/FileLoader.js"; +import TilorswiftEvent from "./events/TilorswiftEvent.js"; +import Mouse from "./Mouse.js"; let image = new Image(); image.src = '../graphics/tileset-landscape01.jpg'; image.onload = function () { - console.log('Loaded'); - let loader = new FileLoader('../levels/level.json'); let terrain = Terrain.createFromJson(loader.getContent()); - document.body.appendChild(terrain.getElement()); + let map = document.getElementById('map'); + map.appendChild(terrain.getElement()); + + let mouse = new Mouse(); + + window.addEventListener( + TilorswiftEvent.FIELD_CLICKED, + (event) => { + event.getField().setIndex(terrain.brushTileIndex); + } + ); + + window.addEventListener( + TilorswiftEvent.FIELD_ENTERED, + (event) => { + if (mouse.isPressedLeft) { + event.getField().setIndex(terrain.brushTileIndex); + } + } + ); }; diff --git a/tilorswift/style.css b/tilorswift/style.css index a3f8565..a9243ae 100644 --- a/tilorswift/style.css +++ b/tilorswift/style.css @@ -16,4 +16,16 @@ body { padding: 0; margin: 0; background-repeat: no-repeat; + cursor: pointer; +} + +.selection { + width: 100%; + height: 100%; + opacity: 0; + background-color: red; +} + +.field:hover .selection { + opacity: 0.5; } \ No newline at end of file