Twine Version: 2.5.1.0
Story Format: Sugarcube 2.36.1
Hey everyone.
I’m playing around with HiEv’s Universal Inventory System (v0.9.7.3) and have come across an issue where the icons for the items in a container aren’t showing.
The system works perfectly in isolation, and this is only happening when I add to an existing project. As far as I can tell I have updated all the image paths correctly.
Items.basket = { type: ["thing"], singular: "a basket", plural: "baskets", place: ["hips1"], size: 2, image: "Images/basket.png", description: "An empty basket." };
Items.belt = { type: ["clothing"], singular: "a belt", plural: "belts", place: ["hips1"], size: 2, image: "Images/icon_belt1.png", description: "A basic leather belt." };
Items.dagger = { type: ["weapon", "stabbing", "1-handed"], singular: "a dagger", plural: "daggers", size: 2, image: "Images/icon_dagger3.png", description: "A small dagger." };
I’m not sure if there is some code in the project that could be conflicting with the system, or if there is something blindingly obvious that I have missed.
I’ll include some of what is in the passage I’m using to show the inventory.
/* Create a bag named "PCBackpack" of bag type "backpack". */
<<run UInv.AddBag("PCBackpack", "backpack")>>
/* Attempt to create a bag named "backpack" of bag type "backpack" and verify that it worked. */
<<set _BagName = "backpack">>
<<if UInv.AddBag(_BagName)>>
Successfully created a bag named "_BagName"!
<<else>>
/* AddBag failed, so show the error message explaining why. */
$UInvLastErrorMessage
<</if>>
<span class="layer2">
<div data-uinv="table" class="backpack-table" id="backpack" data-rowclass="backpack-row" data-cellclass="backpack-cell" data-itemclass="backpack-item" data-iconclass="backpack-icon" data-textclass="backpack-text" data-cellrows="3" data-cellcolumns="3" data-cellmargin="5" data-bordermargin="4"></div>
</span>
And here is what is in the stylesheet for the table.
.layer2 {
position: absolute;
width: 60%;
height: 80%;
top: 10%;
left: 20%;
}
/* backpack table - Start */
.backpack-table {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgba(206, 129, 38, 1);
display: table;
border-radius: 10px;
background-image:
linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px),
linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px),
linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px),
url("Images/scroll1.jpg");
}
.backpack-row {
display: flex;
}
.backpack-cell {
display: inline-block;
width: 101px;
height: 91px;
background-color: rgba(206, 129, 38, 0.05);
border-radius: 10%;
border: 1px solid #ae6c30;
background-image:
radial-gradient(
circle at bottom right,
hsla(33, 68.9%, 90%, 0.35),
hsla(33, 68.9%, 10%, 0.35) 60%
);
box-shadow: 1px 1px 5px 0px #ffffff;
}
.backpack-item {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
width: 101px;
height: 91px;
position: relative;
}
.backpack-icon {
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
max-width: 101px;
max-height: 91px;
}
.backpack-text {
color: rgba(255, 255, 255, 1)
line-height: 1;
position: absolute;
z-index: 2000;
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.5),
1px -1px 0 rgba(0, 0, 0, 0.5),
-1px 1px 0 rgba(0, 0, 0, 0.5),
1px 1px 0 rgba(0, 0, 0, 0.5);
padding: 4px 5px 2px 3px;
bottom: -3px;
left: calc(100% + 3px);
transform: translate(-100%, 0%);
font-family: Arial;
font-size: 16px;
border-radius: 10px;
}
.backpack-item:active, .backpack-item.grabbing {
cursor: -webkit-grabbing !important;
cursor: -moz-grabbing !important;
cursor: grabbing !important;
}
/* backpack table - End */
If there is any other info you may need to help solve this problem. let me know. I’m still pretty novice when it comes to code.