Permalink
Browse files

Added menu for next level and highscore also changed zepto for jquery…

… for easy animations
  • Loading branch information...
1 parent 9a84b67 commit fc4141f4be2d005ddfc8e9a8d03294325f535175 @samuel02 samuel02 committed Nov 28, 2012
Showing with 127 additions and 7 deletions.
  1. +78 −0 css/style.css
  2. +39 −2 index.html
  3. +2 −0 js/jquery-1.8.3.min.js
  4. +0 −2 js/zepto.min.js
  5. +8 −3 src/UI.coffee
View
@@ -4,6 +4,12 @@ body, p {
body {
background-color: #f4f4f4;
}
+table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0px;
+ background: transparent;
+}
.container {
width:100%;
margin-left:auto;
@@ -33,6 +39,78 @@ body {
-webkit-box-shadow: inset 0px 0px 15px 7px rgba(51, 51, 51, 0.3);
box-shadow: inset 0px 0px 15px 7px rgba(51, 51, 51, 0.3);
}
+#menuOverlay {
+ width:850px;
+ height:450px;
+ z-index:2000;
+ position:absolute;
+ top:168px;
+ background-color:#333;
+ opacity: 0.8;
+}
+#menu {
+ width:850px;
+ height:450px;
+ z-index:3000;
+ position:absolute;
+ top:168px;
+ -webkit-box-shadow: inset 0px 0px 15px 7px rgba(51, 51, 51, 0.3);
+ box-shadow: inset 0px 0px 15px 7px rgba(51, 51, 51, 0.3);
+ color:#fff;
+}
+#menu h2 {
+ text-align:left;
+ margin-top:0px;
+}
+#menu .highscore {
+ width:335px;
+ float:right;
+ padding:15px;
+ padding-right: 60px;
+ padding-top:60px;
+}
+#menu .highscore table {
+ width:100%;
+ border:2px solid #fff;
+ border-radius:5px;
+}
+#menu .highscore table tr td {
+ padding:8px;
+ border-bottom:1px solid #fff;
+ text-align: left;
+ vertical-align: middle;
+}
+#menu .highscore table tr td:first-child {
+ font-weight:bold;
+ border-right:1px solid #fff;
+}
+#menu .highscore table tr.last td {
+ border-bottom: none;
+}
+#menu .options {
+ width:335px;
+ float:left;
+ padding:15px;
+ padding-left: 60px;
+ padding-top:60px;
+}
+#menu .options .btn {
+ width:100%;
+ height:40px;
+ border:1px solid #fff;
+ background: transparent;
+ padding:10px;
+ color:#fff;
+ font-size:14px;
+ border-radius: 7px;
+ font-weight:bold;
+ cursor:pointer;
+ margin-bottom:10px;
+}
+#menu .options .btn:hover {
+ background-color:#fff;
+ color:#333;
+}
#steps {
color:#333;
text-align:right;
View
@@ -9,11 +9,48 @@
<div class="container">
<div id="wrapper">
<canvas id="zoko" height="450" width="850"></canvas>
+
<div id="overlay">
<p id="steps">0 steps</p>
</div>
+
+ <div id="menu" style="display:none">
+ <div class="options">
+ <h2>Good job!</h2>
+ <button id="nextBtn" class="btn">Next Level &rarr;</button>
+ <button id="previousBtn" class="btn">&larr; Previous Level</button>
+ </div>
+ <div class="highscore">
+ <h2>Highscore</h2>
+ <table class="table">
+ <tbody>
+ <tr>
+ <td>Level 1
+ <td>2 steps</td>
+ </tr>
+ <tr>
+ <td>Level 2
+ <td>3 steps</td>
+ </tr>
+ <tr>
+ <td>Level 3
+ <td>?</td>
+ </tr>
+ <tr>
+ <td>Level 4
+ <td>?</td>
+ </tr>
+ <tr class="last">
+ <td>Level 5
+ <td>?</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div id="menuOverlay" style="display:none"></div>
+
<div class="btn-group">
- <button id="nextBtn" class="btn">Next Level</button>
<button id="restartBtn" class="icon-btn icon-undo"></button>
</div>
</div>
@@ -25,7 +62,7 @@
</p>
</footer>
</body>
- <script src="js/zepto.min.js"></script>
+ <script src="js/jquery-1.8.3.min.js"></script>
<script src="js/zoko.js"></script>
<script>
window.onload = function() {
Oops, something went wrong.
View
Oops, something went wrong.
View
@@ -3,13 +3,17 @@ class UI
constructor: ->
@stepsCounter = $('#steps')
@nextBtn = $('#nextBtn')
- @nextBtn.hide()
+ @menu = $('#menu')
+ @menu.fadeOut()
+ @menuOverlay = $('#menuOverlay')
+ @menuOverlay.fadeOut()
@restartBtn = $('#restartBtn')
instance = this
@nextBtn.on 'click', ->
- instance.nextBtn.hide()
+ instance.menu.fadeOut()
+ instance.menuOverlay.fadeOut()
game = instance.game
if game?
game.nextLevel()
@@ -26,7 +30,8 @@ class UI
levelState = args[0]
if levelState.solved
# showWinnerModal()
- @nextBtn.show()
+ @menuOverlay.fadeIn()
+ @menu.fadeIn()
steps = levelState.steps
@updateStepsCount(steps)

0 comments on commit fc4141f

Please sign in to comment.