I’ve been playing enough Letterpress lately to realize that I’m not great at it. This is super frustrating for me when this is a game that you could easily teach a computer to play.

I’m not the first person to have that thought. There are plenty of cheating programs for Letterpress (just google or search in the app store).

I haven’t investigated these solvers but in thinking about the problem, the basic approach would seem to be:

• Take screenshot of game and import it into solver
• Parse the board into a string of letters
• Reduce a dictionary of valid words against those characters to find playable words
• Optionally make recommendations of which word to play based on current board state and strategy.

I wondered how quickly I could throw something together to simply parse the game board into a string of letters. It turns out it is super easy. To get started I took a screenshot of a game in progress and downloaded it from my phone.

My skills have traditionally skewed towards the back-end so I’m still finding lots of new tricks in front-end development that are new to me. Here’s a quick example…

I recently created a button with Compass sprites that had images for the default state, hover state, and active (pressed) state.

Here’s the gist of what I was doing:

1
2
3
4
5
6
7
8
9
10

$button_sprites: sprite-map('/special-button/*.png')

.special-button
  background: sprite($button_sprites, "button-default")

  &:hover
    background: sprite($button_sprites, "button-hover")

  &:active
    background: sprite($button_sprites, "button-active")

which generates this css:

1
2
3
4
5
6
7
8
9

.special-button {
  background: url(/assets/special-button-sb6a3aa70c5.png) 0 -204px
}
.special-button:hover {
  background: url(/assets/special-button-sb6a3aa70c5.png) 0 -230px;
}
.special-button:active {
  background: url(/assets/special-button-sb6a3aa70c5.png) 0 -126px;
}

Pretty straight-forward, right? For each state I specify which of the sprite sub-images it should show.

Unfortunately, I was bumping into an issue in Chrome where the button would sometimes flash between image states on hover and active.

After a bit of googling, I found an answer. The problem is that I was specifying the URL redundantly, causing Chrome to show no background while it briefly loads that same sprite again to show it at the new position. After a little digging in the Compass docs, I found sprite-position and tweaked accordingly:

1
2
3
4
5
6
7
8
9
10

$button_sprites: sprite-map('/special-button/*.png')

.special-button
  background: sprite($button_sprites, "button-default")

  &:hover
    background-position: sprite-position($button_sprites, "button-hover")

  &:active
    background-position: sprite-position($button_sprites, "button-active")

Now we’re using the same sprite specified in the original .special_button class and just changing the position in the other states. Our flashing problem is gone.