🐐

frontend/src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { API_URL, WS_URL } from '$lib/api.js';
+  import { apiFetch } from '$lib/api.js';
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
   import Card from '$lib/Card.svelte';
@@ -23,9 +25,7 @@
   });
 
   async function fetchBoosters() {
-    const res = await fetch('http://localhost:8000/boosters', {
-      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
-    });
+    const res = await apiFetch(`${API_URL}/boosters`);
     if (res.status === 401) { goto('/auth'); return; }
     const [count, countdownTs] = await res.json();
     boosters = count;
@@ -74,9 +74,8 @@
     phase = 'dropping';
 
     // Fetch while pack is sliding away
-    const fetchPromise = fetch('http://localhost:8000/open_pack', {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
+    const fetchPromise = apiFetch(`${API_URL}/open_pack`, {
+      method: 'POST'
     });
 
     await delay(700);
@@ -320,7 +319,7 @@
 
   /* no-top clips the pack body below the tear line */
   .booster-pack.no-top {
-    clip-path: inset(60px 0 0 0 round 0 0 10px 10px);
+    clip-path: inset(41px 0 0 0 round 0 0 10px 10px);
   }
 
   /* ── Overlay ── */
@@ -359,15 +358,16 @@
     top: 0;
     left: 0;
     width: 300px;
-    height: 60px;
+    height: 41px;
     background: #dfdbcf;
-    background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.35) 5%, transparent 8%);
+    /* background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.35) 5%, transparent 8%); */
     background-image: repeating-linear-gradient(
       90deg,
-      rgba(255,255,255,0.18) 0%,
-      rgba(255,255,255,0.18) 1px,
-      transparent 1px,
-      transparent 8px
+      rgba(255,255,255,0.25),
+      rgba(0,0,0,0.15) 2%,
+      rgba(0,0,0,0.08) 3%,
+      transparent 3%,
+      transparent 4%
     );
     border-radius: 10px 10px 0 0;
     transform-origin: top left;