[ADD] INVENTORY SYSTEM (CEF)
This commit is contained in:
Lukas Moungos
486
ReallifeGamemode.Client/assets/js/inventory/script.js
Normal file
486
ReallifeGamemode.Client/assets/js/inventory/script.js
Normal file
@@ -0,0 +1,486 @@
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
//fire functions before page load
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
console.log("loading finished");
|
||||
mp.trigger("CEF:BrowserLoaded");
|
||||
});
|
||||
|
||||
function setItems(itemIdArr1, itemAmountArr1) {
|
||||
var itemIdArr = JSON.parse(itemIdArr1);
|
||||
var itemAmountArr = JSON.parse(itemAmountArr1);
|
||||
for (var i = 0; i < itemIdArr.length; i++) {
|
||||
for (x = 0; x < itemAmountArr[i]; x++) {
|
||||
commands.addToPlayerInv(itemIdArr[i]);
|
||||
console.log(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var fish = {
|
||||
name: "Fisch",
|
||||
weight: 1,
|
||||
currentWeight: 1,
|
||||
dropweight: function () {
|
||||
var randomweight = Math.floor((Math.random() * 10) + 1);
|
||||
this.weight = randomweight;
|
||||
this.currentWeight = randomweight;
|
||||
},
|
||||
def: 15,
|
||||
rarity: 'common',
|
||||
statSlots: [],
|
||||
runes: [],
|
||||
amount: 1,
|
||||
usable: 'false',
|
||||
selected: 'false',
|
||||
stackable: 'false',
|
||||
object: 'true',
|
||||
itemId: 1,
|
||||
img: 'package://assets/img/items/fish.svg'
|
||||
}
|
||||
|
||||
var hamburger = {
|
||||
name: "Hamburger",
|
||||
rarity: 'common',
|
||||
selected: 'false',
|
||||
usable: 'true',
|
||||
amount: 1,
|
||||
currentWeight: 0.3,
|
||||
stackable: 'true',
|
||||
object: 'true',
|
||||
itemId: 2,
|
||||
img: "package://assets/img/items/burger.svg"
|
||||
}
|
||||
|
||||
var cocaine = {
|
||||
name: "Koks",
|
||||
rarity: 'common',
|
||||
selected: 'false',
|
||||
usable: 'true',
|
||||
amount: 1,
|
||||
currentWeight: 0.05,
|
||||
stackable: 'true',
|
||||
object: 'true',
|
||||
itemId: 3,
|
||||
img: "package://assets/img/items/cocaine.svg"
|
||||
}
|
||||
|
||||
var cannabis = {
|
||||
name: "Cannabis",
|
||||
rarity: 'common',
|
||||
selected: 'false',
|
||||
usable: 'true',
|
||||
amount: 1,
|
||||
currentWeight: 0.05,
|
||||
stackable: 'true',
|
||||
object: 'true',
|
||||
itemId: 4,
|
||||
img: "package://assets/img/items/cannabis.svg"
|
||||
}
|
||||
|
||||
var allItems = [fish, hamburger, cocaine, cannabis];
|
||||
|
||||
|
||||
|
||||
////////////////////////
|
||||
// Player Invenotry //
|
||||
////////////////////////
|
||||
|
||||
var playerInventory = [];
|
||||
var EmptySlot = { name: 'blankSpace', rarity: '', object: 'false' };
|
||||
|
||||
|
||||
function addToInvenotry(addItem) {
|
||||
var cloneItem = Object.assign({}, addItem);
|
||||
var getExsistingId = cloneItem.itemId;
|
||||
var unfininshedStack;
|
||||
|
||||
|
||||
//Checks to see if any items can be stacked, the location, and stack amount
|
||||
for (var i = 0; i < playerInventory.length; i++) {
|
||||
if (playerInventory[i].itemId === getExsistingId && cloneItem.stackable === 'true' && playerInventory[i].amount < 10) {
|
||||
unfininshedStack = i
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (cloneItem.currentWeight * cloneItem.amount + weightInv >= 25) {
|
||||
return;
|
||||
}
|
||||
|
||||
//Adds item to inventory
|
||||
for (var i = 0; i < playerInventory.length; i++) {
|
||||
if (unfininshedStack != undefined) {
|
||||
if (playerInventory[unfininshedStack].amount + cloneItem.amount <= 10) {
|
||||
playerInventory[unfininshedStack].amount += cloneItem.amount;
|
||||
unfininshedStack = undefined;
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
break;
|
||||
}
|
||||
else if (playerInventory[unfininshedStack].amount + cloneItem.amount > 10) {
|
||||
var stackRemainder = 10 - playerInventory[unfininshedStack].amount;
|
||||
playerInventory[unfininshedStack].amount += stackRemainder;
|
||||
cloneItem.amount -= stackRemainder;
|
||||
var recycleCloned = cloneItem;
|
||||
addToInvenotry(recycleCloned);
|
||||
unfininshedStack = undefined;
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
break;
|
||||
}
|
||||
}
|
||||
else if (cloneItem.amount > 10 && playerInventory[i].object === 'false') {
|
||||
var reduceCloneAmount = Object.assign({}, cloneItem);
|
||||
reduceCloneAmount.amount = 10;
|
||||
playerInventory[i] = reduceCloneAmount;
|
||||
cloneItem.amount -= 10;
|
||||
addToInvenotry(cloneItem);
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
break;
|
||||
}
|
||||
else if (unfininshedStack == undefined && playerInventory[i].object === 'false') {
|
||||
playerInventory[i] = cloneItem;
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var getItemSlotData;
|
||||
function getAllItemSlotData() {
|
||||
getItemSlotData = document.getElementsByClassName('itemSlot');
|
||||
}
|
||||
|
||||
|
||||
var currentSelected;
|
||||
function moveItemsInv() {
|
||||
getAllItemSlotData();
|
||||
for (var i = 0; i < getItemSlotData.length; i++) {
|
||||
getItemSlotData[i].addEventListener("click", function () {
|
||||
if (this.classList.contains('selected')) {
|
||||
this.classList.remove('selected');
|
||||
currentSelected = undefined;
|
||||
}
|
||||
else if (this.getAttribute('object') === 'false' && isNaN(currentSelected)) {
|
||||
return;
|
||||
}
|
||||
else if (currentSelected) {
|
||||
if (playerInventory[currentSelected].stackable === 'false' || playerInventory[currentSelected].itemId != playerInventory[this.getAttribute('data-value')].itemId) {
|
||||
var swap = playerInventory[this.getAttribute('data-value')];
|
||||
playerInventory[this.getAttribute('data-value')] = playerInventory[currentSelected];
|
||||
playerInventory[currentSelected] = swap;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
currentSelected = undefined;
|
||||
getItemSlotData = document.getElementsByClassName('itemSlot');
|
||||
moveItemsInv();
|
||||
}
|
||||
else if (playerInventory[currentSelected].itemId == playerInventory[this.getAttribute('data-value')].itemId && playerInventory[currentSelected].stackable) {
|
||||
playerInventory[this.getAttribute('data-value')].amount += playerInventory[currentSelected].amount
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
currentSelected = undefined;
|
||||
getItemSlotData = document.getElementsByClassName('itemSlot');
|
||||
moveItemsInv();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.className += ' selected'
|
||||
currentSelected = this.getAttribute('data-value')
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function refreshAllCurrentItems() {
|
||||
var remove = document.getElementById('invContainer');
|
||||
while (remove.firstChild) remove.removeChild(remove.firstChild);
|
||||
}
|
||||
|
||||
|
||||
function fillOutEmptyInv() {
|
||||
for (var i = 0; i < 24; i++) {
|
||||
if (!playerInventory[i]) {
|
||||
playerInventory.push(EmptySlot);
|
||||
drawToPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
var weightInv = 0;
|
||||
function drawToPage() {
|
||||
refreshAllCurrentItems();
|
||||
weightInv = 0;
|
||||
for (var i = 0; i < playerInventory.length; i++) {
|
||||
if (playerInventory[i].selected == 'true') {
|
||||
var className = ' selected';
|
||||
}
|
||||
else {
|
||||
var className = '';
|
||||
}
|
||||
|
||||
if (i >= 24) {
|
||||
//Keeps inventory set to 10 items max
|
||||
console.log('Inventory is full!')
|
||||
return;
|
||||
}
|
||||
else {
|
||||
//creates item element
|
||||
var item = document.createElement("div");
|
||||
item.className = "itemSlot " + playerInventory[i].rarity + className;
|
||||
item.setAttribute("data-value", i);
|
||||
item.setAttribute("inv-type", 'p');
|
||||
item.setAttribute("object", playerInventory[i].object);
|
||||
item.setAttribute('style', 'background: url(' + playerInventory[i].img + '); background-size: contain;');
|
||||
|
||||
//show element amounts
|
||||
var itemAmount = document.createElement("div");
|
||||
itemAmount.className = "itemAmount";
|
||||
var itemAmountDisplay = document.createElement("p");
|
||||
if (playerInventory[i].amount) {
|
||||
var itemDisplayStatsName = document.createTextNode(playerInventory[i].amount);
|
||||
}
|
||||
else {
|
||||
var itemDisplayStatsName = document.createTextNode('');
|
||||
}
|
||||
item.appendChild(itemAmount);
|
||||
itemAmount.appendChild(itemAmountDisplay);
|
||||
itemAmountDisplay.appendChild(itemDisplayStatsName);
|
||||
|
||||
|
||||
//adds item element or elements
|
||||
document.getElementById("invContainer").appendChild(item);
|
||||
|
||||
//creates item display information
|
||||
if (playerInventory[i].object === 'true') {
|
||||
var itemDesc = document.createElement("div");
|
||||
var itemDescTitle = document.createElement("h3");
|
||||
|
||||
var getItemTitle = document.createTextNode(playerInventory[i].name + " (" + Math.round(playerInventory[i].currentWeight * playerInventory[i].amount * 100) / 100 + " kg)");
|
||||
itemDesc.className = "itemDesc";
|
||||
item.appendChild(itemDesc);
|
||||
itemDesc.appendChild(itemDescTitle);
|
||||
itemDescTitle.appendChild(getItemTitle);
|
||||
|
||||
weightInv += playerInventory[i].currentWeight * playerInventory[i].amount;
|
||||
document.getElementById('gewicht').innerText = Math.round(weightInv * 100) / 100 + "/25 kg";
|
||||
}
|
||||
}
|
||||
}
|
||||
fillOutEmptyInv();
|
||||
}
|
||||
|
||||
function refreshAllCurrentHandelItems() {
|
||||
var remove = document.getElementById('handelContainer');
|
||||
while (remove.firstChild) remove.removeChild(remove.firstChild);
|
||||
}
|
||||
|
||||
|
||||
function fillOutEmptyInvHandel() {
|
||||
for (var i = 24; i < 30; i++) {
|
||||
if (!playerInventory[i]) {
|
||||
playerInventory.push(EmptySlot);
|
||||
drawToHandel();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawToHandel() {
|
||||
refreshAllCurrentHandelItems();
|
||||
for (var i = 24; i < playerInventory.length; i++) {
|
||||
if (playerInventory[i].selected == 'true') {
|
||||
var className = ' selected';
|
||||
}
|
||||
else {
|
||||
var className = '';
|
||||
}
|
||||
|
||||
if (i >= 30) {
|
||||
//Keeps inventory set to 10 items max
|
||||
console.log('Inventory is full!')
|
||||
return;
|
||||
}
|
||||
else {
|
||||
//creates item element
|
||||
var item = document.createElement("div");
|
||||
item.className = "itemSlot " + playerInventory[i].rarity + className;
|
||||
item.setAttribute("data-value", i);
|
||||
item.setAttribute("inv-type", 'p');
|
||||
item.setAttribute("object", playerInventory[i].object);
|
||||
item.setAttribute('style', 'background: url(' + playerInventory[i].img + '); background-size: contain;');
|
||||
|
||||
//show element amounts
|
||||
var itemAmount = document.createElement("div");
|
||||
itemAmount.className = "itemAmount";
|
||||
var itemAmountDisplay = document.createElement("p");
|
||||
if (playerInventory[i].amount) {
|
||||
var itemDisplayStatsName = document.createTextNode(playerInventory[i].amount);
|
||||
}
|
||||
else {
|
||||
var itemDisplayStatsName = document.createTextNode('');
|
||||
}
|
||||
item.appendChild(itemAmount);
|
||||
itemAmount.appendChild(itemAmountDisplay);
|
||||
itemAmountDisplay.appendChild(itemDisplayStatsName);
|
||||
|
||||
|
||||
//adds item element or elements
|
||||
document.getElementById("handelContainer").appendChild(item);
|
||||
|
||||
if (playerInventory[i].object === 'true') {
|
||||
var itemDesc = document.createElement("div");
|
||||
var itemDescTitle = document.createElement("h3");
|
||||
|
||||
var getItemTitle = document.createTextNode(playerInventory[i].name + " (" + Math.round(playerInventory[i].currentWeight * playerInventory[i].amount * 100) / 100 + " kg)");
|
||||
itemDesc.className = "itemDesc";
|
||||
item.appendChild(itemDesc);
|
||||
itemDesc.appendChild(itemDescTitle);
|
||||
itemDescTitle.appendChild(getItemTitle);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
fillOutEmptyInvHandel();
|
||||
}
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Dev Commands //
|
||||
///////////////////
|
||||
|
||||
var commands = {
|
||||
addToPlayerInv: function (itemGiveId) {
|
||||
for (var i = 0; i < allItems.length; i++) {
|
||||
if (allItems[i].itemId === itemGiveId) {
|
||||
addToInvenotry(allItems[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
clearPlayerInv: function () {
|
||||
playerInventory = [];
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// Button funktionen
|
||||
var elembenutzen = document.getElementById("buttonbenutzen");
|
||||
elembenutzen.addEventListener('click', benutzen);
|
||||
|
||||
var elemwegwerfen = document.getElementById("buttonwegwerfen");
|
||||
elemwegwerfen.addEventListener('click', wegwerfen);
|
||||
|
||||
var elemsubmit = document.getElementById("tf_submit");
|
||||
elemsubmit.addEventListener('click', handeln);
|
||||
|
||||
|
||||
function benutzen() {
|
||||
if (currentSelected) {
|
||||
if (playerInventory[currentSelected].usable == 'true') {
|
||||
if (playerInventory[currentSelected].stackable == 'true') {
|
||||
playerInventory[currentSelected].amount -= 1;
|
||||
if (playerInventory[currentSelected].amount <= 0) {
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
} else {
|
||||
if (getItemSlotData[currentSelected].classList.contains('selected')) {
|
||||
getItemSlotData[currentSelected].classList.remove('selected');
|
||||
playerInventory[currentSelected].selected = 'false';
|
||||
currentSelected = undefined;
|
||||
}
|
||||
}
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
moveItemsInv();
|
||||
getCommands();
|
||||
} else {
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
currentSelected = undefined;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
moveItemsInv();
|
||||
|
||||
}
|
||||
mp.trigger("CEF:UseItemInv", playerInventory[currentSelected].itemId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function wegwerfen() {
|
||||
if (currentSelected) {
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
currentSelected = undefined;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
moveItemsInv();
|
||||
mp.events.callRemote('invThrowItem', playerInventory[currentSelected].itemId);
|
||||
}
|
||||
|
||||
}
|
||||
$(".phanWrapper").hide();
|
||||
var trade = 1;
|
||||
$("#buttonhandeln").click(function () {
|
||||
if (trade == 1) {
|
||||
$(".phanWrapper").show();
|
||||
drawToHandel();
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
trade = 0;
|
||||
} else {
|
||||
$(".phanWrapper").hide();
|
||||
trade = 1;
|
||||
}
|
||||
});
|
||||
|
||||
function handeln() {
|
||||
var Money = document.getElementById("tf_betrag").value;
|
||||
var User = document.getElementById("tf_name").value;
|
||||
if (User == '') {
|
||||
return;
|
||||
}
|
||||
if (Money == '') {
|
||||
getTradeSlotItems();
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
currentSelected = undefined;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
moveItemsInv();
|
||||
|
||||
mp.trigger("CEF:tradeItem", 0, User, JSON.stringify(tradeItems), JSON.stringify(tradeItemAmount));
|
||||
return;
|
||||
}
|
||||
getTradeSlotItems();
|
||||
playerInventory[currentSelected] = EmptySlot;
|
||||
currentSelected = undefined;
|
||||
drawToPage();
|
||||
drawToHandel();
|
||||
moveItemsInv();
|
||||
mp.trigger("CEF:tradeItem", $('#tf_betrag').val(), User, JSON.stringify(tradeItems), JSON.stringify(tradeItemAmount));
|
||||
return;
|
||||
}
|
||||
var tradeItems = [];
|
||||
var tradeItemAmount = [];
|
||||
function getTradeSlotItems() {
|
||||
tradeItems = [];
|
||||
tradeItemAmount = [];
|
||||
for (var i = 24; i < playerInventory.length; i++) {
|
||||
if (playerInventory[i].object == 'true') {
|
||||
for (var x = 0; x < allItems.length; x++) {
|
||||
if (playerInventory[i].itemId == allItems[x].itemId) {
|
||||
tradeItems.push(playerInventory[i].itemId);
|
||||
tradeItemAmount.push(playerInventory[i].amount);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user