Game – Bible Book Master

Yesterday I really wanted to make a multi-lingual so I decided to make a game in which you have to go through all of the books of the Bible as fast as you can. I still need to do some work on the game to make it more user-friendly, but the following (which can also be accessed here) is what I came up with:

As of when I wrote this post the game supported 9 languages including English, Spanish, Vietnamese, Korean, and Haitian Creole. I chose the languages based on those in which I could find the names of all 66 Bible books. In fact, in all cases except for Vietnamese I used the Online Watchtower Library on jw.org in order to get the bible book names, using this JavaScript code in the web console:

$('.book .name').map(function() {
  return $(this).text();
});

As far as translating the rest of the words in the game, since I kept the amount of text to a minimum I simply used good ol’ Google Translate.

Since I wrote the server-side in PHP I ended up using $_SERVER['HTTP_ACCEPT_LANGUAGE'] to auto-detect the language if it wasn’t set:

$lang_code = valueOf($_REQUEST['lang'], preg_replace("/\W.*/", "", $_SERVER['HTTP_ACCEPT_LANGUAGE']));

Finally, I spent way more time than I wanted to on the rounded CSS3 buttons:

.round-button {
  font-size: 64px;
  line-height: 3em;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: #000;
  color: #FFF;
  display: inline-block;
  text-align: center;
  font-family: fontello;
  transition: 0.5s cubic-bezier(0.5,0.5,0.5,0.5) all;
  cursor: pointer;
  box-shadow: 0 0 0.25em #000;
  z-index: 1;
  position: relative;
  border: 0.05em solid #000;
  padding: 0.45em;
  margin: 0.5em;
  box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.5) inset, 0 0 0 #000;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.round-button .text {
  font-size: 0;
  position: absolute;
  line-height: 1em;
  margin-top: -2em;
  display: block;
  width: 6em;
  text-align: center;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
  transition: 0.5s ease all;
}
.round-button:hover {
  box-shadow: 0 0 0 0 #000 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  background: #FFF!important;
  z-index: 2;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  color: #000;
  padding: 0;
  border-width: 0.5em;
}
.round-button:hover .text {
  font-size: 0.5em;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
}
.round-button:active {
  box-shadow: 0 0 1em 0.1em #777 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  transition: 0.1s ease box-shadow;
}

As you will see in the game, each rounded button is actually individually colored. For example, the following is for the facebook button:

.round-button.facebook {
  background: #3b5998;
  border-color: #3b5998;
}
.round-button.facebook:hover {
  color: #3b5998;
}

All-in-all I am happy with how this game turned out but I would like to add a few improvements. Try the Bible Book Master game out yourself and let me know what you think. 😎