intervle - commit 8f00ca2

diff --git a/resources/css/app.css b/resources/css/app.css index 32a8697..295b9b3 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -28,8 +28,8 @@ --border-event-card-idle: 1px solid #969696; --border-event-card-hover: 1px solid #797979; --border-event-card-click: 1px solid #575757; - --border-event-card-correct: 1px solid #83d287; - --border-event-card-incorrect: 1px solid #d78486; + --border-event-card-correct: 1px solid #509d54; + --border-event-card-incorrect: 1px solid #a64f51; } html { diff --git a/resources/css/game.css b/resources/css/game.css index d349590..3ea3338 100644 --- a/resources/css/game.css +++ b/resources/css/game.css @@ -26,3 +26,12 @@ opacity: 40%; scale: 110%; } + +.event-correct { + background: var(--background-event-card-correct); + outline: var(--border-event-card-correct); +} +.event-incorrect { + background: var(--background-event-card-incorrect); + outline: var(--border-event-card-incorrect); +} diff --git a/resources/js/app.js b/resources/js/app.js index 934b8f2..2447dcd 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -5,12 +5,11 @@ document.addEventListener('DOMContentLoaded', () => { const currentDate = window.location.pathname; const eventsContainer = document.getElementById('events-container'); - if (eventsContainer) { - const eventContainers = eventsContainer.querySelectorAll('.event-container'); - eventContainers.forEach(eventContainer => { - // will add dragging logic later - }); - } + const eventContainers = eventsContainer.querySelectorAll('.event-container'); + + eventContainers.forEach(eventContainer => { + // will add dragging logic later + }); const submitOrderBtn = document.getElementById('submit-order-button'); @@ -30,11 +29,22 @@ document.addEventListener('DOMContentLoaded', () => { }) .then(res => res.json()) .then(data => { - console.log(data); + displayResults(data) }); submitOrderBtn.remove(); }); } + + function displayResults(results) { + eventsContainer.querySelectorAll('.event-container').forEach(function(eventContainer, index) { + const enteredEvent = eventContainer.getAttribute('data-event'); + if (results.correct_order[index] === + enteredEvent) { + eventContainer.className += ' event-correct'; + } else { + eventContainer.className += ' event-incorrect'; + } + }); + } } });