From 963e91983867b1bdd55eda1a902aadfdd337f4f1 Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose.chua.cm@gmail.com>
Date: Sat, 29 Jun 2013 17:16:05 +0800
Subject: [PATCH] Test

---
 alpha/index.html | 28 +++++++++++++++-------------
 alpha/main.css   | 41 ++++++++---------------------------------
 alpha/main.js    |  6 ++++++
 3 files changed, 29 insertions(+), 46 deletions(-)
diff --git a/alpha/index.html b/alpha/index.html
index c0b3576..329d74c 100644
--- a/alpha/index.html
+++ b/alpha/index.html
@@ -5,8 +5,8 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 <link rel="icon" type="image/png" href="assets/icon.png" />
-<link rel="stylesheet" type="text/css" href="main.css" />
 <script type="text/javascript" src="http://leaverou.github.io/prefixfree/prefixfree.min.js"></script>
+<link rel="stylesheet" type="text/css" href="main.css" />
 <meta name="author" content="ambc">
 </head>
 <body>
@@ -24,17 +24,8 @@ Loading...
 <div id="kills"></div>
 </div>
 
-<div id="tgpm">
-<h1>Paused</h1>
-<div id="cont" class="btn">&#9654; Continue playing</div>
-<div id="endg" class="btn">End game</div>
-</div>
-
-<div id="menu">
-<h1>The Bunnies, Inc. <sup>ALPHA</sup></h1>
-<div id="play-holder">
-<div id="play-b-holder"><div id="play" class="btn">Play</div></div>
-<div id="opt-holder">
+<div id="optionsc" class="menupg">
+<h1>Options</h1>
 <select id="opt-maptype">
 <option value="h">Hybrid</option>
 <option value="r">Roadmap</option>
@@ -42,9 +33,20 @@ Loading...
 <option value="t">Terrain</option>
 </select>
 </div>
+
+<div id="tgpm" class="menupg">
+<h1>Paused</h1>
+<div id="cont" class="btn">&#9654; Continue playing</div>
+<div id="endg" class="btn">End game</div>
+<div class="btn options">Options</div>
 </div>
+
+<div id="menu" class="menupg">
+<h1>The Bunnies, Inc. <sup>ALPHA</sup></h1>
+<div id="play" class="btn">Play</div>
 <div id="high" class="btn" onClick="alert('The bunnies have not made this work yet! ');">Highscores</div>
 <div class="btn" id="about">About</div>
+<div class="btn options">Options</div>
 <a href="http://ambrosechua.github.com/thebunniesinc/" class="btn">How to play</a>
 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
 <input type="hidden" name="cmd" value="_donations">
@@ -61,7 +63,7 @@ Loading...
 <span style="font-size: 12px;">Alpha Version 2.0.0 release 14</span>
 </div>
 
-<div id="aboutc">
+<div id="aboutc" class="menupg">
 <h1>About</h1>
 The Bunnies Inc. by <!-- <img src="assets/ambc.png" width="50" /> -->ambc<br />
 <br />
diff --git a/alpha/main.css b/alpha/main.css
index 54b0bce..906f263 100644
--- a/alpha/main.css
+++ b/alpha/main.css
@@ -43,7 +43,8 @@ top: 0;
 bottom: 0;
 left: 0;
 right: 0;
-/* backface-visibility: hidden; */
+-webkit-backface-visibility: hidden;
+backface-visibility: hidden;
 }
 #loadingc {
 position: absolute;
@@ -179,7 +180,7 @@ z-index: 2;
 width: 100%;
 height: 100%;
 }
-#menu, #tgpm, #aboutc {
+.menupg {
 text-align: center;
 position: absolute;
 top: 0;
@@ -270,41 +271,15 @@ position: absolute;
 right: 2px;
 top: 2px;
 }
-#tgpm, #aboutc {
+.menupg {
 display: none;
 }
-#aboutc {
+.menupg {
 line-height: 25px;
 font-size: 20px;
 }
-#play-holder {
-width: 600px;
-margin-left: auto;
-margin-right: auto;
-margin-bottom: -10px;
-}
-#play-b-holder {
-display: inline-block;
-}
-#opt-holder {
-display: inline-block;
-height: 0;
-overflow: hidden;
-transition: all 1s;
-float: right;
-color: #fff;
-font-size: 20px;
-width: 200px;
-/* background-color: rgba(255, 255, 255, 0.5); */
-text-decoration: none;
-margin-top: -42px;
-margin-right: -10px;
-background: rgba(255, 255, 255, 0.1) url(assets/wrench.png) no-repeat 5px 5px;
-}
-#play-holder:hover > #opt-holder {
-height: 75px;
-}
-#opt-holder > select {
+
+#optionsc > select {
 margin: 20px 20px;
 appearance: none;
 color: #fff;
@@ -320,7 +295,7 @@ background-image: none;
 letter-spacing: 1px;
 width: auto;
 }
-#opt-holder > select:hover {
+#optionsc > select:hover {
 box-shadow: -3px -3px 1px rgba(255, 255, 255, 0.15);
 position: relative;
 top: -2px;
diff --git a/alpha/main.js b/alpha/main.js
index 26076db..323ac99 100644
--- a/alpha/main.js
+++ b/alpha/main.js
@@ -333,6 +333,12 @@ $("#aboutc").fadeOut();
 $("#about").click(function() {
 $("#aboutc").fadeIn();
 });
+$("#optionsc").click(function() {
+$("#optionsc").fadeOut();
+});
+$(".options").click(function() {
+$("#aboutc").fadeIn();
+});
 
 $("#play").click(function() {
 getready();
