@jorenrui

novablocks · 2022Inventory

jorenrui's avatar

@jorenrui

3 min read

The second thing that I did for the project is to work on the inventory system.

Problem

The game has a default inventory system in which the user can only see and use the active inventory (9 blocks).

Solution

I've added an inventory system in which the user can drag and drop items to-from their storage and active inventory.

Implementation

PR Date: Jun 24, 2022, Jun 28, 2022

In the initial implementation, I've coded the inventory using vanilla JavaScript along with the drag-n-drop functionality inspired by this article. Later on, dnd-kit was used to simplify the implementation and refactored the code to use ReactJS.

Moreover, the position of the blocks in the inventory is initially stored in localStorage but later on stored in the database per user-world basis. The keybinding for the inventory can also be changed in the Hub.

The UI was also improved to be more similar to the design spec. Later on, the blocks were updated to use 3D CSS.

The block selector which is a row of blocks that the user can select from.
This is the old block selector.
The block selector which is a row of blocks that the user can select from.
The improved block selector with keyboard and mouse controls
The inventory which is a grid of blocks that the user can select to be in the block selector.
The game now has a inventory in which can be toggled by pressing the 'E' key. The key is editable via the Hub - Help tab.

Further Improvements

PR Date: Dec 7, 2022, Mar 10, 2022

I took initialize to improve the design of the inventory in which I've used CSS 3D transforms to make the blocks into a cube.

The block selector which is a row of blocks that the user can select from.
The blocks in the selector are now displayed in a cube form.

Then I've updated how the empty slot looks from the image above, to this:

The block selector which is a row of blocks that the user can select from.
The empty slots are now transparent instead of opaque with a grayish cube.

Another improvement that has been made was the addition of tooltips to the block selector and the inventory. I've used Radix UI's tooltip in implementing this. The tooltip can be triggered either on block select, mouse hover, or mouse scroll / keyboard shortcuts.