[ADD] INVENTORY SYSTEM (CEF)
This commit is contained in:
Lukas Moungos
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Inventory</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<!-- partial:index.partial.html -->
|
||||
<script src="./script.js"></script>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pakWrapper">
|
||||
<div>
|
||||
<div class=box1><h2> Handel Akzeptieren</h2></div>
|
||||
<div class=box2><h4 id="gewicht"> Preis: 0$</h4></div>
|
||||
</div>
|
||||
<div id="invContainer">
|
||||
|
||||
</div>
|
||||
<button id='buttonakzeptieren' onclick="akzeptieren()">Akzeptieren</button>
|
||||
<button id='buttonablehnen' onclick="ablehnen()">Ablehnen</button>
|
||||
</div>
|
||||
<script src="package://assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
312
ReallifeGamemode.Client/assets/html/inventory/handel/script.js
Normal file
312
ReallifeGamemode.Client/assets/html/inventory/handel/script.js
Normal file
@@ -0,0 +1,312 @@
|
||||
|
||||
$(document).ready(function () {
|
||||
//fire functions before page load
|
||||
drawToPage();
|
||||
moveItemsInv();
|
||||
console.log("loading finished");
|
||||
mp.trigger("CEF:BrowserLoadedTrade");
|
||||
});
|
||||
|
||||
function setItems(itemIdArr1, itemAmountArr1, money1) {
|
||||
var itemIdArr = JSON.parse(itemIdArr1);
|
||||
var money = JSON.parse(money1);
|
||||
var itemAmountArr = JSON.parse(itemAmountArr1);
|
||||
document.getElementById('gewicht').innerText = 'Preis: '+money+'$';
|
||||
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();
|
||||
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();
|
||||
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 < 6; 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 >= 6) {
|
||||
//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);
|
||||
}
|
||||
}
|
||||
}
|
||||
fillOutEmptyInv();
|
||||
}
|
||||
|
||||
|
||||
///////////////////
|
||||
// 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();
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// Button funktionen
|
||||
var elemakzeptieren = document.getElementById("buttonakzeptieren");
|
||||
elemakzeptieren.addEventListener('click', akzeptieren);
|
||||
|
||||
var elemablehnen = document.getElementById("buttonablehnen");
|
||||
elemablehnen.addEventListener('click', ablehnen);
|
||||
|
||||
|
||||
//Handel Akzeptierenfenster
|
||||
|
||||
function akzeptieren() {
|
||||
mp.trigger('CEF:acceptTrade');
|
||||
}
|
||||
|
||||
function ablehnen() {
|
||||
mp.trigger('CEF:declineTrade');
|
||||
}
|
||||
284
ReallifeGamemode.Client/assets/html/inventory/handel/style.css
Normal file
284
ReallifeGamemode.Client/assets/html/inventory/handel/style.css
Normal file
@@ -0,0 +1,284 @@
|
||||
/* *** FOR TESTING ONLY *** */
|
||||
.greyFont {
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#buttonbenutzen {
|
||||
background-color: #4CAF50; /* gruen */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: 1.5%;
|
||||
}
|
||||
#buttonwegwerfen {
|
||||
background-color: #f44336; /* rot */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: 1.5%;
|
||||
}
|
||||
#buttonhandeln {
|
||||
background-color: #008CBA; /* blau */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: 1.5%;
|
||||
}
|
||||
#buttonablehnen {
|
||||
background-color: #f44336; /* rot */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: 18%;
|
||||
}
|
||||
#buttonakzeptieren {
|
||||
background-color: #008CBA; /* blau */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 125px;
|
||||
background-color: lightGrey;
|
||||
padding: 5px;
|
||||
margin: 2px 0px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin:5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #808080;
|
||||
width: 20.75em;
|
||||
}
|
||||
.box1 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.box2 {
|
||||
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin:5px;
|
||||
padding: 5px;
|
||||
text-align:right;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pakWrapper {
|
||||
background: rgba(0,0,0,0.4);
|
||||
height: 170px;
|
||||
width: 394px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
left: 38%;
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
#invContainer{
|
||||
width: 110%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#invContainer h3 {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.itemSlot {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
border: 1px solid #808080;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.itemSlot:hover {
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
|
||||
.itemAmount p {
|
||||
color: white;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 0px 2px black;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
|
||||
.selected {
|
||||
box-shadow: 0px 0px 6px white;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
|
||||
.common {
|
||||
box-shadow: 0 0 2px 1px white inset;
|
||||
}
|
||||
|
||||
.common h3 {
|
||||
color: white;
|
||||
text-shadow: 0 0 0 1px black;
|
||||
}
|
||||
|
||||
.uncommon {
|
||||
box-shadow: 0 0 2px 1px #3333ff inset;
|
||||
}
|
||||
|
||||
.uncommon h3 {
|
||||
color: #3333ff;
|
||||
text-shadow: 0 0 0 1px black;
|
||||
}
|
||||
|
||||
.rare {
|
||||
box-shadow: 0 0 2px 1px #66ff33 inset;
|
||||
}
|
||||
|
||||
.rare h3 {
|
||||
color: #66ff33;
|
||||
text-shadow: 0 0 0 1px black;
|
||||
}
|
||||
|
||||
.superior {
|
||||
box-shadow: 0 0 3px 1px #990099 inset;
|
||||
}
|
||||
|
||||
.superior h3 {
|
||||
color: #990099;
|
||||
text-shadow: 0px 0px 1px black;
|
||||
}
|
||||
|
||||
.mythic {
|
||||
box-shadow: 0 0 3px 1px #ffa333 inset;
|
||||
}
|
||||
|
||||
.mythic h3 {
|
||||
color: #ffa333;
|
||||
text-shadow: 0px 0px 1px black;
|
||||
}
|
||||
|
||||
.pForgeWrapper {
|
||||
background: #222;
|
||||
height: 176px;
|
||||
width: 330px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/*item description */
|
||||
.itemSlot:hover > .itemDesc {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.itemDesc {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
top: 60px;
|
||||
border: 1px solid #808080;
|
||||
border-radius: 5px;
|
||||
background: #1a1a1a;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.itemDesc p{
|
||||
color: white;
|
||||
}
|
||||
/*Handelfenster */
|
||||
#tf_betrag {
|
||||
background-color: #008CBA; /* blau */
|
||||
border: none;
|
||||
height: 30px;
|
||||
width: 124px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-color: white;
|
||||
position: relative;
|
||||
left: 1.5%;
|
||||
color:#ffffff;
|
||||
}
|
||||
::placeholder {
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
#tf_submit {
|
||||
background-color: #008CBA; /* blau */
|
||||
border: none;
|
||||
height: 32px;
|
||||
width: 124px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-color: white;
|
||||
position: relative;
|
||||
left: 1.5%;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* tasks */
|
||||
55
ReallifeGamemode.Client/assets/html/inventory/index.html
Normal file
55
ReallifeGamemode.Client/assets/html/inventory/index.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Inventory</title>
|
||||
<link rel="stylesheet" href="package://assets/css/inventory/style.css">
|
||||
</head>
|
||||
<!-- partial:index.partial.html -->
|
||||
<body>
|
||||
<div class="pInvWrapper">
|
||||
<div>
|
||||
<div class=box1><h2> Inventar</h2></div>
|
||||
<div class=box2><h4 id="gewicht"> 0/25 kg</h4></div>
|
||||
</div>
|
||||
<br>
|
||||
<p>
|
||||
<div id="invContainer">
|
||||
|
||||
</div>
|
||||
<button id='buttonbenutzen' onclick="benutzen()">Benutzen</button>
|
||||
<button id='buttonwegwerfen' onclick="wegwerfen()">Wegwerfen</button>
|
||||
<button id='buttonhandeln' onclick="handeln()">Handeln</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="phanWrapper">
|
||||
<div><h2> Handel</h2></div>
|
||||
<div id="handelContainer">
|
||||
|
||||
</div>
|
||||
|
||||
<input type="text" id="tf_betrag" name="fnumber" placeholder="Betrag eingeben" min="1" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
|
||||
<input type="text" id="tf_name" placeholder="Spielername">
|
||||
<button id='tf_submit' onclick="submit()">Handeln</button>
|
||||
|
||||
</div>
|
||||
<!-- Task Systems -->
|
||||
<div class="tasksWrapper">
|
||||
<div id="tasksContainer">
|
||||
<div id="taskOneElem">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><br />
|
||||
|
||||
|
||||
|
||||
<!-- partial -->
|
||||
|
||||
<script src="package://assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
|
||||
<script src="package://assets/js/inventory/script.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user