Add Radial Menu to Inventory / Item Interaction

Client/Gui/Inventory/inventory.js

@@ -1,4 +1,6 @@
-var show = false;
+const InputHelper = require("inputhelper");
+
+var show = false;
 var showAdmin = false;
 var trading = false;
 const { x: screenX, y: screenY } = mp.game.graphics.getScreenActiveResolution(0, 0);
@@ -13,6 +15,16 @@ let sizeMul = 0.08;
 let yMul = 1.8;
 var targetPlayerName;
 let closePos = [0.7125, 0.17]
+var clickTime;
+var itemRadial = false;
+var hoverGrid;
+var radialSelect = "none";
+var clickedItem;
+let aspectRatioFactor = screenX / screenY;
+var upRColor = 222;
+var downRColor = 222;
+var leftRColor = 222;
+var rightRColor = 222;
 
 var inventoryWeight;
 var items = [[]];
@@ -65,6 +77,7 @@ mp.events.add("showInventory", (invWeight, itemArr) => {
         mp.game.graphics.setStreamedTextureDictAsNoLongerNeeded("itemimages");
         inventoryWeight = 0;
         items = null;
+        itemRadial = false;
     }
 });
 
@@ -118,7 +131,7 @@ mp.events.add("render", () => {
 
         mp.game.graphics.set2dLayer(2);
         //INVENTARÜBERSCHRIFT
-        mp.game.graphics.drawText("Inventar ~g~(" + inventoryWeight + "/40000g)", [rxC, ryC - (rWidth / 1.20)], {
+        mp.game.graphics.drawText("Inventar ~g~" + inventoryWeight + "/40000g", [rxC, ryC - (rWidth / 1.20)], {
             font: 7,
             color: [112, 128, 144, 254],
             scale: [0.7, 0.7],
@@ -153,7 +166,7 @@ mp.events.add("render", () => {
 
         mp.game.graphics.set2dLayer(4);
         //WENN MAUS ÜBER ITEM
-        if (isMouseOverItem(pos[0], pos[1]) && dragItem === null) {
+        if (isMouseOverItem(pos[0], pos[1]) && dragItem === null && itemRadial === false) {
             mp.game.graphics.drawRect(pos[0] / screenX, pos[1] / screenY + 0.055, 0.14, 0.08, 0, 0, 0, 220);
 
             var hoverItemP = [items[hoverItem][0], items[hoverItem][1], items[hoverItem][2], items[hoverItem][3]];
@@ -192,6 +205,35 @@ mp.events.add("render", () => {
             }
             
         }
+        mp.game.graphics.set2dLayer(5);
+        if (itemRadial === true) {
+            mp.game.graphics.drawSprite("itemimages", "radialsplit", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 0, 0, 0, 255);
+            mp.game.graphics.drawSprite("itemimages", "radialup", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 222, upRColor, 222, upRColor);
+            mp.game.graphics.drawSprite("itemimages", "radialdown", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 222, downRColor, 222, downRColor);
+            //mp.game.graphics.drawSprite("itemimages", "radialleft", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 222, leftRColor, 222, leftRColor);
+            //mp.game.graphics.drawSprite("itemimages", "radialright", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 222, rightRColor, 222, rightRColor);
+            mp.game.graphics.set2dLayer(6);
+            mp.game.graphics.drawSprite("itemimages", "radialdrop", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 255, 255, 255, 255);
+            mp.game.graphics.drawSprite("itemimages", "radialuse", grid[hoverGrid][0], grid[hoverGrid][1], rWidth / aspectRatioFactor, rWidth, 0, 255, 255, 255, 255);
+        }
+        //--------------------------------------------------------------DEBUG
+        mp.game.graphics.set2dLayer(7);
+        mp.game.graphics.drawText(itemRadial.toString() + "  ~y~" + radialSelect, [0.5, 0.05], {
+            font: 7,
+            color: [255, 0, 0, 255],
+            scale: [0.7, 0.7],
+            outline: true,
+        });
+        //KOORDINATEN
+        if (ifMouseSelectRadial(pos[0], pos[1])) {
+            mp.game.graphics.drawText((pos[0] / screenX).toFixed(3) + " / " + (pos[1] / screenY).toFixed(3), [pos[0] / screenX, pos[1] / screenY - 0.02], {
+                font: 4,
+                color: [255, 255, 255, 255],
+                scale: [0.4, 0.4],
+                outline: true,
+            });
+        }
+        //----------------------------------------------------------DEBUG END
     }
     if (showAdmin === true) {
         var pos = mp.gui.cursor.position;
@@ -202,7 +244,7 @@ mp.events.add("render", () => {
 
         mp.game.graphics.set2dLayer(2);
         //INVENTARÜBERSCHRIFT
-        mp.game.graphics.drawText("Inventar von ~y~" + targetPlayerName + " ~g~(" + inventoryWeight + "/40000g)", [rxC, ryC - (rWidth / 1.20)], {
+        mp.game.graphics.drawText("Inventar von ~y~" + targetPlayerName + " ~g~" + inventoryWeight + "/40000g", [rxC, ryC - (rWidth / 1.20)], {
             font: 7,
             color: [112, 128, 144, 254],
             scale: [0.7, 0.7],
@@ -237,7 +279,7 @@ mp.events.add("render", () => {
 
         mp.game.graphics.set2dLayer(4);
         //WENN MAUS ÜBER ITEM
-        if (isMouseOverItem(pos[0], pos[1]) && dragItem === null) {
+        if (isMouseOverItem(pos[0], pos[1]) && dragItem === null && itemRadial === false) {
             mp.game.graphics.drawRect(pos[0] / screenX, pos[1] / screenY + 0.055, 0.14, 0.08, 0, 0, 0, 220);
 
             var hoverItemP = [items[hoverItem][0], items[hoverItem][1], items[hoverItem][2], items[hoverItem][3]];
@@ -301,6 +343,31 @@ function isMouseOverItem(cX, cY) {
                 }
             }
         }
+    } else {
+        if (itemRadial === false) {
+            var x = cX / screenX;
+            var y = cY / screenY;
+            var a;
+            var b;
+            var c;
+
+            for (var s = 0; s < 20; s++) {
+                a = grid[s][0] - x;
+                b = grid[s][1] - y;
+                c = Math.sqrt(a * a + b * b);
+
+                var invSlot = (s + 1);
+
+                if (c < sizeMul / 2) {
+                    for (i = 0; i < items.length; i++) {
+                        if (parseInt(items[i][4]) === invSlot) {
+                            hoverGrid = s;
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -381,6 +448,46 @@ function isMouseOverX(cX2, cY2) {
     }
 }
 
+function ifMouseSelectRadial(cX2, cY2) {
+    if (show && itemRadial === true) {
+        var x = cX2 / screenX;
+        var y = cY2 / screenY;
+        var a;
+        var b;
+        var c;
+
+        //OBEN
+        if (x > grid[hoverGrid][0] - 0.0255 / aspectRatioFactor && x < grid[hoverGrid][0] + 0.0255 / aspectRatioFactor && y < grid[hoverGrid][1] - 0.065 && y > grid[hoverGrid][1] - 0.2) {
+            radialSelect = "up";
+            upRColor = 255;
+            return true;
+        }
+        //UNTEN
+        else if (x > grid[hoverGrid][0] - 0.0255 / aspectRatioFactor && x < grid[hoverGrid][0] + 0.0255 / aspectRatioFactor && y > grid[hoverGrid][1] + 0.065 && y < grid[hoverGrid][1] + 0.2) {
+            radialSelect = "down";
+            downRColor = 255;
+            return true;
+        }
+        ////LINKS
+        //else if (x > grid[hoverGrid][0] - 0.2 / aspectRatioFactor && x < grid[hoverGrid][0] - 0.065 / aspectRatioFactor && y < grid[hoverGrid][1] + 0.0255 && y > grid[hoverGrid][1] - 0.0255) {
+        //    radialSelect = "left";
+        //    leftRColor = 255;
+        //    return true;
+        //}
+        ////RECHTS
+        //else if (x < grid[hoverGrid][0] + 0.2 / aspectRatioFactor && x > grid[hoverGrid][0] + 0.065 / aspectRatioFactor && y < grid[hoverGrid][1] + 0.0255 && y > grid[hoverGrid][1] - 0.0255) {
+        //    radialSelect = "right";
+        //    rightRColor = 255;
+        //    return true;
+        //} else {
+            upRColor = 222;
+            downRColor = 222;
+            leftRColor = 222;
+            rightRColor = 222;
+        }
+    }
+}
+
 mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, worldPosition, hitEntity) => {
 
     var cX = x / screenX;
@@ -389,7 +496,7 @@ mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, world
     if (show) {
         //LINKE MAUSTASTE
         //RUNTER
-        if (upOrDown === "down" && leftOrRight === "left" && mouseLDown === false && mouseRDown === false) {
+        if (upOrDown === "down" && leftOrRight === "left" && mouseLDown === false && mouseRDown === false && itemRadial === false) {
 
             mouseLDown = true;
 
@@ -397,11 +504,40 @@ mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, world
                 dragItem = hoverItem;
                 oldDragSlot = items[dragItem][4];
                 items[dragItem][4] = "-1";
+            } else if (ifMouseSelectRadial(x, y) && dragItem === null) {
+                switch (radialSelect) {
+                    case "up":
+                        var dropInput = new InputHelper("Wie viel Items möchtest du wegwerfen?");
+                        dropInput.show();
+                        dropInput.getValue((data) => {
+                            var amount = parseInt(data);
+                            if (isNaN(amount)) {
+                                mp.game.graphics.notify('~r~Du musst eine Nummer eingeben!');
+                                return;
+                            }
+                            mp.events.callRemote('itemInteract', "drop", items[clickedItem][5], amount);
+                            items[clickedItem][3] -= amount;
+                        });                       
+                        
+                        itemRadial = false;
+                        break;
+                    case "down":
+                        mp.events.callRemote('itemInteract', "use", items[clickedItem][5], 1);
+                        items[clickedItem][3]--;
+                        itemRadial = false;
+                        break;
+                    case "left":
+                        itemRadial = false;
+                        break;
+                    case "right":
+                        itemRadial = false;
+                        break;
+                }                
             }
         }
 
         //HOCH
-        if (upOrDown === "up" && leftOrRight === "left" && mouseLDown === true) {
+        if (upOrDown === "up" && leftOrRight === "left" && mouseLDown === true && itemRadial === false) {
 
             mouseLDown = false;
 
@@ -427,8 +563,8 @@ mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, world
 
         //RECHTE MAUSTASTE
         //RUNTER
-        if (upOrDown === "down" && leftOrRight === "right" && mouseLDown === false && mouseRDown === false) {
+        if (upOrDown === "down" && leftOrRight === "right" && mouseLDown === false && mouseRDown === false && itemRadial === false) {
-
+            clickTime = Date.now();
             mouseRDown = true;
 
             if (isMouseOverItem(x, y) && dragItem === null) {
@@ -440,10 +576,16 @@ mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, world
         }
 
         //HOCH
-        if (upOrDown === "up" && leftOrRight === "right" && mouseRDown === true) {
+        if (upOrDown === "up" && leftOrRight === "right" && mouseRDown === true && itemRadial === false) {
-
             mouseRDown = false;
-
+            if (Date.now() - clickTime < 300 && isMouseOverItem(x, y)) {
+                clickedItem = hoverItem;
+                items[hoverItem][3]++;  
+                itemRadial = true;
+                hoverItem = null;
+                dragItem = null;
+                clickTime = 0;
+            } else {               
                 if (dragItem !== null) {
                     if (isMouseOverFreeSlot(x, y)) {
 
@@ -470,6 +612,7 @@ mp.events.add('click', (x, y, upOrDown, leftOrRight, relativeX, relativeY, world
                 }
             }           
         }
+    }
     if (showAdmin) {
         //LINKE MAUSTASTE
         //RUNTER

Client/dlcpacks/itemimages/dlc.rpf

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:df4d09a306cb10b002168a863f3b4c43554350c6eb64c9e5707513b249d5b03c
+oid sha256:7ff24e43dc8dba5207214613cb949c6a5a8ac29bfa90ae40a985e9c82a8cde43
-size 34304
+size 69632

Server/Commands/Admin.cs

@@ -1046,9 +1046,29 @@ namespace reallife_gamemode.Server.Commands
                 return;
             }
 
+            var invWeight = 0;
+
+            using (var context = new DatabaseContext())
+            {
+                List<UserItem> userItems = context.UserItems.ToList().FindAll(i => i.UserId == target.GetUser().Id);
+                foreach(var uItem in userItems)
+                {
+                    invWeight += uItem.Amount * InventoryManager.GetItemById(itemId).Gewicht;
+                }
+            }
+
+            invWeight += amount * InventoryManager.GetItemById(itemId).Gewicht;
+
+            if (invWeight > 40000)
+            {
+                player.SendChatMessage("~y~" + targetname + " ~s~hat nicht mehr genug Platz in seinem Inventar.");
+            }
+            else
+            {
                 UserItem item = new UserItem() { ItemId = itemId, UserId = target.GetUser().Id, Amount = amount };
                 InventoryManager.AddItemToInventory(target, item);
             }          
+        }
 
         [Command("inventory", "~m~Benutzung: ~s~/inventory [Spieler]")]
         public void CmdAdminGiveItem(Client player, string targetname)

Server/Managers/InventoryManager.cs

@@ -220,5 +220,16 @@ namespace reallife_gamemode.Server.Managers
                 context.SaveChanges();
             }
         }
+        [RemoteEvent("itemInteract")]
+        public void ItemInteract(Client player, string type, string itemId, int amount)
+        {
+            switch (type)
+            {
+                case "use":
+                    break;
+                case "drop":
+                    break;
+            }
+        }
     }
 }