feat(UI): update button and navbar

dewanakl · Dec 22, 2024 · aff9574 · aff9574
1 parent 90a5a65
commit aff9574
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 70 deletions.
diff --git a/css/app.css b/css/app.css
@@ -26,16 +26,17 @@
     object-fit: cover;
 }
 
-.btn-music {
-    bottom: 9vh;
+.btn-float {
     right: 2vh;
     z-index: 1055;
 }
 
-.btn-theme {
-    bottom: 15vh;
-    right: 2vh;
-    z-index: 1055;
+.btn-float.bg-dark {
+    background-color: rgba(var(--bs-dark-rgb), 0.9) !important;
+}
+
+.btn-float.bg-light {
+    background-color: rgba(var(--bs-light-rgb), 0.9) !important;
 }
 
 .loading-page {

diff --git a/css/common.css b/css/common.css
@@ -21,6 +21,14 @@ svg>path {
     transition: color 350ms ease;
 }
 
+.navbar.bg-dark {
+    background-color: rgba(var(--bs-dark-rgb), 0.9) !important;
+}
+
+.navbar.bg-light {
+    background-color: rgba(var(--bs-light-rgb), 0.9) !important;
+}
+
 .bg-theme-light {
     background-color: var(--bs-gray-100);
 }

diff --git a/index.html b/index.html
@@ -131,7 +131,7 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
                 </a>
 
                 <div class="d-flex justify-content-center align-items-center mt-4 mb-2">
-                    <div class="mouse-animation border border-2 rounded-5 px-2 py-1">
+                    <div class="mouse-animation border border-secondary-subtle border-2 rounded-5 px-2 py-1">
                         <div class="scroll-animation rounded-4 bg-secondary"></div>
                     </div>
                 </div>
@@ -432,7 +432,7 @@ <h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.5rem;">Ucapa
 
                     <div class="mb-3">
                         <div id="information" class="alert alert-info alert-dismissible fade show rounded-4" role="alert">
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="util.closeInformation()"></button>
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="guest.closeInformation()"></button>
 
                             <p style="font-size: 1.5rem;">Bestieee!!!</p>
                             <p class="m-0">Cobain like seperti Instagram, dengan tap tap bagian komentarnya</p>
@@ -520,12 +520,12 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
     </div>
 
     <!-- Theme Button -->
-    <button type="button" id="button-theme" style="display: none;" class="btn bg-dark border btn-sm rounded-circle btn-theme position-fixed" onclick="theme.change()">
+    <button type="button" id="button-theme" style="display: none; bottom: 15vh;" class="btn bg-dark border btn-sm rounded-circle btn-float position-fixed" onclick="theme.change()">
         <i class="fa-solid fa-circle-half-stroke"></i>
     </button>
 
     <!-- Audio Button -->
-    <button type="button" id="button-music" style="display: none;" class="btn bg-dark border btn-sm rounded-circle btn-music position-fixed" data-url="./assets/music/sound.mp3" offline-disabled>
+    <button type="button" id="button-music" style="display: none; bottom: 9vh;" class="btn bg-dark border btn-sm rounded-circle btn-float position-fixed" data-url="./assets/music/sound.mp3" offline-disabled>
         <i class="fa-solid fa-circle-pause spin-button"></i>
     </button>
 

diff --git a/js/guest.js b/js/guest.js
@@ -9,6 +9,31 @@ import { confetti } from './confetti.js';
 
 export const guest = (() => {
 
+    /**
+     * @param {string} id
+     * @param {number} speed
+     * @returns {void}
+     */
+    const opacity = (id, speed = 0.01) => {
+        const el = document.getElementById(id);
+        let op = parseFloat(el.style.opacity);
+
+        let clear = null;
+        const callback = () => {
+            if (op > 0) {
+                el.style.opacity = op.toFixed(3);
+                op -= speed;
+                return;
+            }
+
+            clearInterval(clear);
+            clear = null;
+            el.remove();
+        };
+
+        clear = setInterval(callback, 10);
+    };
+
     /**
      * @type {ReturnType<typeof storage>|null}
      */
@@ -97,7 +122,7 @@ export const guest = (() => {
             form.value = information.get('name') ?? name;
         }
 
-        util.opacity('loading', 0.025);
+        opacity('loading', 0.025);
     };
 
     const open = (button) => {
@@ -109,7 +134,7 @@ export const guest = (() => {
             zIndex: 1057
         });
 
-        util.opacity('welcome', 0.025);
+        opacity('welcome', 0.025);
 
         audio.play();
         audio.showButton();
@@ -120,6 +145,11 @@ export const guest = (() => {
         util.timeOut(animation, 1500);
     };
 
+    /**
+     * @returns {void}
+     */
+    const closeInformation = () => information.set('info', true);
+
     const init = () => {
         session.init();
         countDownDate();
@@ -173,5 +203,6 @@ export const guest = (() => {
         init,
         open,
         name,
+        closeInformation,
     };
 })();
diff --git a/js/like.js b/js/like.js
@@ -11,6 +11,12 @@ export const like = (() => {
      */
     let likes = null;
 
+    /**
+     * Handles the like button functionality.
+     * 
+     * @param {HTMLButtonElement} button - The button element that was clicked.
+     * @returns {Promise<void>} - A promise that resolves when the like action is complete.
+     */
     const like = async (button) => {
         const id = button.getAttribute('data-uuid');
 
@@ -58,6 +64,11 @@ export const like = (() => {
         button.disabled = false;
     };
 
+    /**
+     * Triggers a confetti animation with heart shapes around a specified div element.
+     *
+     * @param {HTMLElement} div - The div element around which the confetti animation will occur.
+     */
     const animation = (div) => {
         if (!confetti) {
             return;
@@ -102,6 +113,13 @@ export const like = (() => {
         }());
     };
 
+    /**
+     * Handles the tap event on a given div element. If the tap is detected within a certain time frame,
+     * it triggers a like action and an animation.
+     *
+     * @param {HTMLElement} div - The div element that was tapped.
+     * @returns {Promise<void>} - A promise that resolves when the like action is complete.
+     */
     const tapTap = async (div) => {
         if (!navigator.onLine) {
             return;
@@ -124,6 +142,9 @@ export const like = (() => {
         div.setAttribute('data-tapTime', currentTime);
     };
 
+    /**
+     * Initializes the likes variable by retrieving it from storage.
+     */
     const init = () => {
         likes = storage('likes');
     };

diff --git a/js/request.js b/js/request.js
@@ -39,15 +39,12 @@ export const request = (method, path) => {
                             throw new Error(json.error[0]);
                         }
 
-                        return json;
-                    });
-                })
-                .then((res) => {
-                    if (transform) {
-                        res.data = transform(res.data);
-                    }
+                        if (transform) {
+                            json.data = transform(json.data);
+                        }
 
-                    return dto.baseResponse(res.code, res.data, res.error);
+                        return dto.baseResponse(json.code, json.data, json.error);
+                    });
                 })
                 .catch((err) => {
                     alert(err);
@@ -61,7 +58,7 @@ export const request = (method, path) => {
             return fetch(url + path, req)
                 .then((res) => {
                     if (res.status !== 200) {
-                        return null;
+                        return false;
                     }
 
                     const existingLink = document.querySelector('a[download]');
@@ -70,28 +67,22 @@ export const request = (method, path) => {
                     }
 
                     const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] ?? 'download.csv';
-                    return res.blob().then((blob) => ({ blob, filename }));
-                })
-                .then((res) => {
-                    if (res === null) {
-                        return false;
-                    }
-
-                    const { blob, filename } = res;
 
-                    const link = document.createElement('a');
-                    const href = window.URL.createObjectURL(blob);
+                    return res.blob().then((blob) => {
+                        const link = document.createElement('a');
+                        const href = window.URL.createObjectURL(blob);
 
-                    link.href = href;
-                    link.download = filename;
-                    document.body.appendChild(link);
+                        link.href = href;
+                        link.download = filename;
+                        document.body.appendChild(link);
 
-                    link.click();
+                        link.click();
 
-                    document.body.removeChild(link);
-                    window.URL.revokeObjectURL(href);
+                        document.body.removeChild(link);
+                        window.URL.revokeObjectURL(href);
 
-                    return true;
+                        return true;
+                    });
                 })
                 .catch((err) => {
                     alert(err);

diff --git a/js/util.js b/js/util.js
@@ -3,31 +3,6 @@ import { bootstrap } from './bootstrap.js';
 
 export const util = (() => {
 
-    /**
-     * @param {string} id
-     * @param {number} speed
-     * @returns {void}
-     */
-    const opacity = (id, speed = 0.01) => {
-        const el = document.getElementById(id);
-        let op = parseInt(el.style.opacity);
-
-        let clear = null;
-        const callback = () => {
-            if (op > 0) {
-                el.style.opacity = op.toFixed(3);
-                op -= speed;
-                return;
-            }
-
-            clearInterval(clear);
-            clear = null;
-            el.remove();
-        };
-
-        clear = setInterval(callback, 10);
-    };
-
     /**
      * @param {string} unsafe
      * @returns {string}
@@ -150,23 +125,16 @@ export const util = (() => {
         return decoder.decode(decodedBytes);
     };
 
-    /**
-     * @returns {void}
-     */
-    const closeInformation = () => storage('information').set('info', true);
-
     return {
         open,
         copy,
         modal,
         timeOut,
-        opacity,
         animate,
         escapeHtml,
         base64Encode,
         base64Decode,
         disableButton,
-        closeInformation,
         addLoadingCheckbox,
     };
 })();