diff --git a/images/chevron-left.svg b/images/chevron-left.svg new file mode 100644 index 0000000..5bcc1bb --- /dev/null +++ b/images/chevron-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/chevron-right.svg b/images/chevron-right.svg new file mode 100644 index 0000000..ab39af8 --- /dev/null +++ b/images/chevron-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/pause.svg b/images/pause.svg new file mode 100644 index 0000000..7bfde2c --- /dev/null +++ b/images/pause.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/play-fill.svg b/images/play-fill.svg new file mode 100644 index 0000000..e538083 --- /dev/null +++ b/images/play-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/js/game.js b/js/game.js index cf02246..383eef3 100644 --- a/js/game.js +++ b/js/game.js @@ -5,7 +5,7 @@ *****************************************************************************/ /* global connectToPlayer, endTimer, playAll, stopClip */ -/* global playClipButtons, startTimerButton, helpButton, guessInput, giveUpButton, remakeButton */ +/* global playClipButtons, startTimerButton, pauseTimerButton, helpButton, guessInput, giveUpButton, remakeButton */ /* global revealSong, revealArtist, resetStartModal, isArtistMode, fillAllBars */ /* global unguessedClips, unguessedArtistClips, songClips */ @@ -132,6 +132,12 @@ async function prepareGame () { startTimerButton.disabled = false; + startTimerButton.style.display = ''; + pauseTimerButton.style.display = 'none'; + + giveUpButton.style.display = ''; + remakeButton.style.display = 'none'; + }); } diff --git a/js/guesser.js b/js/guesser.js index 7e6b4b4..9845a19 100644 --- a/js/guesser.js +++ b/js/guesser.js @@ -6,6 +6,7 @@ /* global songClips */ /* global endGame, updateScore, isArtistMode, updateProgressBarUI */ +/* global remakeButton */ const MAX_DISTANCE = 1; @@ -282,6 +283,9 @@ giveUpButton.addEventListener('click', () => { console.log('Giving up'); + giveUpButton.style.display = 'none'; + remakeButton.style.display = ''; + endGame(); }); diff --git a/js/progressBar.js b/js/progressBar.js index 923ca89..9373d5a 100644 --- a/js/progressBar.js +++ b/js/progressBar.js @@ -151,7 +151,7 @@ function fillAllBars () { for (let i = 0; i < progressBars.length; i++) { - progressBars[i].style.display = ''; + progressBars[i].classList.remove('progress-bar-animated'); progressBars[i].style.width = '100%'; colourProgressBar(i); diff --git a/js/timer.js b/js/timer.js index 61d99f8..2633db7 100644 --- a/js/timer.js +++ b/js/timer.js @@ -86,8 +86,8 @@ function endTimer () { clearInterval(timerInterval); - pauseTimerButton.disabled = true; resumeTimerButton.disabled = true; + pauseTimerButton.disabled = true; } @@ -100,9 +100,12 @@ function startTimer () { isPaused = false; - pauseTimerButton.disabled = false; resumeTimerButton.disabled = false; startTimerButton.disabled = true; + pauseTimerButton.disabled = false; + + startTimerButton.style.display = 'none'; + pauseTimerButton.style.display = ''; startGame(); diff --git a/play.css b/play.css index ff9b262..0d55ba1 100644 --- a/play.css +++ b/play.css @@ -14,10 +14,6 @@ margin-left: 5px; } -#stop-button, #resume-button { - width: 82px; -} - .start-modal-btn { width: 150px; } @@ -50,3 +46,14 @@ .progress-bar.bg-unguessed { background-color: #d23939 !important; } + +.button-icon { + width: 15px; + height: 15px; + vertical-align: initial; +} + +.playback-button { + width: 40px; + height: 35px; +} diff --git a/play.html b/play.html index f4e5722..f5b48c0 100644 --- a/play.html +++ b/play.html @@ -172,31 +172,42 @@

Paused

00:00 - - + + - + + -



- - - Playing: - / - - - + + + + + + + +


- Score: -/- + Song Score: -/-