diff --git a/js/module.js b/js/module.js
index 8ea1e71..352f073 100644
--- a/js/module.js
+++ b/js/module.js
@@ -134,8 +134,8 @@ const GAME_SPEED = 1;
const GRAVITY = 2;
let levelJson = new FileLoader('levels/test_stairs.json');
-console.log(levelJson.getContent());
-const LEVEL = levelJson.getContent();
+
+const LEVEL = JSON.parse(levelJson.getContent());
let lastRendered = undefined;
let lastTimestamp = undefined;
@@ -177,11 +177,11 @@ window.addEventListener(
context = canvas.getContext('2d');
- architecture = RetroArchitecture.createFromJson(LEVEL);
+ architecture = RetroArchitecture.createFromData(LEVEL);
mrCroc = new MrCroc();
- mrCroc.position.x = 250;
- mrCroc.position.y = 0;
+ mrCroc.position.x = architecture.tileWidth * LEVEL.startX + architecture.tileWidth * 0.5;
+ mrCroc.position.y = architecture.tileHeight * LEVEL.startY;
window.requestAnimationFrame(MainLoop);
}
diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js
index 057f0a8..4070720 100644
--- a/js/retro/RetroArchitecture.js
+++ b/js/retro/RetroArchitecture.js
@@ -163,10 +163,8 @@ export default class RetroArchitecture
}
}
- static createFromJson(json)
+ static createFromData(data)
{
- let data = JSON.parse(json);
-
let tileset = new RetroSprite(data.tileset, data.scale);
let architecture = new RetroArchitecture(
diff --git a/tilorswift/index.html b/tilorswift/index.html
index e563adc..7e8e6a9 100644
--- a/tilorswift/index.html
+++ b/tilorswift/index.html
@@ -1,5 +1,5 @@
-
+
Tilorswift
@@ -8,8 +8,5 @@
-
\ No newline at end of file
diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js
index 0a4340b..2145954 100644
--- a/tilorswift/js/Field.js
+++ b/tilorswift/js/Field.js
@@ -15,7 +15,6 @@ export default class Field
{
this.htmlElement.addEventListener(
'mousedown', (event) => {
- console.log(event);
window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button));
}
);
diff --git a/tilorswift/js/Mouse.js b/tilorswift/js/Mouse.js
index 3c87a14..29cd314 100644
--- a/tilorswift/js/Mouse.js
+++ b/tilorswift/js/Mouse.js
@@ -18,8 +18,6 @@ export default class Mouse
window.addEventListener(
'mouseup',
(event) => {
- console.log(this);
-
switch (event.button) {
case 0:
this.isPressedLeft = false;
@@ -54,7 +52,6 @@ export default class Mouse
switch (event.button) {
case 0:
this.isPressedLeft = true;
- console.log(this);
break;
case 1:
this.isPressedMiddle = true;
diff --git a/tilorswift/js/Tilorswift.js b/tilorswift/js/Tilorswift.js
index 8ecacdb..84d4647 100644
--- a/tilorswift/js/Tilorswift.js
+++ b/tilorswift/js/Tilorswift.js
@@ -29,10 +29,16 @@ export default class Tilorswift
static saveTerrainToFile(terrain)
{
+ let filename = prompt('Dateiname', 'terrain.json');
+
+ if (filename === null) {
+ return;
+ }
+
let json = Tilorswift.getTerrainAsJson(terrain);
let download = document.createElement('a');
- download.setAttribute('download', 'terrain.json');
+ download.setAttribute('download', filename);
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
download.click();
download.remove();
diff --git a/tilorswift/js/menu/TilesetPickerWidget.js b/tilorswift/js/menu/TilesetPickerWidget.js
new file mode 100644
index 0000000..bb5bd65
--- /dev/null
+++ b/tilorswift/js/menu/TilesetPickerWidget.js
@@ -0,0 +1,68 @@
+import ButtonTile from "../ButtonTile.js";
+import TilorswiftEvent from "../events/TilorswiftEvent.js";
+import Widget from "./Widget.js";
+
+export default class TilesetPickerWidget extends Widget
+{
+ constructor(tileset)
+ {
+ super('Terrain');
+ this.tileset = tileset;
+ this.htmlElement = this.createElementPicker();
+ this.htmlElementSelector = this.createElementSelector();
+ this.loadTileset();
+
+ window.addEventListener(
+ TilorswiftEvent.BUTTON_TILE_CLICKED,
+ (event) => {
+ if (this.isActive) {
+ this.setTile(event.button.index);
+ }
+ }
+ )
+ }
+
+ loadTileset()
+ {
+ this.htmlElement.appendChild(this.htmlElementSelector);
+
+ for (let t = 0; t < this.tileset.tiles; t++) {
+ let button = new ButtonTile(this.tileset, t);
+ this.htmlElementSelector.appendChild(button.getElement());
+ }
+ }
+
+ createElementPicker()
+ {
+ let htmlElement = document.createElement('div');
+ htmlElement.id = 'tileset-picker';
+ htmlElement.style.width = this.tileset.getTileWidth() + 'px';
+ htmlElement.style.height = this.tileset.getTileHeight() + 'px';
+ htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
+ htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
+ htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
+
+ return htmlElement;
+ }
+
+ createElementSelector()
+ {
+ let htmlElementSelector = document.createElement('div');
+ htmlElementSelector.id = 'tileset-selector';
+ htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
+ htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
+
+ return htmlElementSelector;
+ }
+
+ setTile(index)
+ {
+ let position = -this.tileset.getTileWidth() * index + 'px ' + this.tileset.getTileHeight() + 'px';
+ this.htmlElement.style.backgroundPosition = position;
+ }
+
+ getElement()
+ {
+ return this.htmlElement;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/menu/Widget.js b/tilorswift/js/menu/Widget.js
new file mode 100644
index 0000000..4738a62
--- /dev/null
+++ b/tilorswift/js/menu/Widget.js
@@ -0,0 +1,35 @@
+export default class Widget
+{
+ constructor(title)
+ {
+ this.title = title;
+ this.htmlElement = document.createElement('div');
+ this.isActive = true;
+ }
+
+ getTitle()
+ {
+ let htmlElementTitle = document.createElement('div');
+ htmlElementTitle.classList.add('widget-title');
+ htmlElementTitle.innerText = this.title;
+
+ return htmlElementTitle;
+ }
+
+ enable()
+ {
+ this.isActive = true;
+ this.htmlElement.classList.remove('widget-disabled');
+ }
+
+ disable()
+ {
+ this.isActive = false;
+ this.htmlElement.classList.add('widget-disabled');
+ }
+
+ getElement()
+ {
+ return this.htmlElement;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/menu/WidgetBar.js b/tilorswift/js/menu/WidgetBar.js
new file mode 100644
index 0000000..990886a
--- /dev/null
+++ b/tilorswift/js/menu/WidgetBar.js
@@ -0,0 +1,32 @@
+export default class WidgetBar
+{
+ constructor(id)
+ {
+ this.id = id;
+ this.widgets = [];
+ }
+
+ addWidget(widget)
+ {
+ this.widgets.push(widget);
+ }
+
+ getElement()
+ {
+ let htmlElement = document.createElement('div');
+ htmlElement.id = this.id;
+
+ this.widgets.forEach(
+ (widget) => {
+ let container = document.createElement('div');
+
+ container.appendChild(widget.getTitle());
+ container.appendChild(widget.getElement());
+
+ htmlElement.appendChild(container);
+ }
+ );
+
+ return htmlElement;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js
index ea23d74..ddb184d 100644
--- a/tilorswift/js/module.js
+++ b/tilorswift/js/module.js
@@ -3,32 +3,31 @@ 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";
import Tilorswift from "./Tilorswift.js";
import TilorswiftSavedEvent from "./events/TilorswiftSavedEvent.js";
import MainMenu from "./menu/MainMenu.js";
import MenuGroup from "./menu/MenuGroup.js";
import MainMenuEntry from "./menu/MainMenuEntry.js";
import TilorswiftMenuSaveClickedEvent from "./events/TilorswiftMenuSaveClickedEvent.js";
+import TilesetPickerWidget from "./menu/TilesetPickerWidget.js";
+import WidgetBar from "./menu/WidgetBar.js";
+import BrushMode from "./BrushMode.js";
let loader = new FileLoader('../levels/level.json');
-
let image = new Image();
image.src = '../graphics/tileset-landscape01.jpg';
+
image.onload = function () {
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);
+ let tilesetPicker = new TilesetPickerWidget(tileset);
- for (let t = 0; t < tileset.tiles; t++) {
- let button = new ButtonTile(tileset, t);
- menuTileset.appendChild(button.getElement());
- }
+ let widgetBar = new WidgetBar('widget-bar');
+ widgetBar.addWidget(tilesetPicker);
+ document.body.appendChild(widgetBar.getElement());
let mouse = new Mouse();
@@ -46,7 +45,6 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.FIELD_CLICKED,
(event) => {
- console.log(event);
switch (event.button) {
case 0:
event.getField().setIndex(terrain.brushTileIndex);
@@ -76,6 +74,7 @@ image.onload = function () {
}
);
+ /* Prevent Firefox's default drag and drop for images */
document.addEventListener(
'dragstart',
function (event) {
@@ -83,15 +82,6 @@ image.onload = function () {
}
);
- window.addEventListener(
- 'keydown', function (event) {
- if (event.code === 'KeyS') {
- Tilorswift.saveTerrainToFile(terrain);
- window.dispatchEvent(new TilorswiftSavedEvent());
- }
- }
- );
-
window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED,
function () {
diff --git a/tilorswift/style.css b/tilorswift/style.css
index abf1479..67bdc2f 100644
--- a/tilorswift/style.css
+++ b/tilorswift/style.css
@@ -7,6 +7,7 @@ body {
padding: 0;
margin: 0;
overflow: hidden;
+ font-family: sans-serif;
}
#level {
@@ -62,36 +63,61 @@ body {
display: block;
}
-#menu {
+#widget-bar {
position: fixed;
display: flex;
flex-flow: wrap row;
top: 32px;
left: 0;
bottom: 0;
- padding-top: 20px;
width: 96px;
- overflow: hidden;
+ padding: 20px;
background-color: #cccccc;
box-shadow: 0 0 20px black;
}
-#menu:hover {
- animation-name: menuFadeIn;
- animation-duration: 0.5s;
- width: 512px;
+.widget-disabled {
+ filter: saturate(0);
}
#map {
position: fixed;
top: 32px;
- left: 96px;
+ left: 136px;
right: 0;
bottom: 0;
overflow: scroll;
background-color: black;
}
+#tileset-picker {
+ border: 1px solid black;
+ cursor: pointer;
+ position: relative;
+ overflow: visible;
+}
+
+#tileset-picker.widget-disabled {
+ cursor: not-allowed;
+}
+
+#tileset-selector {
+ display: none;
+ position: absolute;
+ top: 0;
+ background-color: #cccccc;
+ box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
+}
+
+#tileset-picker:hover > #tileset-selector {
+ display: block;
+}
+
+#tileset-picker.widget-disabled:hover > #tileset-selector {
+ display: none;
+}
+
+
.field, .button-tile {
border: 0;
padding: 0;
@@ -101,6 +127,10 @@ body {
display: inline-flex;
}
+.button-tile {
+ margin: 2px;
+}
+
.selection {
width: 100%;
height: 100%;
@@ -110,4 +140,4 @@ body {
.field:hover .selection {
opacity: 0.5;
-}
\ No newline at end of file
+}