Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor HTML: Remove unnecessary header tags, improve design, and fix layout bugs #604

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+54 −18
Open

Refactor HTML: Remove unnecessary header tags, improve design, and fix layout bugs #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9e5f998
Removed non used fontawesome script.
adhershmnair Nov 26, 2024
67fbcf0
Merge branch 'main' into enhance-inventory-html
adhershmnair Nov 26, 2024
6a263e6
Merge branch 'main' of https://github.com/adhershmnair/qb-inventory i…
adhershmnair Nov 26, 2024
abf9ac1
Added icons and fixed few design issues.
adhershmnair Nov 26, 2024
88d228a
Merge branch 'enhance-inventory-html' of https://github.com/adhershmn…
adhershmnair Nov 26, 2024
e809cf9
Updated inventory logic for handlePurchase.
adhershmnair Nov 26, 2024
80a9cdd
Added warning for slot on sell item to shop.
adhershmnair Nov 26, 2024
793a9e4
Merge branch 'main' into enhance-inventory-html
adhershmnair Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 32 additions & 15 deletions html/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const InventoryContainer = Vue.createApp({
ghostElement: null,
dragStartInventoryType: "player",
transferAmount: null,
firstBulkPurchase: true,
};
},
openInventory(data) {
Expand Down Expand Up @@ -431,6 +432,11 @@ const InventoryContainer = Vue.createApp({
return;
}

if (this.dragStartInventoryType === "player" && targetInventoryType === "other" && isShop !== -1) {
this.inventoryError(this.currentlyDraggingSlot, "player");
throw new Error("You cannot sell items to this shop.");
}

Comment on lines +435 to +439
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If player drag items from player inventory to shop inventory, currently it was swapping the items in inventory, which was confusing.

Added warning when we do this.

const targetSlotNumber = parseInt(targetSlot, 10);
if (isNaN(targetSlotNumber)) {
throw new Error("Invalid target slot number");
Expand Down Expand Up @@ -502,23 +508,34 @@ const InventoryContainer = Vue.createApp({
},
async handlePurchase(targetSlot, sourceSlot, sourceItem, transferAmount) {
try {

if (this.transferAmount === null) {
if (this.firstBulkPurchase === true) {
this.firstBulkPurchase = false;
this.inventoryError(sourceSlot, "other", true);
console.error("Purchasing items in bulk. Next time there will be no warning...");
return;
}
}
Comment on lines +511 to +519
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a warning for first-time users when they attempt to make a bulk purchase without specifying the amount. Some players forget to enter the amount, resulting in an unintended bulk purchase.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would just look like you're not allowed to buy an item at first, right?


const sourceInventory = this.getInventoryByType("other");
const targetInventory = this.getInventoryByType("player");
const amountToTransfer = transferAmount !== null ? transferAmount : sourceItem.amount;
if (sourceItem.amount < amountToTransfer) {
this.inventoryError(sourceSlot, "other");
return;
}

Comment on lines +520 to +528
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved the amount checking condition before attempting purchase from lua.

const response = await axios.post("https://qb-inventory/AttemptPurchase", {
item: sourceItem,
amount: transferAmount || sourceItem.amount,
shop: this.otherInventoryName,
});
if (response.data) {
const sourceInventory = this.getInventoryByType("other");
const targetInventory = this.getInventoryByType("player");
const amountToTransfer = transferAmount !== null ? transferAmount : sourceItem.amount;
if (sourceItem.amount < amountToTransfer) {
this.inventoryError(sourceSlot);
return;
}
let targetItem = targetInventory[targetSlot];
if (!targetItem || targetItem.name !== sourceItem.name) {
let foundSlot = Object.keys(targetInventory).find((slot) => targetInventory[slot] && targetInventory[slot].name === sourceItem.name);
if (foundSlot) {
if (foundSlot && sourceItem.unique == false) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the item is unique, place the item in a new slot.

targetInventory[foundSlot].amount += amountToTransfer;
} else {
const targetInventoryKeys = Object.keys(targetInventory);
Expand All @@ -529,7 +546,7 @@ const InventoryContainer = Vue.createApp({
amount: amountToTransfer,
};
} else {
this.inventoryError(sourceSlot);
this.inventoryError(sourceSlot, "other");
return;
}
}
Expand All @@ -541,10 +558,10 @@ const InventoryContainer = Vue.createApp({
delete sourceInventory[sourceSlot];
}
} else {
this.inventoryError(sourceSlot);
this.inventoryError(sourceSlot, "other");
}
} catch (error) {
this.inventoryError(sourceSlot);
this.inventoryError(sourceSlot, "other");
}
},
async dropItem(item, quantity) {
Expand Down Expand Up @@ -707,7 +724,7 @@ const InventoryContainer = Vue.createApp({
info: selectedItem.info,
});
if (!response.data) return;

this.playerInventory[selectedItem.slot].amount -= amountToGive;
if (this.playerInventory[selectedItem.slot].amount === 0) {
delete this.playerInventory[selectedItem.slot];
Expand Down Expand Up @@ -775,10 +792,10 @@ const InventoryContainer = Vue.createApp({
}, 100);
}
},
inventoryError(slot) {
const slotElement = document.getElementById(`slot-${slot}`);
inventoryError(slot, parent = "", warning = false) {
const slotElement = document.querySelector(`.${parent}-inventory [data-slot="${slot}"]`);
if (slotElement) {
slotElement.style.backgroundColor = "red";
slotElement.style.backgroundColor = warning ? "yellow" : "red";
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed inventoryError function to show color in correct Inventory and fixed the slot id issue.

axios.post("https://qb-inventory/PlayDropFail", {}).catch((error) => {
console.error("Error playing drop fail:", error);
Expand Down
6 changes: 5 additions & 1 deletion html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>QB Inventory</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css" />
<script src="https://kit.fontawesome.com/d37231be1f.js" crossorigin="anonymous"></script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the 403 Forbidden script.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]"></script>
Expand All @@ -20,9 +20,11 @@
<div class="player-inventory-header" :class="{ 'centered-inventory-header': shouldCenterInventory }">
<div class="labels-container">
<div class="inventory-label">
<i class="fa-solid fa-box-open"></i>
<p>{{ inventoryLabel }}</p>
</div>
<div class="current-weight">
<i class="fa-solid fa-weight-scale"></i>
<p>{{ (playerWeight / 1000).toFixed(1) }} / {{ (maxWeight / 1000).toFixed(1) }}</p>
</div>
</div>
Expand Down Expand Up @@ -72,9 +74,11 @@
<div class="other-inventory-header" v-if="!isOtherInventoryEmpty">
<div class="labels-container">
<div class="inventory-label">
<i class="fa-solid fa-box-open"></i>
<p>{{ otherInventoryLabel }}</p>
</div>
<div class="current-weight">
<i class="fa-solid fa-weight-scale"></i>
<p>{{ (otherInventoryWeight / 1000).toFixed(1) }} / {{(otherInventoryMaxWeight / 1000).toFixed(1) }}</p>
</div>
</div>
Expand Down
19 changes: 17 additions & 2 deletions html/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,19 @@ div {
}

.inventory-label {
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;
}

.current-weight {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.item-grid {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -174,7 +184,6 @@ div {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
Expand Down Expand Up @@ -402,7 +411,7 @@ div {

.input-container {
position: absolute;
width: 4%;
width: 6%;
Comment on lines -405 to +414
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Increased width for amount field for better visibility.

top: calc(26% + ((47.16% - 3vh) / 2));
left: 50%;
transform: translate(-50%, -50%);
Expand All @@ -416,6 +425,12 @@ div {
box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 2px 2px rgb(0 0 0 / 3%), 0 4px 4px rgb(0 0 0 / 4%), 0 10px 8px rgb(0 0 0 / 5%), 0 15px 15px rgb(0 0 0 / 6%), 0 30px 30px rgb(0 0 0 / 7%), 0 70px 65px rgb(0 0 0 / 9%);
}

.input-container input::-webkit-outer-spin-button,
.input-container input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

Comment on lines +428 to +433
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hide the input number spinner from input field.

.input-wrapper {
display: flex;
align-items: center;
Expand Down
Loading