Board Game Arena

Hi devs, if you can give me a hand, I would appreciate it.

I saved a cards sprite in my img folder, the same as what is here: https://github.com/elaskavaia/bga-heart ... /cards.jpg

However, when I play my game (the hearts tutorial), the images of the cards are not there. See attached screenshot



And when I use the browser "Inspect" feature, I see the url for the card image as follows: https://studio.boardgamearena.com:8083/ ... ards_1.png

But there is no picture that displays for that. When I play the original Hearts game, I can see the card Sprite images when I "Inspect" using the browser, and the URL is: https://studio.boardgamearena.com:8083/ ... ards_1.png

Does anyone know why that is the case?

Hello,

Not sure maybe using an externalt url it's not working.

However i did the tuto 1 months ago and i did upload the picture on my "/img" folder. And upload it to the FTP "/img",

I just remember that i had also sometime to clear my browser cache to see some images. (but again all the img weres on my folder, not external urls like your example)

Hope it helps

Ho do you reference the image name on your CSS or JS ?

background-image: url("img/cards.jpg");

need to upload file, if you haven't

thoun wrote: ↑21 January 2025, 09:05 Ho do you reference the image name on your CSS or JS ?

Hi, I followed these steps ( below) in the tutorial. I guess the confusing part is that it mentions the tpl file, when that refers to the js file, correct?



Now lets add a card into the hand, just so you can feel it. Edit .tpl and a playertablecard div inside a hand div

...
<div id="myhand">
<div class="playertablecard"></div>
</div>
...
Edit .css file

.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg'); /* temp hack to see it */
}


I "think" that the js file should look like this after following the step above, correct?

document.getElementById('game_play_area').insertAdjacentHTML('beforeend', `
<div id="myhand_wrap" class="whiteblock">
<b id="myhand_label">${_('My hand')}</b>
<div id="myhand">
<div class="playertablecard"></div>
</div>
</div>

And my css looks like this:

.playertablecard {
display: inline-block;
position: relative;
margin-top: 5px;
width: 72px;
height: 96px;
background-image: url('img/cards.jpg'); /* temp hack to see it */
}

Yes, I probably forgot to remove one mention of tpl. Looks good so far, so I would check the file is present on the FTP folder with the exact same case.

Thanks all for the help. In Visual Studio Code, I needed to right click on my img folder and select "Sync Local > Remote". After doing that, the images are appearing. Thanks for the assist!