This may be due to the image being used. IF you look at the hat on the demo you can see what I am talking about. It is cut off and not centered. This should never be the case.

I want the two systems to be completely seperate. I want to be able to call a method with the grid info and it be able to draw the UI based on that. The UI should be completely configurable and a separate part of the asset.

Idea i had was just store the inventory as a dictionary

grid[x][y]["control"]
grid[x][y]["state"]
grid[x][y]["item"]
grid[x][y]["item_root"]

When you attempt to add items to the inventory the calculation for if there are any free grid spots is incorrect. It is adding the new items only in the first few columns and rows.

Implement a global event system that handles all of the events for the inventory system. This may be split into multiple in the future. This should be a class that is autoloaded that has signals defined on it. Other classes can connect and emit to it from anywhere in the game. This makes it easy for people to integrated with. This should be well documented in the repository somewhere.