making board resize according to window size. not sure it isn't affec…

…ting render speed yet.
hunterloftis · Mar 19, 2012 · c5bf324 · c5bf324
1 parent 03ffbc4
commit c5bf324
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 106 deletions.
diff --git a/app/public/images/120x220.png b/app/public/images/120x220.png
diff --git a/app/public/images/20x20.png b/app/public/images/20x20.png
diff --git a/app/public/styles/board.css b/app/public/styles/board.css
@@ -929,6 +929,14 @@ button.active:hover,
 .button.active:hover {
   color: #ff0;
 }
+.clear {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
 #overlay {
   position: absolute;
   z-index: 998;
@@ -964,16 +972,7 @@ button.active:hover,
   font-size: 14px;
   font-style: italic;
 }
-#board {
-  border: 1px solid #ccc;
-  border-bottom: 3px solid #111;
-  width: 339px;
-  height: 620px;
-  margin: 10px auto;
-  position: relative;
-  background: #fff;
-}
-#board #game_over {
+#game_over {
   position: absolute;
   top: 35%;
   left: 10%;
@@ -989,71 +988,79 @@ button.active:hover,
   padding: 20px 0;
   z-index: 999;
 }
-#board #next_block {
+#next_block {
   position: absolute;
-  top: 0;
-  left: 100%;
+  top: 20;
+  right: 20%;
   width: 125px;
   margin-left: 20px;
 }
-#board #next_block div {
+#next_block div {
   display: inline-block;
   zoom: 1;
   *display: inline;
   vertical-align: bottom;
   bottom: 0;
 }
-#board .block {
-  float: left;
-}
-#board #next_block div,
-#board .block {
+#next_block div,
+.block {
   width: 26px;
   height: 26px;
-  margin: 1px;
+  margin: 0px;
+  border: 1px solid #fff;
 }
-#board #next_block div,
-#board .block.on {
+#next_block div,
+.block.on {
   background: #d33682;
 }
-#board #next_block div.blank,
-#board .block.on.blank {
+#next_block div.blank,
+.block.on.blank {
   background: none;
   border: none;
 }
-#board #next_block div.blank:after,
-#board .block.on.blank:after {
+#next_block div.blank:after,
+.block.on.blank:after {
   display: none;
 }
-#board #next_block div.red,
-#board .block.on.red {
+#next_block div.red,
+.block.on.red {
   background: #dc322f;
 }
-#board #next_block div.green,
-#board .block.on.green {
+#next_block div.green,
+.block.on.green {
   background: #859900;
 }
-#board #next_block div.blue,
-#board .block.on.blue {
+#next_block div.blue,
+.block.on.blue {
   background: #268bd2;
 }
-#board #next_block div.purple,
-#board .block.on.purple {
+#next_block div.purple,
+.block.on.purple {
   background: #6c71c4;
 }
-#board #next_block div.orange,
-#board .block.on.orange {
+#next_block div.orange,
+.block.on.orange {
   background: #cb4b16;
 }
-#board #next_block div.yellow,
-#board .block.on.yellow {
+#next_block div.yellow,
+.block.on.yellow {
   background: #b58900;
 }
-#board #next_block div.black,
-#board .block.on.black {
+#next_block div.black,
+.block.on.black {
   background: #d33682;
 }
-#board #next_block div.dark,
-#board .block.on.dark {
+#next_block div.dark,
+.block.on.dark {
   background: #333;
 }
+#board {
+  border: 1px solid #ccc;
+  border-bottom: 3px solid #111;
+  margin: 10px auto;
+  position: relative;
+  background: #fff;
+}
+#board .block {
+  float: left;
+}
diff --git a/app/views/home/board.jade b/app/views/home/board.jade
@@ -18,6 +18,8 @@ append scripts
     $(function(){
       ko.applyBindings(BoardVM);
 
+      resizeBoard();
+
       var lastkeypress = 0;
       var ts = new Date().getTime();
       var timesince = ts - lastkeypress;
@@ -58,7 +60,12 @@ append scripts
         lastkeypress = ts;
       });
     })
-
+
+    function resizeBoard() {
+      var size = Math.floor($(window).height()/25);
+      $("#board .block").width(size+"px").height(size+"px");
+      $("#board").width(size*12+2+"px");
+    }
 
 block content
   #overlay(data-bind="visible:(!started())")
@@ -69,11 +76,12 @@ block content
       span(data-bind="html:score")
     p.high HIGH SCORE: 
       span(data-bind="html:high_score")
+  #next_block(data-bind="html:next_block")
+  #game_over(data-bind="visible:game_over") 
+    h2 GAME OVER
   #board(data-bind="foreach:rows")
-    #next_block(data-bind="html:$parent.next_block")
-    #game_over(data-bind="visible:$parent.game_over") 
-      h2 GAME OVER
     // ko foreach:$data
     .block(data-bind="css:{on:on, red:(color() == 'red'), blue:(color() == 'blue'), green:(color() == 'green'), purple:(color() == 'purple'), orange:(color() == 'orange'), yellow:(color() == 'yellow'), dark:(color() == 'dark')}")
     // /ko
+    .clear
 
diff --git a/app/views/layouts/layout.jade b/app/views/layouts/layout.jade
@@ -9,9 +9,7 @@ html
       link(rel='stylesheet', href='/styles/global.css' )
 
 body
-  .wrap
-
-    block content
+  block content
 
   block scripts
 
diff --git a/app/views/styles/board.styl b/app/views/styles/board.styl
@@ -19,6 +19,7 @@ orange = #cb4b16
 yellow = #b58900
 black = #d33682
 
+
 #overlay
   position absolute
   z-index 998
@@ -29,9 +30,9 @@ black = #d33682
   background rgba(0,0,0,0.9)
   text-align center
   padding 50px
+  //display none
   button
     font-size 35px
-
     span
       display block
       font-size 12px
@@ -52,68 +53,74 @@ black = #d33682
     font-style italic
 
 
+#game_over
+  position absolute
+  top 35%
+  left 10%
+  right 10%
+  color #eee
+  font-size 30px
+  text-align center
+  border-radius 3px
+  padding 20px 0
+  z-index 999
+
+
+#next_block
+  position absolute
+  top 20
+  right 20%
+  width 125px
+  margin-left 20px
+  div
+    inline-block()
+
+#next_block div, .block
+  width 26px
+  height 26px
+  margin 0px
+  border 1px solid #fff
+
+#next_block div, .block.on
+  //emboss(3px)
+  //border 1px solid #555
+  //border-radius 3px
+  background black
+  //animation pop 100ms ease-out
+  &.blank
+    background none
+    border none
+    &:after
+      display none
+  &.red
+    background red
+  &.green
+    background green
+  &.blue
+    background blue
+  &.purple
+    background purple
+  &.orange
+    background orange
+  &.yellow
+    background yellow
+  &.black
+    background black
+  &.dark
+    background #333
+
+
+
 #board
   border 1px solid #ccc
   border-bottom 3px solid #111
-  width 339px
-  height 620px
+  //width 339px
+  //height 620px
   margin 10px auto
   position relative
   background #FFF
 
-  #game_over
-    position absolute
-    top 35%
-    left 10%
-    right 10%
-    color #eee
-    font-size 30px
-    text-align center
-    border-radius 3px
-    padding 20px 0
-    z-index 999
-
-  #next_block
-    position absolute
-    top 0
-    left 100%
-    width 125px
-    margin-left 20px
-    div
-      inline-block()
-
   .block
-    float left      
+    float left
 
-  #next_block div, .block
-    width 26px
-    height 26px
-    margin 1px
 
-  #next_block div, .block.on
-    //emboss(3px)
-    //border 1px solid #555
-    //border-radius 3px
-    background black
-    //animation pop 100ms ease-out
-    &.blank
-      background none
-      border none
-      &:after
-        display none
-    &.red
-      background red
-    &.green
-      background green
-    &.blue
-      background blue
-    &.purple
-      background purple
-    &.orange
-      background orange
-    &.yellow
-      background yellow
-    &.black
-      background black
-    &.dark
-      background #333
diff --git a/app/views/styles/library.styl b/app/views/styles/library.styl
@@ -7,4 +7,7 @@
   -webkit-transform-style preserve-3d
 
 button, .button
-  button()
+  button()
+
+.clear
+  clearfix()