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

Terrain brush implemented.

This commit is contained in:
Mal 2020-01-30 20:51:29 +01:00
parent 969310c932
commit 2fa3bf5a53
9 changed files with 166 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tilorswift/index.html
View File

@ -7,5 +7,7 @@
<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>
</body> </body>
</html> </html>

19
tilorswift/js/Field.js
View File

@ -1,3 +1,6 @@
import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js";
import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js";
export default class Field export default class Field
{ {
className = 'field'; className = 'field';
@ -12,12 +15,28 @@ export default class Field
init() 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.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';
let hoverElement = document.createElement('div');
hoverElement.classList.add('selection');
this.htmlElement.appendChild(hoverElement);
} }
setIndex(index) setIndex(index)

67
tilorswift/js/Mouse.js Normal file
View File

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

2
tilorswift/js/Terrain.js
View File

@ -11,6 +11,7 @@ export default class Terrain
this.tilesY = tilesY; this.tilesY = tilesY;
this.backgroundColor = backgroundColor; this.backgroundColor = backgroundColor;
this.htmlElement = document.createElement('table'); this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
this.init(); this.init();
} }
@ -36,7 +37,6 @@ export default class Terrain
this.fields.push(row); this.fields.push(row);
this.htmlElement.appendChild(tr); this.htmlElement.appendChild(tr);
} }
} }
getElement() getElement()

6
tilorswift/js/events/TilorswiftEvent.js Normal file
View File

@ -0,0 +1,6 @@
const TilorswiftEvent = {
FIELD_CLICKED: 'fieldclicked',
FIELD_ENTERED: 'fieldentered',
};
export default TilorswiftEvent;

19
tilorswift/js/events/TilorswiftFieldClickedEvent.js Normal file
View File

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

18
tilorswift/js/events/TilorswiftFieldEnteredEvent.js Normal file
View File

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

25
tilorswift/js/module.js
View File

@ -1,13 +1,32 @@
import Terrain from "./Terrain.js"; import Terrain from "./Terrain.js";
import FileLoader from "../../js/FileLoader.js"; import FileLoader from "../../js/FileLoader.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js";
import Mouse from "./Mouse.js";
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 () {
console.log('Loaded');
let loader = new FileLoader('../levels/level.json'); let loader = new FileLoader('../levels/level.json');
let terrain = Terrain.createFromJson(loader.getContent()); 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);
}
}
);
}; };

12
tilorswift/style.css
View File

@ -16,4 +16,16 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer;
}
.selection {
width: 100%;
height: 100%;
opacity: 0;
background-color: red;
}
.field:hover .selection {
opacity: 0.5;
} }