Spaces:

Fraser
/

piclets

Running

App Files Files Community

Fraser commited on Jul 18

Commit

11b0dac

1 Parent(s): 45182b7

pwa

Browse files

Files changed (6) hide show

README.md +2 -0
assets/logo-big.PNG +3 -0
assets/logo.PNG +3 -0
index.html +30 -4
public/manifest.json +49 -6
public/sw.js +76 -0

README.md CHANGED Viewed

@@ -12,6 +12,8 @@ hf_oauth_scopes:
   - inference-api
 ---
 # Svelte + TS + Vite
 This template should help get you started developing with Svelte and TypeScript in Vite.

   - inference-api
 ---
+https://fraser-piclets.static.hf.space/
 # Svelte + TS + Vite
 This template should help get you started developing with Svelte and TypeScript in Vite.

assets/logo-big.PNG ADDED Viewed

Git LFS Details

SHA256: 38b9cbe1e388f32b2411eca31d110b2df2eaaa084dbadcd12d965a2ef3b6d14a
Pointer size: 131 Bytes
Size of remote file: 207 kB

assets/logo.PNG ADDED Viewed

Git LFS Details

SHA256: 76c7c13524f11e9f9ebe7d66c166947b3433f3de9a94cd727d90ea98b351cd9b
Pointer size: 131 Bytes
Size of remote file: 102 kB

index.html CHANGED Viewed

@@ -2,24 +2,50 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <!-- PWA Meta Tags -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Piclets">
     <meta name="application-name" content="Piclets">
     <meta name="theme-color" content="#007bff">
-    <!-- Apple Touch Icon -->
-    <link rel="apple-touch-icon" href="https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png">
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json">
     <title>Piclets - Monster Collection Game</title>
   </head>
   <body>
     <div id="app"></div>

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/assets/logo.PNG" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <!-- PWA Meta Tags -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Piclets">
     <meta name="application-name" content="Piclets">
     <meta name="theme-color" content="#007bff">
+    <meta name="description" content="Transform photos into unique monsters and build your collection">
+    <!-- Apple Touch Icons -->
+    <link rel="apple-touch-icon" href="/assets/logo.PNG">
+    <link rel="apple-touch-icon" sizes="72x72" href="/assets/logo.PNG">
+    <link rel="apple-touch-icon" sizes="96x96" href="/assets/logo.PNG">
+    <link rel="apple-touch-icon" sizes="144x144" href="/assets/logo.PNG">
+    <link rel="apple-touch-icon" sizes="192x192" href="/assets/logo.PNG">
+    <!-- Android Icons -->
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/logo.PNG">
+    <link rel="icon" type="image/png" sizes="96x96" href="/assets/logo.PNG">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/logo.PNG">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/logo.PNG">
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json">
+    <!-- Apple Splash Screens (optional but recommended) -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>Piclets - Monster Collection Game</title>
+    <script>
+      // Register service worker
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/sw.js')
+            .then(registration => console.log('ServiceWorker registered:', registration))
+            .catch(err => console.log('ServiceWorker registration failed:', err));
+        });
+      }
+    </script>
   </head>
   <body>
     <div id="app"></div>

public/manifest.json CHANGED Viewed

@@ -3,20 +3,63 @@
   "short_name": "Piclets",
   "description": "Transform photos into unique monsters and build your collection",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#f5f5f5",
   "theme_color": "#007bff",
   "orientation": "portrait",
   "icons": [
     {
-      "src": "https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png",
       "sizes": "192x192",
-      "type": "image/png"
     },
     {
-      "src": "https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png",
       "sizes": "512x512",
-      "type": "image/png"
     }
-  ]
 }

   "short_name": "Piclets",
   "description": "Transform photos into unique monsters and build your collection",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
+  "background_color": "#ffffff",
   "theme_color": "#007bff",
   "orientation": "portrait",
+  "categories": ["games", "entertainment"],
   "icons": [
     {
+      "src": "/assets/logo.PNG",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/logo.PNG",
       "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/logo.PNG",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/logo.PNG",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
     },
     {
+      "src": "/assets/logo.PNG",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/logo.PNG",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/logo.PNG",
       "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/assets/screenshot1.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide"
     }
+  ],
+  "prefer_related_applications": false
 }

public/sw.js ADDED Viewed

	@@ -0,0 +1,76 @@

+const CACHE_NAME = 'piclets-v1';
+const urlsToCache = [
+  '/',
+  '/manifest.json',
+  '/assets/logo.PNG'
+];
+// Install event - cache key resources
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+// Activate event - clean up old caches
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME) {
+            console.log('Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+// Fetch event - serve from cache when offline
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        // Clone the request
+        const fetchRequest = event.request.clone();
+        return fetch(fetchRequest).then(response => {
+          // Check if valid response
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+          // Clone the response
+          const responseToCache = response.clone();
+          // Cache the fetched response for future use
+          caches.open(CACHE_NAME)
+            .then(cache => {
+              // Don't cache API calls or external resources
+              if (event.request.url.startsWith(self.location.origin)) {
+                cache.put(event.request, responseToCache);
+              }
+            });
+          return response;
+        });
+      })
+      .catch(() => {
+        // Offline fallback
+        if (event.request.mode === 'navigate') {
+          return caches.match('/');
+        }
+      })
+  );
+});