diff --git a/js/game_manager.js b/js/game_manager.js
index 4ac5d9b6742d7e897cce1a86eb5d83466c48b7a9..1880d48d09a3a67acb68939a4cfc38e0d823a297 100644
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -4,19 +4,28 @@ function GameManager(size, InputManager, Actuator) {
this.actuator = new Actuator;
this.startTiles = 2;
- this.grid = new Grid(this.size);
-
- this.score = 0;
- this.over = false;
- this.won = false;
this.inputManager.on("move", this.move.bind(this));
+ this.inputManager.on("restart", this.restart.bind(this));
this.setup();
}
+// Restart the game
+GameManager.prototype.restart = function () {
+ this.actuator.restart();
+ this.setup();
+};
+
// Set up the game
GameManager.prototype.setup = function () {
+ this.grid = new Grid(this.size);
+
+ this.score = 0;
+ this.over = false;
+ this.won = false;
+
+ // Add the initial tiles
this.addStartTiles();
// Update the actuator
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 7f47788cfbdcdbc76c69b9d465dcc380e35df989..28db764ac6278fd15c6a675dd0e0db2590d230f3 100644
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,7 +1,7 @@
function HTMLActuator() {
- this.tileContainer = document.getElementsByClassName("tile-container")[0];
- this.gameContainer = document.getElementsByClassName("game-container")[0];
- this.scoreContainer = document.getElementsByClassName("score-container")[0];
+ this.tileContainer = document.getElementsByClassName("tile-container")[0];
+ this.scoreContainer = document.getElementsByClassName("score-container")[0];
+ this.messageContainer = document.getElementsByClassName("game-message")[0];
this.score = 0;
}
@@ -27,6 +27,10 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
});
};
+HTMLActuator.prototype.restart = function () {
+ this.clearMessage();
+};
+
HTMLActuator.prototype.clearContainer = function (container) {
while (container.firstChild) {
container.removeChild(container.firstChild);
@@ -77,7 +81,7 @@ HTMLActuator.prototype.updateScore = function (score) {
this.scoreContainer.textContent = this.score;
- if (difference) {
+ if (difference > 0) {
var addition = document.createElement("div");
addition.classList.add("score-addition");
addition.textContent = "+" + difference;
@@ -87,7 +91,15 @@ HTMLActuator.prototype.updateScore = function (score) {
};
HTMLActuator.prototype.message = function (won) {
- var type = won ? "game-won" : "game-over";
- this.gameContainer.classList.add(type);
if (ga) ga("send", "event", "game", "end", type, this.score);
+
+ var type = won ? "game-won" : "game-over";
+ var message = won ? "You win!" : "Game over!"
+
+ this.messageContainer.classList.add(type);
+ this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+
+HTMLActuator.prototype.clearMessage = function () {
+ this.messageContainer.classList.remove("game-won", "game-over");
};
diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js
index 1a1851f2cc45e66e3f534b7719d516e1537b9a20..6ef774ef410deaaf86f374fe8d830b499c00c18d 100644
--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -40,4 +40,10 @@ KeyboardInputManager.prototype.listen = function () {
self.emit("move", mapped);
}
});
+
+ var retry = document.getElementsByClassName("retry-button")[0];
+ retry.addEventListener("click", function (event) {
+ event.preventDefault();
+ self.emit("restart");
+ });
};
diff --git a/style/main.css b/style/main.css
index eba4a51c5c02870be6cdd630c62d2ec0a89c3bdb..7c3ead04fd105ac126ffc4555dde390036b562f0 100644
--- a/style/main.css
+++ b/style/main.css
@@ -94,7 +94,8 @@ p {
a {
color: #776e65;
font-weight: bold;
- text-decoration: underline; }
+ text-decoration: underline;
+ cursor: pointer; }
strong.important {
text-transform: uppercase; }
@@ -143,30 +144,41 @@ hr {
width: 500px;
height: 500px;
box-sizing: border-box; }
- .game-container.game-over:after, .game-container.game-won:after {
+ .game-container .game-message {
+ display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- display: block;
background: rgba(238, 228, 218, 0.5);
- text-align: center;
- height: 500px;
- line-height: 500px;
z-index: 100;
- font-size: 60px;
- font-weight: bold;
+ 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-over:after {
- content: "Game over!"; }
- .game-container.game-won:after {
- content: "You win!";
- background: rgba(237, 194, 46, 0.5);
- color: #f9f6f2; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #a69382;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-top: 59px; }
+ .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;
diff --git a/style/main.scss b/style/main.scss
index 115460b600929acc93ef4f5dd0e6f30056caeedf..ecf9017087ec0d5ae7feadcea93178b0c6e47716 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -110,6 +110,7 @@ a {
color: $text-color;
font-weight: bold;
text-decoration: underline;
+ cursor: pointer;
}
strong {
@@ -156,35 +157,52 @@ hr {
height: $field-width;
box-sizing: border-box;
- &.game-over, &.game-won {
- &:after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- background: rgba($tile-color, .5);
- text-align: center;
- height: $field-width;
- line-height: $field-width;
- z-index: 100;
+ .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;
+ }
- @include animation(fade-in 800ms ease $transition-speed * 12);
- @include animation-fill-mode(both);
+ a {
+ display: inline-block;
+ background: darken($game-container-background, 10%);
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: $bright-text-color;
+ height: 40px;
+ line-height: 42px;
+ margin-top: 59px;
}
- }
- &.game-over:after {
- content: "Game over!";
- }
+ @include animation(fade-in 800ms ease $transition-speed * 12);
+ @include animation-fill-mode(both);
- &.game-won:after {
- content: "You win!";
- background: rgba($tile-gold-color, .5);
- color: $bright-text-color;
+ &.game-won {
+ background: rgba($tile-gold-color, .5);
+ color: $bright-text-color;
+ }
+
+ &.game-won, &.game-over {
+ display: block;
+ }
}
}