intervle - commit b743d55

diff --git a/resources/css/app.css b/resources/css/app.css index 962f8f6..7f7dd3b 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -88,4 +88,9 @@ button:active { box-shadow: inset var(--box-shadow-standard); } +.hidden { + transition: 0.2s ease; + display: none; + opacity: 0; +} diff --git a/resources/css/game.css b/resources/css/game.css index 2d876a8..1155e2e 100644 --- a/resources/css/game.css +++ b/resources/css/game.css @@ -64,3 +64,9 @@ border-width: 0 0 1px 0; } +#score-display { + font-size: 24px; + font-weight: bold; + opacity: 100%; + color: #0a4f0a; +} diff --git a/resources/js/app.js b/resources/js/app.js index ac5321d..c07e274 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -64,14 +64,20 @@ document.addEventListener('DOMContentLoaded', () => { } function displayResults(results) { + let score = 0; eventsContainer.querySelectorAll('.event-container').forEach(function(eventContainer, index) { const enteredEvent = eventContainer.getAttribute('data-event'); if (results.correct_order[index] === + enteredEvent) { + score++; eventContainer.className += ' event-correct'; } else { eventContainer.className += ' event-incorrect'; } }); + + const scoreDisplay = document.getElementById('score-display') + scoreDisplay.innerHTML = ('Final Score: ' + score); + scoreDisplay.className = ''; } } }); diff --git a/resources/views/game/show.blade.php b/resources/views/game/show.blade.php index f38d741..fcd3782 100644 --- a/resources/views/game/show.blade.php +++ b/resources/views/game/show.blade.php @@ -26,6 +26,7 @@ <span class="events-info">Most recent...</span> <br> <button id="submit-order-button">Submit</button> + <span id="score-display" class="hidden"></span> </div> <hr> </div>