From c5bf324865af1393da3d357814c65da3b523ba7a Mon Sep 17 00:00:00 2001 From: Jim Snodgrass Date: Sun, 18 Mar 2012 22:04:36 -0400 Subject: [PATCH] making board resize according to window size. not sure it isn't affecting render speed yet. --- app/public/images/120x220.png | Bin 0 -> 1260 bytes app/public/images/20x20.png | Bin 0 -> 944 bytes app/public/styles/board.css | 91 ++++++++++++++------------ app/views/home/board.jade | 16 +++-- app/views/layouts/layout.jade | 4 +- app/views/styles/board.styl | 119 ++++++++++++++++++---------------- app/views/styles/library.styl | 5 +- 7 files changed, 129 insertions(+), 106 deletions(-) create mode 100644 app/public/images/120x220.png create mode 100644 app/public/images/20x20.png diff --git a/app/public/images/120x220.png b/app/public/images/120x220.png new file mode 100644 index 0000000000000000000000000000000000000000..ac85bbbd86e2f906219c4f25bb3f78cef2fd2d46 GIT binary patch literal 1260 zcmd5+O;6N77@h?s1SQc6ew-%dX4ro2hdZH?wOypd65QSB9(QO5wprS#?cf$pgqwF0 ze}IW6W4L(Y0Es7$9!!k!Zb(f03r?4I;lOgHdE5EO^E~e}^S{#07l9FiiaIAV!HU40REor`wVMhY;4+g)>tfdmS1yBCssVMMtj4u%d{HR;pI3 z3s996S&~&rQHx3yX)2Osm^}i|7P*_KX)b5E_(~UgjD<*&27`e(&_o(-NlL9&OEpxr z$PvYOH()p^2Jw8ZV3OF0ypVY`fT<$hpgT+#xYM&E_~A%4h_h?r7bYb*loU};kCX## z`)a7~kI*q|l5@Y83dil;kVs7u)1AoSh1;A@Q-#Qg2xc^DQ@Wks;(CuV8uw@jjaC`j z*ztmNJ;d8KvVxf5z#*2Y3tU0;JQrz(S<;L~xl((qDM~}B*Xv5dXw)jE%BQBBb4}{( z_#|LC*FEP}#&XkE@I#*2B$4-qxXTgs;qb`F8}CIMtCw-z@m@+}xe_-crG>pv=zNQJ zPdXj7Enkcpp9H+yBi_~@R^PP%D0D5e-cEk~{a(Kd!1P!7`b$>aVZxOEotWyp!!S0f8kx#k6AXTOkX9)ig{`vv5}NuK?3FMj;Ilm36K#+v#0Y4_ki#Xxd% literal 0 HcmV?d00001 diff --git a/app/public/images/20x20.png b/app/public/images/20x20.png new file mode 100644 index 0000000000000000000000000000000000000000..cf9d9d567de432671225e056e4f50cddf6a60dd2 GIT binary patch literal 944 zcmaJ=J#W)M7&eMjp`uK%PzmYe!bberB()V2jGfX59HJx=8FB1Oa-{Z|^QCbzQML}S z@e5cw@dp?X0|S2n7A7{tA3!R1X`C_;ES>LtPtWtbANSsAyY;ZRy|XO{La}-1cG!M{ zud7?^|N8V+k!?3=qffhdNM}BQf*s-k1kK1F!4CAp`HL^GCI|%)_4>5$JvIXzNj}F& zS(GrgAk^wv;s+B*!2pg>Y>B@l+|#FXXPY$nZg36qhm8iv6&G_AxCrF0%s zKP$!QZm!_MG$1IU2*-dc`U50x}7cdPEd4H{6`d{zk6Ml9Bnv{&ms$5t|-vuE&-+>%oUH zn|8v+`sa`1N9;-5Zn}0a`#Si2eqJw>uUs#@{d9KnZtKm?{`2o=C(h^lFNK1Dt`+Wl StCXMcH`Hvj-1iTjz4`-RBO=KF literal 0 HcmV?d00001 diff --git a/app/public/styles/board.css b/app/public/styles/board.css index 6217495..92b8ece 100644 --- 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 index a50e904..9d419d5 100644 --- 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 index 03ed1d6..8d9ad8d 100644 --- 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 \ No newline at end of file diff --git a/app/views/styles/board.styl b/app/views/styles/board.styl index a4485a3..63ddfe9 100644 --- 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 index 09b42db..93ec26d 100644 --- a/app/views/styles/library.styl +++ b/app/views/styles/library.styl @@ -7,4 +7,7 @@ -webkit-transform-style preserve-3d button, .button - button() \ No newline at end of file + button() + +.clear + clearfix() \ No newline at end of file