change footer

Author: komacat

src/lib/utils.ts

@@ -19,8 +19,6 @@ export function filterCharts(charts: ChartDetails[], stepstype: string): ChartDe
  * @param query
  */
 export function filterSongs(packDict: { [key: string]: PackDetails }, query: string, filters: { [key: string]: string }) {
-    console.log("packdict: ", packDict);
-    console.log(filters);
     let filteredDict: { [key: string]: { name: string; banner: string; songs: { [key: string]: SongDetails } } } = {};
     for (const [packName, packDetails] of Object.entries(packDict)) {
         let filteredSongs: { [key: string]: SongDetails } = {};

src/routes/footer.svelte

@@ -24,7 +24,7 @@
 	});
 </script>
 
-<div id="footer" class="w-screen bg-black p-4 text-white">
+<div id="footer" class="w-screen bg-black p-4 text-white text-sm">
 	<div
 		class="flex flex-col-reverse md:flex-row sm:11/12 md:10/12 max-w-5xl m-auto justify-between items-center"
 	>

src/routes/songlist/List.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import type { PackDetails, SongDetails, FocusedSong } from "../../lib/types";
-    import { filterSongs } from '../../lib/utils';
+    import type {
+        PackDetails,
+        SongDetails,
+        FocusedSong,
+    } from "../../lib/types";
+    import { filterSongs } from "../../lib/utils";
     import Search from "./Search.svelte";
 
     export let currentIndex: number;
@@ -44,10 +48,10 @@
     });
 
     // updates CSS to show focus on the current element
-    async function updateFocus(
-        focusedData: PackDetails | SongDetails
-    ) {
-        focusedSong.title = focusedData?.name ? focusedData.name : focusedData.title;
+    async function updateFocus(focusedData: PackDetails | SongDetails) {
+        focusedSong.title = focusedData?.name
+            ? focusedData.name
+            : focusedData.title;
         focusedSong.banner = focusedData?.banner || "";
         focusedSong.artist = focusedData?.artist ? focusedData.artist : "";
         focusedSong.charts = focusedData?.charts ? focusedData.charts : [];
@@ -147,7 +151,6 @@
     }
 
     const handleHover = (event: MouseEvent) => {
-        console.log("hovering");
         if (scrollable.length === 0) {
             return;
         }
@@ -168,46 +171,45 @@
     id="packs"
     class="w-screen md:w-1/2 h-full flex flex-col bg-navy z-1 overflow-y-auto"
     bind:this={listContainer}
-
 >
-    <Search bind:query bind:filters/>
+    <Search bind:query bind:filters />
     <ul>
         <!-- <li class="font-semibold text-darknavy text-center bg-yellow-500">
         Note: the current songlist is a placeholder and it will be up to date
         soon.
       </li> -->
-    {#each Object.entries(filteredPackDict).sort( ([, a], [, b]) => a.name.localeCompare(b.name), ) as [_, packDetails]}
-        <li
-            class="pack scroll-item font-semibold text-blue-300 text-center"
-        >
-            <!-- TODO: not critical but might change, was kinda breaking when using enter to just trigger onclick but it would be nice to make it work -->
-            <button
-                type="button"
-                class="p-2 w-full"
-                on:click|preventDefault={() =>
-                    handleClick(packDetails.name)}
-                on:keydown={(event) => {
-                    if (event.key === "Enter") {
-                        event.stopPropagation();
-                        event.preventDefault();
-                        handleEnter(event);
-                    }
-                }}
+        {#each Object.entries(filteredPackDict).sort( ([, a], [, b]) => a.name.localeCompare(b.name), ) as [_, packDetails]}
+            <li
+                class="pack scroll-item font-semibold text-blue-300 text-center"
             >
-                {packDetails.name}
-            </button>
-        </li>
-        {#if openPack === packDetails.name}
-            <div class="bg-darknavy">
-                <ul>
-                    {#each Object.entries(packDetails.songs).sort( (a, b) => a[1].title.localeCompare(b[1].title), ) as [songName, songDetails]}
-                        <li class="song scroll-item text-center p-2">
-                            <p>{songDetails.title}</p>
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-        {/if}
-    {/each}
+                <!-- TODO: not critical but might change, was kinda breaking when using enter to just trigger onclick but it would be nice to make it work -->
+                <button
+                    type="button"
+                    class="p-2 w-full"
+                    on:click|preventDefault={() =>
+                        handleClick(packDetails.name)}
+                    on:keydown={(event) => {
+                        if (event.key === "Enter") {
+                            event.stopPropagation();
+                            event.preventDefault();
+                            handleEnter(event);
+                        }
+                    }}
+                >
+                    {packDetails.name}
+                </button>
+            </li>
+            {#if openPack === packDetails.name}
+                <div class="bg-darknavy">
+                    <ul>
+                        {#each Object.entries(packDetails.songs).sort( (a, b) => a[1].title.localeCompare(b[1].title), ) as [songName, songDetails]}
+                            <li class="song scroll-item text-center p-2">
+                                <p>{songDetails.title}</p>
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/if}
+        {/each}
     </ul>
 </div>

src/server.js

@@ -5,22 +5,18 @@ import cors from 'cors';
 
 dotenv.config();
 
-const assetsPath = './data/assets';
-
 const app = express();
+
 const corsOptions = {
 	origin: '*',
 	methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
 	allowedHeaders: '*',
 	credentials: true
 };
 app.use(cors(corsOptions));
+  
 app.use(express.json());
 
-// serve assets dynamically
-app.use(express.static(assetsPath))
-
-// let sveltekit handle everything
 app.use(handler);
 
 app.listen(3000, () => {