101 lines
5.1 KiB
JavaScript
101 lines
5.1 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const tongji_utils_svgDataUrl = require("../utils/svgDataUrl.js");
|
|
const tongji_utils_treeLevels = require("../utils/treeLevels.js");
|
|
const _sfc_main = {
|
|
__name: "SugarTreeGraphic",
|
|
props: {
|
|
level: { type: Number, default: 0 },
|
|
size: { type: String, default: "md" },
|
|
watering: { type: Boolean, default: false }
|
|
},
|
|
setup(__props) {
|
|
const MAX_LEVEL = tongji_utils_treeLevels.TREE_MAX_LEVEL;
|
|
const treeUseFallback = common_vendor.ref(true);
|
|
const props = __props;
|
|
const clampedLevel = common_vendor.computed(() => Math.min(MAX_LEVEL, Math.max(0, Number(props.level) || 0)));
|
|
const visualTier = common_vendor.computed(() => {
|
|
const lv = clampedLevel.value;
|
|
if (lv <= 0)
|
|
return 0;
|
|
if (lv <= 2)
|
|
return 1;
|
|
if (lv <= 4)
|
|
return 2;
|
|
if (lv <= 6)
|
|
return 3;
|
|
if (lv <= 8)
|
|
return 4;
|
|
return 5;
|
|
});
|
|
const treeEmoji = common_vendor.computed(() => (tongji_utils_treeLevels.TREE_LEVELS[clampedLevel.value] || tongji_utils_treeLevels.TREE_LEVELS[0]).emoji);
|
|
function buildTreeSvg(level) {
|
|
const pot = `
|
|
<ellipse cx="24" cy="50" rx="15" ry="3" fill="#204e2b" opacity="0.12"/>
|
|
<path d="M11 46h26c1.2 0 2 1 2 2.2v3.8c0 1-.8 1.8-1.8 1.8H10.8c-1 0-1.8-.8-1.8-1.8v-3.8c0-1.2.8-2.2 2-2.2z" fill="#E7E5E4"/>
|
|
<path d="M12.5 46h23c.8 0 1.5.7 1.5 1.5v2.2c0 .6-.5 1.1-1.1 1.1H12.1c-.6 0-1.1-.5-1.1-1.1v-2.2c0-.8.7-1.5 1.5-1.5z" fill="#D6D3D1"/>
|
|
<ellipse cx="24" cy="46.5" rx="9" ry="1.6" fill="#A8A29E" opacity="0.35"/>
|
|
`;
|
|
const soil = `<ellipse cx="24" cy="44.5" rx="8" ry="2.2" fill="#386641" opacity="0.18"/>`;
|
|
if (level <= 0) {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">
|
|
${pot}${soil}
|
|
<circle cx="24" cy="41.5" r="2.2" fill="#a8a29e" opacity="0.7"/>
|
|
<path d="M24 41.5v3.5" stroke="#78716c" stroke-width="1" stroke-linecap="round"/>
|
|
</svg>`;
|
|
}
|
|
const trunkH = level >= 6 ? 16 : level >= 3 ? 14 : 10;
|
|
const trunkY = 46 - trunkH;
|
|
const trunk = `<rect x="22.2" y="${trunkY}" width="3.6" height="${trunkH}" rx="1.8" fill="#78716C"/>
|
|
<rect x="22.6" y="${trunkY + 1}" width="2.8" height="${trunkH - 1}" rx="1.4" fill="#A8A29E" opacity="0.35"/>`;
|
|
const leaf = (cx, cy, r, fill, opacity = 1) => `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" opacity="${opacity}"/>
|
|
<circle cx="${cx - r * 0.25}" cy="${cy - r * 0.2}" r="${r * 0.35}" fill="#eef6ef" opacity="0.55"/>`;
|
|
const bloom = level >= 7 ? leaf(17, 18, 3, "#fda4af", 0.95) + leaf(31, 17, 2.8, "#f9a8d4", 0.9) + leaf(24, 13, 3.2, "#fb7185", 0.95) + `<circle cx="24" cy="12" r="1.3" fill="#fef3c7"/>` : "";
|
|
const crown = level >= 9 ? leaf(12, 22, 6, "#34d399", 0.9) + leaf(36, 22, 6, "#34d399", 0.9) + leaf(24, 10, 7, "#386641", 0.95) + bloom : bloom;
|
|
let canopy = "";
|
|
if (level === 1) {
|
|
canopy = leaf(24, 38, 4, "#afe2b3") + `<path d="M24 38v-5" stroke="#386641" stroke-width="1.2" stroke-linecap="round"/>`;
|
|
} else if (level === 2) {
|
|
canopy = leaf(24, 32, 5.5, "#34d399") + leaf(20, 34, 3.5, "#6ee7b7", 0.9);
|
|
} else if (level <= 4) {
|
|
canopy = leaf(24, 28, 7, "#34d399") + leaf(17, 30, 5, "#6ee7b7", 0.9) + leaf(31, 30, 5, "#6ee7b7", 0.9);
|
|
} else if (level <= 6) {
|
|
canopy = leaf(24, 24, 9, "#22c55e") + leaf(14, 26, 7, "#4ade80", 0.92) + leaf(34, 26, 7, "#4ade80", 0.92) + leaf(24, 16, 6, "#386641", 0.88);
|
|
} else {
|
|
canopy = leaf(24, 20, 10, "#204e2b") + leaf(13, 24, 8, "#34d399", 0.95) + leaf(35, 24, 8, "#34d399", 0.95) + crown;
|
|
}
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">${pot}${soil}${trunk}${canopy}</svg>`;
|
|
}
|
|
const treeImageSrc = common_vendor.computed(() => tongji_utils_svgDataUrl.svgToDataUrl(buildTreeSvg(clampedLevel.value)));
|
|
return (_ctx, _cache) => {
|
|
return common_vendor.e({
|
|
a: clampedLevel.value >= 7
|
|
}, clampedLevel.value >= 7 ? {} : {}, {
|
|
b: !treeUseFallback.value
|
|
}, !treeUseFallback.value ? {
|
|
c: treeImageSrc.value,
|
|
d: common_vendor.o(($event) => treeUseFallback.value = true, "20")
|
|
} : {
|
|
e: common_vendor.t(treeEmoji.value)
|
|
}, {
|
|
f: clampedLevel.value >= 7
|
|
}, clampedLevel.value >= 7 ? {} : {}, {
|
|
g: clampedLevel.value >= 8
|
|
}, clampedLevel.value >= 8 ? {} : {}, {
|
|
h: clampedLevel.value >= common_vendor.unref(MAX_LEVEL)
|
|
}, clampedLevel.value >= common_vendor.unref(MAX_LEVEL) ? {} : {}, {
|
|
i: common_vendor.n(`lv-${clampedLevel.value}`),
|
|
j: common_vendor.n(`tier-${visualTier.value}`),
|
|
k: common_vendor.n(`size-${__props.size}`),
|
|
l: common_vendor.n({
|
|
watering: __props.watering,
|
|
"is-max": clampedLevel.value >= common_vendor.unref(MAX_LEVEL)
|
|
})
|
|
});
|
|
};
|
|
}
|
|
};
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-d91cb5e7"]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/tongji/components/SugarTreeGraphic.js.map
|