i'm trying to replicate an inventory from a mmorpg online game called CABAL on the web, the game's inventory looks like this:
Basically, inventory has 4 tabs each with 8x8, so on every tab there are a 64 totals of cells and in total 256, though, the index starts from 0 to 63 on each tab and the total from 0 to 255.
As you can see some items occupies 1:1 (rowspan:colspan) some 2:2, some can even be 2:6 for example an armoursuit, anyway the point is that i tried here replicate as best as i could, though i managed to make 1 tab only.
function createCells(rows, cols) {
var cells = {},
x = 0,
startRow = 0,
endRow = 0;
for (var i = 0; i < rows; i++) {
cells[i] = {};
for (var j = 0; j < cols; j++) {
cells[i][j] = { id: "e" + x };
if (angular.isDefined(items[x])) {
cells[i][j] = items[x];
if (items[x].colspan > 1 && items[x].rowspan > 1) {
startRow = x % rows;
endRow = parseInt(x / cols, 10) + items[x].rowspan;
console.log(j);
console.log("Start column " + startRow + " end rowspan " + endRow + " x = " + x);
}
// console.log();
// if (j >= 5 && j <= 8) {
// x += j;
// }
}
if (!angular.equals(cells[i][j], {})) {
console.log(cells[i][j]);
}
x++;
}
}
return cells;
}
If you don't mind a small approach change, you could try this out:
row
and col
combinations that will be blockedNow, you have a map of all blocked (i.e.: not empty) cells. In the createCells
loop, you can use this map to determine if you need a place holder. There are now three cases for each cell:
Here's how I did it:
function createCells(rows, cols) {
var cells = {};
// Create an object that holds all cell codes blocked by an item
var itemMap = Object.keys(items).reduce(function(map, key) {
var item = items[key],
cStart = item.slot % cols,
rStart = Math.floor(item.slot / cols)
for (var c = 0; c < item.colspan; c += 1) {
for (var r = 0; r < item.rowspan; r += 1) {
map[(r + rStart) + ";" + (c + cStart)] = item;
}
}
return map;
}, {});
var currentNr;
for (var i = 0; i < rows; i++) {
cells[i] = {};
for (var j = 0; j < cols; j++) {
currentNr = i * cols + j;
// If there's an item with this slot, place it
if (items[currentNr]) {
// Add item
cells[i][j] = items[currentNr];
} else if (itemMap[i + ";" + j]) { // The item isn't in the exact spot, but blocks it
// Block square, do nothing
} else {
// Add empty square
cells[i][j] = {
id: "e" + currentNr
}
}
}
}
return cells;
}
In a working fiddle: http://jsfiddle.net/q1ba3x4h/