Revamp main inventory styles, added custom inventory names, inventory…

… size override added, various fixes (#5)

README.md

@@ -23,16 +23,7 @@ Follow these steps to set up the RedM inventory script in your server:
 
 ## API Documentation
 
-#### Accessing the API
-
-There is a client side and server side API for inventory. To obtain access to the API follow the instructions below:
-
-```lua
-FeatherInventory = exports['feather-inventory'].initiate()
-```
-
-#### Server Side Inventory API
-Link TBD
+[Documentation](https://featherframework.net/api/Inventory)
 
 ## Troubleshooting
 
@@ -51,17 +42,15 @@ This inventory script is licensed under GPL3 License. Refer to the LICENSE file
 Huge inspiration to RDO's inventory system with many QOL improvements.
 
 ## To-Do
-
-- Add LOD to load ground items within a view distance
-- Make character initiate loadscreen text configurable.
 - Migrate all language/text to locales
-- Make secondary inventory titles customizable
-- Frontend UI
-  - Add Inventory specific slot counts
-  - Account for inventory specific ignore limits (ignore item caps)
-
-### Next version improvements
+- Update use modal styling.
 
+### Next Major version improvements
+- Add LOD to load ground items within a view distance
+- Make Max Item Slots customizable per inventory register.
+- Finish Weight Implementation
+- Implement Hotbar
 - Frontend UI
+  -  Add Inventory specific slot counts
     - Migrate frontend to use state management.
     - Shift + Drag will transfer or drop all items (no modal displays in this case.)

client/controllers/inventory.lua

@@ -37,8 +37,9 @@ InventoryAction.Open = function(otherInventoryId, target)
       otherInventory = results.otherInventory,
       otherItems = results.otherInventoryItems,
       otherIgnoreLimits = results.otherInventoryIgnoreLimits,
+      otherName = results.otherName,
       maxWeight = Config.maxWeight,
-      maxSlots = Config.maxItemSlots,
+      maxSlots = Config.maxItemSlots, -- TODO: Make this customizable
       categories = Feather.RPC.CallAsync('Feather:Inventory:GetCategories', {}),
       player = {
         dollars = player_display.dollars,

client/services/commands.lua

@@ -1,11 +1,11 @@
 
 if Config.DevMode then
-  Feather.KeyCodes:RegisterListener(Config.hotkey, function()
+  Feather.Keys:RegisterListener(Config.hotkey, function()
     InventoryAction.Open(nil, "player")
   end)
 else
   RegisterNetEvent("Feather:Character:Spawned", function()
-    Feather.KeyCodes:RegisterListener(Config.hotkey, function()
+    Feather.Keys:RegisterListener(Config.hotkey, function()
       InventoryAction.Open(nil, "player")
     end)
   end)
@@ -22,7 +22,7 @@ end, false)
 
 if Config.DevMode then
   RegisterCommand('open_storage', function()
-    InventoryAction.Open('5ab95e93-c590-11ee-a5cf-40b07640984b')
+    InventoryAction.Open('dde04bd6-34cc-11ef-a92d-107c61489014')
   end, false)
 end
 

client/services/ground.lua

@@ -1,6 +1,5 @@
 GroundItems = {}
 RegisterNetEvent("Feather:Inventory:UpdateGroundLocations", function(locations)
-    print("UPDATING GROUND LOCATIONS")
     ClearGroundItems()
     GroundItems = locations
     SpawnGroundItems()
@@ -66,7 +65,7 @@ CreateThread(function()
     local groundPrompt = PromptGroup:RegisterPrompt("Pickup", Feather.KeyCodes[Config.Dropped.PickupKey], 1, 1, true, 'hold')
 
     while true do
-        Wait(5)
+        Wait(3)
         local isDead = IsEntityDead(playerped)
         if isDead ~= 0 then
             if GroundItems[1] ~= nil then

config.lua

@@ -6,8 +6,6 @@ Config.DevMode = true
 Config.hotkey = "B"
 
 Config.maxItemSlots = 41          -- maximum inventory slots (last slot is your last action key)
-Config.maxWeight = 120000         -- Max weight a player can pickup. 120kg in grams
-
 -- Ground/Dropped item settings
 Config.Dropped = {
     GroupingRadius = 10,
@@ -18,6 +16,6 @@ Config.Dropped = {
 }
 
 
-
-
--- Config.hotbarLimit = 6 -- NOT YET IMPLEMENTED
+-- NOT IMPLEMENTED YET!
+Config.maxWeight = 120000         -- Max weight a player can pickup. 120kg in grams (THIS IS NOT AVAILABLE YET)
+-- Config.hotbarLimit = 6

fxmanifest.lua

@@ -6,7 +6,7 @@ lua54 "yes"
 description 'The Inventory API for the Feather Framework'
 author 'BCC Scripts'
 name 'feather-inventory'
-version '0.1.1'
+version '0.1.2'
 
 github_version_check 'true'
 github_version_type 'release'
@@ -36,7 +36,7 @@ client_scripts {
 }
 
 ui_page {
-  "ui/index.html"
+   "ui/index.html"
 }
 
 files {

server/controllers/inventory.lua

@@ -2,11 +2,11 @@ InventoryControllers = {}
 
 function InventoryControllers.GetInventoryById(inventoryId)
   local result = MySQL.query.await(
-    'SELECT `id`, `uuid`, `max_weight`, `ignore_item_limit` FROM `inventory` WHERE `uuid` = ? LIMIT 1;', { inventoryId })[1]
+    'SELECT `id`, `uuid`, `max_weight`, `ignore_item_limit`, `name` FROM `inventory` WHERE `uuid` = ? LIMIT 1;', { inventoryId })[1]
   if not result then
-    return false, false, false
+    return false, false, false, nil
   end
-  return result.id, result.max_weight, result.ignore_item_limit
+  return result.id, result.max_weight, result.ignore_item_limit, result.name
 end
 
 function InventoryControllers.GetInventoryLocationById(id)
@@ -31,13 +31,13 @@ end
 
 function InventoryControllers.GetInventoryByCharacter(character)
   local result = MySQL.query.await(
-        'SELECT `id`, `max_weight`, `ignore_item_limit` FROM `inventory` WHERE `character_id` = ? LIMIT 1;',
+        'SELECT `id`, `max_weight`, `ignore_item_limit`, `name` FROM `inventory` WHERE `character_id` = ? LIMIT 1;',
         { character })
       [1]
   if not result then
-    return false, false, false
+    return false, false, false, nil
   end
-  return result.id, result.max_weight, result.ignore_item_limit
+  return result.id, result.max_weight, result.ignore_item_limit, result.name
 end
 
 function InventoryControllers.InventoryItemCount(inventory, itemId)

server/services/commands.lua

@@ -23,16 +23,17 @@ if Config.DevMode then
         end
     end, false)
 
-
-    RegisterCommand('CreateStorage', function(source, args)
+    RegisterCommand('CreateStorageKey', function(source, args)
         InventoryAPI.RegisterForeignKey('storage', 'BIGINT UNSIGNED', 'id')
-        InventoryAPI.RegisterInventory('storage', 1)
     end, false)
 
+    RegisterCommand('CreateStorage', function(source, args)
+        InventoryAPI.RegisterInventory('storage', 1, 'Big Box')
+    end, false)
 
     RegisterCommand('AddStorageItems', function(source, args)
         local result = ItemsAPI.AddItem(args[1], tonumber(args[2]), args[3] or nil,
-            '5ab95e93-c590-11ee-a5cf-40b07640984b')
+            'dde04bd6-34cc-11ef-a92d-107c61489014')
 
         if result.error == true then
             Feather.Notify.RightNotify(source, result.message, 3000)

server/services/inventory.lua

@@ -52,12 +52,13 @@ end
 --
 -- @param tableName Name of your Database Table
 -- @param id Foreign Key ID of the entity
+-- @param displayName the name of the inventory (default: storage)
+-- @param ignoreItemLimits Ignore the max quantity of items that can be added to the inventory
 -- @param maxWeight Override the maximum weight of the inventory (nill to use default)
 -- @param restrictedItems Table of items that are restricted from being added to the inventory. e.g. { "apple", "matches" }
--- @param ignoreItemLimits Ignore the max quantity of items that can be added to the inventory
 -- @return Inventory UUID for accessing the inventory later (can be saved in your database table)
 --
-InventoryAPI.RegisterInventory = function(tableName, id, maxWeight, restrictedItems, ignoreItemLimits, displayName)
+InventoryAPI.RegisterInventory = function(tableName, id, displayName, ignoreItemLimits, maxWeight, restrictedItems)
   if not tableName or not id then
     error(
       'All parameters are required!')
@@ -92,8 +93,8 @@ InventoryAPI.RegisterInventory = function(tableName, id, maxWeight, restrictedIt
   end
 
   -- Create new inventory
-  query = 'INSERT INTO `inventory` (' .. foreignKey .. ', location, name) VALUES (?, ?, ?) RETURNING *;'
-  inventory = MySQL.query.await(query, { id, tableName, displayName or '' })
+  query = 'INSERT INTO `inventory` (' .. foreignKey .. ', location, name, max_weight, ignore_item_limit) VALUES (?, ?, ?, ?, ?) RETURNING *;'
+  inventory = MySQL.query.await(query, { id, tableName, displayName or 'storage', maxWeight or nil, ignoreItemLimits or false })
 
   if not inventory or not inventory[1] then
     return nil
@@ -174,7 +175,7 @@ end
 -- @return Table of items in the inventory and other inventory if specified
 --
 InventoryAPI.InternalOpenInventory = function(src, otherInventoryId)
-  local inventory, inventoryIgnoreLimits, otherInventory, otherInventoryIgnoreLimits = nil, nil, nil, nil
+  local inventory, inventoryIgnoreLimits, otherInventory, otherInventoryIgnoreLimits, otherName = nil, nil, nil, nil, nil
 
   -- Check to make sure inventoryId is a player source and not a string
   if tonumber(src) then
@@ -188,7 +189,7 @@ InventoryAPI.InternalOpenInventory = function(src, otherInventoryId)
       }
     end
 
-    inventory, _, _ = InventoryControllers.GetInventoryByCharacter(character.id)
+    inventory, _, _, _ = InventoryControllers.GetInventoryByCharacter(character.id)
   else
     error('Invalid Character Source!')
     return {
@@ -207,9 +208,9 @@ InventoryAPI.InternalOpenInventory = function(src, otherInventoryId)
         local player = Feather.Character.GetCharacter({ src = otherInventoryId })
         local character = player.char
 
-        otherInventory, _, inventoryIgnoreLimits = InventoryControllers.GetInventoryByCharacter(character.id)
+        otherInventory, _, inventoryIgnoreLimits, otherName = InventoryControllers.GetInventoryByCharacter(character.id)
       else
-        otherInventory, _, otherInventoryIgnoreLimits = InventoryControllers.GetInventoryById(otherInventoryId)
+        otherInventory, _, otherInventoryIgnoreLimits, otherName = InventoryControllers.GetInventoryById(otherInventoryId)
       end
       otherInventoryItems = InventoryControllers.GetInventoryItems(otherInventory)
       OpenInventories[tostring(otherInventory)] = {
@@ -224,6 +225,7 @@ InventoryAPI.InternalOpenInventory = function(src, otherInventoryId)
     inventory = inventory,
     inventoryItems = inventoryItems,
     inventoryIgnoreLimits = inventoryIgnoreLimits,
+    otherName = otherName,
     otherInventory = otherInventory,
     otherInventoryItems = otherInventoryItems,
     otherInventoryIgnoreLimits = otherInventoryIgnoreLimits

server/services/items.lua

@@ -34,22 +34,22 @@ ItemsAPI.AddItem = function(itemName, quantity, metadata, inventoryId)
   end
 
 
-  -- Check to make sure this doesnt exceed the max quantity for this item.
-  if ItemCount + quantity >= max_quantity then
-    return {
-      error = true,
-      message = "Too Many Items in Inventory"
-    }
-  end
-
-  local inventory, _, _ = nil, nil, nil
+  local inventory, _, ignore_item_limit = nil, nil, nil
   if tonumber(inventoryId) then
     local player = Feather.Character.GetCharacter({ src = inventoryId })
     local character = player.char
 
-    inventory, _, _ = InventoryControllers.GetInventoryByCharacter(character.id)
+    inventory, _, ignore_item_limit, _ = InventoryControllers.GetInventoryByCharacter(character.id)
   else
-    inventory, _, _ = InventoryControllers.GetInventoryById(inventoryId)
+    inventory, _, ignore_item_limit, _ = InventoryControllers.GetInventoryById(inventoryId)
+  end
+
+  -- Check to make sure this doesnt exceed the max quantity for this item.
+  if ItemCount + quantity >= max_quantity and ignore_item_limit == 0 then
+    return {
+      error = true,
+      message = "Too Many Items in Inventory"
+    }
   end
 
   if not inventory then
@@ -82,7 +82,6 @@ ItemsAPI.AddItem = function(itemName, quantity, metadata, inventoryId)
     count = count + 1
   end
 
-  print("Item added!")
   return {
     error = false
   }
@@ -336,7 +335,7 @@ ItemsAPI.DropItemsOnGround = function(inventoryId, items, x, y, z)
     groundID = GroundControllers.CreateGround(x, y, z)[1].id
   end
 
-  local _, groundInventoryID = InventoryAPI.RegisterInventory('ground', groundID)
+  local _, groundInventoryID = InventoryAPI.RegisterInventory('ground', groundID, 'Ground')
   local updateinv = InventoryControllers.MoveInventoryItems(inventoryId, groundInventoryID, items)
 
   UpdateClientWithGroundLocations(-1)

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feather-inventory",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "serve": "NODE_ENV=development npm run shim && vue-cli-service serve",

ui/src/App.vue

@@ -2,9 +2,9 @@
   <Transition name="fade">
     <div id="content" class="flex flex-col h-screen justify-center items-center" style="width: 100vw; height: 100vh;"
       v-if="visible || devmode">
-      <div class="bg-zinc-900 px-4 relative mx-auto pt-10 bg-opacity-70 rounded-md"
+      <div :class="`${globalOptions.target != 'player' ? 'global-background' : 'global-background-single'} px-4 relative mx-auto pt-10 bg-opacity-70 rounded-md`"
         :style="`${globalOptions.target != 'player' ? 'width: 80vw;' : ''} height: 80vh;`">
-        <div class="absolute right-2 top-0 text-2xl text-white hover:text-red-500" @click="closeApp">&times;</div>
+        <div :class="`absolute ${ globalOptions.target != 'player' ? 'right-6 top-6': 'right-8 top-4' } text-2xl text-white hover:text-red-500`" @click="closeApp">&times;</div>
         <MenuUI :player-inventory="playerInventory" :other-iventory="otherInventory" :global-options="globalOptions"
           :target="globalOptions.target" :player-display="playerDisplay" @transfer="transferItems"
           @itemAction="handleItemAction" @dropped="handleDrop">
@@ -153,7 +153,7 @@ const onMessage = (event) => {
       }
 
       if (typeof data.otherItems !== "undefined" && data.otherItems !== null) {
-        otherInventory.name = "Other"
+        otherInventory.name = data.otherName || "Storage"
         otherInventory.id = data.otherInventory
         hydrateInventoryItems('other', data);
       }
@@ -325,6 +325,28 @@ const transferItems = (dropzoneid, items) => {
   src: url(assets/fonts/chinese-rocks.ttf);
 }
 
+.global-background-single {
+  background-image: url(./assets/background-single.png);
+  
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.global-background {
+  background-image: url(./assets/background.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+
+.ink-background {
+  background-image: url(./assets/inkroller.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+
 #content {
   width: 60vw;
   height: 70vh;

ui/src/components/InventorySlate.vue

@@ -13,7 +13,7 @@
             @close="handleDropClose" @submit="handleDropQuantity"></ItemCountModal>
         <SubSlots v-if="side == 'right'" :side="side" :activeRightClickItem="activeRightClickItem" :id="inventory.id"
             @submit="handleSubItemClick" @transfer="handleTransfer" @dragging="EmitDragging"></SubSlots>
-        <div class="text-gray-100 bg-zinc-800 p-6 min-h-full relative select-none rounded-md flex flex-col justify-between dropzone"
+        <div class="text-gray-100 p-8 min-h-full relative select-none rounded-md flex flex-col justify-between dropzone ink-background"
             :id="`dropzone-${side}`" style="width: 500px; height: 70vh;">
             <h1 class="font-bold text-2xl text-center">{{ inventory.name }}</h1>
             <div class="my-4">

ui/src/components/SubSlots.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex items-center justify-center">
         <Transition :name="`slide-${side}`">
-            <div :class="`text-gray-100 bg-zinc-800 noscrollbar overflow-y-scroll select-none rounded-${side == 'right' ? 'l' : 'r'}-md`"
+            <div :class="`text-gray-100 bg-black noscrollbar overflow-y-scroll select-none rounded-md`"
                 v-if="activeRightClickItem?.items" style="max-height: 50vh;">
                 <div v-for="(subslot, key) in activeRightClickItem.items" :key="'playersubslot' + key + side"
                     @click.left="leftClick('subitem' + side + key, subslot)" @mousedown.left="startDrag($event, key)"

ui/src/components/UsableModal.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="absolute w-full h-full">
-        <div class="absolute z-50 w-full h-full bg-zinc-800 bg-opacity-90" @click="handleItemPopup()" v-show="activeItem?.key">
+        <div class="absolute z-50 w-full h-full bg-zinc-800 bg-opacity-20" @click="handleItemPopup()" v-show="activeItem?.key">
         </div>
         <Transition name="fade">
             <div class="absolute z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-zinc-900 p-10 rounded-md"