intervle - commit ebd4460

diff --git a/resources/css/app.css b/resources/css/app.css index 7f7dd3b..657c006 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -69,7 +69,7 @@ hr { margin: auto; } -button { +button, select { margin: 16px; padding: 4px 32px; background: var(--background-event-card-idle); diff --git a/resources/js/app.js b/resources/js/app.js index 8e72b1d..8c031c9 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,5 +1,22 @@ import './bootstrap'; +function initialiseDifficultySelector() { + const selector = document.getElementById('difficulty-selector'); + const options = selector.querySelectorAll('option'); + const currentGame = (window.location.pathname).split('/'); + const difficulty = currentGame[1]; + const date = currentGame[2]; + + options.forEach(option => { + if (option.getAttribute('value') === difficulty) { + option.selected = true; + } + }); + + selector.addEventListener('change', () => { + window.location = '/' + selector.value + '/' + date; + }); +} document.addEventListener('DOMContentLoaded', () => { if (/^\/(easy|medium|hard)\/(today|\d{8})\/?$/.test(window.location.pathname)) { @@ -8,6 +25,8 @@ document.addEventListener('DOMContentLoaded', () => { const eventsContainer = document.getElementById('events-container'); const eventContainers = eventsContainer.querySelectorAll('.event-container'); + initialiseDifficultySelector(); + function reorderItem(item, direction) { const parent = item.parentNode; diff --git a/resources/views/game/show.blade.php b/resources/views/game/show.blade.php index fcd3782..116bbb8 100644 --- a/resources/views/game/show.blade.php +++ b/resources/views/game/show.blade.php @@ -5,7 +5,13 @@ @section('content') <div class="page-section"> - <hr> + + <select id="difficulty-selector"> + <option value="easy">Easy</option> + <option value="medium">Medium</option> + <option value="hard">Hard</option> + </select> + <div id="game-section"> <span class="events-info">Earliest...</span> <div id="events-container"> @@ -28,7 +34,7 @@ <button id="submit-order-button">Submit</button> <span id="score-display" class="hidden"></span> </div> - <hr> + </div> @endsection