Multiple backgrounds in different classes on Harlowe

brunhildr

TL; RL -> Hello there, I'm having a problem changing bgs in the middle of the story. I found help in the forum to completely change the bg, but it is not working with overlay.

The specifics -> I am working on a story which has two main variables: $socialanx and $impatience. I wanted to show the status of both by changing the bg, one for the solid color bg and the other being a gradient with transparency on the top of the first one. For $socialanx, the bg would get slightly yellow every time the counter went up, while $impatience would add a gradient of pink and transparent which get stronger point by point.

I got $socialanx working but when I got to $impatience added its class, the gradient just substitute the color set by $socialanx instead of overlaying. This is the code I am using, please note I haven't graded $impatience in levels yet, I wanted to debug it first before making the grading.

css:

body {
	background-color: #C3D6D6; 
}

html.anx0 {
	background-color: #C3D6D6;
}

html.anx1 {
	background-color: #C6D6CE;
}

html.anx2 {
	background-color: #C9D6C6;
}

html.anx3 {
	background-color: #CCD6BF;
}

html.anx4 {
	background-color: #CFD6B7;
}

html.anx5 {
	background-color: #D2D6AF;
}

html.anx6 {
	background-color: #D5D6A8;
}

html.anx7 {
	background-color: #D9D6A0;
}

html.anx8 {
	background-color: #DCD698;
}

html.anx9 {
	background-color: #D7D691;
}

html.anx10 {
	background-color: #E2D689;
}

html.anx11 {
	background-color: #E5D681;
}

html.anx12 {
	background-color: #E8D67A;
}

html.anx13 {
	background-color: #EBD67A;
}

html.anx14 {
	background-color: #EBD672;
}

html.anx15 {
	background-color: #EFD76B;
}

html.imp1 {
    background: -webkit-linear-gradient(rgba(230,141,189,0), rgba(230,141,189,0.2), rgba(230,141,189,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(230,141,189,0), rgba(230,141,189,0.2), rgba(230,141,189,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(230,141,189,0), rgba(230,141,189,0.2), rgba(230,141,189,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(230,141,189,0), rgba(230,141,189,0.2), rgba(230,141,189,1)); /* Standard syntax (must be last) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container {
  position: relative;
}

.bgthing {
  position: absolute;
	display: none;
}

And this is the code I'm using in the passage:

{
<div class="container">
<div class="bgthing">
(if: $socialanx < 1)[ <img src="!@#$"; onerror="$('html').addClass('anx0')" />]
(if: $socialanx is 1)[ <img src="!@#$"; onerror="$('html').addClass('anx1')" />]
(if: $socialanx is 2)[ <img src="!@#$"; onerror="$('html').addClass('anx2')" />]
(if: $socialanx is 3)[ <img src="!@#$"; onerror="$('html').addClass('anx3')" />]
(if: $socialanx is 4)[ <img src="!@#$"; onerror="$('html').addClass('anx4')" />]
(if: $socialanx is 5)[ <img src="!@#$"; onerror="$('html').addClass('anx5')" />]
(if: $socialanx is 6)[ <img src="!@#$"; onerror="$('html').addClass('anx6')" />]
(if: $socialanx is 7)[ <img src="!@#$"; onerror="$('html').addClass('anx7')" />]
(if: $socialanx is 8)[ <img src="!@#$"; onerror="$('html').addClass('anx8')" />]
(if: $socialanx is 9)[ <img src="!@#$"; onerror="$('html').addClass('anx9')" />]
(if: $socialanx is 10)[ <img src="!@#$"; onerror="$('html').addClass('anx10')" />]
(if: $socialanx is 11)[ <img src="!@#$"; onerror="$('html').addClass('anx11')" />]
(if: $socialanx is 12)[ <img src="!@#$"; onerror="$('html').addClass('anx12')" />]
(if: $socialanx is 13)[ <img src="!@#$"; onerror="$('html').addClass('anx13')" />]
(if: $socialanx is 14)[ <img src="!@#$"; onerror="$('html').addClass('anx14')" />]
(if: $socialanx > 14)[ <img src="!@#$"; onerror="$('html').addClass('anx15')" />]
(if: $impatience > 2)[ <img src="!@#$"; onerror="$('html').addClass('imp1')" />]</div></div>
}

Thanks in advance!
Stretch goal: if I can achieve this result without adding the last code to each and every passage that would help A LOT too.

Claretta

Your colours are just substituting because you're only adding them to the single html layer.

So you need to create a new div in the global html structure if you want to layer backgrounds. For every new layered effect in a Twine game there needs to be a new div. The story format most suited to this is SugarCube in Twine 1.4.2 due to the ability to directly edit the html, but you should be able to use JavaScript to create divs in Harlowe.

Unfortunately I don't know the best way to create divs in JavaScript in Harlowe.

Once you figure that part out, you're best off creating a new div for each variable and then classes for each. For example

#anxiety { define main div properties here that will allow it to affect the entire screen, such as 
background-size: cover; }

#anxiety.anxiety1 { define color change here }

#patience { }

#patience.patience1 { }

#patience.patience2 { }