From 90a4cfacbb64750a6779995e91509588f78e9802 Mon Sep 17 00:00:00 2001
From: Dennis Kobert <dennis@kobert.dev>
Date: Wed, 17 Feb 2021 21:22:58 +0100
Subject: Add lobby concept

---
 dist/callback.html | 32 ++++++++++++++-----
 dist/landing.html  | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 8 deletions(-)
 create mode 100644 dist/landing.html

(limited to 'dist')

diff --git a/dist/callback.html b/dist/callback.html
index f212b5f..79ac83c 100644
--- a/dist/callback.html
+++ b/dist/callback.html
@@ -74,6 +74,7 @@
     </div>
     <div class="main">
         <h1>Spotify Intersect</h1>
+        <input type="text" id="username" placeholder="Username">
         <button id="Connect_button" onclick="connect_button()">Connect to Spotify</button>
         <button id="Load_button" onclick="load_songs()" disabled=true>Load songs to database</button>
         <p id="status"></p>
@@ -85,6 +86,11 @@
         <p id="output"></p>
     </div>
     <script>
+        const host = "http://127.0.0.1:8000";
+        const api = host + "";
+        //const host = "https://kobert.dev";
+        //const api = host + "/spotify-api";
+        let lobby = null;
         function getParameterByName(name) {
             let url = window.location.href;
             name = name.replace(/[\[\]]/g, "\\$&");
@@ -98,15 +104,27 @@
             //http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
             let token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
             sessionStorage.setItem('token', token);
+            sessionStorage.setItem('lobby', lobby);
             document.getElementById("Connect_button").disabled = true;
-            window.location = "https://kobert.dev/spotify-api/token/" + token;
+            window.location = api + "/token/" + token;
         }
         function populate_users() {
-            if (getParameterByName("code") != null) {
+            lobby = getParameterByName("lobby");
+            if (!lobby) {
+                lobby = sessionStorage.getItem('lobby');
+            }
+            let code = getParameterByName("code");
+            if (code !== null) {
                 document.getElementById("Connect_button").disabled = true;
                 document.getElementById("Load_button").disabled = false;
             }
-            fetch("https://kobert.dev/spotify-api/user")
+            if (lobby === null) {
+                document.getElementById("status").innerHTML = `Error: this is no valid lobby, please create a lobby first`;
+                document.getElementById("Connect_button").disabled = true;
+                document.getElementById("Load_button").disabled = true;
+                return;
+            }
+            fetch(api + "/user/" + lobby)
                 .then(function (response) {
                     if (!response.ok) {
                         document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
@@ -116,15 +134,13 @@
                         document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>';
                     });
                 });
-
         }
-
         function load_songs() {
             console.log("loading songs");
             document.getElementById("status").innerHTML = "Loading songs";
             document.getElementById("Load_button").disabled = true;
             let token = sessionStorage.getItem('token');
-            fetch("https://kobert.dev/spotify-api/callback/" + token + "/" + getParameterByName("code"))
+            fetch(api + `/callback/${token}/${lobby}/` + getParameterByName("code"))
                 .then(function (response) {
                     if (!response.ok) {
                         document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
@@ -133,13 +149,13 @@
                     document.getElementById("status").innerHTML = "Loaded songs";
                     populate_users();
                 });
-            //window.location = "https://kobert.dev/spotify-api/token/" + token;
+            //window.location = api + "/token/" + token;
         }
         function match_users() {
             let name1 = document.getElementById("name1").value;
             let name2 = document.getElementById("name2").value;
 
-            fetch("https://kobert.dev/spotify-api/match/" + name1 + "/" + name2)
+            fetch(api + `/match/${lobby}/${name1},${name2}`)
                 .then(function (response) {
                     if (!response.ok) {
                         document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
diff --git a/dist/landing.html b/dist/landing.html
new file mode 100644
index 0000000..2858718
--- /dev/null
+++ b/dist/landing.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body {
+            font-family: "Lato", sans-serif;
+        }
+
+        .sidenav {
+            height: 100%;
+            width: 160px;
+            position: fixed;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            background-color: #111;
+            padding-top: 20px;
+            overflow-wrap: break-word;
+        }
+        .main {
+            margin-left: 162px;
+            /* Same as the width of the sidenav */
+            font-size: 28px;
+            /* Increased text to enable scrolling */
+            padding: 0px 10px;
+        }
+
+        .out {
+            margin-left: 162px;
+            /* Same as the width of the sidenav */
+            font-size: 16px;
+            /* Increased text to enable scrolling */
+        }
+
+        @media screen and (max-height: 450px) {
+            .sidenav {
+                padding-top: 15px;
+            }
+
+            .sidenav a {
+                font-size: 18px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="sidenav">
+        <a>Public Lobbys:</a>
+        <h1 id="userlist"></h1>
+    </div>
+    <div class="main">
+        <h1>Spotify Intersect</h1>
+
+        <input type="text" id="lobby_name" placeholder="Lobby name">
+        <button id="lobby_button" onclick="lobby_button()">Create a new lobby</button>
+        <p id="status"></p>
+    </div>
+    <script>
+        //const host = "https://kobert.dev";
+        const host = "http://127.0.0.1:8000";
+        const api = host + "";
+        //const api = host + "/spotify-api";
+        function getParameterByName(name) {
+            let url = window.location.href;
+            name = name.replace(/[\[\]]/g, "\\$&");
+            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                results = regex.exec(url);
+            if (!results) return null;
+            if (!results[2]) return '';
+            return decodeURIComponent(results[2].replace(/\+/g, " "));
+        }
+        function lobby_button() {
+            let lobby_name = document.getElementById("lobby_name").value;
+            fetch(api + "/lobby/" + lobby_name, {method: 'POST'})
+                .then(function (response) {
+                    if (!response.ok) {
+                        document.getElementById("status").innerHTML = `Error occured while generating new lobby: ${response.status}`;
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    response.text().then(function (message) {
+                        window.location = host + "/callback.html?lobby=" + message; 
+                    });
+                });
+        }
+    </script>
+</body>
+
+</html>
-- 
cgit v1.3.1