Skip to content

Commit

Permalink
Tilesets are stores in a simple object
Browse files Browse the repository at this point in the history
  • Loading branch information
@EduardoLopes
EduardoLopes committed May 26, 2018
1 parent 06b390a commit 85a56f0
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 48 deletions.
6 changes: 3 additions & 3 deletions app/js/components/edit-bar.js
View file
Expand Up @@ -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;

Expand All @@ -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;
}
Expand Down
38 changes: 23 additions & 15 deletions app/js/components/main-canvas.js
View file
Expand Up @@ -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;
Expand All @@ -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
);
}

}

Expand All @@ -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 (
Expand Down
17 changes: 10 additions & 7 deletions app/js/components/tileset-bases-container.js
View file
Expand Up @@ -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(<TilesetBase selected={selected} select={this.props.selectTileset} close={this.props.onClose} dataUri={tileset.uri} id={tileset.id} key={tileset.id} />);
tilesetItens.push(<TilesetBase selected={selected} select={this.props.selectTileset} close={this.props.onClose} dataUri={tileset.uri} id={tileset.id} key={tileset.id} />);

};
}
}

return (
<div className="tileset-bases">
Expand Down
54 changes: 31 additions & 23 deletions app/js/main.js
View file
Expand Up @@ -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{
Expand All @@ -17,7 +16,7 @@ class TilesetGen extends React.Component{
super(props);

this.state = {
tilesets: new Map(),
tilesets: {},
selectedTileSet: [],
currentID: 0,
lastHeight: 0,
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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]);

}

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

Expand Down Expand Up @@ -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);

}

}

Expand Down

0 comments on commit 85a56f0

Please sign in to comment.