MORE

README.md

@@ -12,7 +12,127 @@ hf_oauth_scopes:
   - inference-api
 ---
 
-https://fraser-piclets.static.hf.space/
+# Piclets
+Monster collection & battle game leveraging Huggingface ZeroGPU spaces!
+
+[Play Here!](https://fraser-piclets.static.hf.space/)
+
+## Battle System
+
+Making everything LLM based!
+
+The LLM gets the piclet descriptions, stats and action descriptions and then creates a JSON object conveying the status updates (including emojis for effects).
+
+This should give the battles a unique "real" feel with interesting effective/ineffective interactions.
+
+Status updates come with probabilities allowing for chance in the game while LLM sampling temperature is low.
+
+The LLM backed has a dynamic setup so it can switch between providers, for now will use `tencent/Hunyuan-Large` long term may switch to `BlinkDL/RWKV-Gradio-2`.
+
+Options for LLM backend:
+1. tencent/Hunyuan-Large (has been free for a while!)
+2. yuntian-deng/ChatGPT (say it will have short term availability)
+3. hysts/zephyr-7b (runs on zero-gpu)
+4. BlinkDL/RWKV-Gradio-2 (running on T4, never ran into rate limits)
+5. make my own Cohere space (20 generations per minute)
+
+## Old Battle System Ideas
+
+## How to handle combat?
+I want a combat system that leverages the diversity of monsters and creativity of LLMs.
+I'd rather the game ran "offline" so without the need for non borwser-based computation.
+
+I'd also like the combat to feel interesting with a diversity of Piclets being required.
+Now for most players they won't actually be able to catch that many Piclets (1 per day).
+
+By interesting I mean the unique properties of the monster should shine through despite them not being explicitly coded for.
+The simplest version of this is having "weak against, robust against" lists and using a semantic encoder matches to define effectiveness.
+
+I previously liked the idea of monsters having a "status" that would then effect combat, e.g. burning, bleading, sleeping, etc.
+This ofc also matches Pokemon though it does seem a little tricky to code and connect all of this.
+
+Should also note that I can have a TON of data within my HF space so coding up a ton of status effect options is fine!
+
+#### Combat Ideas
+
+**Semantic top-trumps**
+
+You attack with a given trait e.g. "flight" they then pick a counter monster to compare on that axis.
+The monster with the better semantic score wins.
+
+A variation on this is each attack description vs the monsters description.
+
+TBH 1v1 battles with just 1 move doesn't feel tactical enough.
+
+**True Pokemon**
+
+Just define a full running pokemon style game with the Pokemon suite of moves.
+Could even extend to include special abilities like being invulnerable to drain, can't be switched out, etc.
+
+This would mean abilities would be defined ahead of time and picked for the monster.
+
+Nice thing is that this would balance the same way and have a high complexity ceiling.
+The bad thing is that this could actually be extremely difficult to implement, likely best done by just emulating the underlying game with modified sprites & names for the monster.
+
+**LLM powered Pokemon**
+
+Leverage free LLM spaces (maybe RWKV?) to have the LLM generate the outcomes of the different action.
+Include updating free-form status descriptions.
+
+This should give a consistent range of effects without requiring complex code.
+
+The issue here is with accessing the LLM responses.
+This would have to rely on non zero-GPU spaces to get the response rate required.
+
+**Semantic Pokemon**
+
+Define pokemon style moves with keywords defining strong against, weak against and action special cases.
+
+This is effectively doing what "LLM powered Pokemon" would do but offline.
+
+Different effects have different probabilities.
+Statuses are applied and semanticly matched into hard coded ones.
+
+e.g. "Dazed" is similar to "Confusion" so gets the "Confusion" effect
+
+#### Combat Choice
+
+I think Semantic Pokemon is the best choice as it gives great variety while being runnable offline.
+
+To put this in more detail...
+1. monsters each have lists of keywords for "weak to" and "robust to" for effective/ineffective
+2. each action has hard coded effects with special cases for certain monsters
+3. monster actions are colored to indicate attack/buff/debuff/special
+
+When hard coding effects the action can apply descriptors to the enemy, these then interact with game-level effects and the monsters own effective/ineffective.
+Previously I did like the emoji setup as it was quick to communicate... but it often wasn't high level enough.
+I'm hopeful that high level descriptors + a semantic encoder will give more matches than previously.
+
+So the monster schema will have:
+```json
+    "robust against": {"type": "string", "description": "A brief description of things the monster is robust to"},
+    "weak against": {"type": "string", "description": "A brief description of things the monster is weak to"},
+```
+
+Then for the actions:
+```json
+    "attack": {
+      "name": "...",
+      "description": "...",
+      "damage": "likert",
+      "accuracy": "likert",
+      "inflictStatus": "...",
+    }
+```
+
+### Keyword based
+
+Another option is to just have claude create a really extensive keyword system to analyze action descriptions and make a series of classifiers based on that.
+I have had success with this before and its nice to think I then only have to handle the action descriptions.
+Then I could add back the old Piclet types to pair up with this.
+Plus then include an emoji for each action to give a cool animation effect!
+
+The bad thing here is that I am having to hand-code a battle system which I didn't really want to do.
 
 # Svelte + TS + Vite
 

package-lock.json

@@ -14,10 +14,14 @@
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
         "@types/node": "^24.0.14",
+        "@vitest/ui": "^3.2.4",
+        "fake-indexeddb": "^6.0.1",
+        "happy-dom": "^18.0.1",
         "svelte": "^5.28.1",
         "svelte-check": "^4.1.6",
         "typescript": "~5.8.3",
-        "vite": "^6.3.5"
+        "vite": "^6.3.5",
+        "vitest": "^3.2.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -515,6 +519,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.45.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.45.1.tgz",
@@ -852,6 +863,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.2.tgz",
+      "integrity": "sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -869,6 +897,150 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/ui": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-3.2.4.tgz",
+      "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.3",
+        "pathe": "^2.0.3",
+        "sirv": "^3.0.1",
+        "tinyglobby": "^0.2.14",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "3.2.4"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -892,6 +1064,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -902,6 +1084,43 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chai": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.1.tgz",
+      "integrity": "sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -946,6 +1165,16 @@
         }
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -962,6 +1191,13 @@
       "integrity": "sha512-SOKO002EqlvBYYKQSew3iymBoN2EQ4BDw/3yprjh7kAfFzjBYkaMNa/pZvcA7HSWlcKSQb9XhPe3wKyQ0x4A8A==",
       "license": "Apache-2.0"
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.6",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.6.tgz",
@@ -1021,6 +1257,36 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
+      "integrity": "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fake-indexeddb": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/fake-indexeddb/-/fake-indexeddb-6.0.1.tgz",
+      "integrity": "sha512-He2AjQGHe46svIFq5+L2Nx/eHDTI1oKgoevBP+TthnjymXiKkeJQ3+ITeWey99Y5+2OaPFbI1qEsx/5RsGtWnQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
@@ -1036,6 +1302,20 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1051,6 +1331,38 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/happy-dom": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-18.0.1.tgz",
+      "integrity": "sha512-qn+rKOW7KWpVTtgIUi6RVmTBZJSe2k0Db0vh1f7CWrWclkkc7/Q+FrOfkZIb2eiErLyqu5AXEzE7XthO9JVxRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "whatwg-mimetype": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/@types/node": {
+      "version": "20.19.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.9.tgz",
+      "integrity": "sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1061,6 +1373,13 @@
         "@types/estree": "^1.0.6"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1078,6 +1397,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loupe": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.4.tgz",
+      "integrity": "sha512-wJzkKwJrheKtknCOKNEtDK4iqg/MxmZheEMtSTYvnzRdEYaZzmgH976nenp8WdJRdx5Vc1X/9MO0Oszl6ezeXg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -1098,6 +1424,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1124,6 +1460,23 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1240,6 +1593,28 @@
         "node": ">=6"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/sirv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
+      "integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1250,6 +1625,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strip-literal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
+      "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/svelte": {
       "version": "5.36.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.36.1.tgz",
@@ -1300,6 +1702,20 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -1317,6 +1733,46 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.3.tgz",
+      "integrity": "sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -1413,6 +1869,29 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/vitefu": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
@@ -1433,6 +1912,106 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/zimmerframe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",

package.json

@@ -7,16 +7,22 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^24.0.14",
+    "@vitest/ui": "^3.2.4",
+    "fake-indexeddb": "^6.0.1",
+    "happy-dom": "^18.0.1",
     "svelte": "^5.28.1",
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "dexie": "^4.0.11"

src/lib/components/Battle/ActionButtons.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  export let isWildBattle: boolean;
+  export let onAction: (action: string) => void;
+</script>
+
+<div class="action-grid">
+  <button class="action-button fight" on:click={() => onAction('fight')}>
+    <span class="action-icon">⚔️</span>
+    <span class="action-label">Fight</span>
+  </button>
+  
+  <button class="action-button piclet" on:click={() => onAction('piclet')}>
+    <span class="action-icon">🔄</span>
+    <span class="action-label">Piclet</span>
+  </button>
+  
+  {#if isWildBattle}
+    <button class="action-button catch" on:click={() => onAction('catch')}>
+      <span class="action-icon">🎯</span>
+      <span class="action-label">Catch</span>
+    </button>
+  {:else}
+    <button class="action-button items" disabled>
+      <span class="action-icon">🎒</span>
+      <span class="action-label">Items</span>
+    </button>
+  {/if}
+  
+  <button class="action-button run" on:click={() => onAction('run')}>
+    <span class="action-icon">🏃</span>
+    <span class="action-label">Run</span>
+  </button>
+</div>
+
+<style>
+  .action-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    max-width: 400px;
+    margin: 0 auto;
+    width: 100%;
+  }
+  
+  .action-button {
+    padding: 2rem 1rem;
+    background: #f8f9fa;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .action-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  
+  .action-button:active:not(:disabled) {
+    transform: translateY(0);
+  }
+  
+  .action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .action-icon {
+    font-size: 2rem;
+  }
+  
+  .action-label {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #333;
+  }
+  
+  /* Action specific colors */
+  .fight {
+    background: #ffebee;
+    border-color: #ef5350;
+  }
+  
+  .fight:hover:not(:disabled) {
+    background: #ffcdd2;
+    border-color: #e53935;
+  }
+  
+  .piclet {
+    background: #e3f2fd;
+    border-color: #42a5f5;
+  }
+  
+  .piclet:hover:not(:disabled) {
+    background: #bbdefb;
+    border-color: #2196f3;
+  }
+  
+  .catch {
+    background: #e8f5e9;
+    border-color: #66bb6a;
+  }
+  
+  .catch:hover:not(:disabled) {
+    background: #c8e6c9;
+    border-color: #4caf50;
+  }
+  
+  .items {
+    background: #fff3e0;
+    border-color: #ffa726;
+  }
+  
+  .items:hover:not(:disabled) {
+    background: #ffe0b2;
+    border-color: #ff9800;
+  }
+  
+  .run {
+    background: #f3e5f5;
+    border-color: #ab47bc;
+  }
+  
+  .run:hover:not(:disabled) {
+    background: #e1bee7;
+    border-color: #9c27b0;
+  }
+  
+  @media (max-width: 480px) {
+    .action-button {
+      padding: 1.5rem 0.75rem;
+    }
+    
+    .action-icon {
+      font-size: 1.5rem;
+    }
+    
+    .action-label {
+      font-size: 0.875rem;
+    }
+  }
+</style>

src/lib/components/Battle/BattleControls.svelte

@@ -0,0 +1,317 @@
+<script lang="ts">
+  import type { PicletInstance } from '$lib/db/schema';
+  import { db } from '$lib/db';
+  import ActionButtons from './ActionButtons.svelte';
+  
+  export let currentMessage: string;
+  export let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended';
+  export let processingTurn: boolean;
+  export let battleEnded: boolean;
+  export let isWildBattle: boolean;
+  export let playerPiclet: PicletInstance;
+  export let onAction: (action: string) => void;
+  export let onMoveSelect: (move: any) => void;
+  export let onPicletSelect: (piclet: PicletInstance) => void;
+  export let onBack: () => void;
+  
+  let availablePiclets: PicletInstance[] = [];
+  
+  // Load player's roster
+  async function loadRoster() {
+    const roster = await db.picletInstances
+      .where('isInRoster')
+      .equals(1)
+      .toArray();
+    availablePiclets = roster.filter(p => p.currentHp > 0 && p.id !== playerPiclet.id);
+  }
+  
+  $: if (battlePhase === 'picletSelect') {
+    loadRoster();
+  }
+</script>
+
+<div class="battle-controls">
+  <!-- Message Bar -->
+  <div class="message-bar {battleEnded ? 'special' : ''}">
+    <p>{currentMessage}</p>
+  </div>
+  
+  <!-- Action Area -->
+  <div class="action-area">
+    {#if battlePhase === 'main' && !processingTurn && !battleEnded}
+      <ActionButtons 
+        {isWildBattle}
+        {onAction}
+      />
+    {:else if battlePhase === 'moveSelect'}
+      <div class="move-select">
+        <div class="section-header">
+          <h3>Select a move</h3>
+          <button class="back-btn" on:click={onBack}>← Back</button>
+        </div>
+        <div class="moves-grid">
+          {#each playerPiclet.moves as move}
+            <button 
+              class="move-button"
+              on:click={() => onMoveSelect(move)}
+              disabled={move.currentPp <= 0}
+            >
+              <span class="move-name">{move.name}</span>
+              <span class="move-type">{move.type}</span>
+              <span class="move-pp">PP: {move.currentPp}/{move.pp}</span>
+            </button>
+          {/each}
+        </div>
+      </div>
+    {:else if battlePhase === 'picletSelect'}
+      <div class="piclet-select">
+        <div class="section-header">
+          <h3>Select a Piclet</h3>
+          <button class="back-btn" on:click={onBack}>← Back</button>
+        </div>
+        <div class="piclets-list">
+          {#if availablePiclets.length === 0}
+            <p class="no-piclets">No other healthy Piclets available!</p>
+          {:else}
+            {#each availablePiclets as piclet}
+              <button 
+                class="piclet-option"
+                on:click={() => onPicletSelect(piclet)}
+              >
+                <img 
+                  src={piclet.imageUrl} 
+                  alt={piclet.nickname}
+                  on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/50x50?text=P'}
+                />
+                <div class="piclet-details">
+                  <span class="piclet-name">{piclet.nickname}</span>
+                  <span class="piclet-stats">Lv.{piclet.level} - HP: {piclet.currentHp}/{piclet.maxHp}</span>
+                </div>
+                <div class="hp-preview">
+                  <div class="hp-preview-bar">
+                    <div 
+                      class="hp-preview-fill" 
+                      style="width: {(piclet.currentHp / piclet.maxHp) * 100}%"
+                    ></div>
+                  </div>
+                </div>
+              </button>
+            {/each}
+          {/if}
+        </div>
+      </div>
+    {:else if battleEnded}
+      <div class="battle-end">
+        <button class="continue-btn" on:click={() => window.history.back()}>
+          Continue
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .battle-controls {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-top: 1px solid #e0e0e0;
+  }
+  
+  .message-bar {
+    padding: 1rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e0e0e0;
+    text-align: center;
+  }
+  
+  .message-bar.special {
+    background: rgba(255, 152, 0, 0.1);
+    border-color: rgba(255, 152, 0, 0.3);
+  }
+  
+  .message-bar p {
+    margin: 0;
+    font-size: 1rem;
+    color: #333;
+  }
+  
+  .action-area {
+    flex: 1;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Move Selection */
+  .move-select, .piclet-select {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  .section-header h3 {
+    margin: 0;
+    font-size: 1.125rem;
+    color: #1a1a1a;
+  }
+  
+  .back-btn {
+    background: none;
+    border: none;
+    color: #007bff;
+    font-size: 0.875rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+  }
+  
+  .moves-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+  
+  .move-button {
+    padding: 1rem;
+    background: #f8f9fa;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    transition: all 0.2s ease;
+  }
+  
+  .move-button:hover:not(:disabled) {
+    background: #e9ecef;
+    border-color: #007bff;
+  }
+  
+  .move-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .move-name {
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+  
+  .move-type {
+    font-size: 0.75rem;
+    color: #666;
+    text-transform: uppercase;
+  }
+  
+  .move-pp {
+    font-size: 0.75rem;
+    color: #999;
+  }
+  
+  /* Piclet Selection */
+  .piclets-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .no-piclets {
+    text-align: center;
+    color: #666;
+    padding: 2rem;
+  }
+  
+  .piclet-option {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .piclet-option:hover {
+    background: #e9ecef;
+    border-color: #007bff;
+  }
+  
+  .piclet-option img {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  
+  .piclet-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .piclet-name {
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+  
+  .piclet-stats {
+    font-size: 0.75rem;
+    color: #666;
+  }
+  
+  .hp-preview {
+    width: 80px;
+  }
+  
+  .hp-preview-bar {
+    height: 6px;
+    background: #e0e0e0;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  
+  .hp-preview-fill {
+    height: 100%;
+    background: #4caf50;
+    transition: width 0.3s ease;
+  }
+  
+  /* Battle End */
+  .battle-end {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+  
+  .continue-btn {
+    padding: 1rem 2rem;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  
+  .continue-btn:hover {
+    background: #0056b3;
+  }
+</style>

src/lib/components/Battle/BattleField.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { PicletInstance } from '$lib/db/schema';
+  import PicletInfo from './PicletInfo.svelte';
+  
+  export let playerPiclet: PicletInstance;
+  export let enemyPiclet: PicletInstance;
+  export let playerHpPercentage: number;
+  export let enemyHpPercentage: number;
+  export let showIntro: boolean = false;
+  
+  // Random background selection
+  const backgrounds = ['ruins', 'road', 'dinner', 'cave'];
+  const selectedBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)];
+  
+  // Animation states
+  let playerVisible = false;
+  let enemyVisible = false;
+  let trainerVisible = true;
+  
+  onMount(() => {
+    if (showIntro) {
+      // Intro animation sequence
+      setTimeout(() => {
+        trainerVisible = false;
+        enemyVisible = true;
+      }, 500);
+      
+      setTimeout(() => {
+        playerVisible = true;
+      }, 1500);
+    } else {
+      // Skip intro
+      playerVisible = true;
+      enemyVisible = true;
+      trainerVisible = false;
+    }
+  });
+</script>
+
+<div class="battle-field" style="background-image: url('/images/environments/{selectedBackground}.png')">
+  <!-- Striped overlay pattern -->
+  <div class="stripe-pattern"></div>
+  
+  <!-- Trainer intro image -->
+  {#if showIntro && trainerVisible}
+    <div class="trainer-intro" transition:fade={{ duration: 300 }}>
+      <img src="/images/default_trainer.png" alt="Trainer" />
+    </div>
+  {/if}
+  
+  <!-- Enemy area -->
+  <div class="enemy-area">
+    <PicletInfo 
+      piclet={enemyPiclet}
+      hpPercentage={enemyHpPercentage}
+      isPlayer={false}
+    />
+    
+    {#if enemyVisible}
+      <div class="piclet-sprite enemy-sprite" transition:fade={{ duration: 300 }}>
+        <img 
+          src={enemyPiclet.imageUrl} 
+          alt={enemyPiclet.nickname}
+          on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+        />
+      </div>
+    {/if}
+  </div>
+  
+  <!-- Player area -->
+  <div class="player-area">
+    {#if playerVisible}
+      <div class="piclet-sprite player-sprite" transition:fade={{ duration: 300 }}>
+        <img 
+          src={playerPiclet.imageUrl} 
+          alt={playerPiclet.nickname}
+          on:error={(e) => e.currentTarget.src = 'https://via.placeholder.com/120x120?text=Piclet'}
+        />
+      </div>
+    {/if}
+    
+    <PicletInfo 
+      piclet={playerPiclet}
+      hpPercentage={playerHpPercentage}
+      isPlayer={true}
+    />
+  </div>
+</div>
+
+<style>
+  .battle-field {
+    height: 60vh;
+    min-height: 400px;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    overflow: hidden;
+  }
+  
+  .stripe-pattern {
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 10px,
+      rgba(255, 255, 255, 0.05) 10px,
+      rgba(255, 255, 255, 0.05) 20px
+    );
+    pointer-events: none;
+  }
+  
+  .trainer-intro {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+  
+  .trainer-intro img {
+    width: 200px;
+    height: auto;
+    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
+  }
+  
+  .enemy-area {
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 1rem;
+  }
+  
+  .player-area {
+    position: absolute;
+    bottom: 10%;
+    left: 10%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .piclet-sprite {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .piclet-sprite img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
+  }
+  
+  .enemy-sprite {
+    order: 2;
+  }
+  
+  .player-sprite {
+    order: 1;
+    transform: scaleX(-1); /* Mirror player sprite */
+  }
+  
+  @media (max-width: 768px) {
+    .battle-field {
+      height: 50vh;
+      min-height: 300px;
+    }
+    
+    .piclet-sprite {
+      width: 80px;
+      height: 80px;
+    }
+    
+    .enemy-area {
+      top: 5%;
+      right: 5%;
+    }
+    
+    .player-area {
+      bottom: 5%;
+      left: 5%;
+    }
+  }
+</style>

src/lib/components/Battle/PicletInfo.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { PicletInstance } from '$lib/db/schema';
+  
+  export let piclet: PicletInstance;
+  export let hpPercentage: number;
+  export let isPlayer: boolean;
+  
+  $: hpColor = hpPercentage > 0.5 ? '#4caf50' : hpPercentage > 0.25 ? '#ffc107' : '#f44336';
+  $: displayHp = Math.max(0, Math.round(piclet.currentHp * hpPercentage));
+</script>
+
+<div class="piclet-info {isPlayer ? 'player-info' : 'enemy-info'}">
+  <div class="info-header">
+    <span class="piclet-name">{piclet.nickname}</span>
+    <span class="piclet-level">Lv.{piclet.level}</span>
+  </div>
+  
+  <div class="hp-container">
+    <div class="hp-label">HP</div>
+    <div class="hp-bar-wrapper">
+      <div class="hp-bar-bg">
+        <div 
+          class="hp-bar-fill" 
+          style="width: {hpPercentage * 100}%; background-color: {hpColor}"
+        ></div>
+      </div>
+    </div>
+  </div>
+  
+  {#if isPlayer}
+    <div class="hp-text">
+      {displayHp} / {piclet.maxHp}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .piclet-info {
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid #333;
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    min-width: 200px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  }
+  
+  .player-info {
+    order: 2;
+  }
+  
+  .enemy-info {
+    order: 1;
+  }
+  
+  .info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  
+  .piclet-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #1a1a1a;
+  }
+  
+  .piclet-level {
+    font-size: 0.875rem;
+    color: #666;
+  }
+  
+  .hp-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  .hp-label {
+    font-weight: 600;
+    font-size: 0.75rem;
+    color: #666;
+  }
+  
+  .hp-bar-wrapper {
+    flex: 1;
+  }
+  
+  .hp-bar-bg {
+    height: 8px;
+    background: #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .hp-bar-fill {
+    height: 100%;
+    transition: width 0.5s ease, background-color 0.3s ease;
+    border-radius: 4px;
+  }
+  
+  .hp-text {
+    text-align: right;
+    font-size: 0.75rem;
+    color: #666;
+    margin-top: 0.25rem;
+  }
+  
+  @media (max-width: 768px) {
+    .piclet-info {
+      min-width: 150px;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    .piclet-name {
+      font-size: 0.875rem;
+    }
+    
+    .piclet-level {
+      font-size: 0.75rem;
+    }
+  }
+</style>

src/lib/components/Pages/Battle.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { PicletInstance } from '$lib/db/schema';
+  import BattleField from '../Battle/BattleField.svelte';
+  import BattleControls from '../Battle/BattleControls.svelte';
+  
+  export let playerPiclet: PicletInstance;
+  export let enemyPiclet: PicletInstance;
+  export let isWildBattle: boolean = true;
+  export let onBattleEnd: (result: any) => void = () => {};
+  
+  // Battle state
+  let currentMessage = isWildBattle 
+    ? `A wild ${enemyPiclet.nickname} appeared!` 
+    : `Trainer wants to battle!`;
+  let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended' = 'intro';
+  let processingTurn = false;
+  let battleEnded = false;
+  
+  // HP animation states
+  let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
+  let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
+  
+  onMount(() => {
+    // Start intro sequence
+    setTimeout(() => {
+      currentMessage = `Go, ${playerPiclet.nickname}!`;
+      setTimeout(() => {
+        currentMessage = `What will ${playerPiclet.nickname} do?`;
+        battlePhase = 'main';
+      }, 1500);
+    }, 2000);
+  });
+  
+  function handleAction(action: string) {
+    if (processingTurn || battleEnded) return;
+    
+    switch (action) {
+      case 'fight':
+        battlePhase = 'moveSelect';
+        break;
+      case 'piclet':
+        battlePhase = 'picletSelect';
+        break;
+      case 'catch':
+        if (isWildBattle) {
+          processingTurn = true;
+          currentMessage = 'You threw a Piclet Ball!';
+          setTimeout(() => {
+            currentMessage = 'The wild piclet broke free!';
+            processingTurn = false;
+          }, 2000);
+        }
+        break;
+      case 'run':
+        if (isWildBattle) {
+          currentMessage = 'Got away safely!';
+          battleEnded = true;
+          setTimeout(() => onBattleEnd(false), 1500);
+        } else {
+          currentMessage = "You can't run from a trainer battle!";
+        }
+        break;
+    }
+  }
+  
+  function handleMoveSelect(move: any) {
+    battlePhase = 'main';
+    processingTurn = true;
+    currentMessage = `${playerPiclet.nickname} used ${move.name}!`;
+    
+    // Mock damage
+    setTimeout(() => {
+      enemyHpPercentage = Math.max(0, enemyHpPercentage - 0.2);
+      
+      if (enemyHpPercentage <= 0) {
+        currentMessage = `${enemyPiclet.nickname} fainted!`;
+        battleEnded = true;
+        setTimeout(() => onBattleEnd(true), 2000);
+      } else {
+        // Enemy turn
+        setTimeout(() => {
+          const enemyMove = enemyPiclet.moves[0];
+          currentMessage = `${enemyPiclet.nickname} used ${enemyMove.name}!`;
+          
+          setTimeout(() => {
+            playerHpPercentage = Math.max(0, playerHpPercentage - 0.15);
+            
+            if (playerHpPercentage <= 0) {
+              currentMessage = `${playerPiclet.nickname} fainted!`;
+              battleEnded = true;
+              setTimeout(() => onBattleEnd(false), 2000);
+            } else {
+              currentMessage = `What will ${playerPiclet.nickname} do?`;
+              processingTurn = false;
+            }
+          }, 1500);
+        }, 1500);
+      }
+    }, 1500);
+  }
+  
+  function handlePicletSelect(piclet: PicletInstance) {
+    battlePhase = 'main';
+    currentMessage = `Come back, ${playerPiclet.nickname}!`;
+    setTimeout(() => {
+      playerPiclet = piclet;
+      playerHpPercentage = piclet.currentHp / piclet.maxHp;
+      currentMessage = `Go, ${piclet.nickname}!`;
+      setTimeout(() => {
+        currentMessage = `What will ${piclet.nickname} do?`;
+      }, 1500);
+    }, 1500);
+  }
+  
+  function handleBack() {
+    battlePhase = 'main';
+  }
+</script>
+
+<div class="battle-page">
+  <nav class="battle-nav">
+    <button class="back-button" on:click={() => onBattleEnd('cancelled')}>
+      ← Back
+    </button>
+    <h1>{isWildBattle ? 'Wild Battle' : 'Battle'}</h1>
+    <div class="nav-spacer"></div>
+  </nav>
+  
+  <div class="battle-content">
+    <BattleField 
+      {playerPiclet}
+      {enemyPiclet}
+      {playerHpPercentage}
+      {enemyHpPercentage}
+      showIntro={battlePhase === 'intro'}
+    />
+    
+    <BattleControls
+      {currentMessage}
+      {battlePhase}
+      {processingTurn}
+      {battleEnded}
+      {isWildBattle}
+      {playerPiclet}
+      {enemyPiclet}
+      onAction={handleAction}
+      onMoveSelect={handleMoveSelect}
+      onPicletSelect={handlePicletSelect}
+      onBack={handleBack}
+    />
+  </div>
+</div>
+
+<style>
+  .battle-page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f8f9fa;
+    overflow: hidden;
+  }
+  
+  .battle-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    background: white;
+    border-bottom: 1px solid #e0e0e0;
+    position: relative;
+    z-index: 10;
+  }
+  
+  .back-button {
+    background: none;
+    border: none;
+    color: #007bff;
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0.5rem;
+  }
+  
+  .battle-nav h1 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1a1a1a;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  
+  .nav-spacer {
+    width: 60px;
+  }
+  
+  .battle-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+</style>

src/lib/components/Pages/Encounters.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
-  import type { Encounter, GameState } from '$lib/db/schema';
+  import type { Encounter, GameState, PicletInstance } from '$lib/db/schema';
   import { EncounterType } from '$lib/db/schema';
   import { EncounterService } from '$lib/db/encounterService';
   import { getOrCreateGameState, incrementCounter, addProgressPoints } from '$lib/db/gameState';
   import { db } from '$lib/db';
+  import Battle from './Battle.svelte';
   
   let encounters: Encounter[] = [];
   let gameState: GameState | null = null;
   let isLoading = true;
   let isRefreshing = false;
   
+  // Battle state
+  let showBattle = false;
+  let battlePlayerPiclet: PicletInstance | null = null;
+  let battleEnemyPiclet: PicletInstance | null = null;
+  let battleIsWild = true;
+  
   onMount(async () => {
     await loadEncounters();
   });
@@ -61,8 +68,8 @@
         }
         isLoading = false;
       } else {
-        // Regular wild encounter - would start battle
-        alert('Battle system coming soon!');
+        // Regular wild encounter - start battle
+        await startBattle(encounter);
       }
     } else if (encounter.type === EncounterType.SHOP) {
       await handleShopEncounter();
@@ -135,8 +142,121 @@
         return '#607d8b';
     }
   }
+  
+  async function startBattle(encounter: Encounter) {
+    try {
+      // Get player's first healthy piclet
+      const roster = await db.picletInstances
+        .where('isInRoster')
+        .equals(1)
+        .toArray();
+      
+      const healthyPiclets = roster.filter(p => p.currentHp > 0);
+      
+      if (healthyPiclets.length === 0) {
+        alert('You need at least one healthy piclet in your roster to battle!');
+        return;
+      }
+      
+      // Generate enemy piclet for battle
+      const enemyPiclet = await generateEnemyPiclet(encounter);
+      if (!enemyPiclet) return;
+      
+      // Set up battle
+      battlePlayerPiclet = healthyPiclets[0];
+      battleEnemyPiclet = enemyPiclet;
+      battleIsWild = true;
+      showBattle = true;
+    } catch (error) {
+      console.error('Error starting battle:', error);
+    }
+  }
+  
+  async function generateEnemyPiclet(encounter: Encounter): Promise<PicletInstance | null> {
+    if (!encounter.picletTypeId || !encounter.enemyLevel) return null;
+    
+    // Create a mock enemy piclet instance
+    const enemyPiclet: PicletInstance = {
+      id: -1, // Temporary ID for enemy
+      typeId: encounter.picletTypeId,
+      nickname: `Wild Piclet`,
+      primaryTypeString: 'normal',
+      
+      level: encounter.enemyLevel,
+      xp: 0,
+      currentHp: 20 + (encounter.enemyLevel * 5),
+      maxHp: 20 + (encounter.enemyLevel * 5),
+      attack: 10 + (encounter.enemyLevel * 2),
+      defense: 10 + (encounter.enemyLevel * 2),
+      fieldAttack: 10 + (encounter.enemyLevel * 2),
+      fieldDefense: 10 + (encounter.enemyLevel * 2),
+      speed: 10 + (encounter.enemyLevel * 2),
+      
+      baseHp: 20,
+      baseAttack: 10,
+      baseDefense: 10,
+      baseFieldAttack: 10,
+      baseFieldDefense: 10,
+      baseSpeed: 10,
+      
+      moves: [
+        {
+          name: 'Tackle',
+          type: 'normal',
+          power: 40,
+          accuracy: 100,
+          pp: 35,
+          currentPp: 35,
+          description: 'A physical attack'
+        }
+      ],
+      nature: 'hardy',
+      
+      isInRoster: false,
+      caughtAt: new Date(),
+      bst: 60,
+      tier: 'common',
+      role: 'balanced',
+      variance: 1,
+      
+      imageUrl: `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
+      imageCaption: 'A wild piclet',
+      concept: 'wild',
+      imagePrompt: 'wild piclet'
+    };
+    
+    return enemyPiclet;
+  }
+  
+  function handleBattleEnd(result: any) {
+    showBattle = false;
+    
+    if (result === true) {
+      // Victory
+      console.log('Battle won!');
+    } else if (result === false) {
+      // Defeat or ran away
+      console.log('Battle lost or fled');
+    } else if (result && result.id) {
+      // Caught a piclet
+      console.log('Piclet caught!', result);
+      incrementCounter('picletsCapured');
+      addProgressPoints(100);
+    }
+    
+    // Force refresh encounters after battle
+    forceEncounterRefresh();
+  }
 </script>
 
+{#if showBattle && battlePlayerPiclet && battleEnemyPiclet}
+  <Battle 
+    playerPiclet={battlePlayerPiclet}
+    enemyPiclet={battleEnemyPiclet}
+    isWildBattle={battleIsWild}
+    onBattleEnd={handleBattleEnd}
+  />
+{:else}
 <div class="encounters-page">
   <div class="header">
     <h1>Encounters</h1>
@@ -155,11 +275,11 @@
     </div>
   {:else if encounters.length === 0}
     <div class="empty-state">
-      <div class="empty-icon">🗺️</div>
-      <h2>No Encounters Available</h2>
-      <p>New encounters will appear soon!</p>
-      <button class="refresh-button" on:click={loadEncounters}>
-        Refresh
+      <div class="empty-icon">📸</div>
+      <h2>No Piclets Discovered</h2>
+      <p>Scan your first Piclet to start your adventure!</p>
+      <button class="scan-button" on:click={() => window.location.hash = '#/pictuary'}>
+        Go to Scanner
       </button>
     </div>
   {:else}
@@ -175,7 +295,18 @@
           <div class="encounter-icon">
             {#if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
               {#if encounter.title === 'Your First Piclet!'}
-                <div class="piclet-silhouette">?</div>
+                <div class="piclet-silhouette">
+                  <img 
+                    src={`https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`}
+                    alt="Mystery Piclet"
+                    class="silhouette-img"
+                    on:error={(e) => {
+                      e.currentTarget.style.display = 'none';
+                      e.currentTarget.nextElementSibling.style.display = 'block';
+                    }}
+                  />
+                  <div class="silhouette-fallback" style="display: none">?</div>
+                </div>
               {:else}
                 <img 
                   src={`https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`}
@@ -203,6 +334,7 @@
     </div>
   {/if}
 </div>
+{/if}
 
 <style>
   .encounters-page {
@@ -337,14 +469,32 @@
   .piclet-silhouette {
     width: 100%;
     height: 100%;
-    background: #e0e0e0;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .silhouette-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: grayscale(100%) brightness(0.3) contrast(0.5);
+    opacity: 0.8;
+  }
+  
+  .silhouette-fallback {
     font-size: 2rem;
     font-weight: bold;
     color: #999;
+    background: #e0e0e0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   
   .type-icon, .fallback-icon {
@@ -373,10 +523,10 @@
     color: #999;
   }
   
-  .refresh-button {
+  .scan-button {
     margin-top: 1rem;
     padding: 0.75rem 1.5rem;
-    background: #4caf50;
+    background: #007bff;
     color: white;
     border: none;
     border-radius: 8px;
@@ -386,7 +536,7 @@
     transition: background 0.2s ease;
   }
   
-  .refresh-button:hover {
-    background: #45a049;
+  .scan-button:hover {
+    background: #0056b3;
   }
 </style>

src/lib/components/Piclets/AddToRosterDialog.svelte

@@ -29,7 +29,7 @@
   }
 </script>
 
-<div class="dialog-overlay" onclick={(e) => e.target === e.currentTarget && onClose()}>
+<div class="dialog-overlay" onclick={(e) => e.target === e.currentTarget && onClose()} onkeydown={(e) => e.key === 'Escape' && onClose()} role="button" tabindex="0" aria-label="Close dialog">
   <div class="dialog-content">
     <header class="dialog-header">
       <h2>Add to Roster</h2>

src/lib/components/Piclets/PicletDetail.svelte

@@ -57,7 +57,7 @@
 
 <div class="detail-page">
     <div class="navigation-bar">
-      <button class="back-btn" onclick={onClose}>
+      <button class="back-btn" onclick={onClose} aria-label="Go back">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
         </svg>

src/lib/db/battleService.ts

@@ -0,0 +1,150 @@
+import type { PicletInstance, BattleState, BattlePhase } from './schema';
+import { db } from './index';
+
+export class BattleService {
+  // Initialize a new battle
+  static createBattleState(
+    playerPiclet: PicletInstance,
+    enemyPiclet: PicletInstance,
+    isWildBattle: boolean = true
+  ): BattleState {
+    return {
+      phase: 'intro' as BattlePhase,
+      currentTurn: 0,
+      playerPiclet,
+      enemyPiclet,
+      isWildBattle,
+      processingTurn: false,
+      battleEnded: false
+    };
+  }
+
+  // Calculate damage (simplified formula)
+  static calculateDamage(
+    attacker: PicletInstance,
+    defender: PicletInstance,
+    move: any
+  ): number {
+    const baseDamage = move.power || 50;
+    const attackStat = move.type === 'physical' ? attacker.attack : attacker.fieldAttack;
+    const defenseStat = move.type === 'physical' ? defender.defense : defender.fieldDefense;
+    
+    // Simple damage formula
+    const damage = Math.floor((baseDamage * (attackStat / defenseStat) * 0.5) + 10);
+    
+    // Add some randomness (85-100% of calculated damage)
+    const randomFactor = 0.85 + Math.random() * 0.15;
+    
+    return Math.floor(damage * randomFactor);
+  }
+
+  // Check if move hits (based on accuracy)
+  static doesMoveHit(accuracy: number): boolean {
+    return Math.random() * 100 < accuracy;
+  }
+
+  // Calculate capture rate for wild piclets
+  static calculateCaptureRate(
+    targetPiclet: PicletInstance,
+    targetMaxHp: number
+  ): number {
+    const hpFactor = (targetMaxHp - targetPiclet.currentHp) / targetMaxHp;
+    const levelFactor = Math.max(0.5, 1 - (targetPiclet.level / 100));
+    
+    // Base capture rate increases with damage and lower level
+    const baseRate = 0.3; // 30% base rate
+    const captureRate = baseRate + (hpFactor * 0.4) + (levelFactor * 0.3);
+    
+    return Math.min(0.95, captureRate); // Cap at 95%
+  }
+
+  // Attempt to catch a wild piclet
+  static attemptCapture(
+    targetPiclet: PicletInstance
+  ): { success: boolean; shakes: number } {
+    const captureRate = this.calculateCaptureRate(targetPiclet, targetPiclet.maxHp);
+    const roll = Math.random();
+    
+    // Calculate shakes (0-3)
+    let shakes = 0;
+    if (roll < captureRate * 0.9) shakes = 1;
+    if (roll < captureRate * 0.7) shakes = 2;
+    if (roll < captureRate * 0.5) shakes = 3;
+    
+    return {
+      success: roll < captureRate,
+      shakes
+    };
+  }
+
+  // Create a caught piclet instance
+  static async createCaughtPiclet(
+    wildPiclet: PicletInstance
+  ): Promise<PicletInstance> {
+    const caughtPiclet: Omit<PicletInstance, 'id'> = {
+      ...wildPiclet,
+      isInRoster: false, // Goes to storage initially
+      rosterPosition: undefined,
+      caughtAt: new Date()
+    };
+    
+    const id = await db.picletInstances.add(caughtPiclet);
+    return { ...caughtPiclet, id };
+  }
+
+  // Calculate experience gain
+  static calculateExpGain(
+    defeatedPiclet: PicletInstance,
+    isWild: boolean
+  ): number {
+    const baseExp = 50 + (defeatedPiclet.level * 10);
+    const wildModifier = isWild ? 1 : 1.5; // Trainer piclets give more exp
+    
+    return Math.floor(baseExp * wildModifier);
+  }
+
+  // Check if piclet should level up
+  static checkLevelUp(
+    piclet: PicletInstance,
+    expGained: number
+  ): { leveledUp: boolean; newLevel: number } {
+    const newExp = piclet.xp + expGained;
+    const expForNextLevel = this.getExpForLevel(piclet.level + 1);
+    
+    if (newExp >= expForNextLevel) {
+      return {
+        leveledUp: true,
+        newLevel: piclet.level + 1
+      };
+    }
+    
+    return {
+      leveledUp: false,
+      newLevel: piclet.level
+    };
+  }
+
+  // Get experience required for a level
+  static getExpForLevel(level: number): number {
+    // Simple exponential growth formula
+    return Math.floor(Math.pow(level, 2.5) * 10);
+  }
+
+  // Apply stat boosts for level up
+  static applyLevelUpStats(piclet: PicletInstance): PicletInstance {
+    // Simple stat growth (5-10% increase per level)
+    const growthFactor = 1.07;
+    
+    return {
+      ...piclet,
+      level: piclet.level + 1,
+      maxHp: Math.floor(piclet.maxHp * growthFactor),
+      currentHp: Math.floor(piclet.currentHp * growthFactor),
+      attack: Math.floor(piclet.attack * growthFactor),
+      defense: Math.floor(piclet.defense * growthFactor),
+      fieldAttack: Math.floor(piclet.fieldAttack * growthFactor),
+      fieldDefense: Math.floor(piclet.fieldDefense * growthFactor),
+      speed: Math.floor(piclet.speed * growthFactor)
+    };
+  }
+}

src/lib/db/encounterService.ts

@@ -40,17 +40,43 @@ export class EncounterService {
   static async generateEncounters(): Promise<Encounter[]> {
     const encounters: Omit<Encounter, 'id'>[] = [];
     
-    // Check if player needs first catch encounter
+    // Check if player has caught any piclets first
     const playerPiclets = await db.picletInstances.toArray();
+    
     if (playerPiclets.length === 0) {
-      encounters.push(await this.createFirstCatchEncounter());
-    } else {
-      // Generate wild piclet encounters
-      const wildEncounters = await this.generateWildEncounters();
-      encounters.push(...wildEncounters);
+      // No piclets caught yet - check for discovered piclets
+      // For now, we'll check the monsters collection as a proxy for discovered piclets
+      // In a real app, this would check a remote database for piclets discovered by scanning
+      const discoveredPiclets = await db.monsters.toArray();
+      
+      if (discoveredPiclets.length === 0) {
+        // No piclets discovered yet - return empty encounters
+        await db.encounters.clear();
+        await markEncountersRefreshed();
+        return [];
+      }
+      
+      // Player has discovered but not caught any piclets - show ONLY first catch encounter
+      const firstDiscovered = discoveredPiclets[0];
+      encounters.push({
+        type: EncounterType.WILD_PICLET,
+        title: 'Your First Piclet!',
+        description: 'A friendly piclet appears! This one seems easy to catch.',
+        picletTypeId: firstDiscovered.id?.toString() || 'starter-001',
+        enemyLevel: 5,
+        createdAt: new Date()
+      });
+      
+      // IMPORTANT: Return here - don't add shop/health center for first catch
+      await db.encounters.clear();
+      await db.encounters.add(encounters[0]);
+      await markEncountersRefreshed();
+      return await this.getCurrentEncounters();
     }
-
-    // Always add shop and health center
+    
+    // Player has piclets - generate normal encounters
+    
+    // Always add shop and health center first
     encounters.push({
       type: EncounterType.SHOP,
       title: 'Piclet Shop',
@@ -64,6 +90,10 @@ export class EncounterService {
       description: 'Heal your piclets back to full health',
       createdAt: new Date()
     });
+    
+    // Generate wild piclet encounters
+    const wildEncounters = await this.generateWildEncounters();
+    encounters.push(...wildEncounters);
 
     // Clear existing encounters and add new ones
     await db.encounters.clear();
@@ -138,23 +168,25 @@ export class EncounterService {
 
   // Catch a wild piclet (for first encounter)
   static async catchWildPiclet(encounter: Encounter): Promise<PicletInstance> {
-    // TODO: Implement actual piclet catching logic
-    // For now, create a placeholder instance
+    // Get the discovered piclet data
+    const discoveredPiclets = await db.monsters.toArray();
+    const picletData = discoveredPiclets.find(p => p.id?.toString() === encounter.picletTypeId) || discoveredPiclets[0];
+    
     const newPiclet: Omit<PicletInstance, 'id'> = {
       typeId: encounter.picletTypeId!,
-      nickname: 'Starter Piclet',
+      nickname: picletData?.name || 'Starter Piclet',
       primaryTypeString: 'normal',
       
-      // Stats
+      // Stats based on level
       level: encounter.enemyLevel || 5,
       xp: 0,
-      currentHp: 20,
-      maxHp: 20,
-      attack: 10,
-      defense: 10,
-      fieldAttack: 10,
-      fieldDefense: 10,
-      speed: 10,
+      currentHp: 20 + (encounter.enemyLevel || 5) * 4,
+      maxHp: 20 + (encounter.enemyLevel || 5) * 4,
+      attack: 10 + (encounter.enemyLevel || 5) * 2,
+      defense: 10 + (encounter.enemyLevel || 5) * 2,
+      fieldAttack: 10 + (encounter.enemyLevel || 5) * 2,
+      fieldDefense: 10 + (encounter.enemyLevel || 5) * 2,
+      speed: 10 + (encounter.enemyLevel || 5) * 2,
       
       // Base stats
       baseHp: 20,
@@ -164,8 +196,18 @@ export class EncounterService {
       baseFieldDefense: 10,
       baseSpeed: 10,
       
-      // Battle
-      moves: [],
+      // Battle moves
+      moves: [
+        {
+          name: 'Tackle',
+          type: 'normal',
+          power: 40,
+          accuracy: 100,
+          pp: 35,
+          currentPp: 35,
+          description: 'A physical attack'
+        }
+      ],
       nature: 'hardy',
       
       // Roster
@@ -179,11 +221,12 @@ export class EncounterService {
       role: 'balanced',
       variance: 1,
       
-      // Visuals
-      imageUrl: `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
-      imageCaption: 'A friendly starter piclet',
-      concept: 'starter',
-      imagePrompt: 'cute starter monster'
+      // Visuals from discovered data
+      imageUrl: picletData?.imageUrl || `https://storage.googleapis.com/piclodia/${encounter.picletTypeId}.png`,
+      imageData: picletData?.imageData,
+      imageCaption: picletData?.imageCaption || 'A friendly starter piclet',
+      concept: picletData?.concept || 'starter',
+      imagePrompt: picletData?.imagePrompt || 'cute starter monster'
     };
     
     const id = await db.picletInstances.add(newPiclet);

src/lib/db/resetGame.ts

@@ -0,0 +1,32 @@
+import { db } from './index';
+
+// Utility function to reset the game state (useful for testing)
+export async function resetGameState() {
+  // Clear all game data
+  await db.picletInstances.clear();
+  await db.encounters.clear();
+  await db.gameState.clear();
+  
+  // Note: We don't clear monsters as those represent scanned/discovered piclets
+  console.log('Game state reset - all caught piclets and encounters cleared');
+}
+
+// Clear only discovered piclets (monsters)
+export async function clearDiscoveredPiclets() {
+  await db.monsters.clear();
+  console.log('Discovered piclets cleared');
+}
+
+// Full reset including discovered piclets
+export async function fullGameReset() {
+  await resetGameState();
+  await clearDiscoveredPiclets();
+  console.log('Full game reset - all data cleared');
+}
+
+// Make functions available globally for debugging
+if (typeof window !== 'undefined') {
+  (window as any).resetGameState = resetGameState;
+  (window as any).clearDiscoveredPiclets = clearDiscoveredPiclets;
+  (window as any).fullGameReset = fullGameReset;
+}

src/lib/db/schema.ts

@@ -101,6 +101,36 @@ export interface GameState {
   battlesLost: number;
 }
 
+// Battle System Types
+export enum BattlePhase {
+  INTRO = 'intro',
+  MAIN = 'main',
+  MOVE_SELECT = 'moveSelect',
+  PICLET_SELECT = 'picletSelect',
+  FORCED_SWAP = 'forcedSwap',
+  BATTLE_END = 'battleEnd'
+}
+
+export enum ActionView {
+  MAIN = 'main',
+  MOVES = 'moves',
+  PICLETS = 'piclets',
+  ITEMS = 'items',
+  FORCED_SWAP = 'forcedSwap'
+}
+
+export interface BattleState {
+  phase: BattlePhase;
+  currentTurn: number;
+  playerPiclet: PicletInstance;
+  enemyPiclet: PicletInstance;
+  isWildBattle: boolean;
+  processingTurn: boolean;
+  battleEnded: boolean;
+  winner?: 'player' | 'enemy';
+  capturedPiclet?: PicletInstance;
+}
+
 // Legacy Monster interface for backward compatibility
 export interface Monster {
   id?: number;

src/main.ts

@@ -1,6 +1,7 @@
 import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
+import './lib/db/resetGame' // Import to make reset functions available
 
 const app = mount(App, {
   target: document.getElementById('app')!,

src/tests/encounterService.test.ts

@@ -0,0 +1,189 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { EncounterService } from '../lib/db/encounterService';
+import { db } from '../lib/db';
+import { EncounterType } from '../lib/db/schema';
+import type { Monster, PicletInstance } from '../lib/db/schema';
+
+describe('EncounterService', () => {
+  beforeEach(async () => {
+    // Clear all data before each test
+    await db.monsters.clear();
+    await db.picletInstances.clear();
+    await db.encounters.clear();
+    await db.gameState.clear();
+  });
+
+  describe('generateEncounters', () => {
+    it('should return empty array when no piclets are discovered', async () => {
+      // Arrange - ensure database is empty
+      const monsterCount = await db.monsters.count();
+      const picletCount = await db.picletInstances.count();
+      expect(monsterCount).toBe(0);
+      expect(picletCount).toBe(0);
+
+      // Act
+      const encounters = await EncounterService.generateEncounters();
+
+      // Assert
+      expect(encounters).toHaveLength(0);
+      
+      // Verify encounters table is also empty
+      const dbEncounters = await db.encounters.toArray();
+      expect(dbEncounters).toHaveLength(0);
+    });
+
+    it('should return only "Your First Piclet!" when piclets are discovered but not caught', async () => {
+      // Arrange - add a discovered piclet (monster)
+      const testMonster: Omit<Monster, 'id'> = {
+        name: 'Test Piclet',
+        imageUrl: 'https://test.com/piclet.png',
+        concept: 'test',
+        imagePrompt: 'test prompt',
+        imageCaption: 'test caption',
+        createdAt: new Date()
+      };
+      await db.monsters.add(testMonster);
+
+      // Act
+      const encounters = await EncounterService.generateEncounters();
+
+      // Assert
+      expect(encounters).toHaveLength(1);
+      expect(encounters[0].type).toBe(EncounterType.WILD_PICLET);
+      expect(encounters[0].title).toBe('Your First Piclet!');
+      expect(encounters[0].description).toBe('A friendly piclet appears! This one seems easy to catch.');
+      expect(encounters[0].enemyLevel).toBe(5);
+    });
+
+    it('should return shop, health center, and wild encounters when player has caught piclets', async () => {
+      // Arrange - add a caught piclet
+      const testPiclet: Omit<PicletInstance, 'id'> = {
+        typeId: 'test-001',
+        nickname: 'Testy',
+        primaryTypeString: 'normal',
+        level: 5,
+        xp: 0,
+        currentHp: 20,
+        maxHp: 20,
+        attack: 10,
+        defense: 10,
+        fieldAttack: 10,
+        fieldDefense: 10,
+        speed: 10,
+        baseHp: 20,
+        baseAttack: 10,
+        baseDefense: 10,
+        baseFieldAttack: 10,
+        baseFieldDefense: 10,
+        baseSpeed: 10,
+        moves: [],
+        nature: 'hardy',
+        isInRoster: true,
+        rosterPosition: 0,
+        caughtAt: new Date(),
+        bst: 60,
+        tier: 'common',
+        role: 'balanced',
+        variance: 1,
+        imageUrl: 'https://test.com/piclet.png',
+        imageCaption: 'Test',
+        concept: 'test',
+        imagePrompt: 'test'
+      };
+      await db.picletInstances.add(testPiclet);
+
+      // Act
+      const encounters = await EncounterService.generateEncounters();
+
+      // Assert
+      expect(encounters.length).toBeGreaterThanOrEqual(4); // At least shop, health center, and 2 wild
+      
+      // Check for required encounter types
+      const encounterTypes = encounters.map(e => e.type);
+      expect(encounterTypes).toContain(EncounterType.SHOP);
+      expect(encounterTypes).toContain(EncounterType.HEALTH_CENTER);
+      
+      // Count wild encounters
+      const wildCount = encounters.filter(e => e.type === EncounterType.WILD_PICLET).length;
+      expect(wildCount).toBeGreaterThanOrEqual(2);
+      expect(wildCount).toBeLessThanOrEqual(3);
+      
+      // Verify shop encounter details
+      const shopEncounter = encounters.find(e => e.type === EncounterType.SHOP);
+      expect(shopEncounter?.title).toBe('Piclet Shop');
+      
+      // Verify health center encounter details
+      const healthEncounter = encounters.find(e => e.type === EncounterType.HEALTH_CENTER);
+      expect(healthEncounter?.title).toBe('Health Center');
+    });
+
+    it('should not include shop/health center with first catch encounter', async () => {
+      // Arrange - add only a discovered piclet, no caught piclets
+      await db.monsters.add({
+        name: 'Discovered Piclet',
+        imageUrl: 'https://test.com/discovered.png',
+        concept: 'discovered',
+        imagePrompt: 'discovered prompt',
+        imageCaption: 'discovered caption',
+        createdAt: new Date()
+      });
+
+      // Ensure no caught piclets
+      const caughtCount = await db.picletInstances.count();
+      expect(caughtCount).toBe(0);
+
+      // Act
+      const encounters = await EncounterService.generateEncounters();
+
+      // Assert - should only have the first catch encounter
+      expect(encounters).toHaveLength(1);
+      expect(encounters[0].title).toBe('Your First Piclet!');
+      
+      // Should NOT have shop or health center
+      const hasShop = encounters.some(e => e.type === EncounterType.SHOP);
+      const hasHealthCenter = encounters.some(e => e.type === EncounterType.HEALTH_CENTER);
+      expect(hasShop).toBe(false);
+      expect(hasHealthCenter).toBe(false);
+    });
+  });
+
+  describe('shouldRefreshEncounters', () => {
+    it('should return true after 2 hours', async () => {
+      // Arrange - create game state with old refresh time
+      const twoHoursAgo = new Date(Date.now() - (2.5 * 60 * 60 * 1000));
+      await db.gameState.add({
+        lastEncounterRefresh: twoHoursAgo,
+        lastPlayed: new Date(),
+        progressPoints: 0,
+        trainersDefeated: 0,
+        picletsCapured: 0,
+        battlesLost: 0
+      });
+
+      // Act
+      const shouldRefresh = await EncounterService.shouldRefreshEncounters();
+
+      // Assert
+      expect(shouldRefresh).toBe(true);
+    });
+
+    it('should return false within 2 hours', async () => {
+      // Arrange - create game state with recent refresh time
+      const oneHourAgo = new Date(Date.now() - (1 * 60 * 60 * 1000));
+      await db.gameState.add({
+        lastEncounterRefresh: oneHourAgo,
+        lastPlayed: new Date(),
+        progressPoints: 0,
+        trainersDefeated: 0,
+        picletsCapured: 0,
+        battlesLost: 0
+      });
+
+      // Act
+      const shouldRefresh = await EncounterService.shouldRefreshEncounters();
+
+      // Assert
+      expect(shouldRefresh).toBe(false);
+    });
+  });
+});

src/tests/setup.ts

@@ -0,0 +1,12 @@
+import 'fake-indexeddb/auto';
+import { beforeEach } from 'vitest';
+import { db } from '../lib/db';
+
+// Reset database before each test
+beforeEach(async () => {
+  // Clear all tables
+  await db.monsters.clear();
+  await db.picletInstances.clear();
+  await db.encounters.clear();
+  await db.gameState.clear();
+});

vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte({ hot: !process.env.VITEST })],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./src/tests/setup.ts'],
+  },
+  resolve: {
+    alias: {
+      $lib: '/src/lib',
+    },
+  },
+});