added PWA support

webguy83 · webguy83 · commit caf66ce50d1e · 2026-01-04T14:51:42.000-08:00
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dev-dist
 dist-ssr
 *.local
 
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/pwa-192x192.png">
+    <link rel="manifest" href="/manifest.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/style.css" />
     <title>Solitaire</title>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,10 +21,11 @@
     },
     "devDependencies": {
         "typescript": "~5.7.2",
-        "vite": "^6.3.1"
+        "vite": "^6.3.1",
+        "vite-plugin-pwa": "^0.21.2"
     },
     "dependencies": {
         "phaser": "^3.90.0",
         "terser": "^5.39.0"
     }
-}
+}
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
@@ -0,0 +1,20 @@
+{
+  "name": "Solitaire",
+  "short_name": "Solitaire",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/pwa-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/pwa-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png
diff --git a/src/game/scenes/Game.ts b/src/game/scenes/Game.ts
@@ -103,7 +103,7 @@ export class GameScene extends Phaser.Scene {
         // Update all face-down cards in draw pile
         this.drawPileCards.forEach(card => {
             // Only update if the card is currently showing a card back
-            if (CARD_BACK_FRAMES.includes(card.frame.name)) {
+            if (CARD_BACK_FRAMES.includes(parseInt(card.frame.name, 10))) {
                 card.setFrame(frame);
             }
         });
@@ -112,7 +112,7 @@ export class GameScene extends Phaser.Scene {
         this.tableauContainers.forEach((container) => {
             container.each((card: Phaser.GameObjects.Image) => {
                 // Only update if the card is currently showing a card back
-                if (CARD_BACK_FRAMES.includes(card.frame.name)) {
+                if (CARD_BACK_FRAMES.includes(parseInt(card.frame.name, 10))) {
                     card.setFrame(frame);
                 }
             });
diff --git a/vite/config.dev.mjs b/vite/config.dev.mjs
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
     base: './',
@@ -13,5 +14,31 @@ export default defineConfig({
     },
     server: {
         port: 8080
-    }
+    },
+    plugins: [
+        VitePWA({
+            registerType: 'autoUpdate',
+            devOptions: {
+                enabled: true
+            },
+            manifest: {
+                name: 'Solitaire',
+                short_name: 'Solitaire',
+                description: 'A classic Solitaire game.',
+                theme_color: '#0B7D3E',
+                icons: [
+                    {
+                        src: 'pwa-192x192.png',
+                        sizes: '192x192',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'pwa-512x512.png',
+                        sizes: '512x512',
+                        type: 'image/png'
+                    }
+                ]
+            }
+        })
+    ]
 });
diff --git a/vite/config.prod.mjs b/vite/config.prod.mjs
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const phasermsg = () => {
     return {
@@ -42,6 +43,30 @@ export default defineConfig({
         port: 8080
     },
     plugins: [
-        phasermsg()
+        phasermsg(),
+        VitePWA({
+            registerType: 'autoUpdate',
+            devOptions: {
+                enabled: true
+            },
+            manifest: {
+                name: 'Solitaire',
+                short_name: 'Solitaire',
+                description: 'A simple Solitaire game.',
+                theme_color: '#000000',
+                icons: [
+                    {
+                        src: 'pwa-192x192.png',
+                        sizes: '192x192',
+                        type: 'image/png'
+                    },
+                    {
+                        src: 'pwa-512x512.png',
+                        sizes: '512x512',
+                        type: 'image/png'
+                    }
+                ]
+            }
+        })
     ]
 });
