diff --git a/app/js/components/edit-bar.js b/app/js/components/edit-bar.js index 1fa1e6e..cbc75bc 100644 --- a/app/js/components/edit-bar.js +++ b/app/js/components/edit-bar.js @@ -32,7 +32,7 @@ class EditBar extends React.Component { for (var i = 0; i < this.props.selected.length; i++) { - if(this.props.tilesets.get(this.props.selected[i]).type != this.props.tilesets.get(this.props.selected[0]).type){ + if(this.props.tilesets[this.props.selected[i]].type != this.props.tilesets[this.props.selected[0]].type){ allTheSame = false; @@ -41,11 +41,11 @@ class EditBar extends React.Component { } if(this.props.selected != null && this.props.selected > -1){ - defaultSelectValue = this.props.tilesets.get(this.props.selected[0]).type; + defaultSelectValue = this.props.tilesets[this.props.selected[0]].type; } else { if(allTheSame == true){ - defaultSelectValue = this.props.tilesets.get(this.props.selected[0]).type; + defaultSelectValue = this.props.tilesets[this.props.selected[0]].type; } else { defaultSelectValue = -1; } diff --git a/app/js/components/main-canvas.js b/app/js/components/main-canvas.js index 6c39a12..fb8bd61 100644 --- a/app/js/components/main-canvas.js +++ b/app/js/components/main-canvas.js @@ -44,11 +44,14 @@ class MainCanvas extends React.Component { var width = 0; var height = 0; - for(var tileset of this.props.tilesets.values()) { + for (var key in this.props.tilesets) { + if (this.props.tilesets.hasOwnProperty(key)) { - width = Math.max(width, tilesetTemplate[tileset.type].width * tileset.tileSize); - height = tileset.y + tileset.height; + var tileset = this.props.tilesets[key]; + width = Math.max(width, tilesetTemplate[tileset.type].width * tileset.tileSize); + height = tileset.y + tileset.height; + } } this.canvas.width = width; @@ -64,20 +67,25 @@ class MainCanvas extends React.Component { this.setCanvasSize(); - for(var tileset of this.props.tilesets.values()) { + for (var key in this.props.tilesets) { + + if (this.props.tilesets.hasOwnProperty(key)) { + + var tileset = this.props.tilesets[key]; + for (h = 0; h < tilesetTemplate[tileset.type].height * 2; h++) { - for (h = 0; h < tilesetTemplate[tileset.type].height * 2; h++) { + for (w = 0; w < tilesetTemplate[tileset.type].width * 2; w++) { - for (w = 0; w < tilesetTemplate[tileset.type].width * 2; w++) { + this.drawTile( + tileset.img, //sprite + tileset.x + (w * (tileset.tileSize / 2)), //x + tileset.y + (h * (tileset.tileSize / 2)), //y + tilesetTemplate[tileset.type].map[(tilesetTemplate[tileset.type].width * 2) * h + w] - 1, //type + tileset.tileSize //tileSize + ); - this.drawTile( - tileset.img, //sprite - tileset.x + (w * (tileset.tileSize / 2)), //x - tileset.y + (h * (tileset.tileSize / 2)), //y - tilesetTemplate[tileset.type].map[(tilesetTemplate[tileset.type].width * 2) * h + w] - 1, //type - tileset.tileSize //tileSize - ); + } } @@ -89,9 +97,9 @@ class MainCanvas extends React.Component { render() { - if(this.ctx && this.props.tilesets.size > 0) + if(this.ctx && Object.keys(this.props.tilesets).length > 0) this.generateTileset(); - else if(this.ctx && this.props.tilesets.size == 0) + else if(this.ctx && Object.keys(this.props.tilesets).length == 0) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); return ( diff --git a/app/js/components/tileset-bases-container.js b/app/js/components/tileset-bases-container.js index a05b61d..9faee93 100644 --- a/app/js/components/tileset-bases-container.js +++ b/app/js/components/tileset-bases-container.js @@ -9,17 +9,20 @@ class TilesetBaseContainer extends React.Component { var tilesetItens = []; - for(var tileset of this.props.tilesets.values()) { + for (var key in this.props.tilesets) { + if (this.props.tilesets.hasOwnProperty(key)) { + var tileset = this.props.tilesets[key]; - var selected = false; + var selected = false; - if(_.indexOf(this.props.selected, tileset.id) > -1){ - selected = true; - } + if(_.indexOf(this.props.selected, tileset.id) > -1){ + selected = true; + } - tilesetItens.push(); + tilesetItens.push(); - }; + } + } return (
diff --git a/app/js/main.js b/app/js/main.js index fc62bab..3a36d4d 100644 --- a/app/js/main.js +++ b/app/js/main.js @@ -7,7 +7,6 @@ var MainCanvas = require('./components/main-canvas.js'); var EditBar = require('./components/edit-bar.js'); var ConfigBar = require('./components/config-bar.js'); - var tilesetTemplate = require('./template.js'); class TilesetGen extends React.Component{ @@ -17,7 +16,7 @@ class TilesetGen extends React.Component{ super(props); this.state = { - tilesets: new Map(), + tilesets: {}, selectedTileSet: [], currentID: 0, lastHeight: 0, @@ -54,17 +53,17 @@ class TilesetGen extends React.Component{ var y = 0; - if(tilesets.size === 1){ + if(Object.keys(tilesets).length === 1){ y = this.state.lastHeight; - } else if(tilesets.size >= 1){ + } else if(Object.keys(tilesets).length >= 1){ y = this.state.lastY + this.state.lastHeight; } - tilesets.set(ID, { + tilesets[ID] = { uri: dataUri, img: img, id: ID, @@ -74,10 +73,10 @@ class TilesetGen extends React.Component{ y: y, width: 0, height: tilesetTemplate[0].height * (img.naturalWidth / 2) - }); + }; this.setState({ - lastHeight: tilesets.get(ID).height, + lastHeight: tilesets[ID].height, lastY: y, tilesets: tilesets, currentID: this.state.currentID @@ -96,25 +95,29 @@ class TilesetGen extends React.Component{ var y = 0, height = 0, lastY = 0; - tilesets.forEach(function(tileset){ + for (var key in this.state.tilesets) { + if (this.state.tilesets.hasOwnProperty(key)) { - y = 0; + var tileset = this.state.tilesets[key]; - if(tilesets.size === 1){ + y = 0; - y = height; + if(Object.keys(tilesets).length === 1){ - } else if(tilesets.size > 1){ + y = height; - y = lastY + height; + } else if(Object.keys(tilesets).length > 1){ - } + y = lastY + height; - lastY = y; - tileset.y = y; - height = tileset.height; + } - }); + lastY = y; + tileset.y = y; + height = tileset.height; + + } + }; this.setState({ lastHeight: height, @@ -127,7 +130,7 @@ class TilesetGen extends React.Component{ for (var i = 0; i < this.state.selectedTileSet.length; i++) { - this.state.tilesets.delete( this.state.selectedTileSet[i] ); + this.state.tilesets = _.omit(this.state.tilesets, this.state.selectedTileSet[i]); } @@ -146,8 +149,8 @@ class TilesetGen extends React.Component{ var tilesets = this.state.tilesets, y = 0; - tilesets.get(id).type = +type; - tilesets.get(id).height = tilesetTemplate[tilesets.get(id).type].height * tilesets.get(id).tileSize; + tilesets[id].type = +type; + tilesets[id].height = tilesetTemplate[tilesets[id].type].height * tilesets[id].tileSize; this.recalcYPosition(tilesets); @@ -175,9 +178,14 @@ class TilesetGen extends React.Component{ this.state.selectedTileSet.length = 0; - for(var tileset of this.state.tilesets.values()) { + for (var key in this.state.tilesets) { + + if (this.state.tilesets.hasOwnProperty(key)) { - this.state.selectedTileSet.push(tileset.id); + var tileset = this.state.tilesets[key]; + this.state.selectedTileSet.push(tileset.id); + + } }