From c0ca375c3a7991a98092b664ea05d075ecc548e6 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Mon, 10 Mar 2014 20:42:03 +0100 Subject: [PATCH 01/13] properly ignore meta keys --- js/keyboard_input_manager.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index 613360b..7ec68e8 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -35,10 +35,11 @@ KeyboardInputManager.prototype.listen = function () { }; document.addEventListener("keydown", function (event) { - var modifiers = event.altKey && event.ctrlKey && event.metaKey && + var modifiers = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey; var mapped = map[event.which]; + console.log(event); if (!modifiers) { if (mapped !== undefined) { event.preventDefault(); From e4476b44e042071aef49ccc1243753b472f4afb1 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Mon, 10 Mar 2014 20:45:43 +0100 Subject: [PATCH 02/13] remove debug printing --- js/keyboard_input_manager.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index 7ec68e8..c003b8d 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -39,7 +39,6 @@ KeyboardInputManager.prototype.listen = function () { event.shiftKey; var mapped = map[event.which]; - console.log(event); if (!modifiers) { if (mapped !== undefined) { event.preventDefault(); From 5a49a0ef91217f3e03299972ef363e456ddd9d1b Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Mon, 10 Mar 2014 21:31:41 +0100 Subject: [PATCH 03/13] add basic iphone support --- js/html_actuator.js | 2 +- style/helpers.scss | 7 ++ style/main.css | 225 ++++++++++++++++++++++++++++++++-- style/main.scss | 292 ++++++++++++++++++++++++++++---------------- 4 files changed, 406 insertions(+), 120 deletions(-) diff --git a/js/html_actuator.js b/js/html_actuator.js index f1c3308..94a8f35 100644 --- a/js/html_actuator.js +++ b/js/html_actuator.js @@ -107,7 +107,7 @@ HTMLActuator.prototype.message = function (won) { var type = won ? "game-won" : "game-over"; var message = won ? "You win!" : "Game over!" - if (ga) ga("send", "event", "game", "end", type, this.score); + // if (ga) ga("send", "event", "game", "end", type, this.score); this.messageContainer.classList.add(type); this.messageContainer.getElementsByTagName("p")[0].textContent = message; diff --git a/style/helpers.scss b/style/helpers.scss index 6bab89e..a8f108c 100644 --- a/style/helpers.scss +++ b/style/helpers.scss @@ -53,3 +53,10 @@ -webkit-animation-fill-mode: #{$str}; -moz-animation-fill-mode: #{$str}; } + +// Media queries +@mixin smaller($width) { + @media screen and (max-width: $width) { + @content; + } +} diff --git a/style/main.css b/style/main.css index f5760a4..abf1921 100644 --- a/style/main.css +++ b/style/main.css @@ -213,20 +213,9 @@ hr { z-index: 2; } .tile { - background: red; width: 106.25px; height: 106.25px; - border-radius: 3px; - background: #eee4da; - text-align: center; - line-height: 116.25px; - font-size: 55px; - font-weight: bold; - z-index: 10; - -webkit-transition: 100ms ease-in-out; - -moz-transition: 100ms ease-in-out; - -webkit-transition-property: top, left; - -moz-transition-property: top, left; } + line-height: 116.25px; } .tile.tile-position-1-1 { position: absolute; left: 0px; @@ -291,6 +280,18 @@ hr { position: absolute; left: 364px; top: 364px; } + +.tile { + border-radius: 3px; + background: #eee4da; + text-align: center; + font-weight: bold; + z-index: 10; + font-size: 55px; + -webkit-transition: 100ms ease-in-out; + -moz-transition: 100ms ease-in-out; + -webkit-transition-property: top, left; + -moz-transition-property: top, left; } .tile.tile-2 { background: #eee4da; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } @@ -314,26 +315,41 @@ hr { background: #edcf72; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); font-size: 45px; } + @media screen and (max-width: 480px) { + .tile.tile-128 { + font-size: 25px; } } .tile.tile-256 { color: #f9f6f2; background: #edcc61; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); font-size: 45px; } + @media screen and (max-width: 480px) { + .tile.tile-256 { + font-size: 25px; } } .tile.tile-512 { color: #f9f6f2; background: #edc850; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); font-size: 45px; } + @media screen and (max-width: 480px) { + .tile.tile-512 { + font-size: 25px; } } .tile.tile-1024 { color: #f9f6f2; background: #edc53f; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); font-size: 35px; } + @media screen and (max-width: 480px) { + .tile.tile-1024 { + font-size: 15px; } } .tile.tile-2048 { color: #f9f6f2; background: #edc22e; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); font-size: 35px; } + @media screen and (max-width: 480px) { + .tile.tile-2048 { + font-size: 15px; } } @-webkit-keyframes appear { 0% { @@ -425,3 +441,188 @@ hr { .game-explanation { margin-top: 50px; } + +@media screen and (max-width: 480px) { + html, body { + font-size: 15px; } + + body { + margin: 20px 0; + padding: 0 20px; } + + h1.title { + font-size: 50px; } + + .container { + width: 280px; + margin: 0 auto; } + + .score-container { + margin-top: 0; } + + .heading { + margin-bottom: 10px; } + + .game-container { + margin-top: 40px; + position: relative; + padding: 10px; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + background: #bbada0; + border-radius: 6px; + width: 280px; + height: 280px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + .game-container .game-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(238, 228, 218, 0.5); + z-index: 100; + text-align: center; + -webkit-animation: fade-in 800ms ease 1200ms; + -moz-animation: fade-in 800ms ease 1200ms; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; } + .game-container .game-message p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 222px; } + .game-container .game-message .lower { + display: block; + margin-top: 59px; } + .game-container .game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + margin-left: 9px; } + .game-container .game-message.game-won { + background: rgba(237, 194, 46, 0.5); + color: #f9f6f2; } + .game-container .game-message.game-won, .game-container .game-message.game-over { + display: block; } + + .grid-container { + position: absolute; + z-index: 1; } + + .grid-row { + margin-bottom: 10px; } + .grid-row:last-child { + margin-bottom: 0; } + .grid-row:after { + content: ""; + display: block; + clear: both; } + + .grid-cell { + width: 57.5px; + height: 57.5px; + margin-right: 10px; + float: left; + border-radius: 3px; + background: rgba(238, 228, 218, 0.35); } + .grid-cell:last-child { + margin-right: 0; } + + .tile-container { + position: absolute; + z-index: 2; } + + .tile { + width: 57.5px; + height: 57.5px; + line-height: 67.5px; } + .tile.tile-position-1-1 { + position: absolute; + left: 0px; + top: 0px; } + .tile.tile-position-1-2 { + position: absolute; + left: 0px; + top: 68px; } + .tile.tile-position-1-3 { + position: absolute; + left: 0px; + top: 135px; } + .tile.tile-position-1-4 { + position: absolute; + left: 0px; + top: 203px; } + .tile.tile-position-2-1 { + position: absolute; + left: 68px; + top: 0px; } + .tile.tile-position-2-2 { + position: absolute; + left: 68px; + top: 68px; } + .tile.tile-position-2-3 { + position: absolute; + left: 68px; + top: 135px; } + .tile.tile-position-2-4 { + position: absolute; + left: 68px; + top: 203px; } + .tile.tile-position-3-1 { + position: absolute; + left: 135px; + top: 0px; } + .tile.tile-position-3-2 { + position: absolute; + left: 135px; + top: 68px; } + .tile.tile-position-3-3 { + position: absolute; + left: 135px; + top: 135px; } + .tile.tile-position-3-4 { + position: absolute; + left: 135px; + top: 203px; } + .tile.tile-position-4-1 { + position: absolute; + left: 203px; + top: 0px; } + .tile.tile-position-4-2 { + position: absolute; + left: 203px; + top: 68px; } + .tile.tile-position-4-3 { + position: absolute; + left: 203px; + top: 135px; } + .tile.tile-position-4-4 { + position: absolute; + left: 203px; + top: 203px; } + + .game-container { + margin-top: 20px; } + + .tile { + font-size: 35px; } + + .game-message p { + font-size: 30px !important; + height: 30px !important; + line-height: 30px !important; + margin-top: 90px !important; } + .game-message .lower { + margin-top: 30px !important; } } diff --git a/style/main.scss b/style/main.scss index 5343c6d..635f7cc 100644 --- a/style/main.scss +++ b/style/main.scss @@ -141,145 +141,154 @@ hr { } } -.game-container { - margin-top: 40px; - position: relative; - padding: $grid-spacing; +// Game field mixin used to render CSS at different width +@mixin game-field { + .game-container { + margin-top: 40px; + position: relative; + padding: $grid-spacing; - cursor: default; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; - background: $game-container-background; - border-radius: $tile-border-radius * 2; - width: $field-width; - height: $field-width; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + background: $game-container-background; + border-radius: $tile-border-radius * 2; + width: $field-width; + height: $field-width; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; - .game-message { - display: none; + .game-message { + display: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba($tile-color, .5); + z-index: 100; + + text-align: center; + + p { + font-size: 60px; + font-weight: bold; + height: 60px; + line-height: 60px; + margin-top: 222px; + // height: $field-width; + // line-height: $field-width; + } + + .lower { + display: block; + margin-top: 59px; + } + + a { + display: inline-block; + background: darken($game-container-background, 20%); + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: $bright-text-color; + height: 40px; + line-height: 42px; + margin-left: 9px; + // margin-top: 59px; + } + + @include animation(fade-in 800ms ease $transition-speed * 12); + @include animation-fill-mode(both); + + &.game-won { + background: rgba($tile-gold-color, .5); + color: $bright-text-color; + } + + &.game-won, &.game-over { + display: block; + } + } + } + + .grid-container { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba($tile-color, .5); - z-index: 100; + z-index: 1; + } - text-align: center; + .grid-row { + margin-bottom: $grid-spacing; - p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; - // height: $field-width; - // line-height: $field-width; + &:last-child { + margin-bottom: 0; } - .lower { + &:after { + content: ""; display: block; - margin-top: 59px; + clear: both; } + } - a { - display: inline-block; - background: darken($game-container-background, 20%); - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: $bright-text-color; - height: 40px; - line-height: 42px; - margin-left: 9px; - // margin-top: 59px; + .grid-cell { + width: $tile-size; + height: $tile-size; + margin-right: $grid-spacing; + float: left; + + border-radius: $tile-border-radius; + + background: rgba($tile-color, .35); + + &:last-child { + margin-right: 0; } + } - @include animation(fade-in 800ms ease $transition-speed * 12); - @include animation-fill-mode(both); + .tile-container { + position: absolute; + z-index: 2; + } - &.game-won { - background: rgba($tile-gold-color, .5); - color: $bright-text-color; - } + .tile { + width: $tile-size; + height: $tile-size; + line-height: $tile-size + 10px; - &.game-won, &.game-over { - display: block; + // Build position classes + @for $x from 1 through $grid-row-cells { + @for $y from 1 through $grid-row-cells { + &.tile-position-#{$x}-#{$y} { + position: absolute; + left: round(($tile-size + $grid-spacing) * ($x - 1)); + top: round(($tile-size + $grid-spacing) * ($y - 1)); + } + } } } } -.grid-container { - position: absolute; - z-index: 1; -} - -.grid-row { - margin-bottom: $grid-spacing; - - &:last-child { - margin-bottom: 0; - } - - &:after { - content: ""; - display: block; - clear: both; - } -} - -.grid-cell { - width: $tile-size; - height: $tile-size; - margin-right: $grid-spacing; - float: left; - - border-radius: $tile-border-radius; - - background: rgba($tile-color, .35); - - &:last-child { - margin-right: 0; - } -} - -.tile-container { - position: absolute; - z-index: 2; -} +// End of game-field mixin +@include game-field; .tile { - background: red; - width: $tile-size; - height: $tile-size; border-radius: $tile-border-radius; background: $tile-color; text-align: center; - line-height: $tile-size + 10px; - font-size: 55px; font-weight: bold; z-index: 10; + font-size: 55px; + @include transition($transition-speed ease-in-out); @include transition-property(top, left); - // Build position classes - @for $x from 1 through $grid-row-cells { - @for $y from 1 through $grid-row-cells { - &.tile-position-#{$x}-#{$y} { - position: absolute; - left: round(($tile-size + $grid-spacing) * ($x - 1)); - top: round(($tile-size + $grid-spacing) * ($y - 1)); - } - } - } - $base: 2; $exponent: 1; $limit: 11; @@ -333,8 +342,17 @@ hr { // Adjust font size for bigger numbers @if $power >= 100 and $power < 1000 { font-size: 45px; + + // Media queries placed here to avoid carrying over the rest of the logic + @include smaller(480px) { + font-size: 25px; + } } @else if $power >= 1000 { font-size: 35px; + + @include smaller(480px) { + font-size: 15px; + } } } @@ -391,3 +409,63 @@ hr { .game-explanation { margin-top: 50px; } + +@include smaller(480px) { + // Redefine variables for smaller screens + $field-width: 280px; + $grid-spacing: 10px; + $grid-row-cells: 4; + $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; + $tile-border-radius: 3px; + + html, body { + font-size: 15px; + } + + body { + margin: 20px 0; + padding: 0 20px; + } + + h1.title { + font-size: 50px; + } + + .container { + width: $field-width; + margin: 0 auto; + } + + .score-container { + margin-top: 0; + } + + .heading { + margin-bottom: 10px; + } + + // Render the game field at the right width + @include game-field; + + .game-container { + margin-top: 20px; + } + + // Rest of the font-size adjustments in the tile class + .tile { + font-size: 35px; + } + + .game-message { + p { + font-size: 30px !important; + height: 30px !important; + line-height: 30px !important; + margin-top: 90px !important; + } + + .lower { + margin-top: 30px !important; + } + } +} From bc2a710ea9c2348394550a919670b751e55c6080 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 10:45:15 +0100 Subject: [PATCH 04/13] add threes reference. closes #7 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index acb945b..0e639e8 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@

- Created by Gabriele Cirulli. Based on 1024 by Veewo Studio. + Created by Gabriele Cirulli. Based on 1024 by Veewo Studio and conceptually similar to Threes by Asher Vollmer.

From c9906c87fceb087bbc8ab98f2c6ea037dc5b0b61 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 12:04:55 +0100 Subject: [PATCH 05/13] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 8e21c74..cac28b6 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,6 @@ You can find the same information in the [contributing guide.](https://github.co ## License 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt) + +## Donations +I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1JoG1ctMSx9PgXdm8bc2XZ5o9BrWiq4vEZ` BTC address. Thank you very much! From 84dbf492330e131132191bcc1fa6742f9be1d4bb Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 12:16:43 +0100 Subject: [PATCH 06/13] update address --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cac28b6..e313394 100644 --- a/README.md +++ b/README.md @@ -16,4 +16,4 @@ You can find the same information in the [contributing guide.](https://github.co 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt) ## Donations -I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1JoG1ctMSx9PgXdm8bc2XZ5o9BrWiq4vEZ` BTC address. Thank you very much! +I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i` BTC address. Thank you very much! From 2e5ab789c1db8ee89af64b3926e2eb6a33a0ca4b Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 12:29:16 +0100 Subject: [PATCH 07/13] add favicon --- favicon.ico | Bin 0 -> 4286 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 favicon.ico diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..22109e04a9f44bde18ec7b7a4b7410d0246521bc GIT binary patch literal 4286 zcmeI0u}T9$5QaxAZ4|*eSlRmm7M9V@SMU{VQ>5?}d;{?n1WA#?B1H-d3kAW#!e}&! z290>`cj4E~-Q@zpx`i3p?A^})&p$J}fvjc=?ypiYKJ9qfY|YFz+;B^_ zFn$f<2q!J!u7@9~i@DVw36{n#zAi#L=w1qYr#f#FwA?@S$6_fB4AP=j)up z&-xU9K1cfvmODrDz4%vq5%c#q+Oh8+)rjYPd=HIz|I|hJ=PnrXPDE_>yDHg+*KulwNh1` literal 0 HcmV?d00001 From 53b0bd2e17d2f23bea498d90de1900877e321bfd Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 14:30:09 +0100 Subject: [PATCH 08/13] move scripts to bottom of body --- index.html | 16 ++++++++-------- js/application.js | 8 +++----- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 0e639e8..84c1a48 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,6 @@ - - - - - - - - @@ -74,5 +66,13 @@ Created by Gabriele Cirulli. Based on 1024 by Veewo Studio and conceptually similar to Threes by Asher Vollmer.

+ + + + + + + + diff --git a/js/application.js b/js/application.js index 656a88d..1ce870e 100644 --- a/js/application.js +++ b/js/application.js @@ -1,6 +1,4 @@ -document.addEventListener("DOMContentLoaded", function () { - // Wait till the browser is ready to render the game (avoids glitches) - window.requestAnimationFrame(function () { - var manager = new GameManager(4, KeyboardInputManager, HTMLActuator); - }); +// Wait till the browser is ready to render the game (avoids glitches) +window.requestAnimationFrame(function () { + var manager = new GameManager(4, KeyboardInputManager, HTMLActuator); }); From 5fb74faf5d221475ef008329f7e9a22fcaf46fcb Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 14:38:38 +0100 Subject: [PATCH 09/13] add favicon meta tag --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 84c1a48..117d718 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ 2048 + From d2315af2ec3332d319c8ba7839707d5d7ad1691b Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 14:48:42 +0100 Subject: [PATCH 10/13] add requestanimationframe polyfill --- index.html | 3 ++- js/animframe_polyfill.js | 26 ++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 js/animframe_polyfill.js diff --git a/index.html b/index.html index 117d718..edabb6c 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,8 @@ Created by Gabriele Cirulli. Based on 1024 by Veewo Studio and conceptually similar to Threes by Asher Vollmer.

- + + diff --git a/js/animframe_polyfill.js b/js/animframe_polyfill.js new file mode 100644 index 0000000..c45a13e --- /dev/null +++ b/js/animframe_polyfill.js @@ -0,0 +1,26 @@ +(function() { + var lastTime = 0; + var vendors = ['webkit', 'moz']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } + + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } +}()); From 92fda72cf54691a29ef81c1f93a1e9dd75d99a52 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 15:18:20 +0100 Subject: [PATCH 11/13] move button styles to mixin --- style/main.css | 26 ++++++++++---------------- style/main.scss | 21 +++++++++++++-------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/style/main.css b/style/main.css index abf1921..869661c 100644 --- a/style/main.css +++ b/style/main.css @@ -131,6 +131,16 @@ hr { 100% { opacity: 1; } } +.game-container .game-message a { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; } + .game-container { margin-top: 40px; position: relative; @@ -170,14 +180,6 @@ hr { display: block; margin-top: 59px; } .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; margin-left: 9px; } .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); @@ -502,14 +504,6 @@ hr { display: block; margin-top: 59px; } .game-container .game-message a { - display: inline-block; - background: #8f7a66; - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: #f9f6f2; - height: 40px; - line-height: 42px; margin-left: 9px; } .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); diff --git a/style/main.scss b/style/main.scss index 635f7cc..731d38d 100644 --- a/style/main.scss +++ b/style/main.scss @@ -141,6 +141,18 @@ hr { } } +// Styles for buttons +@mixin button { + display: inline-block; + background: darken($game-container-background, 20%); + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: $bright-text-color; + height: 40px; + line-height: 42px; +} + // Game field mixin used to render CSS at different width @mixin game-field { .game-container { @@ -190,14 +202,7 @@ hr { } a { - display: inline-block; - background: darken($game-container-background, 20%); - border-radius: 3px; - padding: 0 20px; - text-decoration: none; - color: $bright-text-color; - height: 40px; - line-height: 42px; + @include button; margin-left: 9px; // margin-top: 59px; } From 988d71f7a031c6dfa1b3f626014e177eaa83e0d6 Mon Sep 17 00:00:00 2001 From: Remi Rampin Date: Tue, 11 Mar 2014 11:26:18 -0400 Subject: [PATCH 12/13] Minor fixes to README --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e313394..f2cdfa8 100644 --- a/README.md +++ b/README.md @@ -5,10 +5,10 @@ Made just for fun. [Play it here!](http://gabrielecirulli.github.io/2048/) [![Screenshot](http://pictures.gabrielecirulli.com/2048-20140309-234100.png)](http://pictures.gabrielecirulli.com/2048-20140309-234100.png) -That screenshot is fake by, the way. I never reached 2048 :smile: +That screenshot is fake, by the way. I never reached 2048 :smile: ## Contributing -Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specifically made branch and request to pull on `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process. +Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into `master`! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process. You can find the same information in the [contributing guide.](https://github.com/gabrielecirulli/2048/blob/master/CONTRIBUTING.md) @@ -16,4 +16,4 @@ You can find the same information in the [contributing guide.](https://github.co 2048 is licensed under the [MIT license.](https://github.com/gabrielecirulli/2048/blob/master/LICENSE.txt) ## Donations -I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like you'd like to buy me a coffee, you can me donate at the `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i` BTC address. Thank you very much! +I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like buying me coffee, you can donate at my BTC address: `1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i`. Thank you very much! From 5c6327f390309e446eb3a98f1389333af0d3905e Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Tue, 11 Mar 2014 16:31:39 +0100 Subject: [PATCH 13/13] add WASD controls (closes #10) --- js/keyboard_input_manager.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index c003b8d..d91e7f3 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -31,7 +31,11 @@ KeyboardInputManager.prototype.listen = function () { 75: 0, // vim keybindings 76: 1, 74: 2, - 72: 3 + 72: 3, + 87: 0, // W + 68: 1, // D + 83: 2, // S + 65: 3 // A }; document.addEventListener("keydown", function (event) {