new card images

[admiralspunky]

I made the 2 and 4 color decks that are currently within the game, but the image that I used (from Hearts) isn't very high quality at all. I'm trying to fix that. I took the svg file from https://commons.m.wikimedia.org/wiki/Fi ... s_deck.svg
I used GIMP to make a couple of PNGs, then I put them through TinyPNG. But they were still too large, 600k each. So I used JPG instead:

cards2.jpg (221.11 KiB) Viewed 1748 times

cards4.jpg (221.06 KiB) Viewed 1748 times

What do you think so far? Is that any clearer? I still have my XCF file, if anyone wants to take a crack at it.

[Geddy19]

Well the spades vs. clubs problem is certainly solved! My only issue now is that the colors all seem to be on the pale side. Is there an easy way to add some saturation so that they "pop" better?

[debssie]

Are you the same Admiralspunky as netgames/codewords where we shared a few games ?

[admiralspunky]

Well the spades vs. clubs problem is certainly solved! My only issue now is that the colors all seem to be on the pale side. Is there an easy way to add some saturation so that they "pop" better?

Huh. On my screens, those new images actually look fuzzier than the ones that are currently in use; but if you say they're more distinguishable, then alright. I just rely on the 4 colors to do my distinguishing, anyway.

I'm not thrilled with the colors that I used, either. Would someone pick me 4 hex colors to use? They don't have to be black, red, blue, green; but I can't think of anything else that makes more sense.

Alternatively, I could just steal the images from somewhere else. You had mentioned the images from Cribbage; those look good to me:

cards_four.png (107.75 KiB) Viewed 1695 times

cards.png (47.12 KiB) Viewed 1695 times

A little stubby, maybe, but plenty of pop. What do the people want?

[admiralspunky]

Are you the same Admiralspunky as netgames/codewords where we shared a few games ?

I am that same person, yes.

[Geddy19]

Stubby be damned - the cribbage ones look awesome, esp. the 4-color. No clubs/spades confusion, numbers are big enough, colors pop - I think we have a winner...

[pjt33]

I also tackled this challenge last year. In the end I came to a couple of conclusions:

1. Although I understand the rationale behind sprite sheets, using a separate image for each card looks much better. I couldn't find a solution which avoided nasty edge effects otherwise.

2. Since I'm not constrained by BGA's file size recommendations, I'd much rather use SVGs. It takes a couple of games to get the images properly cached by the browser, but the results are worth it.

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.

[admiralspunky]

I also tackled this challenge last year. In the end I came to a couple of conclusions:

1. Although I understand the rationale behind sprite sheets, using a separate image for each card looks much better. I couldn't find a solution which avoided nasty edge effects otherwise.

2. Since I'm not constrained by BGA's file size recommendations, I'd much rather use SVGs. It takes a couple of games to get the images properly cached by the browser, but the results are worth it.

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.

Wow, thanks for doing that! It didn't work for me, when I tried it, but I probably just did something wrong. It'd be nice if this site showed you the css that you're currently using; there's just a Submit box and a Reset link, and you have to assume that it's working correctly.

[pjt33]

Wow, thanks for doing that! It didn't work for me, when I tried it, but I probably just did something wrong. It'd be nice if this site showed you the css that you're currently using; there's just a Submit box and a Reset link, and you have to assume that it's working correctly.

I generally find that if I submit and then go to the lobby, it bizarrely renders the CSS as text at the top of the page. If I then refresh, it loads correctly. If you want to see what's happening, your browser probably has some developer tools.

[admiralspunky]

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; }