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 () {