Skip to content

2048
2048

黛琳ghz / 2048
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
2048
2048
提交 1ca07d76 编写于 作者: G Gabriele Cirulli
浏览文件
操作

add email form to game over screen

上级 26e2e0d2
隐藏空白更改
内联 并排
Showing with 393 addition and 164 deletion
cache.appcache
浏览文件 @ 1ca07d76
...@@ -3,7 +3,7 @@ CACHE MANIFEST ...@@ -3,7 +3,7 @@ CACHE MANIFEST
# Adds the ability to play the game online. # Adds the ability to play the game online.
# The following comment needs to be updated whenever a change is made. # The following comment needs to be updated whenever a change is made.
# Run `rake appcache:update` to do so # Run `rake appcache:update` to do so
# Updated: 2014-03-23T20:22:44+01:00 # Updated: 2014-03-24T19:07:26+01:00
# Main page # Main page
index.html index.html
......
index.html
浏览文件 @ 1ca07d76
...@@ -41,6 +41,21 @@ ...@@ -41,6 +41,21 @@
<a class="keep-playing-button">Keep going</a> <a class="keep-playing-button">Keep going</a>
<a class="retry-button">Try again</a> <a class="retry-button">Try again</a>
<div class="score-sharing"></div> <div class="score-sharing"></div>
<div class="mailing-list">
<!-- MailChimp Signup Form -->
<form action="http://gabrielecirulli.us8.list-manage.com/subscribe/post?u=991201206817cfb4e4247ed6c&amp;id=7928ea817b" method="post" name="mc-embedded-subscribe-form" class="mailing-list-form" target="_blank">
<strong>Get email updates from Gabriele</strong>
<input type="email" value="" name="EMAIL" class="mailing-list-email-field" placeholder="Your email address" spellcheck="false">
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -9999px;">
<input type="text" name="b_991201206817cfb4e4247ed6c_7928ea817b" value="">
</div>
<input type="submit" value="Go" name="subscribe" class="mailing-list-subscribe-button">
</form>
</div>
</div> </div>
</div> </div>
......
js/keyboard_input_manager.js
浏览文件 @ 1ca07d76
...@@ -55,6 +55,9 @@ KeyboardInputManager.prototype.listen = function () { ...@@ -55,6 +55,9 @@ KeyboardInputManager.prototype.listen = function () {
event.shiftKey; event.shiftKey;
var mapped = map[event.which]; var mapped = map[event.which];
// Ignore the event if it's happening in a text field
if (self.targetIsInput(event)) return;
if (!modifiers) { if (!modifiers) {
if (mapped !== undefined) { if (mapped !== undefined) {
event.preventDefault(); event.preventDefault();
...@@ -79,8 +82,9 @@ KeyboardInputManager.prototype.listen = function () { ...@@ -79,8 +82,9 @@ KeyboardInputManager.prototype.listen = function () {
gameContainer.addEventListener(this.eventTouchstart, function (event) { gameContainer.addEventListener(this.eventTouchstart, function (event) {
if ((!window.navigator.msPointerEnabled && event.touches.length > 1) || if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
event.targetTouches > 1) { event.targetTouches > 1 ||
return; // Ignore if touching with more than 1 finger self.targetIsInput(event)) {
return; // Ignore if touching with more than 1 finger or touching input
} }
if (window.navigator.msPointerEnabled) { if (window.navigator.msPointerEnabled) {
...@@ -100,8 +104,9 @@ KeyboardInputManager.prototype.listen = function () { ...@@ -100,8 +104,9 @@ KeyboardInputManager.prototype.listen = function () {
gameContainer.addEventListener(this.eventTouchend, function (event) { gameContainer.addEventListener(this.eventTouchend, function (event) {
if ((!window.navigator.msPointerEnabled && event.touches.length > 0) || if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
event.targetTouches > 0) { event.targetTouches > 0 ||
return; // Ignore if still touching with one or more fingers self.targetIsInput(event)) {
return; // Ignore if still touching with one or more fingers or input
} }
var touchEndClientX, touchEndClientY; var touchEndClientX, touchEndClientY;
...@@ -142,3 +147,7 @@ KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) { ...@@ -142,3 +147,7 @@ KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) {
button.addEventListener("click", fn.bind(this)); button.addEventListener("click", fn.bind(this));
button.addEventListener(this.eventTouchend, fn.bind(this)); button.addEventListener(this.eventTouchend, fn.bind(this));
}; };
KeyboardInputManager.prototype.targetIsInput = function (event) {
return event.target.tagName.toLowerCase() === "input";
};
style/main.css
浏览文件 @ 1ca07d76
...@@ -10,6 +10,38 @@ html, body { ...@@ -10,6 +10,38 @@ html, body {
body { body {
margin: 80px 0; } margin: 80px 0; }
input {
display: inline-block;
background: #8f7a66;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
cursor: pointer;
font: inherit;
border: none;
outline: none;
box-sizing: border-box;
font-weight: bold;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
input[type="text"], input[type="email"] {
cursor: auto;
background: #fcfbf9;
font-weight: normal;
color: #776e65;
padding: 0 15px; }
input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder {
color: #9d948c; }
input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder {
color: #9d948c; }
input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder {
color: #9d948c; }
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
...@@ -137,6 +169,24 @@ hr { ...@@ -137,6 +169,24 @@ hr {
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-webkit-keyframes slide-up {
0% {
margin-top: 32%; }
100% {
margin-top: 20%; } }
@-moz-keyframes slide-up {
0% {
margin-top: 32%; }
100% {
margin-top: 20%; } }
@keyframes slide-up {
0% {
margin-top: 32%; }
100% {
margin-top: 20%; } }
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
...@@ -156,54 +206,79 @@ hr { ...@@ -156,54 +206,79 @@ hr {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message {
display: none; .game-message {
position: absolute; display: none;
top: 0; position: absolute;
right: 0; top: 0;
bottom: 0; right: 0;
left: 0; bottom: 0;
background: rgba(238, 228, 218, 0.5); left: 0;
z-index: 100; background: rgba(238, 228, 218, 0.73);
text-align: center; z-index: 100;
-webkit-animation: fade-in 800ms ease 1200ms; padding-top: 40px;
-moz-animation: fade-in 800ms ease 1200ms; text-align: center;
animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -moz-animation: fade-in 800ms ease 1200ms;
-moz-animation-fill-mode: both; animation: fade-in 800ms ease 1200ms;
animation-fill-mode: both; } -webkit-animation-fill-mode: both;
.game-container .game-message p { -moz-animation-fill-mode: both;
font-size: 60px; animation-fill-mode: both; }
font-weight: bold; .game-message p {
height: 60px; font-size: 60px;
line-height: 60px; font-weight: bold;
margin-top: 222px; } height: 60px;
.game-container .game-message .lower { line-height: 60px;
margin-top: 222px; }
.game-message .lower {
display: block;
margin-top: 29px; }
.game-message .mailing-list {
margin-top: 52px; }
.game-message .mailing-list strong {
display: block; display: block;
margin-top: 59px; } margin-bottom: 10px; }
.game-container .game-message a { .game-message .mailing-list .mailing-list-email-field {
display: inline-block; width: 230px;
background: #8f7a66; margin-right: 5px; }
border-radius: 3px; .game-message a {
padding: 0 20px; display: inline-block;
text-decoration: none; background: #8f7a66;
color: #f9f6f2; border-radius: 3px;
height: 40px; padding: 0 20px;
line-height: 42px; text-decoration: none;
margin-left: 9px; } color: #f9f6f2;
.game-container .game-message a.keep-playing-button { height: 40px;
display: none; } line-height: 42px;
.game-container .game-message .score-sharing { cursor: pointer;
display: inline-block; margin-left: 9px; }
vertical-align: middle; .game-message a.keep-playing-button {
margin-left: 10px; } display: none; }
.game-container .game-message.game-won { .game-message .score-sharing {
background: rgba(237, 194, 46, 0.5); display: inline-block;
color: #f9f6f2; } vertical-align: middle;
.game-container .game-message.game-won a.keep-playing-button { margin-left: 10px; }
display: inline-block; } .game-message.game-won {
.game-container .game-message.game-won, .game-container .game-message.game-over { background: rgba(237, 194, 46, 0.5);
display: block; } color: #f9f6f2; }
.game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-message.game-won, .game-message.game-over {
display: block; }
.game-message.game-won p, .game-message.game-over p {
-webkit-animation: slide-up 1.5s ease-in-out 2500ms;
-moz-animation: slide-up 1.5s ease-in-out 2500ms;
animation: slide-up 1.5s ease-in-out 2500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
-webkit-animation: fade-in 1.5s ease-in-out 2500ms;
-moz-animation: fade-in 1.5s ease-in-out 2500ms;
animation: fade-in 1.5s ease-in-out 2500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.grid-container { .grid-container {
position: absolute; position: absolute;
...@@ -499,6 +574,7 @@ hr { ...@@ -499,6 +574,7 @@ hr {
color: #f9f6f2; color: #f9f6f2;
height: 40px; height: 40px;
line-height: 42px; line-height: 42px;
cursor: pointer;
display: block; display: block;
text-align: center; text-align: center;
float: right; } float: right; }
...@@ -569,54 +645,79 @@ hr { ...@@ -569,54 +645,79 @@ hr {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.game-container .game-message {
display: none; .game-message {
position: absolute; display: none;
top: 0; position: absolute;
right: 0; top: 0;
bottom: 0; right: 0;
left: 0; bottom: 0;
background: rgba(238, 228, 218, 0.5); left: 0;
z-index: 100; background: rgba(238, 228, 218, 0.73);
text-align: center; z-index: 100;
-webkit-animation: fade-in 800ms ease 1200ms; padding-top: 40px;
-moz-animation: fade-in 800ms ease 1200ms; text-align: center;
animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -moz-animation: fade-in 800ms ease 1200ms;
-moz-animation-fill-mode: both; animation: fade-in 800ms ease 1200ms;
animation-fill-mode: both; } -webkit-animation-fill-mode: both;
.game-container .game-message p { -moz-animation-fill-mode: both;
font-size: 60px; animation-fill-mode: both; }
font-weight: bold; .game-message p {
height: 60px; font-size: 60px;
line-height: 60px; font-weight: bold;
margin-top: 222px; } height: 60px;
.game-container .game-message .lower { line-height: 60px;
margin-top: 222px; }
.game-message .lower {
display: block;
margin-top: 29px; }
.game-message .mailing-list {
margin-top: 52px; }
.game-message .mailing-list strong {
display: block; display: block;
margin-top: 59px; } margin-bottom: 10px; }
.game-container .game-message a { .game-message .mailing-list .mailing-list-email-field {
display: inline-block; width: 230px;
background: #8f7a66; margin-right: 5px; }
border-radius: 3px; .game-message a {
padding: 0 20px; display: inline-block;
text-decoration: none; background: #8f7a66;
color: #f9f6f2; border-radius: 3px;
height: 40px; padding: 0 20px;
line-height: 42px; text-decoration: none;
margin-left: 9px; } color: #f9f6f2;
.game-container .game-message a.keep-playing-button { height: 40px;
display: none; } line-height: 42px;
.game-container .game-message .score-sharing { cursor: pointer;
display: inline-block; margin-left: 9px; }
vertical-align: middle; .game-message a.keep-playing-button {
margin-left: 10px; } display: none; }
.game-container .game-message.game-won { .game-message .score-sharing {
background: rgba(237, 194, 46, 0.5); display: inline-block;
color: #f9f6f2; } vertical-align: middle;
.game-container .game-message.game-won a.keep-playing-button { margin-left: 10px; }
display: inline-block; } .game-message.game-won {
.game-container .game-message.game-won, .game-container .game-message.game-over { background: rgba(237, 194, 46, 0.5);
display: block; } color: #f9f6f2; }
.game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-message.game-won, .game-message.game-over {
display: block; }
.game-message.game-won p, .game-message.game-over p {
-webkit-animation: slide-up 1.5s ease-in-out 2500ms;
-moz-animation: slide-up 1.5s ease-in-out 2500ms;
animation: slide-up 1.5s ease-in-out 2500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
-webkit-animation: fade-in 1.5s ease-in-out 2500ms;
-moz-animation: fade-in 1.5s ease-in-out 2500ms;
animation: fade-in 1.5s ease-in-out 2500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.grid-container { .grid-container {
position: absolute; position: absolute;
...@@ -717,13 +818,24 @@ hr { ...@@ -717,13 +818,24 @@ hr {
.tile .tile-inner { .tile .tile-inner {
font-size: 35px; } font-size: 35px; }
.game-message p { .game-message {
font-size: 30px !important; padding-top: 0; }
height: 30px !important; .game-message p {
line-height: 30px !important; font-size: 30px !important;
margin-top: 90px !important; } height: 30px !important;
.game-message .lower { line-height: 30px !important;
margin-top: 30px !important; } margin-top: 32% !important;
margin-bottom: 0 !important; }
.game-message .lower {
margin-top: 10px !important; }
.game-message.game-won .score-sharing {
margin-top: 10px; }
.game-message.game-over .mailing-list {
margin-top: 25px; }
.game-message .mailing-list {
margin-top: 10px; }
.game-message .mailing-list .mailing-list-email-field {
width: 180px; }
.sharing > iframe, .sharing > span, .sharing > form { .sharing > iframe, .sharing > span, .sharing > form {
display: block; display: block;
...@@ -736,7 +848,6 @@ hr { ...@@ -736,7 +848,6 @@ hr {
border: none; border: none;
font: inherit; font: inherit;
color: inherit; color: inherit;
cursor: pointer;
display: inline-block; display: inline-block;
background: #8f7a66; background: #8f7a66;
border-radius: 3px; border-radius: 3px;
...@@ -744,7 +855,8 @@ hr { ...@@ -744,7 +855,8 @@ hr {
text-decoration: none; text-decoration: none;
color: #f9f6f2; color: #f9f6f2;
height: 40px; height: 40px;
line-height: 42px; } line-height: 42px;
cursor: pointer; }
.pp-donate button img { .pp-donate button img {
vertical-align: -4px; vertical-align: -4px;
margin-right: 8px; } margin-right: 8px; }
......
style/main.scss
浏览文件 @ 1ca07d76
...@@ -35,6 +35,56 @@ body { ...@@ -35,6 +35,56 @@ body {
margin: 80px 0; margin: 80px 0;
} }
// 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;
cursor: pointer;
}
input {
@include button;
font: inherit;
border: none;
outline: none;
box-sizing: border-box;
font-weight: bold;
margin: 0;
@include appearance(none);
&[type="text"], &[type="email"] {
cursor: auto;
background: lighten($tile-color, 9%);
font-weight: normal;
color: $text-color;
padding: 0 15px;
@mixin placeholder {
color: lighten($text-color, 15%);
}
// Included separately so that browsers don't refuse mixed rules
&::-webkit-input-placeholder {
@include placeholder;
}
&::-moz-placeholder {
@include placeholder;
}
&:-ms-input-placeholder {
@include placeholder;
}
}
}
.heading { .heading {
@include clearfix; @include clearfix;
} }
...@@ -155,16 +205,16 @@ hr { ...@@ -155,16 +205,16 @@ hr {
} }
} }
// Styles for buttons @include keyframes(slide-up) {
@mixin button { 0% {
display: inline-block; margin-top: 32%;
background: darken($game-container-background, 20%); // margin-top: 222px;
border-radius: 3px; }
padding: 0 20px;
text-decoration: none; 100% {
color: $bright-text-color; margin-top: 20%;
height: 40px; // margin-top: 150px;
line-height: 42px; }
} }
// Game field mixin used to render CSS at different width // Game field mixin used to render CSS at different width
...@@ -192,65 +242,91 @@ hr { ...@@ -192,65 +242,91 @@ hr {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
}
.game-message { .game-message {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba($tile-color, .5); background: rgba($tile-color, .73);
z-index: 100; z-index: 100;
text-align: center; padding-top: 40px; // Pushes content down in desktop version (removed on mobile)
p { text-align: center;
font-size: 60px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px;
// height: $field-width;
// line-height: $field-width;
}
.lower { 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: 29px;
}
.mailing-list {
margin-top: 52px;
strong {
display: block; display: block;
margin-top: 59px; margin-bottom: 10px;
} }
a { .mailing-list-email-field {
@include button; width: 230px;
margin-left: 9px; margin-right: 5px;
// margin-top: 59px; }
}
a {
@include button;
margin-left: 9px;
// margin-top: 59px;
&.keep-playing-button { &.keep-playing-button {
display: none; display: none;
}
} }
}
.score-sharing {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
@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;
.score-sharing { a.keep-playing-button {
display: inline-block; display: inline-block;
vertical-align: middle;
margin-left: 10px;
} }
}
@include animation(fade-in 800ms ease $transition-speed * 12); &.game-won, &.game-over {
@include animation-fill-mode(both); display: block;
&.game-won {
background: rgba($tile-gold-color, .5);
color: $bright-text-color;
a.keep-playing-button { p {
display: inline-block; @include animation(slide-up 1.5s ease-in-out $transition-speed * 25);
} @include animation-fill-mode(both);
} }
&.game-won, &.game-over { .mailing-list {
display: block; @include animation(fade-in 1.5s ease-in-out $transition-speed * 25);
@include animation-fill-mode(both);
} }
} }
} }
...@@ -551,15 +627,34 @@ hr { ...@@ -551,15 +627,34 @@ hr {
} }
.game-message { .game-message {
padding-top: 0;
p { p {
font-size: 30px !important; font-size: 30px !important;
height: 30px !important; height: 30px !important;
line-height: 30px !important; line-height: 30px !important;
margin-top: 90px !important; margin-top: 32% !important;
margin-bottom: 0 !important;
} }
.lower { .lower {
margin-top: 30px !important; margin-top: 10px !important;
}
&.game-won .score-sharing {
margin-top: 10px;
}
&.game-over .mailing-list {
margin-top: 25px;
}
.mailing-list {
margin-top: 10px;
.mailing-list-email-field {
width: 180px;
}
} }
} }
...@@ -579,7 +674,6 @@ hr { ...@@ -579,7 +674,6 @@ hr {
border: none; border: none;
font: inherit; font: inherit;
color: inherit; color: inherit;
cursor: pointer;
@include button; @include button;
img { img {
...@@ -595,7 +689,6 @@ hr { ...@@ -595,7 +689,6 @@ hr {
position: relative; position: relative;
margin-left: 10px; margin-left: 10px;
@include button; @include button;
cursor: pointer;
img { img {
vertical-align: -4px; vertical-align: -4px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或