Game Development Reference
In-Depth Information
rook | knight | bishop | queen | king | pawn
indicates the
type
of the piece
current
means the piece on the square is
selected
by the user
playable
means the square is
playable
for the selected piece
That's everything to make the user interface work. We can now style it in CSS and use it in JavaScript. As
you can see, most of the work falls on the shoulders of CSS; hopefully, this gives you a small taste of its
awesome power!
Game styles
We will now use SASS to describe the style of our game. Listing 3-9 is the complete code used to style our
chessboard. It uses classes defined in the specification to style the game.
Listing 3-9.
Code Used to Style Our Chessboard
$pieceSize: 40px // define $pieceSize somewhere
// Generate background image for all pieces
.piece
@each $color in black, white
&.#{$color}
@each $type in rook, knight, bishop, queen, king, pawn
&.#{$type}
background-image: url("images/#{$color}_#{$type}.png")
// Styling the chessboard. pieceSize must be defined before
#chessboard
width: 8*$pieceSize
height: 8*$pieceSize
&.player-white .piece.white, &.player-black .piece.black
&:hover:not(.current)
background-color: #cce // highlight pieces on hover
> div
padding: 0
margin: 0
width: $pieceSize
height: $pieceSize
display: block
float: left
background-size: 100% 100% // scale the bg image to the pieceSize
background-color: #cba
&.lighter
background-color: #edb
&.current, &.current.lighter
background-color: #beb
&.playable
background-color: #bbe
&.lighter
background-color: #ccf
Note that the
&
character replaces the parent selector; for example, the following SASS code:
