Mal/mr-crocs-adventures
Mal/mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Menu bar for brush selection implemented.

Browse Source
This commit is contained in:
Mal 2020-01-30 23:40:42 +01:00
parent 2fa3bf5a53
commit 9c3aca1bc9
10 changed files with 142 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tilorswift/index.html
View File

@ -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>

25
tilorswift/js/ButtonTile.js Normal file
View File

@ -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));
}
)
}
}

33
tilorswift/js/Field.js
View File

@ -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);

4
tilorswift/js/Mouse.js
View File

@ -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;
}
}
);
}

13
tilorswift/js/Terrain.js
View File

@ -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);

9
tilorswift/js/events/TilorswiftButtonTileClickedEvent.js Normal file
View File

@ -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;
}
}

5
tilorswift/js/events/TilorswiftEvent.js
View File

@ -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;

17
tilorswift/js/events/TilorswiftFieldClickedEvent.js
View File

@ -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;
}
}

33
tilorswift/js/module.js
View File

@ -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);
}
}
);

22
tilorswift/style.css
View File

@ -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;