使用 项目地址:https://dst-recipe.netlify.app
基本搜索 在下方输入框中输入关键字,可以是名称、拼音、拼音首字母
展示食材基本信息、制作必须食材和条件
多个结果 多个结果可以滑动查看
代码分析 逻辑上来说是分为两块,一个是食材,一个是食谱
食材 每种食材有不同的属性,比如肉度、怪物度、鱼度等等
所以就需要一个基类来表示食材
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 export abstract class IngredientBase extends InstanceClass { protected abstract _name : string protected _meat ?: number protected _monster ?: number protected _fish ?: number }
实现类
1 2 3 4 5 6 7 8 9 10 import icon from '~/assets/images/ingredients/monster-meat.png' import { IngredientBase } from '~/composables/ingredient/ingredientBaseClass' export default class MonsterMeat extends IngredientBase { protected _name = '怪物肉' protected _image = icon protected override _meat = 1 protected override _monster = 1 }
食谱 每种食谱有不同的制作条件,比如所需食材、属性度条件等等
实现方式也相同
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 export abstract class FoodBase extends InstanceClass { private _pinyin : string = '' private _pinyinInitials : string = '' protected abstract _name : string protected abstract _health : number protected abstract _hunger : number protected abstract _sanity : number protected abstract _rot : number protected abstract _cooking : number protected abstract _priority : number protected abstract _image : string protected _merge : IngredientTypeKey [][] = [] protected _ingredientsCondition : IngredientsCondition = [] protected _warlyOnly : boolean = false protected _meat ?: ComparisonOperator protected _monster ?: ComparisonOperator protected _monster ?: ComparisonOperator }
除了所需属性度之外,还有一些其他配置,例如 _merge
,可以表示某几个属性度任意一个满足即可
比如火鸡正餐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 import type { IngredientTypeKey } from '~/enums/ingredientType' import type { ComparisonOperator } from '~/types/comparisonOperator' import type { IngredientsCondition } from '~/types/ingredientsCondition' import icon from '~/assets/images/foods/turkey-dinner.png' import { FoodBase } from '~/composables/food/foodBaseClass' import Drumstick from '~/ingredients/drumstick' export default class TurkeyDinner extends FoodBase { _name = '火鸡正餐' _health = 20 _hunger = 75 _sanity = 5 _rot = 6 _cooking = 60 _priority = 10 _image = icon protected override _ingredientsCondition : IngredientsCondition = [ { ingredients : [ Drumstick ], condition : { ge : 2 } } ] protected override _merge : IngredientTypeKey [][] = [ ['vegetable' , 'fruit' ] ] protected override _meat : ComparisonOperator = { gt : 1 } protected override _vegetable : ComparisonOperator = { ge : 0.5 } protected override _fruit : ComparisonOperator = { gt : 0 } }
会显示为这样
_ingredientsCondition
是所需食材,有时也需要表示某几种食材满足一种即可
比如发光浆果慕斯
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 import type { ComparisonOperator } from '~/types/comparisonOperator' import type { IngredientsCondition } from '~/types/ingredientsCondition' import icon from '~/assets/images/foods/glow-berry-mousse.png' import { FoodBase } from '~/composables/food/foodBaseClass' import GlowBerry from '~/ingredients/glowBerry' import LesserGlowBerry from '~/ingredients/lesserGlowBerry' export default class GlowBerryMousse extends FoodBase { _name = '发光浆果慕斯' _health = 3 _hunger = 37.5 _sanity = 10 _rot = 8 _cooking = 20 _priority = 30 _image = icon protected override _ingredientsCondition : IngredientsCondition = [ [ { ingredients : [ GlowBerry ], condition : { ge : 1 } }, { ingredients : [ LesserGlowBerry ], condition : { ge : 2 } } ] ] protected override _fish : ComparisonOperator = { ge : 1 } protected override _notEdible : ComparisonOperator = { eq : 0 } protected override _warlyOnly = true }
会显示为这样
开源 imba97/dst-recipe
数据来源 饥荒中文维基-烹饪