Terrain brush implemented.
This commit is contained in:
Mal
parent
969310c932
commit
2fa3bf5a53
|
|
@ -7,5 +7,7 @@
|
|||
<script type="module" src="js/module.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tileset"></div>
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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.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()
|
||||
|
|
|
|||
|
|
@ -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 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);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue