Board Game Arena

Posted: **11 March 2013, 07:04**

In order to support multiple board sizes with different artwork, I've had to replicate and rename
elements form the css, so for example I have "go_stnoe_19" "go_stone_13" "go_stone_9" Each of
these is a whole family of css elements, which isn't very elegant and also complicates the upstream
code because the names of the elements depend on their size even thought he logic is identical.

Q: is there a better coding style for this?

--

Slightly longer and more comlete example of what I mean, from the .css

Originally I had these, with embedded magic numbers corresponding to the
artwork files and sizes

.gmk_stone {
width: 30px;
height: 30px;
position: absolute;
background-image: url( '../../img/gomoku/stones.png');
}
.no_stone { background-position: -60px 0px; }
.stone_black { background-position: 0px 0px; }
.stone_white { background-position: -30px 0px; }
.clickable:hover { background-position: -90px 0px; }

Now, to support 3 sized os artwork I have
.go_intersection_19 {
width: 30px;
height: 30px;
position: relative;
background-image: url( '../../img/go/stones-19.png');
}

.go_stone_19 {
width: 30px;
height: 30px;
position: absolute;
background-image: url( '../../img/go/stones-19.png');
}
.no_stone_19 { background-position: -60px 0px; }
.stone_black_19 { background-position: 0px 0px; }
.stone_white_19 { background-position: -30px 0px; }
.clickable_19:hover { background-position: -90px 0px; }

.go_intersection_13 {
width: 42px;
height: 42px;
position: relative;
background-image: url( '../../img/go/stones-13.png');
}

.go_stone_13 {
width: 42px;
height: 42px;
position: absolute;
background-image: url( '../../img/go/stones-13.png');
}
.no_stone_13 { background-position: -84px 0px; }
.stone_black_13 { background-position: 0px 0px; }
.stone_white_13 { background-position: -42px 0px; }
.clickable_13:hover { background-position: -126px 0px; }

.go_intersection_9 {
width: 62px;
height: 62px;
position: relative;
background-image: url( '../../img/go/stones-9.png');
}

.go_stone_9 {
width: 62px;
height: 62px;
position: absolute;
background-image: url( '../../img/go/stones-9.png');
}
.no_stone_9 { background-position: -124px 0px; }
.stone_black_9 { background-position: 0px 0px; }
.stone_white_9 { background-position: -62px 0px; }
.clickable_9:hover { background-position: -186px 0px; }

Posted: **24 March 2013, 14:25**

Hello,

Indeed, CSS being a static language, it can be much more verbose than we would like sometimes (that is, unless at some point we decide to use LESS but we are not there yet).

First I would suggest to change only the board, and keep the same size for stones. This would greatly simplify your code, and if players want to make the board bigger they can always use CTRL+/- to zoom with their browser.

That said, to try answering your question, here is what I did on Jaipur to manage different screen sizes to display the artwork at the best size to be enjoyed.

1) At the start of the javascript setup, I check the screen width, then setup a matching class on the ebd-body div that surrounds all the game zone. I also use this.dontPreloadImage in order not to download useless images.

Code: Select all

   
            // Set up the right css class and object sizes for the screen size
            var topbarCoords = dojo.coords( 'topbar' );
            if (topbarCoords.w <= 1300) {
            	dojo.addClass( 'ebd-body', 'jaipur_1024' );
            	this.gameConstants = gamedatas.constants['1024'];
            	this.cardsSpriteImg = "img/jaipur/cards_1024.png";
            	
            	this.dontPreloadImage( 'board.png' );
            	this.dontPreloadImage( 'cards.png' );
            	this.dontPreloadImage( 'tokens.png' );
            	this.dontPreloadImage( 'tokens_under.png' );
            	this.dontPreloadImage( 'discard_under.png' );
            	this.dontPreloadImage( 'board_1366.png' );
            	this.dontPreloadImage( 'cards_1366.png' );
            	this.dontPreloadImage( 'tokens_1366.png' );
            	this.dontPreloadImage( 'tokens_under_1366.png' );
            	this.dontPreloadImage( 'discard_under_1366.png' );
            }
            if (topbarCoords.w > 1300 && topbarCoords.w <= 1500) {
            	dojo.addClass( 'ebd-body', 'jaipur_1366' );
            	this.gameConstants = gamedatas.constants['1366'];
            	this.cardsSpriteImg = "img/jaipur/cards_1366.png";
            	
            	this.dontPreloadImage( 'board.png' );
            	this.dontPreloadImage( 'cards.png' );
            	this.dontPreloadImage( 'tokens.png' );
            	this.dontPreloadImage( 'tokens_under.png' );
            	this.dontPreloadImage( 'discard_under.png' );
            	this.dontPreloadImage( 'board_1024.png' );
            	this.dontPreloadImage( 'cards_1024.png' );
            	this.dontPreloadImage( 'tokens_1024.png' );
            	this.dontPreloadImage( 'tokens_under_1024.png' );
            	this.dontPreloadImage( 'discard_under_1024.png' );
            }
            if (topbarCoords.w > 1500) {
            	dojo.addClass( 'ebd-body', 'jaipur_1600' );
            	this.gameConstants = gamedatas.constants['1600'];
            	this.cardsSpriteImg = "img/jaipur/cards.png";
            	
            	this.dontPreloadImage( 'board_1024.png' );
            	this.dontPreloadImage( 'cards_1024.png' );
            	this.dontPreloadImage( 'tokens_1024.png' );
            	this.dontPreloadImage( 'tokens_under_1024.png' );
            	this.dontPreloadImage( 'discard_under_1024.png' );
            	this.dontPreloadImage( 'board_1366.png' );
            	this.dontPreloadImage( 'cards_1366.png' );
            	this.dontPreloadImage( 'tokens_1366.png' );
            	this.dontPreloadImage( 'tokens_under_1366.png' );
            	this.dontPreloadImage( 'discard_under_1366.png' );
            }

2) In the CSS, I first setup generic properties for a class, then I use inheritance to setup properties specific to the current screen size. For example, managing css for the tokens looks like this:

Code: Select all


.jpr_token {
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
}

.jaipur_1024 .jpr_token {	width: 46px;	height: 46px;	background-image: url( '../../img/jaipur/tokens_1024.png'); }
.jaipur_1366 .jpr_token {	width: 67px;	height: 67px;	background-image: url( '../../img/jaipur/tokens_1366.png'); }
.jaipur_1600 .jpr_token {	width: 78px;	height: 78px;	background-image: url( '../../img/jaipur/tokens.png'); }

Board Game Arena

effecient coding style question

effecient coding style question

Re: effecient coding style question