diff --git a/js/html_actuator.js b/js/html_actuator.js index f1c33083a48fc46647870f55a3ad4961a720b0dc..94a8f3537f186ae3e3ec1c13fa48ff828cb202bb 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 6bab89e8eb8dc65f5a799c29068c2fc1ce1297ba..a8f108c695aced23d16fbc14bd8e4e894d20e566 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 f5760a4901be75ea68d9091e1decbb261f43c2f8..abf192186bb0fc4297768db696261a5c0c5ba5c2 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 5343c6d88a4056a463d402b8b71b2cdd70948151..635f7cc189689991b835240c81a05fed8124a484 100644 --- a/style/main.scss +++ b/style/main.scss @@ -141,145 +141,154 @@ hr { } } -.game-container { - margin-top: 40px; - position: relative; - padding: $grid-spacing; - - 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; +// 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; + + 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; + + 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; + } - .game-message { - display: none; + .lower { + display: block; + margin-top: 59px; + } - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba($tile-color, .5); - z-index: 100; + 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; + } - text-align: center; + @include animation(fade-in 800ms ease $transition-speed * 12); + @include animation-fill-mode(both); - p { - font-size: 60px; - font-weight: bold; - height: 60px; - line-height: 60px; - margin-top: 222px; - // height: $field-width; - // line-height: $field-width; - } + &.game-won { + background: rgba($tile-gold-color, .5); + color: $bright-text-color; + } - .lower { - display: block; - margin-top: 59px; + &.game-won, &.game-over { + display: block; + } } + } - 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-container { + position: absolute; + z-index: 1; + } - @include animation(fade-in 800ms ease $transition-speed * 12); - @include animation-fill-mode(both); + .grid-row { + margin-bottom: $grid-spacing; - &.game-won { - background: rgba($tile-gold-color, .5); - color: $bright-text-color; + &:last-child { + margin-bottom: 0; } - &.game-won, &.game-over { + &:after { + content: ""; display: block; + clear: both; } } -} -.grid-container { - position: absolute; - z-index: 1; -} + .grid-cell { + width: $tile-size; + height: $tile-size; + margin-right: $grid-spacing; + float: left; -.grid-row { - margin-bottom: $grid-spacing; + border-radius: $tile-border-radius; - &:last-child { - margin-bottom: 0; - } + background: rgba($tile-color, .35); - &:after { - content: ""; - display: block; - clear: both; + &:last-child { + margin-right: 0; + } } -} -.grid-cell { - width: $tile-size; - height: $tile-size; - margin-right: $grid-spacing; - float: left; - - border-radius: $tile-border-radius; - - background: rgba($tile-color, .35); + .tile-container { + position: absolute; + z-index: 2; + } - &:last-child { - margin-right: 0; + .tile { + width: $tile-size; + height: $tile-size; + line-height: $tile-size + 10px; + + // 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)); + } + } + } } } -.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; + } + } +}