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.

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

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

4
tilorswift/js/Mouse.js
View File

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

13
tilorswift/js/Terrain.js
View File

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

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 = { const TilorswiftEvent = {
FIELD_CLICKED: 'fieldclicked', FIELD_CLICKED: 'fieldClicked',
FIELD_ENTERED: 'fieldentered', FIELD_ENTERED: 'fieldEntered',
BUTTON_TILE_CLICKED: 'buttonTileClicked',
}; };
export default TilorswiftEvent; export default TilorswiftEvent;

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

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

33
tilorswift/js/module.js
View File

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

22
tilorswift/style.css
View File

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