diff --git a/js/application.js b/js/application.js
index 2c1108e757a0e49af7b9ee48dcc45bd8e61cb806..9e9e195e5095f41525ef48be9d831e6d76e4ef76 100644
--- a/js/application.js
+++ b/js/application.js
@@ -1,4 +1,18 @@
// Wait till the browser is ready to render the game (avoids glitches)
window.requestAnimationFrame(function () {
new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
+
+ // TODO: This code is in need of a refactor (along with the rest)
+ var storage = new LocalStorageManager;
+ var noticeClose = document.querySelector(".notice-close-button");
+ var notice = document.querySelector(".app-notice");
+ if (storage.getNoticeClosed()) {
+ notice.parentNode.removeChild(notice);
+ } else {
+ noticeClose.addEventListener("click", function () {
+ notice.parentNode.removeChild(notice);
+ storage.setNoticeClosed(true);
+ ga("send", "event", "notice", "closed");
+ });
+ }
});
diff --git a/js/local_storage_manager.js b/js/local_storage_manager.js
index 776e94b1abea8afecbe41daafbb23c8d74a0f328..9bf595c935bb031154ba509349a6eb9e5c9e19a4 100644
--- a/js/local_storage_manager.js
+++ b/js/local_storage_manager.js
@@ -21,6 +21,7 @@ window.fakeStorage = {
function LocalStorageManager() {
this.bestScoreKey = "bestScore";
this.gameStateKey = "gameState";
+ this.noticeClosedKey = "noticeClosed";
var supported = this.localStorageSupported();
this.storage = supported ? window.localStorage : window.fakeStorage;
@@ -61,3 +62,11 @@ LocalStorageManager.prototype.setGameState = function (gameState) {
LocalStorageManager.prototype.clearGameState = function () {
this.storage.removeItem(this.gameStateKey);
};
+
+LocalStorageManager.prototype.setNoticeClosed = function (noticeClosed) {
+ this.storage.setItem(this.noticeClosedKey, JSON.stringify(noticeClosed));
+};
+
+LocalStorageManager.prototype.getNoticeClosed = function () {
+ return JSON.parse(this.storage.getItem(this.noticeClosedKey) || "false");
+};
diff --git a/style/main.css b/style/main.css
index 7a2fde8a21bd75bae01d1076b83cd881557235ca..527206f9def007256467651802eb8edf66892819 100644
--- a/style/main.css
+++ b/style/main.css
@@ -919,7 +919,7 @@ hr {
opacity: 1;
top: -45px;
pointer-events: auto; }
- @media screen and (max-width: 480px) {
+ @media screen and (max-width: 520px) {
.btc-donate {
width: 120px; }
.btc-donate .address {
@@ -930,3 +930,123 @@ hr {
.btc-donate .address:after {
left: 50%;
bottom: 2px; } }
+
+@-webkit-keyframes pop-in-big {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -56px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 30px; } }
+@-moz-keyframes pop-in-big {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -56px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 30px; } }
+@keyframes pop-in-big {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -56px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 30px; } }
+@-webkit-keyframes pop-in-small {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -76px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 10px; } }
+@-moz-keyframes pop-in-small {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -76px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 10px; } }
+@keyframes pop-in-small {
+ 0% {
+ -webkit-transform: scale(0) translateZ(0);
+ -moz-transform: scale(0) translateZ(0);
+ transform: scale(0) translateZ(0);
+ opacity: 0;
+ margin-top: -76px; }
+
+ 100% {
+ -webkit-transform: scale(1) translateZ(0);
+ -moz-transform: scale(1) translateZ(0);
+ transform: scale(1) translateZ(0);
+ opacity: 1;
+ margin-top: 10px; } }
+.app-notice {
+ position: relative;
+ -webkit-animation: pop-in-big 700ms ease 2s both;
+ -moz-animation: pop-in-big 700ms ease 2s both;
+ animation: pop-in-big 700ms ease 2s both;
+ background: #edc53f;
+ color: white;
+ padding: 18px;
+ margin-top: 30px;
+ height: 56px;
+ box-sizing: border-box;
+ border-radius: 3px; }
+ .app-notice:after {
+ content: "";
+ display: block;
+ clear: both; }
+ .app-notice .notice-close-button {
+ float: right;
+ font-weight: bold;
+ cursor: pointer;
+ margin-left: 10px;
+ opacity: 0.7; }
+ .app-notice p {
+ margin-bottom: 0; }
+ .app-notice, .app-notice p {
+ line-height: 20px; }
+ .app-notice a {
+ color: white; }
+ @media screen and (max-width: 520px) {
+ .app-notice {
+ -webkit-animation: pop-in-small 700ms ease 2s both;
+ -moz-animation: pop-in-small 700ms ease 2s both;
+ animation: pop-in-small 700ms ease 2s both;
+ margin-top: 10px;
+ height: 76px; } }
diff --git a/style/main.scss b/style/main.scss
index 40ddf1c1a6b7f9f339d9174bfc4df620e097333d..25183dd9a5ade45322d73d4a18f03fc81984a28c 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -752,7 +752,7 @@ hr {
}
// Styles for small screens
- @include smaller(480px) {
+ @include smaller($mobile-threshold) {
width: 120px;
.address {
@@ -771,3 +771,76 @@ hr {
}
}
}
+
+@include keyframes(pop-in-big) {
+ 0% {
+ @include transform(scale(0) translateZ(0));
+ opacity: 0;
+ margin-top: -56px;
+ }
+
+ 100% {
+ @include transform(scale(1) translateZ(0));
+ opacity: 1;
+ margin-top: 30px;
+ }
+}
+
+@include keyframes(pop-in-small) {
+ 0% {
+ @include transform(scale(0) translateZ(0));
+ opacity: 0;
+ margin-top: -76px;
+ }
+
+ 100% {
+ @include transform(scale(1) translateZ(0));
+ opacity: 1;
+ margin-top: 10px;
+ }
+}
+
+.app-notice {
+ position: relative;
+ @include animation(pop-in-big 700ms ease 2s both);
+ background: #edc53f;
+ color: white;
+ padding: 18px;
+ margin-top: 30px;
+ height: 56px;
+ box-sizing: border-box;
+ border-radius: $tile-border-radius;
+
+ &:after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+
+ .notice-close-button {
+ float: right;
+ font-weight: bold;
+ cursor: pointer;
+ margin-left: 10px;
+ opacity: 0.7;
+ }
+
+ p {
+ margin-bottom: 0;
+ // float: left;
+ }
+
+ &, p {
+ line-height: 20px;
+ }
+
+ a {
+ color: white;
+ }
+
+ @include smaller($mobile-threshold) {
+ @include animation(pop-in-small 700ms ease 2s both);
+ margin-top: 10px;
+ height: 76px;
+ }
+}