Terrain brush implemented.
This commit is contained in:
parent
969310c932
commit
2fa3bf5a53
|
@ -7,5 +7,7 @@
|
||||||
<script type="module" src="js/module.js"></script>
|
<script type="module" src="js/module.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="tileset"></div>
|
||||||
|
<div id="map"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,3 +1,6 @@
|
||||||
|
import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js";
|
||||||
|
import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js";
|
||||||
|
|
||||||
export default class Field
|
export default class Field
|
||||||
{
|
{
|
||||||
className = 'field';
|
className = 'field';
|
||||||
|
@ -12,12 +15,28 @@ export default class Field
|
||||||
|
|
||||||
init()
|
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.classList.add(this.className);
|
||||||
this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
|
this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
|
||||||
this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
|
this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
|
||||||
this.htmlElement.style.backgroundSize = 'auto ' + 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.backgroundImage = 'url("' + this.tileset.image.src + '")';
|
||||||
this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
|
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)
|
setIndex(index)
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -11,6 +11,7 @@ export default class Terrain
|
||||||
this.tilesY = tilesY;
|
this.tilesY = tilesY;
|
||||||
this.backgroundColor = backgroundColor;
|
this.backgroundColor = backgroundColor;
|
||||||
this.htmlElement = document.createElement('table');
|
this.htmlElement = document.createElement('table');
|
||||||
|
this.brushTileIndex = 0;
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
@ -36,7 +37,6 @@ export default class Terrain
|
||||||
this.fields.push(row);
|
this.fields.push(row);
|
||||||
this.htmlElement.appendChild(tr);
|
this.htmlElement.appendChild(tr);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement()
|
getElement()
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
const TilorswiftEvent = {
|
||||||
|
FIELD_CLICKED: 'fieldclicked',
|
||||||
|
FIELD_ENTERED: 'fieldentered',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TilorswiftEvent;
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,13 +1,32 @@
|
||||||
import Terrain from "./Terrain.js";
|
import Terrain from "./Terrain.js";
|
||||||
import FileLoader from "../../js/FileLoader.js";
|
import FileLoader from "../../js/FileLoader.js";
|
||||||
|
import TilorswiftEvent from "./events/TilorswiftEvent.js";
|
||||||
|
import Mouse from "./Mouse.js";
|
||||||
|
|
||||||
let image = new Image();
|
let image = new Image();
|
||||||
image.src = '../graphics/tileset-landscape01.jpg';
|
image.src = '../graphics/tileset-landscape01.jpg';
|
||||||
image.onload = function () {
|
image.onload = function () {
|
||||||
console.log('Loaded');
|
|
||||||
|
|
||||||
let loader = new FileLoader('../levels/level.json');
|
let loader = new FileLoader('../levels/level.json');
|
||||||
let terrain = Terrain.createFromJson(loader.getContent());
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,4 +16,16 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selection {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field:hover .selection {
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
Loading…
Reference in New Issue