I´m currently working with Twine(sugarcube) to finish my adventure game. The inventory is another page you can always go to, where the gathered items are each presented with an image or textelement. I´ve put the image elements in a div class, but some are working, while others don´t even if the code structure is the same. I´ve changed it around multiple times but it didn´t matter, some elements just don´t show up... here is the inventory html:
<<if $plot is true>><div class="plotbackground"></div>
<</if>>
<mark>this is your storage: </mark>
<<return>>
<<if $fruits >0>><mark>fruits= $fruits</mark> [[eat one]]
<</if>>
<<if $flexibility is true>>
<div class="flexibilityinventory"
<img src="data/inventory/flexibility.png" width="300px" height="300px">
</div>
<</if>>
<<if $fluidity is true>>
<div class="fluidityinventory"
<img src="data/inventory/fluidity.png" width="300px" height="300px">
</div>
<</if>>
<<if $stability is true>>
<div class="stabilityinventory"
<img src="data/inventory/stability.png" width="300px" height="300px">
</div>
<</if>>
<<if $raumazug is true>>
<div class="raumanzuginventory">
<img src="data/inventory/raumanzug.png" width="442" height="1000">
</div>
<</if>>
<<if $investment is true>> your investment is growing
<</if>>
<<if $poster is true>>
<div class="fishy">
<img src="data/inventory/fishklein.png" width="300px" height="300px">
</div>
<</if>>
<<if $hut is true>>
<div class="hutinv">
<img src="data/inventory/hutinv.png" width="1500px" height="844px">
</div>
<</if>>
<<if $cinemaseat is true>> you have purchased seat $row $seat.
<</if>>
<<if $cinemaseat2 is true>> you have purchased seat $row2 $seat2.
<</if>>
<<if $cinemaseat3 is true>> you have purchased seat $row3 $seat3.
<</if>>
<<if $hammer is true>>
<div class="hammer">
<img src="data/inventory/hammerklein.png" width="150px" height="150px">
</div>
<</if>>
<<if $lighter is true>> you have one lighter. [[make a fire]]
<</if>>
<<if $bench is true>>
<div class="bench">
<img src="data/inventory/bench.png" width="500px" height="327px">
</div>
[[take a break|rest]]
<</if>>
<<if $window is true>>
<div class="window">
<img src="data/inventory/fensterklein.png" width="200px" height="200px">
</div>
<</if>>
<<if $bike is true>>
<div class="bike">
<img src="data/inventory/bikeschrott.png" width="200px" height="200px">
</div>
<</if>>
<<if $roller is true>>
<div class="rollerinv">
<img src="data/inventory/eroller.png" width="600px" height="800px">
</div>
<</if>>
<<if $treeinv is true>>
<div class="treeinv">
<img src="data/inventory/treeinv.png" width="2638px" height="1311px">
</div>
<</if>>
<<if $fireextinguisher is true>>
<div class="extinv">
<img src="data/inventory/extinguishersmall.png" width="200px" height="200px">
</div>
<</if>>
when starting the story, you go through a reset, and set the variables to true during the game. reset html:
<<set $hammer to false>>
<<set $treeinv to false>>
<<set $window to false>>
<<set $bench to false>>
<<set $roller to false>>
<<set $bike to false>>
<<set $lighter to false>>
<<set $investment to false>>
<<set $friend to true>>
<<set $burned to false>>
<<set $cinemaseat to false>>
<<set $cinemaseat2 to false>>
<<set $cinemaseat3 to false>>
<<set $door to 0>>
<<set $fruits to 0>>
<<set $poster to false>>
<<set $hut to false>>
<<set $treeinv to false>>
<<set $fireextinguisher to false>>
<<set $plot to false>>
<<set $axe to false>>
<<set $fluditiy to false>>
<<set $stability to false>>
<<set $flexibility to false>>
<<set $raumanzug to false>>
<<goto "start">>
this is the CSS Stylesheet:
.inventory {background-image:url("data/inventory/background.jpg"); background-repeat: no-repeat;height: 1360px; width: 2293px; overflow: visible;z-index:-5;position:absolute;}
.plotbackground {background-image:url("data/inventory/plotbackground.png"); background-repeat: no-repeat;height: 1660px; width: 2496px; z-index:-5;position:absolute;}
.hammer {width:150px;height:150px;position:absolute;top:0px;left:0px;z-index:-4}
.treeinv {position:absolute; z-index: -2; bottom:0px; left: -500px;; top:auto;width:2638px; height:1311px;}
.window {width:200px;height:200px;position:absolute;top:0px;left:160px;z-index:-4}
.bench {width:500px;height:327px; position:absolute;bottom:10px; left:700px; z-index:-2}
.rollerinv {position:absolute;bottom:10px; left:50px; z-index:-2}
.bike {width:200px;height:200px;position:absolute;top:0px;left:370px;z-index:-4}
.fishy {width:300px;height:300px;position:absolute;top:0px;left:600px;z-index:-4}
.hutinv {position:absolute; z-index: -3; bottom:0px;left: 400px;top:auto;}
.extinv {position:absolute; z-index: -2; top:200px;left: -600px;}
.raumanzuginventory {position:absolute; z-index: -1; top:0px;right:0px;}
.stabilityinventory{("data/inventory/stability.png"), width:300px;height:300px;position:absolute; z-index: -1; top:0px;right: 200px;}
.fluidityinventory{position:absolute; z-index: -1; top:350px;right: 200px;}
.flexibilityinventory {position:absolute; z-index: -1; width:300px;height:300px; top:700px;right: 200px;}
