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>
|
<script type="module" src="js/module.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="tileset"></div>
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
<div id="menu">
|
||||||
|
<div id="tileset"></div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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
|
export default class Field
|
||||||
{
|
{
|
||||||
className = 'field';
|
|
||||||
|
|
||||||
constructor(tileset, index = 0)
|
constructor(tileset, index = 0)
|
||||||
{
|
{
|
||||||
this.tileset = tileset;
|
this.tileset = tileset;
|
||||||
this.index = index;
|
this.index = index;
|
||||||
this.htmlElement = document.createElement('td');
|
this.initHtml();
|
||||||
this.init();
|
this.initEventListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
init()
|
initEventListeners()
|
||||||
{
|
{
|
||||||
this.htmlElement.addEventListener(
|
this.htmlElement.addEventListener(
|
||||||
'mousedown', () => {
|
'mousedown', (event) => {
|
||||||
window.dispatchEvent(new TilorswiftFieldClickedEvent(this));
|
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));
|
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.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';
|
||||||
|
}
|
||||||
|
|
||||||
|
addSelector()
|
||||||
|
{
|
||||||
let hoverElement = document.createElement('div');
|
let hoverElement = document.createElement('div');
|
||||||
hoverElement.classList.add('selection');
|
hoverElement.classList.add('selection');
|
||||||
this.htmlElement.appendChild(hoverElement);
|
this.htmlElement.appendChild(hoverElement);
|
||||||
|
|
|
@ -18,6 +18,8 @@ export default class Mouse
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'mouseup',
|
'mouseup',
|
||||||
(event) => {
|
(event) => {
|
||||||
|
console.log(this);
|
||||||
|
|
||||||
switch (event.button) {
|
switch (event.button) {
|
||||||
case 0:
|
case 0:
|
||||||
this.isPressedLeft = false;
|
this.isPressedLeft = false;
|
||||||
|
@ -52,6 +54,7 @@ export default class Mouse
|
||||||
switch (event.button) {
|
switch (event.button) {
|
||||||
case 0:
|
case 0:
|
||||||
this.isPressedLeft = true;
|
this.isPressedLeft = true;
|
||||||
|
console.log(this);
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
this.isPressedMiddle = true;
|
this.isPressedMiddle = true;
|
||||||
|
@ -59,7 +62,6 @@ export default class Mouse
|
||||||
case 2:
|
case 2:
|
||||||
this.isPressedRight = true;
|
this.isPressedRight = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import Field from "./Field.js";
|
import Field from "./Field.js";
|
||||||
import Tileset from "./Tileset.js";
|
import Tileset from "./Tileset.js";
|
||||||
|
import TilorswiftEvent from "./events/TilorswiftEvent.js";
|
||||||
|
|
||||||
export default class Terrain
|
export default class Terrain
|
||||||
{
|
{
|
||||||
|
@ -37,6 +38,13 @@ export default class Terrain
|
||||||
this.fields.push(row);
|
this.fields.push(row);
|
||||||
this.htmlElement.appendChild(tr);
|
this.htmlElement.appendChild(tr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.addEventListener(
|
||||||
|
TilorswiftEvent.BUTTON_TILE_CLICKED,
|
||||||
|
(event) => {
|
||||||
|
this.brushTileIndex = event.button.index;
|
||||||
|
}
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement()
|
getElement()
|
||||||
|
@ -44,6 +52,11 @@ export default class Terrain
|
||||||
return this.htmlElement;
|
return this.htmlElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getTileset()
|
||||||
|
{
|
||||||
|
return this.tileset;
|
||||||
|
}
|
||||||
|
|
||||||
setFieldIndex(x, y, index)
|
setFieldIndex(x, y, index)
|
||||||
{
|
{
|
||||||
this.fields[y][x].setIndex(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 = {
|
const TilorswiftEvent = {
|
||||||
FIELD_CLICKED: 'fieldclicked',
|
FIELD_CLICKED: 'fieldClicked',
|
||||||
FIELD_ENTERED: 'fieldentered',
|
FIELD_ENTERED: 'fieldEntered',
|
||||||
|
BUTTON_TILE_CLICKED: 'buttonTileClicked',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TilorswiftEvent;
|
export default TilorswiftEvent;
|
|
@ -1,19 +1,18 @@
|
||||||
import TilorswiftEvent from "./TilorswiftEvent.js";
|
import TilorswiftEvent from "./TilorswiftEvent.js";
|
||||||
|
|
||||||
export default class TilorswiftFieldClickedEvent extends CustomEvent
|
export default class TilorswiftFieldClickedEvent extends Event
|
||||||
{
|
{
|
||||||
constructor(field)
|
constructor(field, button)
|
||||||
{
|
{
|
||||||
super(
|
console.log('So kommt der Scheiß hier rein: ' + button);
|
||||||
TilorswiftEvent.FIELD_CLICKED,
|
super(TilorswiftEvent.FIELD_CLICKED);
|
||||||
{
|
|
||||||
detail: {field: field}
|
this.field = field;
|
||||||
}
|
this.button = button;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getField()
|
getField()
|
||||||
{
|
{
|
||||||
return this.detail.field;
|
return this.field;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -2,22 +2,49 @@ import Terrain from "./Terrain.js";
|
||||||
import FileLoader from "../../js/FileLoader.js";
|
import FileLoader from "../../js/FileLoader.js";
|
||||||
import TilorswiftEvent from "./events/TilorswiftEvent.js";
|
import TilorswiftEvent from "./events/TilorswiftEvent.js";
|
||||||
import Mouse from "./Mouse.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();
|
let image = new Image();
|
||||||
image.src = '../graphics/tileset-landscape01.jpg';
|
image.src = '../graphics/tileset-landscape01.jpg';
|
||||||
image.onload = function () {
|
image.onload = function () {
|
||||||
let loader = new FileLoader('../levels/level.json');
|
|
||||||
let terrain = Terrain.createFromJson(loader.getContent());
|
let terrain = Terrain.createFromJson(loader.getContent());
|
||||||
|
|
||||||
let map = document.getElementById('map');
|
let map = document.getElementById('map');
|
||||||
map.appendChild(terrain.getElement());
|
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();
|
let mouse = new Mouse();
|
||||||
|
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
TilorswiftEvent.FIELD_CLICKED,
|
TilorswiftEvent.FIELD_CLICKED,
|
||||||
(event) => {
|
(event) => {
|
||||||
|
console.log(event);
|
||||||
|
switch (event.button) {
|
||||||
|
case 0:
|
||||||
event.getField().setIndex(terrain.brushTileIndex);
|
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) => {
|
(event) => {
|
||||||
if (mouse.isPressedLeft) {
|
if (mouse.isPressedLeft) {
|
||||||
event.getField().setIndex(terrain.brushTileIndex);
|
event.getField().setIndex(terrain.brushTileIndex);
|
||||||
|
} else if (mouse.isPressedRight) {
|
||||||
|
event.getField().setIndex(-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#level {
|
#level {
|
||||||
|
@ -11,7 +12,26 @@ body {
|
||||||
.row {
|
.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;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
Loading…
Reference in New Issue