Max/Main
1
0
Fork 0
Code Pull requests Activity

Verschoben von Tools nach Test okokcrafting

Browse source
This commit is contained in:
Dennis 2025-06-15 02:40:20 +02:00
parent a29350c85f
commit 504fb3f859
19 changed files with 3254 additions and 3254 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
resources/[test]/okokCrafting/web/click.mp3 Normal file
View file

Binary file not shown.

998
resources/[test]/okokCrafting/web/scripts.js Normal file
View file

@ -0,0 +1,998 @@
function addStr(str, index, stringToAdd){
return str.substring(0, index) + stringToAdd + str.substring(index, str.length);
}
var isTimerOn = false;
var lastTime;
var categories = [];
var selectedCategory = "general_cat";
var craft2;
var job2;
var gang;
var craftData;
var sideCraftMenu;
var itemClaiming = 0;
var CraftQueue = [];
var maxCraft = 10;
var canCraftItem = true;
var showAllCrafts = false;
var canClaimAll = true;
var canClaimItem = true;
var canOpenSideCraft = true;
let Inventory = '';
window.addEventListener('message', function(event) {
switch (event.data.action) {
case 'openCraft':
selectedCategory = "general_cat";
canOpenSideCraft = true;
canClaimItem = true;
itemClaiming = 0;
showAllCrafts = event.data.showAllCrafts;
Inventory = event.data.inventory;
var queue = event.data.queue;
craftData = event.data;
categories = event.data.categories;
var craft = event.data.craft;
craft2 = craft;
var num = craft.length;
var paragraph = '';
var row = '<div class="row">';
var lastRowNum = 0;
var job = event.data.job;
job2 = event.data.job;
gang = event.data.gang;
var added = 0;
var useCategories = event.data.useCategories;
var categoriesButtonsHTML = `
<input type="radio" class="btn-check cat_tab" name="category" value="general_cat" id="general_cat" checked>
<label class="btn btn-category first-category" for="general_cat">General</label>
`;
document.querySelector('#claimall-button').disabled = false;
if(useCategories){
for(let i = 0; i < categories.length; i++){
categoriesButtonsHTML += `
<input type="radio" class="btn-check cat_tab" name="category" value="${categories[i]}" id="${categories[i]}">
<label class="btn btn-category last-category" for="${categories[i]}">${categories[i]}</label>
`;
}
$('#categories_btns').html(categoriesButtonsHTML);
$('#categories_box').show();
} else {
$('#categories_box').hide();
}
if(num >= 13){
$('.itemslist_window').css('padding', '0.3125rem 0.55rem 0.3125rem 0.625rem');
} else {
$('.itemslist_window').css('padding', '0.3125rem 1.05rem 0.3125rem 0.625rem');
}
for(var i = 0; i < num; i++) {
for(var i1 = 0; i1 < craft[i].job.length; i1++){
if(selectedCategory == "general_cat" || craft[i].category == selectedCategory){
if(craft[i].job[i1] == job || craft[i].job[i1] == gang || craft[i].job[i1] == ''){
if(!event.data.UseXP){
var itemName = event.data.itemNames;
var itemId = craft[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${event.data.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${event.data.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
var myEle = document.getElementById(itemId+"wb_"+event.data.wb+"wb_"+index);
if(!myEle) {
$(document).on('click', "#"+itemId+"wb_"+event.data.wb+"wb_"+index, function() {
if(canOpenSideCraft) {
canOpenSideCraft = false;
allID = this.id;
id = allID.substring(0, allID.indexOf('wb_'));
index2 = allID.split("wb_");
$('.item_card-body').css('background-color', 'rgba(220, 220, 220, 0.20)');
$('#selected'+this.id).css('background-color', 'rgba(31, 94, 255, 1)');
var sound = new Audio('click.mp3');
sound.volume = 0.3;
sound.play();
$.post('https://okokCrafting/action', JSON.stringify({
action: "craft",
item: id,
crafts: craft,
itemName: itemName,
index: index2[2],
}));
}
});
}
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
} else {
if(craft[i].levelNeeded <= event.data.level || showAllCrafts){
var itemName = event.data.itemNames;
var itemId = craft[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${event.data.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${event.data.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
var myEle = document.getElementById(itemId+"wb_"+event.data.wb+"wb_"+index);
if(!myEle) {
$(document).on('click', "#"+itemId+"wb_"+event.data.wb+"wb_"+index, function() {
if(canOpenSideCraft) {
canOpenSideCraft = false;
allID = this.id;
id = allID.substring(0, allID.indexOf('wb_'));
index2 = allID.split("wb_");
$('.item_card-body').css('background-color', 'rgba(220, 220, 220, 0.20)');
$('#selected'+this.id).css('background-color', 'rgba(31, 94, 255, 1)');
var sound = new Audio('click.mp3');
sound.volume = 0.3;
sound.play();
$.post('https://okokCrafting/action', JSON.stringify({
action: "craft",
item: id,
crafts: craft,
itemName: itemName,
index: index2[2],
level: event.data.level,
}));
}
});
}
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
}
}
}
}
}
}
row += `</div>`;
if(event.data.UseXP) {
$('#currentlevel').html(event.data.level);
document.documentElement.style.setProperty('--percentage-width', event.data.percentage+"%");
$('.xpbar-col').css('margin-top', '-1.8rem');
} else {
$('.xpbar').hide();
$('.xpbar-col').css('margin-top', '5.05rem');
}
var queueRow = '';
CraftQueue = queue;
if(queue.length > 0){
if(queue.length >= 6){
$('.craftingq_window').css('padding-right', '0.35rem');
} else {
$('.craftingq_window').css('padding-right', '0rem');
}
for (var i = 0; i < queue.length; i++) {
if(queue[i].isDone == true) {
if(queue[i].suc){
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-concluded mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Concluded</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-claimbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-concluded mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Concluded</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-claimbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
}
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-failed mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Failed to craft</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-failbutton-bg" data-id="${i}" onclick="claimFail(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
}
} else {
if(queue[i].isPending){
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Pending</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Pending</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
}
} else {
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Time left: ${queue[i].time}s</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Time left: ${queue[i].time}s</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
}
}
}
}
} else {
queueRow = `<div class="d-flex justify-content-center noitq">The crafting queue is empty</div>`
}
$('.craftingq_window').html(queueRow);
$('#craft-table').html(row);
$('.title-name').html(event.data.name);
$('.title').fadeIn();
$('.itemslist').fadeIn();
$('.crafting-body').fadeIn();
break
case 'openSideCraft':
sideCraftMenu = event.data;
canOpenSideCraft = true;
var useLevels = false;
if(sideCraftMenu.level != undefined){
var levelNeeded = sideCraftMenu.crafts[sideCraftMenu.index].levelNeeded;
var level = sideCraftMenu.level;
useLevels = true;
}
var isLevel = false;
$('#quantity').val(1);
maxCraft = sideCraftMenu.maxCraft;
if(canCraftItem == false){
canCraftItem = true;
document.querySelector('#craft-button').disabled = false;
}
var canCraft = true;
var isAvailable = false;
var num = event.data.recipe.length;
var recipe = ``;
var img = `
<img src="nui://${Inventory}/${event.data.itemNameID}.png" class="image_itemselected">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${event.data.itemName} x${event.data.itemAmount}</span>
`;
if(sideCraftMenu.isDis){
$('#top_text').html(`Requirements`);
$('#bot_text').html(`You will receive`);
img = `
<img src="nui://${Inventory}/${event.data.itemNameID}.png" class="image_itemselected">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${event.data.itemName} x${event.data.itemAmount} (${event.data.isDisItemAmt})</span>
`;
} else {
$('#top_text').html(`You will receive`);
$('#bot_text').html(`Requirements`);
}
$('#side-image').html(img);
$('#craft-time').html(event.data.time);
if(useLevels){
if(level >= levelNeeded){
canCraft = true;
isAvailable = true;
isLevel = true;
} else {
isAvailable = false;
canCraft = false;
isLevel = true;
}
}
for(var i = 0; i < num; i++){
var idName = event.data.recipe[i][0];
if(sideCraftMenu.isDis){
recipe += `
<div class="d-flex align-items-center mx-1">
<img src="nui://${Inventory}/${event.data.recipe[i][0]}.png" class="image_components">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${event.data.itemNames[idName]} x${event.data.recipe[i][1]}</span>
</div>
`;
if(event.data.itemAmount > event.data.isDisItemAmt){
canCraft = false
}
} else {
recipe += `
<div class="d-flex align-items-center mx-1">
<img src="nui://${Inventory}/${event.data.recipe[i][0]}.png" class="image_components">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${event.data.itemNames[idName]} x${event.data.recipe[i][1]} (${event.data.inventory[i].key})</span>
</div>
`;
if(event.data.recipe[i][1] > event.data.inventory[i].key){
canCraft = false
}
}
}
$('#craft-button-div').html(`
<button type="button" id="craft-button" data-item="${event.data.itemNameID}" data-recipe="${event.data.recipe}" data-amount="${event.data.itemAmount}" data-xp="${event.data.xp}" data-isDis="${event.data.isDis}" data-index="${sideCraftMenu.index}" data-level="${sideCraftMenu.level}" onclick="craft(this)" class="btn btn-blue flex-grow-1">CRAFT</button>
`);
if(canCraft) {
$('#craft-buttons-info').fadeIn();
$('#craft-button-div').fadeIn();
$('#craft-buttons-info-level').hide();
} else {
$('#craft-buttons-info').hide();
$('#craft-buttons-info-level').hide();
}
if(useLevels){
if(!isAvailable && isLevel){
$('#craft-button-div-level').html(`
<span class="btn-blue-level"><i class="fa-solid fa-lock"></i> LEVEL REQUIRED: ${levelNeeded}</span>
`);
$('#craft-buttons-info-level').fadeIn();
$('#craft-button-div-level').fadeIn();
}
}
$('#craft-percentage').html(event.data.percentage);
$('.components_window').html(recipe);
$('.itemrequirements').fadeIn();
break
case 'ShowCraftCount':
var time = event.data.time;
var itemName = event.data.name;
$('#crafting-text').html(`Crafting`);
$('#item-name').html(`${itemName}`);
$('#item-timer').html(`${time}s`);
if(time == lastTime) {
$('#cog').removeClass('fa-spin');
} else {
$('#cog').addClass('fa-spin');
}
if(!isTimerOn){
isTimerOn = true;
$('.timer').fadeIn();
}
lastTime = time
break
case 'CompleteCraftCount':
var itemName = event.data.name;
$('.timer_card-body').css('background-color', '#1fa34a');
$('#crafting-text').html(`Crafted`);
$('#item-name').html(`${itemName}`);
$('#item-timer').html(`0s`);
$('#cog').removeClass('fa-spin');
$('#cog').removeClass('fa-cog');
$('#cog').addClass('fa-check');
break
case 'FailedCraftCount':
var itemName = event.data.name;
$('.timer_card-body').css('background-color', '#990b0b');
$('#crafting-text').html(`Failed to craft`);
$('#item-name').html(`${itemName}`);
$('#item-timer').html(`0s`);
$('#cog').removeClass('fa-spin');
$('#cog').removeClass('fa-cog');
$('#cog').addClass('fa-times');
break
case 'HideCraftCount':
isTimerOn = false;
$('.timer').fadeOut();
setTimeout(function(){
$('#cog').removeClass('fa-times');
$('#cog').removeClass('fa-check');
$('#cog').addClass('fa-spin');
$('#cog').addClass('fa-cog');
$('.timer_card-body').css('background-color', 'rgba(31, 94, 255, 1)');
}, 400);
break
case 'updateCraftingItems':
canClaimItem = true;
if(selectedCategory != ""){
var queue = event.data.queue;
var queueRow = '';
CraftQueue = queue;
if(queue.length > 0){
if(queue.length >= 6){
$('.craftingq_window').css('padding-right', '0.35rem');
} else {
$('.craftingq_window').css('padding-right', '0rem');
}
for (var i = 0; i < queue.length; i++) {
if(queue[i].isDone == true) {
if(queue[i].suc){
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-concluded mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Concluded</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-claimbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-concluded mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Concluded</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-claimbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
}
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item-failed mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Failed to craft</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-failbutton-bg" data-id="${i}" onclick="claimFail(this)"><i class="fas fa-check"></i></div></span>
</div>
</div>
`;
}
} else {
if(queue[i].isPending){
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Pending</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Pending</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
}
} else {
if(queue[i].isDis){
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Time left: ${queue[i].time}s</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="claim(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
} else {
queueRow += `
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="nui://${Inventory}/${queue[i].item}.png" class="image_components">
<div class="ms-2">
<div class="queue-itemname">${queue[i].itemName} x${queue[i].amount}</div>
<div class="queue-itemstate">Time left: ${queue[i].time}s</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg" data-id="${i}" onclick="cancel(this)"><i class="fas fa-times"></i></div></span>
</div>
</div>
`;
}
}
}
}
} else {
queueRow = `<div class="d-flex justify-content-center noitq">The crafting queue is empty</div>`
}
$('.craftingq_window').html(queueRow);
}
break
case 'resetItemNumber':
itemClaiming = 0;
break
case 'resetButton':
if(canCraftItem == false){
canCraftItem = true;
document.querySelector('#craft-button').disabled = false;
}
break
case 'canClaimAll':
document.querySelector('#claimall-button').disabled = false;
break
case 'closeMenu':
closeMenu();
break
}
});
$(document).on('click', ".cat_tab", function() {
selectedCategory = $("input[name='category']:checked").val();
var num = craft2.length;
var paragraph = '';
var row = '<div class="row">';
var lastRowNum = 0;
var added = 0
for(var i = 0; i < num; i++) {
for(var i1 = 0; i1 < craft2[i].job.length; i1++){
if(selectedCategory == "general_cat" || craft2[i].category == selectedCategory){
if(craft2[i].job[i1] == job2 || craft2[i].job[i1] == gang || craft2[i].job[i1] == ''){
if(!craftData.UseXP){
var itemName = craftData.itemNames;
var itemId = craft2[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${craftData.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${craftData.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
} else {
if(craft2[i].levelNeeded <= craftData.level || showAllCrafts){
var itemName = craftData.itemNames;
var itemId = craft2[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${craftData.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${craftData.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
}
}
}
}
}
}
row += `</div>`;
if(craftData.UseXP) {
$('#currentlevel').html(craftData.level);
document.documentElement.style.setProperty('--percentage-width', craftData.percentage+"%");
$('.xpbar-col').css('margin-top', '-1.8rem');
} else {
$('.xpbar').hide();
$('.xpbar-col').css('margin-top', '5.05rem');
}
$('#craft-table').html(row);
$('.title-name').html(craftData.name);
$('.title').fadeIn();
$('.itemslist').fadeIn();
$('.crafting-body').fadeIn();
});
function restartCrafts(){
selectedCategory = 'general_cat';
var num = craft2.length;
var paragraph = '';
var row = '<div class="row">';
var lastRowNum = 0;
var added = 0
for(var i = 0; i < num; i++) {
for(var i1 = 0; i1 < craft2[i].job.length; i1++){
if(selectedCategory == "general_cat" || craft2[i].category == selectedCategory){
if(craft2[i].job[i1] == job2 || craft2[i].job[i1] == gang || craft2[i].job[i1] == ''){
if(!craftData.UseXP){
var itemName = craftData.itemNames;
var itemId = craft2[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${craftData.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${craftData.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
} else {
if(craft2[i].levelNeeded <= craftData.level || showAllCrafts){
var itemName = craftData.itemNames;
var itemId = craft2[i].item;
var index = i;
added++
row += `
<div class="col-md-3">
<div class="card item_card" id="${itemId}wb_${craftData.wb}wb_${index}">
<div class="card-body item_card-body d-flex justify-content-center align-items-center" style="background-color: rgba(220, 220, 220, 0.20)" id="selected${itemId}wb_${craftData.wb}wb_${index}">
<span class="item-title text-center">${itemName[itemId]}</span>
<img src="nui://${Inventory}/${itemId}.png" class="image">
</div>
</div>
</div>
`;
if ((added) % 4 === 0) {
row = addStr(row, row.length, `</div><div class="row itemslist_row-h">`);
lastRowNum = row.length+6;
}
}
}
}
}
}
}
row += `</div>`;
if(craftData.UseXP) {
$('#currentlevel').html(craftData.level);
document.documentElement.style.setProperty('--percentage-width', craftData.percentage+"%");
$('.xpbar-col').css('margin-top', '-1.8rem');
} else {
$('.xpbar').hide();
$('.xpbar-col').css('margin-top', '5.05rem');
}
$('#craft-table').html(row);
$('.title-name').html(craftData.name);
}
$(document).ready(function() {
document.onkeyup = function(data) {
if (data.which == 27) {
closeMenu();
}
};
});
$(document).ready(function(){
$('#plus').click(function(e) {
var quantity = parseInt($('#quantity').val());
if(quantity < maxCraft){
$('#quantity').val(quantity + 1);
updateSideMenu(quantity + 1);
}
});
$('#minus').click(function(e) {
var quantity = parseInt($('#quantity').val());
if(quantity > maxCraft){
$('#quantity').val(maxCraft);
updateSideMenu(maxCraft);
} else {
if(quantity > 1) {
$('#quantity').val(quantity - 1);
updateSideMenu(quantity - 1);
}
}
});
$('#max').click(function(e) {
var quantity = parseInt($('#quantity').val());
if(quantity != maxCraft){
$('#quantity').val(maxCraft);
updateSideMenu(maxCraft);
}
});
});
function quantity_change(t) {
var quantity = parseInt($('#quantity').val());
if(quantity > maxCraft){
$('#quantity').val(maxCraft);
updateSideMenu(maxCraft);
} else if(quantity < 1) {
$('#quantity').val(1);
updateSideMenu(1);
} else {
updateSideMenu(quantity);
}
}
function craft(t) {
if(canCraftItem){
canCraftItem = false;
document.querySelector('#craft-button').disabled = true;
var itemId = t.dataset.item;
var recipe = t.dataset.recipe;
var amount = t.dataset.amount;
var xp = t.dataset.xp;
var isDis = t.dataset.isDis;
var index = t.dataset.index;
var level = t.dataset.level;
var quantity = document.getElementById("quantity").value;
if(quantity > maxCraft){
quantity = maxCraft;
$('#quantity').val(quantity - 1);
updateSideMenu(quantity - 1);
}
$.post('https://okokCrafting/action', JSON.stringify({
action: "craft-button",
itemID: itemId,
recipe: recipe,
amount: amount,
xp: xp,
quantity: quantity,
isDis: isDis,
index: index,
level: level,
}));
}
}
function claim(t) {
var index = parseInt(t.dataset.id)+1;
var itemRndID = parseInt(CraftQueue[index-1].randomID);
if(itemClaiming != itemRndID && canClaimItem){
canClaimItem = false;
itemClaiming = itemRndID;
$.post('https://okokCrafting/action', JSON.stringify({
action: "claim-item",
index: index,
}));
}
}
function claimall(t) {
if(CraftQueue[0] != undefined && CraftQueue[0].isDone && canClaimItem){
canClaimItem = false;
document.querySelector('#claimall-button').disabled = true;
$.post('https://okokCrafting/action', JSON.stringify({
action: "claim-all",
}));
}
}
function claimFail(t) {
var index = parseInt(t.dataset.id)+1;
var itemRndID = parseInt(CraftQueue[index-1].randomID);
if(itemClaiming != itemRndID && canClaimItem){
canClaimItem = false;
itemClaiming = itemRndID;
$.post('https://okokCrafting/action', JSON.stringify({
action: "fail-item",
index: index,
}));
}
}
function cancel(t) {
var index = parseInt(t.dataset.id)+1;
var itemRndID = parseInt(CraftQueue[index-1].randomID);
if(itemClaiming != itemRndID && canClaimItem){
canClaimItem = false;
itemClaiming = itemRndID;
$.post('https://okokCrafting/action', JSON.stringify({
action: "cancel-item",
index: index,
}));
}
}
function updateSideMenu(quantity){
var canCraft = true
var num = sideCraftMenu.recipe.length;
var recipe = ``;
var img = `
<img src="nui://${Inventory}/${sideCraftMenu.itemNameID}.png" class="image_itemselected">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${sideCraftMenu.itemName} x${sideCraftMenu.itemAmount*quantity}</span>
`;
if(sideCraftMenu.isDis){
img = `
<img src="nui://${Inventory}/${sideCraftMenu.itemNameID}.png" class="image_itemselected">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${sideCraftMenu.itemName} x${sideCraftMenu.itemAmount*quantity} (${sideCraftMenu.isDisItemAmt})</span>
`;
}
$('#side-image').html(img);
$('#craft-time').html(sideCraftMenu.time*quantity);
for(var i = 0; i < num; i++){
var idName = sideCraftMenu.recipe[i][0];
if(sideCraftMenu.isDis){
recipe += `
<div class="d-flex align-items-center mx-1">
<img src="nui://${Inventory}/${sideCraftMenu.recipe[i][0]}.png" class="image_components">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${sideCraftMenu.itemNames[idName]} x${sideCraftMenu.recipe[i][1]*quantity}</span>
</div>
`;
if(sideCraftMenu.itemAmount > sideCraftMenu.isDisItemAmt){
canCraft = false
}
} else {
recipe += `
<div class="d-flex align-items-center mx-1">
<img src="nui://${Inventory}/${sideCraftMenu.recipe[i][0]}.png" class="image_components">
<span style="color: #fff; font-weight: 600; font-size: 20px;" class="ms-2">${sideCraftMenu.itemNames[idName]} x${sideCraftMenu.recipe[i][1]*quantity} (${sideCraftMenu.inventory[i].key})</span>
</div>
`;
if(sideCraftMenu.recipe[i][1] > sideCraftMenu.inventory[i].key){
canCraft = false
}
}
}
$('#craft-button-div').html(`
<button type="button" id="craft-button" data-item="${sideCraftMenu.itemNameID}" data-recipe="${sideCraftMenu.recipe}" data-amount="${sideCraftMenu.itemAmount}" data-xp="${sideCraftMenu.xp}" data-isDis="${sideCraftMenu.isDis}" data-index="${sideCraftMenu.index}" data-level="${sideCraftMenu.level}" onclick="craft(this)" class="btn btn-blue flex-grow-1">CRAFT</button>
`);
if(canCraft) {
$('#craft-button-div').fadeIn();
} else {
$('#craft-button-div').hide();
}
$('#craft-percentage').html(sideCraftMenu.percentage);
$('.components_window').html(recipe);
$('.itemrequirements').fadeIn();
}
function closeMenu(){
itemClaiming = 0;
selectedCategory = "";
$('.crafting-body').fadeOut();
$('.title').fadeOut();
$('.itemslist').fadeOut();
$('.itemrequirements').fadeOut();
setTimeout(function(){
restartCrafts();
}, 400);
$.post('https://okokCrafting/action', JSON.stringify({
action: "close",
}));
}

589
resources/[test]/okokCrafting/web/styles.css Normal file
View file

@ -0,0 +1,589 @@
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
*,*:focus,*:hover{
outline:none;
}
html, body {
height: 100%;
}
html {
font-size: calc(16 / 19.2 * 1vw);
}
@media (min-aspect-ratio: 16 / 9) {
html {
font-size: calc(16 / 10.8 * 1vh);
}
}
body {
font-family: 'Tajawal', sans-serif;
background: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
user-select: none;
}
.crafting-body {
display: none;
height: 48rem;
}
.title-main {
margin-top: -3.05rem;
}
.title {
color: #fff;
font-size: 3.75rem;
line-height: 1;
text-transform: uppercase;
text-align: center;
}
.title-name {
font-weight: 300;
}
.title-name2 {
font-weight: 600;
margin-left: 0.938rem;
}
.card {
border: none;
border-radius: 1.25rem;
background-color: transparent;
}
.card-body {
background-color: #ffffff;
font-size: 0.938rem;
font-weight: 500;
border-radius: 1.25rem;
}
.itemslist {
display: none;
margin-top: 2.9rem;
}
.itemrequirements {
display: none;
}
.xpbar-col {
margin-top: -1.8rem;
margin-left: -0.3rem;
width: 24.65rem;
}
.xpbar {
margin-bottom: 1.35rem;
}
.itemslist_card {
width: 50rem;
}
.itemslist_card-body {
background: transparent;
}
.itemslist_window {
overflow-x: hidden;
height: 35.2rem;
padding: 0.3125rem 1.05rem 0.3125rem 0.625rem;
}
.item_card {
width: 10.625rem;
height: 10.625rem;
}
.item_card:hover {
cursor: pointer;
}
.item_card-body {
width: 10.625rem;
height: 10.625rem;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
transition: 0.25s;
background-color: rgba(220, 220, 220, 0.20);
}
.item_card-body:hover {
background-color: rgba(31, 94, 255, 1) !important;
transition: 0.25s;
transform: scale(1.030);
}
.item-title {
color: #fff;
font-weight: 600;
position: absolute;
top: 8%;
}
.image {
height: 7.5rem;
position: absolute;
top: 22.5%;
}
.image_itemselected {
height: 5rem;
}
.text_itemselected {
color: #fff;
font-weight: 600;
font-size: 1.25rem;
}
.image_components {
height: 3.75rem;
}
::-webkit-scrollbar {
width: 0.5rem;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #1f5eff;
border-radius: 0.625rem;
transition: .25s;
}
::-webkit-scrollbar-thumb:hover {
cursor: pointer;
background-color: #0a4df9;
transition: .25s;
}
.timer {
position: fixed;
right: 2rem;
bottom: 4rem;
font-size: 3.125rem;
display: none;
}
.timer_card {
height: 1.875rem;
}
.timer_card-body {
background-color: rgba(31, 94, 255, 1);
font-weight: 600 !important;
color: #fff !important;
font-size: 1.25rem !important;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
padding-right: 4.375rem;
}
#crafting-text {
margin-left: 0.625rem;
}
#item-timer {
position: absolute;
right: 0.938rem;
}
#time {
position: absolute;
top: 0.625rem;
right: 0.625rem;
color: #fff;
background-color: rgba(31, 94, 255, 1);
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
border-radius: 0.625rem;
padding: 0.313rem;
}
#percentage {
position: absolute;
top: 3.1rem;
right: 0.625rem;
color: #fff;
background-color: rgba(31, 94, 255, 1);
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
border-radius: 0.625rem;
padding: 0.313rem;
}
#level-text {
color: #fff;
font-weight: 600;
font-size: 2rem;
}
.progress {
background: rgba(220, 220, 220, 0.20);
justify-content: flex-start;
border-radius: 1.25rem;
align-items: center;
position: relative;
padding: 0 0.313rem;
display: flex;
height: 2.5rem;
width: 100%;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
}
.progress-value {
width: var(--percentage-width);
transition: width .5s ease-in-out;
border-radius: 6.25rem;
background: #1f5eff;
height: 1.875rem;
}
:root {
--percentage-width: 0%;
}
@keyframes load {
0% { width: 0; }
100% { width: var(--percentage-width); }
}
.btn {
font-weight: 500;
font-size: 1.125rem;
padding: 0.8125rem 1.0625rem;
border: none;
transition: 0.25s;
letter-spacing: 0.0125rem;
}
.btn-blue {
background-color: #1f5eff;
color: #e6e6e6;
}
.btn-blue:hover {
background-color: #0a4df9;
color: #e6e6e6;
}
.btn-blue-level {
font-size: 1.125rem;
padding: 0.8125rem 1.0625rem;
letter-spacing: 0.0125rem;
display: inline-block;
text-align: center;
background-color: #1f5eff;
color: #e6e6e6;
border-radius: 1rem;
width: 100%;
font-weight: 600;
box-shadow: 0rem 0rem 0.313rem 0rem rgb(10 10 10 / 30%);
}
.btn:focus {
box-shadow: none;
}
.btn-category {
background-color: #1f5eff;
border: none !important;
outline: none !important;
box-shadow: none !important;
transition: .25s;
font-weight: 600;
color: #fff;
}
.btn-category:hover {
background-color: #0a4df9;
color: #fff;
transition: .25s;
}
.btn:focus {
box-shadow: none;
}
.btn-check:active+.btn-category:focus, .btn-check:checked+.btn-category:focus, .btn-category.active:focus, .btn-category:active:focus, .show>.btn-category.dropdown-toggle:focus {
box-shadow: none;
transition: .25s;
}
.btn-check:active+.btn-category, .btn-check:checked+.btn-category, .btn-category.active, .btn-category:active, .show>.btn-category.dropdown-toggle {
background-color: #fcfcfc;
border-color: none;
transition: .25s;
color: #1f5eff;
}
hr {
opacity: 1;
color: #fff;
}
.queue-item {
background-color: #1f5eff;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-item:hover {
background-color: #0a4df9;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-item-concluded {
background-color: #25ba59;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-item-concluded:hover {
background-color: #20ab51;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-item-failed {
background-color: #ff2943;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-item-failed:hover {
background-color: #cd0032;
border-radius: 0.625rem;
padding: 0.5rem;
transition: .25s;
}
.queue-cancelbutton {
font-size: 1.75rem;
}
.queue-cancelbutton-bg {
width: 2.5rem;
height: 2.5rem;
background-color: #fff;
border-radius: 0.625rem;
color: #1f5eff;
transition: .25s;
}
.queue-cancelbutton-bg:hover {
background-color: #e1e1e3;
transition: .25s;
cursor: pointer;
}
.queue-claimbutton {
font-size: 1.75rem;
}
.queue-claimbutton-bg {
width: 2.5rem;
height: 2.5rem;
background-color: #fff;
border-radius: 0.625rem;
color: #25ba59;
transition: .25s;
}
.queue-claimbutton-bg:hover {
background-color: #e1e1e3;
transition: .25s;
cursor: pointer;
}
.queue-failbutton-bg {
width: 2.5rem;
height: 2.5rem;
background-color: #fff;
border-radius: 0.625rem;
color: #ff2943;
transition: .25s;
}
.queue-failbutton-bg:hover {
background-color: #e1e1e3;
transition: .25s;
cursor: pointer;
}
.components_window {
max-height: 18.75rem;
overflow-x: hidden;
}
.craftingq_window {
max-height: 27.3rem;
overflow-x: hidden;
padding-right: 0.35rem;
}
.btn-group {
padding: 0.5rem;
background-color: rgba(220, 220, 220, 0.20);
border-radius: 1.25rem;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
margin-top: 2rem;
}
.first-category {
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.last-category {
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#craft-button, #claimall-button {
border-radius: 1rem;
width: 100%;
font-weight: 600;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
}
.component, .noitq {
color: #fff;
font-weight: 600;
font-size: 1.25rem;
}
.row-h {
height: 43.8rem;
}
.queue-itemname {
color: #fff;
font-weight: 600;
font-size: 1.25rem;
line-height: 1;
}
.queue-itemstate {
line-height: 1;
color: #ededed;
margin-top: 0.2rem;
font-weight: 600;
}
.queue-item-mr {
margin-right: 0.65rem;
}
.itemslist_row-h {
margin-top: 1.35rem;
}
.section-title {
color: #fff;
font-weight: 600;
font-size: 2rem;
}
.craftingq_card {
width: 23.125rem;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
margin-top: 5.05rem;
height: 34.56rem;
}
.craftingq_card-body {
background-color: rgba(220, 220, 220, 0.20);
min-height: 34.5625rem;
}
.ywr {
color: #fff;
font-weight: 600;
font-size: 2rem;
}
.itemr_card {
height: 34.56rem;
box-shadow: 0rem 0rem 0.313rem 0rem rgba(10, 10, 10, 0.3);
}
.itemr_card-body {
background-color: rgba(220, 220, 220, 0.20);
}
.craft-tp {
color: #fff;
font-weight: 600;
}
.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
margin-left: 0;
}
.form-control {
border: none;
border-radius: 0;
padding: 0rem 0.75rem;
}
.form-control:focus {
box-shadow: none;
}
#minus {
border-radius: 0;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
#plus {
border-radius: 0;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#quantity {
background-color: rgba(220, 220, 220, 0.20);
color: #fff;
font-size: 2rem;
font-weight: 600;
}
#max {
box-shadow: 0rem 0rem 0.313rem 0rem rgb(10 10 10 / 30%);
border-radius: 1rem;
font-weight: 600;
}
.mip {
box-shadow: 0rem 0rem 0.313rem 0rem rgb(10 10 10 / 30%);
border-radius: 1rem;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.crafting {
height: 48rem;
}

125
resources/[test]/okokCrafting/web/ui.html Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="crafting-body">
<div class="row">
<div class="col">
<div class="card craftingq_card">
<div class="card-body craftingq_card-body">
<div class="section-title text-center">Crafting Queue</div>
<hr>
<div class="craftingq_window">
<div class="d-flex justify-content-between w-100 queue-item-concluded">
<div class="d-flex align-items-center">
<img src="icons/compactrifle.png" class="image_components">
<div>
<div class="queue-itemname">Compact Rifle x1</div>
<div class="queue-itemstate">Concluded</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-claimbutton"><div class="d-flex justify-content-center align-items-center queue-claimbutton-bg"><i class="fas fa-check"></i></div></span>
</div>
</div>
<div class="d-flex justify-content-between w-100 queue-item mt-2">
<div class="d-flex align-items-center">
<img src="icons/compactrifle.png" class="image_components">
<div>
<div class="queue-itemname">Compact Rifle x1</div>
<div class="queue-itemstate">Time left: 55s</div>
</div>
</div>
<div class="d-flex align-items-center queue-item-mr">
<span class="queue-cancelbutton"><div class="d-flex justify-content-center align-items-center queue-cancelbutton-bg"><i class="fas fa-times"></i></div></span>
</div>
</div>
</div>
</div>
<div class="claimall-button-div mt-2">
<button type="button" id="claimall-button" class="btn btn-blue" onclick="claimall(this)">CLAIM ALL</button>
</div>
</div>
</div>
<div class="col">
<div class="title-main text-center">
<div class="title">
<span class="title-name"></span><span class="title-name2">Crafting</span>
</div>
</div>
<div class="itemslist">
<div class="card itemslist_card">
<div class="card-body itemslist_card-body justify-content-start">
<div class="itemslist_window" id="craft-table"></div>
</div>
</div>
</div>
<div class="text-center" id="categories_box">
<div class="btn-group" role="group" id="categories_btns"></div>
</div>
</div>
<div class="col xpbar-col">
<div class="xpbar">
<div id="level-text" class="text-center">Current Level: <span id="currentlevel">28</span></div>
<div class="progress">
<div class="progress-value d-flex justify-content-center align-items-center"></div>
</div>
</div>
<div class="itemrequirements">
<div class="card itemr_card mb-2">
<div class="card-body itemr_card-body">
<span id="time"><i class="fas fa-clock"></i> <span class="craft-tp"><span id="craft-time"></span>s</span></span>
<span id="percentage"><i class="fas fa-percentage"></i> <span class="craft-tp"><span id="craft-percentage"></span></span></span>
<div class="ywr text-center" id="top_text">You will receive</div>
<div class="d-flex align-items-center justify-content-center mx-1" id="side-image">
<img src="icons/compactrifle.png" class="image_itemselected">
<span class="text_itemselected ms-2"></span>
</div>
<hr>
<div class="section-title text-center mb-2" id="bot_text">Requirements</div>
<div class="components_window"></div>
</div>
</div>
<div id="craft-buttons-info">
<div class="d-flex mb-2">
<div class="d-flex mip" id="selector">
<button type="button" class="btn btn-blue" id="minus"><i class="fa-solid fa-minus"></i></button>
<input type="number" id="quantity" onchange="quantity_change(this)" class="form-control text-center" value="1" min="1" max="9999999999">
<button type="button" class="btn btn-blue" id="plus"><i class="fa-solid fa-plus"></i></button>
</div>
<button type="button" class="btn btn-blue ms-2" id="max">MAX</button>
</div>
<div id="craft-button-div"></div>
</div>
<div id="craft-buttons-info-level">
<div id="craft-button-div-level"></div>
</div>
</div>
</div>
</div>
</div>
<div class="timer">
<div class="card timer_card">
<div class="card-body timer_card-body">
<span><i id="cog" class="fas fa-cog fa-spin"></i></span><span id="crafting-text"></span> <span id="item-name"></span> <span id="item-timer"></span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>