new card images

[Geddy19]

Ugh. Well obviously option 3 is the most elegant long-term solution - especially if it could be leveraged for use in other card games - but I'm not the one who would have to actually do the programming...

Speaking of leverage, and pardon my ignorance on this matter, but I'm assuming there isn't some type of BGA core code repository for the games which use a standard set of cards?

[admiralspunky]

Speaking of leverage, and pardon my ignorance on this matter, but I'm assuming there isn't some type of BGA core code repository for the games which use a standard set of cards?

Not as far as I know. Maybe you'll be the one to make a standard card game code template.

The cribbage images (which I think were created by Isaac, possibly for some other game) will eventually take the place of the placeholder images that I used for this game, but for the meantime, does pjt's CSS replacement work for you?

[Geddy19]

Just played on iPad and I could differentiate the clubs and spades better. The clubs seem more distinct, so definitely an improvement!

[badfrog]

The numbers are too small to read on these. I'd prefer something more fit for a computer screen like poker sites do. For example:

[admiralspunky]

Wow, I really like some of those images; can you get the original files from the site owners?

[MikeIsHere]

I've hit a bit of a snag. Every other card game on BGA just uses height and width variables for their cards, but for Oh Hell, the original programmer decided to set each div individually. 52 times. So I could either:

1 - find or make a hi-res image that has exactly the same width and height as the images that are currently in use, with the cards in the exact same order
2 - figure out the width and height of the cribbage cards, then redo the list of 52 divs
3 - reprogram the method this program uses to separate its images

Here's the original list if anybody feels like fixing it for me (although I still say that brute force is sloppy programming):

/* CARDS */
.club-2 { background-position: 0px -192px; }
.club-3 { background-position: -72px -192px; }
.club-4 { background-position: -144px -192px;}
.club-5 { background-position: -216px -192px; }
.club-6 { background-position: -288px -192px; }
.club-7 { background-position: -360px -192px; }
.club-8 { background-position: -432px -192px; }
.club-9 { background-position: -504px -192px; }
.club-10 { background-position: -576px -192px; }
.club-11 { background-position: -648px -192px; }
.club-12 { background-position: -720px -192px; }
.club-13 { background-position: -792px -192px; }
.club-14 { background-position: -864px -192px; }

.diamond-2 { background-position: 0px -288px; }
.diamond-3 { background-position: -72px -288px; }
.diamond-4 { background-position: -144px -288px;}
.diamond-5 { background-position: -216px -288px; }
.diamond-6 { background-position: -288px -288px; }
.diamond-7 { background-position: -360px -288px; }
.diamond-8 { background-position: -432px -288px; }
.diamond-9 { background-position: -504px -288px; }
.diamond-10 { background-position: -576px -288px; }
.diamond-11 { background-position: -648px -288px; }
.diamond-12 { background-position: -720px -288px; }
.diamond-13 { background-position: -792px -288px; }
.diamond-14 { background-position: -864px -288px; }

.heart-2 { background-position: 0px -96px; }
.heart-3 { background-position: -72px -96px; }
.heart-4 { background-position: -144px -96px;}
.heart-5 { background-position: -216px -96px; }
.heart-6 { background-position: -288px -96px; }
.heart-7 { background-position: -360px -96px; }
.heart-8 { background-position: -432px -96px; }
.heart-9 { background-position: -504px -96px; }
.heart-10 { background-position: -576px -96px; }
.heart-11 { background-position: -648px -96px; }
.heart-12 { background-position: -720px -96px; }
.heart-13 { background-position: -792px -96px; }
.heart-14 { background-position: -864px -96px; }

.spade-2 { background-position: 0px 0px; }
.spade-3 { background-position: -72px 0px; }
.spade-4 { background-position: -144px 0px;}
.spade-5 { background-position: -216px 0px; }
.spade-6 { background-position: -288px 0px; }
.spade-7 { background-position: -360px 0px; }
.spade-8 { background-position: -432px 0px; }
.spade-9 { background-position: -504px 0px; }
.spade-10 { background-position: -576px 0px; }
.spade-11 { background-position: -648px 0px; }
.spade-12 { background-position: -720px 0px; }
.spade-13 { background-position: -792px 0px; }
.spade-14 { background-position: -864px 0px; }

I know this is old but you should be able to calculate the card suit and value to get the position

Code: Select all

                var color = card.type;
                var value = card.type_arg;
                var x = 0-this.cardWidth*(value-1);
                var y = 0-this.cardHeight*(color-1);
                this.showElement('#cutCard');                
                dojo.style('cutCard', 'backgroundPosition', x+'px '+y+'px');

[Scharlach]

So my custom CSS is highly unlikely to be adopted into the official CSS, but other people who want high quality card images might choose to use it, which you can do by adding

Code: Select all

@import url(https://pjt33.github.io/bga_custom_css/oh_hell.css);

to your custom CSS in Preferences > Advanced.

this got blocked by my browser, because it doesn't come from the boardgamearena domain.

anyway, it will be terrific if someone can improve the card graphics. for example Hearts or Gin Rummy look so pretty (or rather normal ) with their "Large indexes" cards and Oh Hell is such an eyesore right now

[pjt33]

So my custom CSS is highly unlikely to be adopted into the official CSS, but other people who want high quality card images might choose to use it, which you can do by adding

Code: Select all

@import url(https://pjt33.github.io/bga_custom_css/oh_hell.css);

to your custom CSS in Preferences > Advanced.

this got blocked by my browser, because it doesn't come from the boardgamearena domain.

Yes, I know. I've had to start using the Stylish browser plugin to load my custom CSS.