Skip to content

Commit

Permalink
Add support for different size assets & Fix coordinate for json export
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuna878
yuna878 committed Apr 15, 2020
1 parent 14218d5 commit f5ae0f1
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 81 deletions.
2 changes: 1 addition & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@

.AssetScroller {
overflow: scroll;
height: 550px;
height: 500px;
}

.SelectedAssetImg {
Expand Down
23 changes: 13 additions & 10 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,16 @@ class App extends React.Component {
selectedAssetIsBackground: DEFAULT_SELECTED_ASSET_IS_BACKGROUND,
selectedAssetFlipStatus: DEFAULT_SELECTED_ASSET_FLIP_STATUS, // 1: normal ; -1: flipped horizontally
selectedAssetRotateStatus: DEFAULT_SELECTED_ASSET_ROTATE_STATUS, // Degrees
selectedAssetSizeRatio: DEFAULT_SELECTED_ASSET_SIZE_RATIO,
selectedAssetSizeWidth: DEFAULT_SELECTED_ASSET_SIZE_RATIO,
selectedAssetSizeHeight: DEFAULT_SELECTED_ASSET_SIZE_RATIO,
assetBoardBackground: [],
assetBoardItem: [],
assetBoardHome: [],
assetBoardWall: [],
assetBoardCharacter: [],
flipAssetIndicator: [], // 2d array where each element is an array of ints indicating flip status
rotateAssetIndicator: [], // 2d array where each element is array of ints indicating degree of rotation
largeAssetIndicator: [], // 2d array where each element is null or [size, x_coord relative to image, y_coord relative to image]
largeAssetIndicator: [], // 2d array where each element is null or [width, height, x_coord relative to image, y_coord relative to image]
fileName: null, // file name for saving level json
eraseMode: false,
};
Expand Down Expand Up @@ -135,7 +136,8 @@ class App extends React.Component {
selectedAssetIsBackground,
selectedAssetFlipStatus,
selectedAssetRotateStatus,
selectedAssetSizeRatio,
selectedAssetSizeWidth,
selectedAssetSizeHeight,
flipAssetIndicator,
rotateAssetIndicator,
largeAssetIndicator,
Expand All @@ -150,8 +152,8 @@ class App extends React.Component {
}
} else {
// Go through all tile coordinates that the asset should cover
for (let i = 0; i < selectedAssetSizeRatio; i++) {
for (let j = 0; j < selectedAssetSizeRatio; j++) {
for (let i = 0; i < selectedAssetSizeHeight; i++) {
for (let j = 0; j < selectedAssetSizeWidth; j++) {
let x = rowInd + i;
let y = colInd + j;
if (x < boardRows && y < boardCols) {
Expand All @@ -161,7 +163,7 @@ class App extends React.Component {
flipAssetIndicator[x][y][0] = selectedAssetFlipStatus;
rotateAssetIndicator[x][y][0] = selectedAssetRotateStatus;
} else {
largeAssetIndicator[x][y] = [selectedAssetSizeRatio, i, j];
largeAssetIndicator[x][y] = [selectedAssetSizeWidth, selectedAssetSizeHeight, i, j];
if (board[x][y].length !== 1) {
board[x][y].pop();
flipAssetIndicator[x][y].pop();
Expand All @@ -184,8 +186,8 @@ class App extends React.Component {
}

generateMargin(assetInfo) {
const x = assetInfo[1];
const y = assetInfo[2];
const x = assetInfo[2];
const y = assetInfo[3];
return `${-GAMESQUARE_SIZE * x}px 0px 0px ${-GAMESQUARE_SIZE * y}px`;
}

Expand Down Expand Up @@ -232,8 +234,8 @@ class App extends React.Component {
src={require(`./assets/${path[1]}`)}
style={{
transform: `scaleX(${flipAssetIndicator[rowInd][colInd][1]}) rotate(${rotateAssetIndicator[rowInd][colInd][1]}deg)`,
height: `${largeAsset ? largeAsset[0] * GAMESQUARE_SIZE : null}px`,
width: `${largeAsset ? largeAsset[0] * GAMESQUARE_SIZE : null}px`,
height: `${largeAsset ? largeAsset[1] * GAMESQUARE_SIZE : null}px`,
margin: `${largeAsset ? this.generateMargin(largeAsset) : null}`,
}}
onClick={() => this.handleGameSquareClick(rowInd, colInd)}
Expand All @@ -260,7 +262,8 @@ class App extends React.Component {
selectedAssetIsBackground,
selectedAssetFlipStatus: 1,
selectedAssetRotateStatus: 0,
selectedAssetSizeRatio: COMBINED_TILES[path].size,
selectedAssetSizeWidth: COMBINED_TILES[path].width,
selectedAssetSizeHeight: COMBINED_TILES[path].height,
eraseMode: false,
});
}
Expand Down
60 changes: 31 additions & 29 deletions src/jsonParsing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ import { COMBINED_TILES, TILE_TYPE } from './tiles';

let largeAssetIndicatorGlobal;

function isLargeAssetTopLeft(x, y) {
const assetInfo = largeAssetIndicatorGlobal[x][y];
console.log(assetInfo, x, y);
return assetInfo[1] === 0 && assetInfo[2] === 0;
function isLargeAssetTopLeft(rowInd, colInd) {
const assetInfo = largeAssetIndicatorGlobal[rowInd][colInd];
return assetInfo[2] === 0 && assetInfo[3] === 0;
}

function isLargeAsset(path) {
return COMBINED_TILES[path].size > 1;
return COMBINED_TILES[path].width > 1 || COMBINED_TILES[path].height > 1;
}

function stateToJson(state) {
Expand Down Expand Up @@ -43,16 +42,16 @@ function stateToJson(state) {
const decorations = {};

// loop through each coordinate
for (let x = 0; x < boardRows; x++) {
for (let y = 0; y < boardCols; y++) {
for (let y = 0; y < boardRows; y++) {
for (let x = 0; x < boardCols; x++) {
// loop through all assets on the x,y coordinate
const assetArr = board[x][y];
const assetArr = board[y][x];
for (let ind = 0; ind < assetArr.length; ind++) {
const path = assetArr[ind];
const flip = flipAssetIndicator[x][y][ind] === -1; // flip to boolean
const rotate = rotateAssetIndicator[x][y][ind] / 90; // degrees to number of 90deg turns
const flip = flipAssetIndicator[y][x][ind] === -1; // flip to boolean
const rotate = rotateAssetIndicator[y][x][ind] / 90; // degrees to number of 90deg turns

if (ind > 0 && isLargeAsset(path) && !isLargeAssetTopLeft(x, y)) {
if (ind > 0 && isLargeAsset(path) && !isLargeAssetTopLeft(y, x)) {
continue;
}

Expand Down Expand Up @@ -153,33 +152,36 @@ async function jsonToState(dataStr, newBoards) {
/*********** Ground Tiles ***********/
Object.keys(grounds).forEach((tile) => {
const { x, y, texture, flip, rotate } = grounds[tile];
board[x][y][0] = texture;
flipAssetIndicator[x][y][0] = flip ? -1 : 1; // boolean to flip
rotateAssetIndicator[x][y][0] = rotate * 90; // number of 90deg turns to total degree of rotation
console.log(tile);
board[y][x][0] = texture;
flipAssetIndicator[y][x][0] = flip ? -1 : 1; // boolean to flip
rotateAssetIndicator[y][x][0] = rotate * 90; // number of 90deg turns to total degree of rotation
});

/*********** Non-ground Tiles ***********/
for (var tilesObj of nongrounds) {
Object.keys(tilesObj).forEach((tile) => {
console.log(tile);
const { x, y, texture, flip, rotate } = tilesObj[tile];
const sizeRatio = COMBINED_TILES[texture].size;
for (let i = 0; i < sizeRatio; i++) {
for (let j = 0; j < sizeRatio; j++) {
const newX = x + i;
const newY = y + j;
if (newX < rows && newY < columns) {
if (isLargeAsset(texture) && board[newX][newY].length > 1) {
const sizeWidth = COMBINED_TILES[texture].width;
const sizeHeight = COMBINED_TILES[texture].height;
for (let i = 0; i < sizeHeight; i++) {
for (let j = 0; j < sizeWidth; j++) {
const newY = y + i;
const newX = x + j;
if (newY < rows && newX < columns) {
if (isLargeAsset(texture) && board[newY][newX].length > 1) {
continue;
}
largeAssetIndicator[newX][newY] = [sizeRatio, i, j];
if (board[newX][newY].length !== 1) {
board[newX][newY].pop();
flipAssetIndicator[newX][newY].pop();
rotateAssetIndicator[newX][newY].pop();
largeAssetIndicator[newY][newX] = [sizeWidth, sizeHeight, i, j];
if (board[newY][newX].length !== 1) {
board[newY][newX].pop();
flipAssetIndicator[newY][newX].pop();
rotateAssetIndicator[newY][newX].pop();
}
board[newX][newY].push(texture);
flipAssetIndicator[newX][newY].push(flip ? -1 : 1); // boolean to flip
rotateAssetIndicator[newX][newY].push(rotate * 90); // number of 90deg turns to total degree of rotation
board[newY][newX].push(texture);
flipAssetIndicator[newY][newX].push(flip ? -1 : 1); // boolean to flip
rotateAssetIndicator[newY][newX].push(rotate * 90); // number of 90deg turns to total degree of rotation
}
}
}
Expand Down
183 changes: 142 additions & 41 deletions src/tiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,62 +9,163 @@ const TILE_TYPE = {
};

const BACKGROUND_TILES = {
'background/ground_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/groundgrass_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/grounddark1_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/grounddark2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/groundbrick_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/ground_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/groundgrass_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/grounddark1_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/grounddark2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/groundbrick_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
// palette 2
'background/ground_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/groundgrass_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/grounddark1_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/grounddark2_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/groundbrick_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 },
'background/ground_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/groundgrass_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/grounddark1_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/grounddark2_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
'background/groundbrick_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 },
};

const ITEM_TILES = {
'item/food1_64.png': { type: TILE_TYPE.ITEM, size: 1 },
'item/food1_64.png': { type: TILE_TYPE.ITEM, width: 1, height: 1 },
};

const HOME_TILES = {
'environment/StallHome1_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamA' },
'environment/StallHome2_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamB' },
'environment/StallHome3_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamC' },
'environment/StallHome4_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamD' },
'environment/StallHome1_64.png': {
type: TILE_TYPE.TEAM,
width: 2,
height: 2,
team: 'teamA',
},
'environment/StallHome2_64.png': {
type: TILE_TYPE.TEAM,
width: 2,
height: 2,
team: 'teamB',
},
'environment/StallHome3_64.png': {
type: TILE_TYPE.TEAM,
width: 2,
height: 2,
team: 'teamC',
},
'environment/StallHome4_64.png': {
type: TILE_TYPE.TEAM,
width: 2,
height: 2,
team: 'teamD',
},
};

const WALL_TILES = {
'background/hole0_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '0' },
'background/hole1_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '1' },
'background/hole2opp_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-opp' },
'background/hole2adj_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-adj' },
'background/hole3_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '3' },
'background/hole4_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '4' },
'background/hole0_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '0',
},
'background/hole1_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '1',
},
'background/hole2opp_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '2-opp',
},
'background/hole2adj_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '2-adj',
},
'background/hole3_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '3',
},
'background/hole4_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '4',
},
// palette 2 holes
'background/hole0_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '0' },
'background/hole1_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '1' },
'background/hole2opp_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-opp' },
'background/hole2adj_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-adj' },
'background/hole3_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '3' },
'background/hole4_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '4' },
'background/hole0_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '0',
},
'background/hole1_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '1',
},
'background/hole2opp_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '2-opp',
},
'background/hole2adj_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '2-adj',
},
'background/hole3_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '3',
},
'background/hole4_palette2_64.png': {
type: TILE_TYPE.HOLE,
width: 1,
height: 1,
label: '4',
},
// ***
'environment/Box_64.png': { type: TILE_TYPE.WALL, size: 1 },
'environment/box_palette2_64.png': { type: TILE_TYPE.WALL, size: 1 },
'environment/DirectionsSign_64.png': { type: TILE_TYPE.WALL, size: 1 },
'environment/HangingLantern_64.png': { type: TILE_TYPE.DECORATION, size: 1 },
'environment/Shrub_64.png': { type: TILE_TYPE.WALL, size: 1 },
'environment/Shrub_palette2_64.png': { type: TILE_TYPE.WALL, size: 1 },
'environment/StallItem1_64.png': { type: TILE_TYPE.WALL, size: 2 },
'environment/StallOther1_64.png': { type: TILE_TYPE.WALL, size: 2 },
'environment/StallOther2_64.png': { type: TILE_TYPE.WALL, size: 2 },
'environment/StallOther_palette2_64.png': { type: TILE_TYPE.WALL, size: 2 },
'environment/Box_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 },
'environment/box_palette2_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 },
'environment/DirectionsSign_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 },
'environment/HangingLantern_64.png': { type: TILE_TYPE.DECORATION, width: 1, height: 1 },
'environment/Shrub_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 },
'environment/Shrub_palette2_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 },
'environment/StallItem1_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 },
'environment/StallOther1_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 },
'environment/StallOther2_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 },
'environment/StallOther_palette2_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 },
'environment/StallOtherWide_64.png': { type: TILE_TYPE.WALL, width: 4, height: 2 },
};

const CHARACTER_TILES = {
'character/P1_64.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamA' },
'character/P2_64_v2.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamB' },
'character/P3_64_v2.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamC' },
'character/P4_64.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamD' },
'character/P1_64.png': {
type: TILE_TYPE.CHARACTER,
width: 1,
height: 1,
team: 'teamA',
},
'character/P2_64_v2.png': {
type: TILE_TYPE.CHARACTER,
width: 1,
height: 1,
team: 'teamB',
},
'character/P3_64_v2.png': {
type: TILE_TYPE.CHARACTER,
width: 1,
height: 1,
team: 'teamC',
},
'character/P4_64.png': {
type: TILE_TYPE.CHARACTER,
width: 1,
height: 1,
team: 'teamD',
},
};

const COMBINED_TILES = {};
Expand Down

0 comments on commit f5ae0f1

Please sign in to comment.