diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js
index 6ae730e..057f0a8 100644
--- a/js/retro/RetroArchitecture.js
+++ b/js/retro/RetroArchitecture.js
@@ -178,7 +178,7 @@ export default class RetroArchitecture
for (let y = 0; y < data.rows; y++) {
for (let x = 0; x < data.columns; x++) {
- if (data.matrix[y][x] !== null) {
+ if (data.matrix[y][x] > -1) {
architecture.matrix[y][x] = new RetroArchitectureTile(
data.matrix[y][x],
x * architecture.tileWidth,
diff --git a/levels/level.json b/levels/level.json
index 7246516..2fc095e 100644
--- a/levels/level.json
+++ b/levels/level.json
@@ -1,19 +1,19 @@
{
- "tileset": "graphics/tileset-landscape01.jpg",
+ "tileset": "/mr-crocs-adventures/graphics/tileset-landscape01.jpg",
"tiles": 8,
"scale": 3,
"rows": 10,
"columns": 17,
"matrix": [
- [6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ],
- [6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ],
- [6 ,6 ,null ,null ,null ,null ,null ,null ,0 ,0 ,0 ,0 ,null ,null ,null ,4 ,4 ],
- [6 ,6 ,2 ,null ,null ,null ,null ,0 ,4 ,4 ,4 ,4 ,0 ,null ,null ,4 ,4 ],
- [6 ,6 ,6 ,2 ,2 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ],
- [5 ,5 ,5 ,5 ,5 ,1 ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ],
- [4 ,4 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ,4 ],
- [4 ,4 ,null ,null ,null ,null ,0 ,0 ,0 ,null ,null ,null ,0 ,4 ,4 ,4 ,4 ],
- [4 ,4 ,0 ,0 ,0 ,null ,4 ,4 ,4 ,null ,null ,0 ,4 ,4 ,4 ,4 ,4 ],
+ [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
+ [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
+ [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,0 ,0 ,0 ,-1 ,-1 ,-1 ,4 ,4 ],
+ [6 ,6 ,2 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ,0 ,-1 ,-1 ,4 ,4 ],
+ [6 ,6 ,6 ,2 ,2 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
+ [5 ,5 ,5 ,5 ,5 ,1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ],
+ [4 ,4 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ],
+ [4 ,4 ,-1 ,-1 ,-1 ,-1 ,0 ,0 ,0 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ],
+ [4 ,4 ,0 ,0 ,0 ,-1 ,4 ,4 ,4 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ,4 ],
[4 ,4 ,4 ,4 ,4 ,0 ,4 ,4 ,4 ,0 ,0 ,4 ,4 ,4 ,4 ,4 ,4 ]
]
}
\ No newline at end of file
diff --git a/tilorswift/index.html b/tilorswift/index.html
new file mode 100644
index 0000000..a338795
--- /dev/null
+++ b/tilorswift/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Tilorswift
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js
new file mode 100644
index 0000000..1aadfe6
--- /dev/null
+++ b/tilorswift/js/Field.js
@@ -0,0 +1,33 @@
+export default class Field
+{
+ className = 'field';
+
+ constructor(tileset, index = 0)
+ {
+ this.tileset = tileset;
+ this.index = index;
+ this.htmlElement = document.createElement('td');
+ this.init();
+ }
+
+ init()
+ {
+ 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';
+ }
+
+ setIndex(index)
+ {
+ this.index = index;
+ this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
+ }
+
+ getElement()
+ {
+ return this.htmlElement;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js
new file mode 100644
index 0000000..c4fc135
--- /dev/null
+++ b/tilorswift/js/Terrain.js
@@ -0,0 +1,64 @@
+import Field from "./Field.js";
+import Tileset from "./Tileset.js";
+
+export default class Terrain
+{
+ constructor(tileset, tilesX, tilesY)
+ {
+ this.tileset = tileset;
+ this.fields = [];
+ this.tilesX = tilesX;
+ this.tilesY = tilesY;
+ this.htmlElement = document.createElement('table');
+ this.htmlElement.id = 'level';
+
+ this.init();
+ }
+
+ init()
+ {
+ for (let r = 0; r < this.tilesY; r++) {
+ let row = [];
+ let tr = document.createElement('tr');
+
+ for (let col = 0; col < this.tilesX; col++) {
+ let field = new Field(this.tileset);
+ let td = field.getElement();
+ row.push(field);
+ tr.appendChild(td);
+ }
+
+ this.fields.push(row);
+ this.htmlElement.appendChild(tr);
+ }
+
+ }
+
+ getElement()
+ {
+ return this.htmlElement;
+ }
+
+ setFieldIndex(x, y, index)
+ {
+ this.fields[y][x].setIndex(index);
+ }
+
+ static createFromJson(json)
+ {
+ let terrainData = JSON.parse(json);
+ let imageTileset = new Image();
+ imageTileset.src = terrainData.tileset;
+
+ let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
+ let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows);
+
+ for (let y = 0; y < terrainData.matrix.length; y++) {
+ for (let x = 0; x < terrainData.matrix[y].length; x++) {
+ terrain.setFieldIndex(x, y, terrainData.matrix[y][x]);
+ }
+ }
+
+ return terrain;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/Tileset.js b/tilorswift/js/Tileset.js
new file mode 100644
index 0000000..324a7b1
--- /dev/null
+++ b/tilorswift/js/Tileset.js
@@ -0,0 +1,29 @@
+export default class Tileset
+{
+ constructor(image, tiles, scale = 1)
+ {
+ this.image = image;
+ this.tiles = tiles;
+ this.scale = scale;
+ }
+
+ getWidth()
+ {
+ return this.image.width * this.scale;
+ }
+
+ getHeight()
+ {
+ return this.image.height * this.scale;
+ }
+
+ getTileWidth()
+ {
+ return this.image.width / this.tiles * this.scale;
+ }
+
+ getTileHeight()
+ {
+ return this.image.height * this.scale;
+ }
+}
\ No newline at end of file
diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js
new file mode 100644
index 0000000..e5a27b8
--- /dev/null
+++ b/tilorswift/js/module.js
@@ -0,0 +1,13 @@
+import Terrain from "./Terrain.js";
+import FileLoader from "../../js/FileLoader.js";
+
+let image = new Image();
+image.src = '../graphics/tileset-landscape01.jpg';
+image.onload = function () {
+ console.log('Loaded');
+
+ let loader = new FileLoader('../levels/level.json');
+ let terrain = Terrain.createFromJson(loader.getContent());
+
+ document.body.appendChild(terrain.getElement());
+};
diff --git a/tilorswift/style.css b/tilorswift/style.css
new file mode 100644
index 0000000..8d299b3
--- /dev/null
+++ b/tilorswift/style.css
@@ -0,0 +1,20 @@
+body {
+ padding: 0;
+ margin: 0;
+ background-color: #6096ff;
+}
+
+#level {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+.row {
+}
+
+.field {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ background-repeat: no-repeat;
+}
\ No newline at end of file