/** * 棋盘食材 · 仿真插画 SVG(渐变 + 高光 + 阴影,开心消消乐式 2.5D) */ import { svgToDataUrl } from '../utils/svgDataUrl.js' function gid(key, suffix) { return `f-${String(key).replace(/[^a-z0-9]/gi, '')}-${suffix}` } function wrap(key, body) { return `${body}` } function shadow(key) { const id = gid(key, 'sh') return `` } function shine(x, y, rx, ry) { return `` } /** 圆形水果 */ function artRound(key, base, dark, light, extra = '') { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(24, 28, 7, 5)} ${extra} `) } /** 叶菜 */ function artLeafy(key, light, mid, dark) { const g1 = gid(key, 'g1') const g2 = gid(key, 'g2') return wrap(key, ` ${shadow(key)} ${shine(26, 24, 6, 8)} `) } /** 西兰花 */ function artBroccoli(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(28, 20, 5, 4)} `) } /** 长条(黄瓜/香蕉/玉米) */ function artLong(key, base, dark, light, type = 'cucumber') { const g = gid(key, 'g') if (type === 'banana') { return wrap(key, ` ${shadow(key)} ${shine(30, 26, 5, 3)} `) } if (type === 'corn') { return wrap(key, ` ${shadow(key)} ${Array.from({ length: 5 }, (_, r) => Array.from({ length: 4 }, (_, c) => `` ).join('') ).join('')} ${shine(26, 26, 5, 8)} `) } return wrap(key, ` ${shadow(key)} `) } /** 茄子 */ function artEggplant(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(26, 32, 5, 7)} `) } /** 番茄 */ function artTomato(key) { return artRound(key, '#e53935', '#b71c1c', '#ef5350', '') } /** 甜椒 */ function artPepper(key, color, dark) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(28, 26, 5, 6)} `) } /** 洋葱 */ function artOnion(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(24, 30, 6, 5)} `) } /** 葡萄串 */ function artGrapes(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(28, 24, 3, 2)} `) } /** 樱桃 */ function artCherry(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(19, 29, 3, 2)}${shine(39, 29, 3, 2)} `) } /** 草莓 */ function artStrawberry(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(26, 28, 4, 6)} ${[28, 34, 38, 30, 36].map((x, i) => `` ).join('')} `) } /** 豆类 */ function artBeans(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} `) } /** 饮品杯 */ function artCup(key, liquid, cup = '#eceff1', type = 'glass') { const g = gid(key, 'g') if (type === 'bottle') { return wrap(key, ` ${shadow(key)} ${shine(28, 30, 4, 10)} `) } if (type === 'wine') { return wrap(key, ` ${shadow(key)} `) } return wrap(key, ` ${shadow(key)} ${shine(26, 32, 4, 8)} `) } /** 蘑菇 */ function artMushroom(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(24, 24, 6, 4)} `) } /** 芹菜 */ function artCelery(key) { return artLeafy(key, '#aed581', '#7cb342', '#558b2f') } /** 四季豆 */ function artGreenBean(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} `) } /** 饭碗 */ function artRiceBowl(key, rice, bowl = '#e0e0e0', dark = '#bdbdbd') { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(24, 34, 6, 3)} `) } /** 薯类 */ function artRoot(key, base, dark, light) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(24, 30, 5, 6)} `) } /** 肉类 */ function artMeat(key, base, dark, type = 'steak') { const g = gid(key, 'g') if (type === 'chicken') { return wrap(key, ` ${shadow(key)} ${shine(26, 32, 5, 6)} `) } if (type === 'fish') { return wrap(key, ` ${shadow(key)} ${shine(28, 30, 6, 4)} `) } return wrap(key, ` ${shadow(key)} ${shine(26, 28, 6, 4)} `) } /** 虾/蟹 */ function artSeafood(key, type = 'shrimp') { const g = gid(key, 'g') if (type === 'crab') { return wrap(key, ` ${shadow(key)} `) } return wrap(key, ` ${shadow(key)} ${shine(30, 28, 5, 4)} `) } /** 菠萝 */ function artPineapple(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${[-8, 0, 8].map(o => `` ).join('')} ${shine(26, 32, 5, 6)} `) } /** 奇异果 */ function artKiwi(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(26, 28, 4, 3)} `) } /** 蜜瓜 */ function artMelon(key) { return artRound(key, '#aed581', '#689f38', '#c5e1a5', '') } /** 蜂蜜 */ function artHoney(key) { return artCup(key, '#ffb300', '#ff8f00', 'bottle') } /** 面包类 */ function artBread(key, base, dark, type = 'loaf') { const g = gid(key, 'g') if (type === 'donut') { return wrap(key, ` ${shadow(key)} ${shine(24, 28, 5, 4)} `) } if (type === 'mantou') { return wrap(key, ` ${shadow(key)} ${shine(24, 32, 6, 4)} `) } return wrap(key, ` ${shadow(key)} ${shine(22, 28, 8, 5)} `) } /** 面条 */ function artNoodle(key, soup = '#d7ccc8') { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} `) } /** 南瓜 */ function artPumpkin(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${shine(26, 28, 5, 6)} `) } /** 薯条 */ function artFries(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${[26, 32, 38, 44].map(x => ``).join('')} `) } /** 西瓜 */ function artWatermelon(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} ${[24, 32, 40].map(x => ``).join('')} ${shine(24, 30, 4, 3)} `) } /** 糖果 */ function artCandy(key, base, dark, type = 'lollipop') { const g = gid(key, 'g') if (type === 'wrap') { return wrap(key, ` ${shadow(key)} `) } return wrap(key, ` ${shadow(key)} ${shine(26, 24, 4, 3)} `) } /** 糯米团 */ function artDango(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} `) } /** 爆米花 */ function artPopcorn(key) { const g = gid(key, 'g') return wrap(key, ` ${shadow(key)} `) } const FOOD_ART = { lettuce: () => artLeafy('lettuce', '#c5e1a5', '#81c784', '#388e3c'), broccoli: () => artBroccoli('broccoli'), apple: () => artRound('apple', '#e53935', '#b71c1c', '#ef5350'), cucumber: () => artLong('cucumber', '#66bb6a', '#2e7d32', '#a5d6a7'), eggplant: () => artEggplant('eggplant'), tomato: () => artTomato('tomato'), pepper: () => artPepper('pepper', '#43a047', '#1b5e20'), onion: () => artOnion('onion'), pear: () => artRound('pear', '#c0ca33', '#827717', '#dce775', ''), orange: () => artRound('orange', '#fb8c00', '#e65100', '#ffb74d'), peach: () => artRound('peach', '#ff8a65', '#e64a19', '#ffab91'), cherry: () => artCherry('cherry'), grape: () => artGrapes('grape'), strawberry: () => artStrawberry('strawberry'), soybean: () => artBeans('soybean'), milk: () => artCup('milk', '#eceff1', '#b0bec5'), tea: () => artCup('tea', '#a1887f', '#6d4c41'), mushroom: () => artMushroom('mushroom'), celery: () => artCelery('celery'), greenBean: () => artGreenBean('greenBean'), brownRice: () => artRiceBowl('brownRice', '#bcaaa4', '#8d6e63', '#6d4c41'), sweetPotato: () => artRoot('sweetPotato', '#c75b39', '#8d2600', '#e57373'), taro: () => artRoot('taro', '#b39ddb', '#5e35b1', '#d1c4e9'), fish: () => artMeat('fish', '#4fc3f7', '#0277bd', 'fish'), chicken: () => artMeat('chicken', '#ffb74d', '#e65100', 'chicken'), beef: () => artMeat('beef', '#c0504d', '#7f0000', 'steak'), leanMeat: () => artMeat('leanMeat', '#b5654d', '#8d4000', 'steak'), shrimp: () => artSeafood('shrimp', 'shrimp'), crab: () => artSeafood('crab', 'crab'), banana: () => artLong('banana', '#fdd835', '#f9a825', '#fff176', 'banana'), mango: () => artRound('mango', '#ffb300', '#ff6f00', '#ffca28'), pineapple: () => artPineapple('pineapple'), kiwi: () => artKiwi('kiwi'), melon: () => artMelon('melon'), honey: () => artHoney('honey'), wine: () => artCup('wine', '#9b2c3b', '#4a0e16', 'wine'), beer: () => artCup('beer', '#ffb300', '#ff8f00'), coffee: () => artCup('coffee', '#6f4e37', '#3e2723'), corn: () => artLong('corn', '#f9c513', '#f57f17', '#fff176', 'corn'), udon: () => artNoodle('udon', '#d9b88f'), whiteRice: () => artRiceBowl('whiteRice', '#f5f5f5', '#eeeeee', '#bdbdbd'), whiteBread: () => artBread('whiteBread', '#d9a85c', '#a1887f', 'loaf'), mantou: () => artBread('mantou', '#ece0c8', '#bcaaa4', 'mantou'), youtiao: () => artBread('youtiao', '#d4943f', '#a1660a', 'loaf'), donut: () => artBread('donut', '#e87fb0', '#ad1457', 'donut'), popcorn: () => artPopcorn('popcorn'), ramen: () => artNoodle('ramen', '#e0a96d'), pumpkin: () => artPumpkin('pumpkin'), bakedPotato: () => artFries('bakedPotato'), watermelon: () => artWatermelon('watermelon'), sugar: () => artCandy('sugar', '#ff79b0', '#c2185b', 'lollipop'), maltose: () => artCandy('maltose', '#ffa726', '#e65100', 'wrap'), soda: () => artCup('soda', '#c62828', '#880e0e', 'bottle'), orangeJuice: () => artCup('orangeJuice', '#ff9f1c', '#e65100', 'bottle'), stickyRice: () => artDango('stickyRice') } const imgCache = {} /** 获取食材插画 data URL(带缓存) */ export function getFoodImg(key) { if (imgCache[key]) return imgCache[key] const builder = FOOD_ART[key] if (!builder) return '' imgCache[key] = svgToDataUrl(builder()) return imgCache[key] } export function warmUpFoodImgs(keys) { keys.forEach((k) => getFoodImg(k)) }