Menu bar for brush selection implemented.
This commit is contained in:
parent
2fa3bf5a53
commit
9c3aca1bc9
|
@ -7,7 +7,9 @@
|
|||
<script type="module" src="js/module.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tileset"></div>
|
||||
<div id="map"></div>
|
||||
<div id="menu">
|
||||
<div id="tileset"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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));
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue