Add start menu

pcprince · Aug 8, 2024 · 88a90fa · 88a90fa
1 parent 97b3cc4
commit 88a90fa
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 15 deletions.
diff --git a/play.css b/play.css
@@ -12,6 +12,6 @@
     width: 82px;
 }
 
-#prepare-button {
-    width: 125px;
+.start-modal-btn {
+    width: 150px;
 }
diff --git a/play.html b/play.html
@@ -9,21 +9,78 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
-    <!-- TODO: Add modal with playlist URL input/selection https://getbootstrap.com/docs/5.3/components/modal/ -->
     <!-- Playlist selection modal -->
-    <div class="modal fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal modal-lg fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
-                <div class="modal-content">
+                <!-- Modal content home -->
+                <div class="modal-content" id="start-modal-content-home">
                     <div class="modal-header">
                         <h1 class="modal-title fs-5" id="staticBackdropLabel">Spotify Quiz</h1>
                     </div>
                     <div class="modal-body">
-                        Select a playlist to draw from.
+                        This is a music quiz app by Peter.
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-primary" id="prepare-button" disabled>Prepare Quiz</button>
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-4" style="text-align: center;">
+                                    <button type="button" class="btn btn-primary start-modal-btn" id="playlist-choose-button" disabled>Choose Playlist</button>
+                                </div>
+                                <div class="col-4" style="text-align: center;">
+                                    <button type="button" class="btn btn-success start-modal-btn" id="quickplay-button" disabled>Quickplay</button>
+                                </div>
+                                <div class="col-4" style="text-align: center;">
+                                    <button type="button" class="btn btn-primary start-modal-btn" id="playlist-url-button" disabled>Enter Playlist URL</button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
+
+                <!-- Modal content choose -->
+                <div class="modal-content" id="start-modal-content-choose" style="display: none;">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="staticBackdropLabel">Spotify Quiz</h1>
+                    </div>
+                    <div class="modal-body">
+                        Choose a playlist
+                    </div>
+                    <div class="modal-footer">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-6" style="text-align: center;">
+                                    <button type="button" class="btn btn-secondary start-modal-btn" id="cancel-playlist-choose-button">Cancel</button>
+                                </div>
+                                <div class="col-6" style="text-align: center;">
+                                    <button type="button" class="btn btn-success start-modal-btn" id="play-playlist-choose-button">Start</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Modal content URL -->
+                <div class="modal-content" id="start-modal-content-url" style="display: none;">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="staticBackdropLabel">Spotify Quiz</h1>
+                    </div>
+                    <div class="modal-body">
+                        Enter a URL
+                    </div>
+                    <div class="modal-footer">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-6" style="text-align: center;">
+                                    <button type="button" class="btn btn-secondary start-modal-btn" id="cancel-playlist-url-button">Cancel</button>
+                                </div>
+                                <div class="col-6" style="text-align: center;">
+                                    <button type="button" class="btn btn-primary start-modal-btn" id="play-playlist-url-button">Start</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
     </div>
 

diff --git a/play.js b/play.js
@@ -13,14 +13,28 @@ const startModal = new bootstrap.Modal(document.getElementById('start-modal'), {
     keyboard: false
 });
 
-const prepareButton = document.getElementById('prepare-button');
+const playlistChooseButton = document.getElementById('playlist-choose-button');
+const quickplayButton = document.getElementById('quickplay-button');
+const playlistURLButton = document.getElementById('playlist-url-button');
 
-prepareButton.addEventListener('click', () => {
+const startModalContentHome = document.getElementById('start-modal-content-home');
+const startModalContentChoose = document.getElementById('start-modal-content-choose');
+const startModalContentUrl = document.getElementById('start-modal-content-url');
+
+const cancelPlaylistChooseButton = document.getElementById('cancel-playlist-choose-button');
+const playPlaylistChooseButton = document.getElementById('play-playlist-choose-button');
+
+const cancelPlaylistUrlButton = document.getElementById('cancel-playlist-url-button');
+const playPlaylistUrlButton = document.getElementById('play-playlist-url-button');
+
+quickplayButton.addEventListener('click', () => {
 
     if (spotifyReady) {
 
-        prepareButton.disabled = true;
-        prepareButton.innerText = 'Preparing...';
+        playlistChooseButton.disabled = true;
+        quickplayButton.disabled = true;
+        playlistURLButton.disabled = true;
+        quickplayButton.innerText = 'Preparing...';
 
         // TODO: Read from UI or use a default one
         const playlistId = '5Rrf7mqN8uus2AaQQQNdc1';
@@ -35,10 +49,83 @@ prepareButton.addEventListener('click', () => {
 
 });
 
+playPlaylistChooseButton.addEventListener('click', () => {
+
+    // if (spotifyReady) {
+
+    //     choosePlaylistButton.disabled = true;
+    //     quickplayButton.disabled = true;
+    //     playlistURLButton.disabled = true;
+    //     quickplayButton.innerText = 'Preparing...';
+
+    //     const playlistId = '5Rrf7mqN8uus2AaQQQNdc1';
+
+    //     prepareGame(playlistId, () => {
+
+    //         startModal.hide();
+
+    //     });
+
+    // }
+
+});
+
+playPlaylistUrlButton.addEventListener('click', () => {
+
+    // if (spotifyReady) {
+
+    //     choosePlaylistButton.disabled = true;
+    //     quickplayButton.disabled = true;
+    //     playlistURLButton.disabled = true;
+    //     quickplayButton.innerText = 'Preparing...';
+
+    //     const playlistId = '5Rrf7mqN8uus2AaQQQNdc1';
+
+    //     prepareGame(playlistId, () => {
+
+    //         startModal.hide();
+
+    //     });
+
+    // }
+
+});
+
+function showStartModalHome () {
+
+    startModalContentHome.style.display = '';
+    startModalContentChoose.style.display = 'none';
+    startModalContentUrl.style.display = 'none';
+
+}
+
+function showStartModalChoose () {
+
+    startModalContentHome.style.display = 'none';
+    startModalContentChoose.style.display = '';
+    startModalContentUrl.style.display = 'none';
+
+}
+
+function showStartModalUrl () {
+
+    startModalContentHome.style.display = 'none';
+    startModalContentChoose.style.display = 'none';
+    startModalContentUrl.style.display = '';
+
+}
+
+playlistChooseButton.addEventListener('click', showStartModalChoose);
+playlistURLButton.addEventListener('click', showStartModalUrl);
+
+cancelPlaylistChooseButton.addEventListener('click', showStartModalHome);
+cancelPlaylistUrlButton.addEventListener('click', showStartModalHome);
+
 function enablePrepareUI() {
 
-    // TODO: Change this to include all UI in modal
-    prepareButton.disabled = false;
+    playlistChooseButton.disabled = false;
+    quickplayButton.disabled = false;
+    playlistURLButton.disabled = false;
 
 }
 
@@ -58,10 +145,10 @@ window.onSpotifyWebPlaybackSDKReady = authorise;
 // TODO: Combine multiple playlists
 // TODO: Load sporacle quizzes
 
-// TODO: Help button which reselects clip and adds 5 seconds to timer
-
 // TODO: Table
 // TODO: Interface
 
 // TODO: Artist score/custom scoring
 // TODO: Album mode
+
+// TODO: "Guessed at x:xx"