diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
index 851cb3822..5055df7da 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
@@ -309,6 +309,9 @@ body {
padding-bottom: 2px;
}
+.ui-icon-custom-play { background-image: url(images/play.png); }
+.ui-icon-custom-pause { background-image: url(images/pause.png); }
+
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/images/pause.png b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/pause.png
new file mode 100644
index 000000000..564d495ac
Binary files /dev/null and b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/pause.png differ
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/gameUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/gameUi.js
index 0b25b18c2..2a60e75d2 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/gameUi.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/gameUi.js
@@ -68,6 +68,7 @@ var GempLotrGameUI = Class.extend({
tabPane:null,
animations:null,
+ replayPlay: false,
init:function (url, replayMode) {
this.replayMode = replayMode;
@@ -115,14 +116,15 @@ var GempLotrGameUI = Class.extend({
});
replayDiv.append(slowerBut);
replayDiv.append(fasterBut);
- replayDiv.append("");
+ var replayBut = $("").button({ icons: {primary:'ui-icon-custom-play'}});
+ replayDiv.append(replayBut);
+
$("#main").append(replayDiv);
replayDiv.css({"z-index":1000});
- $("#replayButton").button();
- $("#slowerButton").css({position:"absolute", left: "0px", top: "0px", width: "25px", height: "25px", margin: "0px"});
- $("#fasterButton").css({position:"absolute", left: "25px", top: "0px", width: "25px", height: "25px", margin: "0px"});
- $("#replayButton").css({position:"absolute", left: "0px", top: "25px", width: "50px", height: "50px", margin: "0px"});
- $("#replayBut").css({position:"absolute", left: "0px", top: "25px", width: "50px", height: "50px", margin: "0px"});
+
+ $("#slowerButton").css({position:"absolute", left: "0px", top: "0px", width: "25px", height: "25px"});
+ $("#fasterButton").css({position:"absolute", left: "25px", top: "0px", width: "25px", height: "25px"});
+ $("#replayButton").css({position:"absolute", left: "0px", top: "25px", width: "50px", height: "50px"});
}
this.shadowAssignGroups = {};
@@ -921,9 +923,16 @@ var GempLotrGameUI = Class.extend({
this.replayGameEvents = root.getElementsByTagName("ge");
this.replayGameEventNextIndex = 0;
- $("label", $(".replay")).click(
- function () {
- that.playNextReplayEvent();
+ $("#replayButton").click(
+ function() {
+ if (that.replayPlay) {
+ that.replayPlay = false;
+ $("#replayButton").button("option", {primary:'ui-icon-custom-play'});
+ } else {
+ that.replayPlay = true;
+ $("#replayButton").button("option", {primary:'ui-icon-custom-pause'});
+ that.playNextReplayEvent();
+ }
});
this.playNextReplayEvent();
@@ -931,7 +940,7 @@ var GempLotrGameUI = Class.extend({
},
shouldPlay:function () {
- return $("label", $(".replay")).hasClass("ui-state-active");
+ return this.replayPlay;
},
playNextReplayEvent:function () {