feat: refine profile and home UI with dynamic fortune rules

scripts/render-home-icons.cjs

@@ -0,0 +1,27 @@
+// Original vector sources; generate portable PNG assets with sharp.
+const sharp = require(process.argv[2] || 'sharp')
+const fs = require('node:fs')
+const path = require('node:path')
+const output = path.resolve(__dirname, '../src/assets/home')
+const art = {
+  heart: `<path d="M64 107C52 99 15 76 15 48 15 21 50 13 64 37 78 13 113 21 113 48c0 28-37 51-49 59Z" fill="url(#pink)"/><path d="M30 46q0-14 17-13" fill="none" stroke="#fff" stroke-width="6" opacity=".7"/>`,
+  gourd: `<path d="M64 26q-13-13 1-21" fill="none" stroke="#b6884a" stroke-width="5"/><path d="M62 17Q91 3 97 23 76 31 62 17Z" fill="#d5bc75"/><path d="M64 24c-26 0-28 28-10 37-43 16-37 60 10 60s53-44 10-60c18-9 16-37-10-37Z" fill="url(#gold)"/><path d="M49 39q-8 8 0 14m-7 30q-13 20 5 24" fill="none" stroke="#fff8da" stroke-width="6" stroke-linecap="round" opacity=".8"/><path d="M51 64q13 5 26 0" fill="none" stroke="#d19138" stroke-width="3"/>`,
+  vase: `<path d="m62 38-5-26m6 16L82 9m-21 23L36 13" fill="none" stroke="#8bc2a5" stroke-width="4"/><ellipse cx="45" cy="17" rx="10" ry="5" transform="rotate(30 45 17)" fill="#b8ddbf"/><ellipse cx="77" cy="17" rx="12" ry="5" transform="rotate(-35 77 17)" fill="#c6e4c6"/><path d="M46 35h36l-5 19c-1 10 29 19 24 43-3 16-21 21-37 21s-34-5-37-21c-5-24 25-33 24-43Z" fill="url(#green)"/><ellipse cx="64" cy="36" rx="20" ry="6" fill="#c8eedc"/><path d="M49 68q-20 23-9 31" fill="none" stroke="#d2f8e7" stroke-width="5" stroke-linecap="round"/>`,
+  coin: `<circle cx="64" cy="65" r="51" fill="url(#gold)" stroke="#dfb25c" stroke-width="3"/><circle cx="64" cy="65" r="43" fill="none" stroke="#fff0b1" stroke-width="4"/><circle cx="64" cy="65" r="35" fill="none" stroke="#e3b15b" stroke-width="2"/><path d="M49 50h30v30H49Z" fill="#ba9251"/><path d="M53 54h22v22H53Z" fill="#fff6d4"/><path d="M32 38q7-9 18-13" fill="none" stroke="#fff8d5" stroke-width="4" stroke-linecap="round"/>`,
+  fan: `<path d="M64 107 8 61Q19 10 64 14q45-4 56 47Z" fill="url(#purple)"/><path d="m64 104-44-49m44 49L37 30m27 74V20m0 84L91 30m-27 74 44-49" stroke="#c3a3f2" stroke-width="3"/><path d="M9 61q14-17 26-4 12-19 29-3 17-16 29 3 12-13 26 4" fill="none" stroke="#f1e1ff" stroke-width="5"/><circle cx="64" cy="105" r="8" fill="#d79be8"/>`,
+  scroll: `<path d="M27 25h74v76H27Z" fill="url(#gold)"/><path d="M34 25v76m12-76v76m12-76v76m12-76v76m12-76v76m12-76v76" stroke="#e0b46a" stroke-width="2"/><path d="M21 17c16 0 16 96 0 96S5 17 21 17Z" fill="#f8d38b" stroke="#d9ad5b" stroke-width="3"/><ellipse cx="21" cy="25" rx="10" ry="6" fill="#fff1bf"/><ellipse cx="21" cy="105" rx="10" ry="6" fill="#f9dda2"/><path d="M103 18v94" stroke="#d9ad5b" stroke-width="9" stroke-linecap="round"/><path d="M40 42h43m-43 12h36m-36 12h43" stroke="#f7ecc4" stroke-width="3"/>`,
+  bamboo: `<g transform="rotate(-16 64 64)"><rect x="42" y="10" width="19" height="107" rx="8" fill="url(#green)"/><rect x="71" y="21" width="15" height="96" rx="7" fill="url(#green)"/><path d="M42 40h19m-19 34h19m10-25h15M71 84h15" stroke="#c2f7df" stroke-width="4"/><path d="M45 70Q10 54 15 32q28 9 30 38m35-4q14-40 34-30-11 26-34 30m0 26q28-21 35-7-17 14-35 7" fill="#76d5b6"/></g>`,
+  horse: `<path d="M29 67q-22-17-20 6 9-9 20 3m60-27 3-24 10-9 10 10-8 11 5 20-18 13-5 18H36L20 69l16-18 33 1 13-15" fill="url(#blue)" stroke="#83b1e1" stroke-width="2"/><path d="m31 83-8 30h12l10-27m17 0 4 27h11l-2-29m15-3 12 19 10-3-16-26" fill="#9dc7f0"/><path d="m81 42 1-16 12-15 8 5-13 15-1 14" fill="#829ed7"/><circle cx="103" cy="28" r="2.5" fill="#6381b1"/>`,
+  water: `<path d="M64 9C55 9 20 57 20 79c0 25 19 40 44 40s44-15 44-40C108 57 73 9 64 9Z" fill="url(#aqua)"/><path d="M48 37Q33 62 32 76" fill="none" stroke="#d1faff" stroke-width="7" opacity=".6" stroke-linecap="round"/><ellipse cx="53" cy="82" rx="3.5" ry="5" fill="#467bd2"/><ellipse cx="78" cy="82" rx="3.5" ry="5" fill="#467bd2"/><path d="M58 94q8 10 16 0" fill="none" stroke="#467bd2" stroke-width="4" stroke-linecap="round"/>`,
+  spirit: `<circle cx="64" cy="64" r="62" fill="#fff9fd"/><path d="M23 63 19 9q25 3 37 36m16 0q12-33 37-36l-4 54" fill="#fff7fb" stroke="#f5d9e8" stroke-width="2"/><path d="m29 45-3-24q17 10 19 25m38 0q2-15 19-25l-3 24" fill="#efa6c6"/><path d="M22 58q10-21 42-21t42 21l8 19-17 26q-33 23-66 0L14 77Z" fill="url(#fox)"/><path d="m64 45-5 12 5 6 5-6Z" fill="#e394bb"/><path d="M35 77q11 12 20 0m18 0q9 12 20 0" fill="none" stroke="#b77ca7" stroke-width="3" stroke-linecap="round"/><path d="m60 88 4 4 4-4q-4-5-8 0" fill="#e596b4"/><ellipse cx="32" cy="88" rx="9" ry="5" fill="#f5b2cb" opacity=".6"/><ellipse cx="96" cy="88" rx="9" ry="5" fill="#f5b2cb" opacity=".6"/>`
+}
+const gradients = `<defs><linearGradient id="pink" x2=".4" y2="1"><stop stop-color="#ffd8e2"/><stop offset=".55" stop-color="#f78eac"/><stop offset="1" stop-color="#ffd3b2"/></linearGradient><linearGradient id="gold" x2=".8" y2="1"><stop stop-color="#fff0b3"/><stop offset=".55" stop-color="#f4c467"/><stop offset="1" stop-color="#e9ae47"/></linearGradient><linearGradient id="green" x2="1" y2="1"><stop stop-color="#c4f2dd"/><stop offset=".5" stop-color="#77ceae"/><stop offset="1" stop-color="#43ae99"/></linearGradient><linearGradient id="purple" x2=".6" y2="1"><stop stop-color="#e2d3ff"/><stop offset=".5" stop-color="#ac8ce6"/><stop offset="1" stop-color="#dcb6ee"/></linearGradient><linearGradient id="blue" x2="1" y2="1"><stop stop-color="#d1e8fa"/><stop offset="1" stop-color="#89b0e7"/></linearGradient><linearGradient id="aqua" x2=".5" y2="1"><stop stop-color="#b5f6fc"/><stop offset=".5" stop-color="#63d4ed"/><stop offset="1" stop-color="#37b9e5"/></linearGradient><linearGradient id="fox" x2=".5" y2="1"><stop stop-color="#fff"/><stop offset="1" stop-color="#f9e5f3"/></linearGradient></defs>`
+async function main() {
+  fs.mkdirSync(output, { recursive: true })
+  for (const [name, content] of Object.entries(art)) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 128 128">${gradients}${content}</svg>`
+    await sharp(Buffer.from(svg)).png().toFile(path.join(output, `${name}.png`))
+  }
+  console.log(`Rendered ${Object.keys(art).length} home icons`)
+}
+main().catch((error) => { console.error(error); process.exitCode = 1 })