[Resolved] Changing background images must include g_gamethemeurl? Apparently a cache issue

[BrianLovesMarvel]

[edit]Apparently I had a browser cache issue where ctrl-F5 was not sufficient. Disabling caching in the dev tools, network section helped. You shouldn't need g_gamethemeurl after all. - Brian[/edit]

I had a challenge debugging this problem. I wanted to change the background image of a div, but when I tried it, the background image became blank. I was trying make an animation of a dice cup shaking. I had two images: an animated gif and a png of the dice cup upright. I tried a number of ways to change the background image before finally hitting on something that worked.

Code: Select all

// dojo.style blanks out the background image
dojo.style( 'dice_cup', 'backgroundImage', 'url(img/dice-cup.gif)' );

// jQuery style.backgroundImage blanks out the background image
$('dice_cup').style.backgroundImage = "url(img/dice-cup.gif)";

// Changing classes to one with a different background image blanks out the background image
dojo.removeClass( 'dice_cup', 'upright' );                        
dojo.addClass( 'dice_cup', 'shaking' );

// This works: you must use the variable g_gamethemeurl to get to the images
$('dice_cup').style.backgroundImage = "url(" + g_gamethemeurl + "img/dice-cup.gif)";

Even changing classes to one with a different background-image doesn't work. After trying multiple ways to change the background image, I finally saw that it was related to the relative image url. "img/xxx" works fine in css to initialize divs during startup, but during play, "img/xxx" is interpreted as relative to the url during play, which doesn't include the entire img subdirectory. Key point: the dev url and the play url are different. In other words:

Does not resolve during play:
https://studio.boardgamearena.com/1/xxx/img/yyy.png

Real path to image:
https://en.1.studio.boardgamearena.com: ... mg/yyy.png

g_gamethemeurl has a value like this:
https://en.1.studio.boardgamearena.com: ... 9999-9999/

It seem to find the real url of the img directory, I need to add the special variable g_gamethemeurl. It seems that unless the background-image url was accessed during initialization before switching to the (I presume) temporary game play url, the image resources are not available.

Eventually I decided to use two divs with different background images and make one of them visible and the other invisible as needed.

I wanted to get this in the forum so others searching for change changing background-image backgroundImage can find this information. I didn't find it in the wiki - maybe I should post this in the wiki? Where would it go?

If you do this, how are you changing background images on your divs during the game? Is there an easier way?

Thanks, Brian

[Lymon Flowers]

I would personally use CSS animation for that. No offense, but using two images for that (including animated GIF) does not seem too appealing . For instance, here is a nice bounce animation to pop in elements. Just add a the medina-bounce class to an element to see it popin.

Code: Select all

.medina-bounce {
    animation: medina-bounce 2s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

@keyframes medina-bounce {
    0% {
	opacity: 0.1;
	transform: scale(.1) translateY(0); 
    }
    10% {
	opacity: 1.0;
	transform: scale(1.2, 0.6); 
    }
    30% { 
	transform: scale(0.9, 1.1) translateY(-10px); 
    }
    50% { 
	transform: scale(1) translateY(0); 
    }
    60% { 
	transform: scale(1,.95) translateY(0); 
    }
    65% { 
	transform: scale(1) translateY(0); 
    }
    100% { 
	transform: scale(1) translateY(0); 
    }
}

Other than that, I am not sure of the background image URL, but maybe it would be cleaner to specify the URL in the CSS class and swap classes with dojo.addClass and dojo.removeClass. If you want to debug the issue, look at the network I/O panel of your browser development tools to see which image is downloaded. Unless that is a problem of images preloading.

[BrianLovesMarvel]

Thanks for the css animation example! What can I say, I'm old school...
I did try swapping classes, but the relative url "img/xxx" apparently isn't supported during play.
Looking for the best way to do things still, just learning here.

[Lymon Flowers]

Even if it is already defined in the CSS file?

I think that in the CSS, all URLs are relative to the CSS file, when you specify URLs in the JS, context is relative to the table URL. Hence, you need to specify absolute URLs. Or something else.

[BrianLovesMarvel]

I thought for sure defining two classes with different background images, and applying the class would work. It didn't.

And reapplying the original class also failed. Applying a background image during the game just doesn't work without g_gamethemeurl.

I imagine the framework creates and redirects you to a temporary "game url" where you are playing.

[Tisaac]

I thought for sure defining two classes with different background images, and applying the class would work. It didn't.

And reapplying the original class also failed. Applying a background image during the game just doesn't work without g_gamethemeurl.

I imagine the framework creates and redirects you to a temporary "game url" where you are playing.

I am 100% sure that defining class with different background images works since I'm using it in my games.
Are you sure this is not just a cache issue ? Have you tried disabling your cache in the web dev tools ?

[BrianLovesMarvel]

If it works for you, are you accessing both background images in the game initialization?

I had

Code: Select all

.dice_cup { 
    width: 80px;
    height: 80px;
    position: absolute;
    left: 1056px;
    top: 0px;
    z-index: 0;
}

.upright { 
    background-image: url('img/dice-cup-upright.png'); 
    background-position: 0px 0px;
}

.shaking { 
    background-image: url('img/dice-cup.gif'); 
    background-position: 0px 0px;
}

and in template file

Code: Select all

<div id="dice_cup" class="dice_cup upright"> </div>

so the dice cup would appear just fine with the first background. In the javascript

Code: Select all

dojo.removeClass( 'dice_cup', 'upright' );
dojo.addClass( 'dice_cup', 'shaking' );

When I changed the classes applied with dojo style (remove upright, add shaking) the background image disappeared. And when I tried to change it back afterwards, the background image stayed gone. In the chrome dev tools it showed the url "img/xxx" had been applied properly, but apparently the browser couldn't find the image. I refreshed the page with ctrl-F5 to force a cache flush, restarted the game multiple times, etc. It was very reproducible.

So that wasn't working for me without g_gamethemeurl. But now I've gone back to that code and it is working. I've tried it with two new images I've never used before, and it is working.

I'm just a beginner, trying to learn. How did you explain this behavior?

[Tisaac]

As I said, cache issue. Ctrl + f5 is not always enough.
You must open the «network» tab of the web dev tools and tick «disable cache» before hitting f5. Or use a browser extension that does «css refresh» (not always enough with images though)

[BrianLovesMarvel]

Thanks for your hints, much appreciated. Brian