Skip to content

Commit

Permalink
feat: forest_autumn
Browse files Browse the repository at this point in the history
  • Loading branch information
max1mde committed Dec 3, 2024
1 parent 047ce09 commit 9e1a810
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 103 deletions.
179 changes: 77 additions & 102 deletions src/common/Card.js
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ class Card {
</g>
`,

autumn: `
forest_autumn: `
<defs>
<mask id="${maskId}" x="0" y="0" width="${this.width}" height="99%">
<rect x="0" y="0" width="${this.width - 1}" height="99%" rx="${this.border_radius}" fill="white"/>
Expand All @@ -251,13 +251,28 @@ class Card {
<!-- Sky Layer with Gradient -->
<rect x="0" y="0" width="${this.width}" height="${this.height}" fill="url(#autumnSkyGradient)" class="sky"/>
<!-- Falling Leaves Layer -->
<g class="falling-leaves">
${this.renderFallingLeaves()}
</g>
<!-- Forest Layers -->
${this.renderAutumnForestLayers()}
<svg width="100" height="100" x="${this.width / 2 - 50}" y="100" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 111.69 111.69" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="sun"> <g> <g> <circle style="fill:#FCDD66;" cx="55.845" cy="55.845" r="55.845"></circle> </g> </g> <g> <g> <circle style="fill:#FBD009;" cx="55.845" cy="55.845" r="46.174"></circle> </g> </g> </g> </g></svg>
${this.renderCloudLayers()}
${this.renderScene("#6D3E2F", "#8B4513", "#D2691E", "#A0522D", "#B87333", "#CD853F", "#D2B48C", "#9E6642", "#C19A6B", "#556B2F", "#8FBC8F")}
<g class="snow-container">
${this.renderLeaves([
`
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#F7B239;" d="M386.305,375.436c-11.854,9.481-25.001,14.215-37.596,16.206 c-39.553,6.242-74.091,30.151-92.265,65.836l-0.439,0.877l-0.45-0.877c-18.163-35.685-52.7-59.594-92.254-65.836 c-12.607-1.991-25.754-6.725-37.596-16.206c11.842-7.895-28.959-27.643-35.538-73.708c13.158,9.222-1.316-34.211,9.211-53.96 c13.158,9.211,28.959-25.001,31.591-52.644c23.685,5.263,39.486-19.737,39.486-46.065c15.79,2.632,31.58-10.527,31.58-43.433 c7.906,7.895,26.328-14.474,25.012-36.854c9.211,9.211,17.106-17.106,11.842-42.117C249.427,33.233,256.006,0,256.006,0 s6.579,33.233,17.106,26.654c-5.263,25.012,2.632,51.328,11.842,42.117c-1.316,22.38,17.117,44.749,25.012,36.854 c0,32.907,15.79,46.065,31.591,43.433c0,26.328,15.79,51.328,39.486,46.065c2.632,27.643,18.421,61.855,31.58,52.644 c10.527,19.749-3.947,63.182,9.211,53.96C415.254,347.792,374.452,367.541,386.305,375.436z"></path> <path style="fill:#E09B2D;" d="M256.006,0v458.355l-0.45-0.877c-18.163-35.685-52.7-59.594-92.254-65.836 c-12.607-1.991-25.754-6.725-37.596-16.206c11.842-7.895-28.959-27.643-35.538-73.708c13.158,9.222-1.316-34.211,9.211-53.96 c13.158,9.211,28.959-25.001,31.591-52.644c23.685,5.263,39.486-19.737,39.486-46.065c15.79,2.632,31.58-10.527,31.58-43.433 c7.906,7.895,26.328-14.474,25.012-36.854c9.211,9.211,17.106-17.106,11.842-42.117C249.427,33.233,256.006,0,256.006,0z"></path> <path style="fill:#995C0D;" d="M354.966,289.653c-2.923-1.045-6.142,0.478-7.186,3.404c-12.266,34.347-61.38,62.868-83.343,74.178 V293.76c4.171-2.091,10.029-5.186,16.252-8.981c16.116-9.832,26.302-19.248,30.274-27.986c1.285-2.827,0.035-6.162-2.791-7.446 c-2.827-1.284-6.162-0.035-7.446,2.791c-4.685,10.306-22.932,21.845-36.288,28.981v-72.153l15.469-8.63 c2.713-1.513,3.684-4.938,2.171-7.65c-1.514-2.713-4.941-3.683-7.65-2.171l-9.99,5.574v-61.39c0-4.658-3.777-8.435-8.435-8.435 c-4.658,0-8.435,3.777-8.435,8.435v61.39l-9.99-5.574c-2.711-1.515-6.137-0.541-7.65,2.171c-1.514,2.713-0.541,6.137,2.171,7.65 l15.469,8.63v72.153c-13.355-7.137-31.602-18.674-36.287-28.981c-1.287-2.827-4.618-4.078-7.446-2.791 c-2.827,1.285-4.077,4.619-2.791,7.446c7.279,16.013,34.014,30.787,46.526,36.998v73.451 c-21.958-11.299-71.062-39.797-83.343-74.183c-1.044-2.925-4.263-4.451-7.186-3.404c-2.925,1.045-4.449,4.262-3.404,7.186 c7.411,20.753,26.602,41.555,57.04,61.83c15.143,10.087,29.175,17.401,36.894,21.177v123.719c0,4.658,3.777,8.435,8.435,8.435 c4.658,0,8.435-3.777,8.435-8.435V379.847c7.717-3.775,21.75-11.09,36.894-21.177c30.437-20.274,49.629-41.076,57.04-61.83 C359.416,293.916,357.892,290.698,354.966,289.653z"></path> </g></svg>
`,
`
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#F4DE3B;" d="M432.714,215.329L321.63,309.264c-12.174,10.299-2.015,29.952,13.421,25.98l24.162-6.21 c21.762-5.592,36.616,21.529,20.19,36.849l-60.884,56.818c-8.481,7.91-18.314,14.073-28.916,18.256 c-10.613,4.182-21.995,6.384-33.599,6.384c-23.207,0-45.552-8.807-62.515-24.64l-60.895-56.818 c-16.427-15.32-1.561-42.441,20.19-36.849l24.174,6.21c15.436,3.973,25.584-15.681,13.421-25.98L79.284,215.329 c-31.374-26.539,2.179-75.703,38.317-56.165l32.702,17.673c13.479,7.281,26.958-9.635,16.846-21.145l-56.771-64.612 c-20.959-23.859,8.842-58.227,35.428-40.857l38.737,20.434c14.598,7.689,32.143-2.889,32.143-19.397V39.319 c0-10.858,4.404-20.691,11.522-27.809C235.314,4.404,245.147,0,256.005,0c21.716,0,39.319,17.603,39.319,39.319v11.941 c0,16.508,17.545,27.087,32.143,19.397l38.725-20.434c26.586-17.37,56.387,16.998,35.428,40.857l-56.771,64.612 c-10.112,11.51,3.379,28.426,16.858,21.145l32.69-17.673C430.547,139.627,464.088,188.79,432.714,215.329z"></path> <path style="fill:#E0C734;" d="M256.005,0v447.342c-23.207,0-45.552-8.807-62.515-24.64l-60.895-56.818 c-16.427-15.32-1.561-42.441,20.19-36.849l24.174,6.21c15.436,3.973,25.584-15.681,13.421-25.98L79.284,215.329 c-31.374-26.539,2.179-75.703,38.317-56.165l32.702,17.673c13.479,7.281,26.958-9.635,16.846-21.145l-56.771-64.612 c-20.959-23.859,8.842-58.227,35.428-40.857l38.737,20.434c14.598,7.689,32.143-2.889,32.143-19.397V39.319 c0-10.858,4.404-20.691,11.522-27.809C235.314,4.404,245.147,0,256.005,0z"></path> <path style="fill:#B27214;" d="M299.463,254.561c2.583-1.919,3.121-5.568,1.202-8.15c-1.918-2.582-5.566-3.121-8.149-1.202 l-27.777,20.635v-106.06l34.724-25.796c2.583-1.918,3.121-5.568,1.202-8.149c-1.918-2.582-5.566-3.121-8.149-1.202l-27.777,20.635 V73.395c0-4.825-3.911-8.738-8.738-8.738s-8.738,3.912-8.738,8.738v71.877l-27.779-20.635c-2.582-1.919-6.23-1.379-8.149,1.202 c-1.918,2.583-1.381,6.232,1.202,8.149l34.726,25.796v106.06l-27.779-20.636c-2.582-1.919-6.23-1.379-8.149,1.202 c-1.918,2.582-1.381,6.232,1.202,8.149l34.726,25.796v105.44l-27.779-20.635c-2.582-1.919-6.23-1.379-8.149,1.202 c-1.918,2.583-1.381,6.232,1.202,8.149l34.726,25.796v102.955c0,4.825,3.911,8.738,8.738,8.738c4.827,0,8.738-3.912,8.738-8.738 V400.308l34.724-25.796c2.583-1.918,3.121-5.568,1.202-8.149c-1.918-2.583-5.566-3.121-8.149-1.202l-27.777,20.635V280.357 L299.463,254.561z"></path> </g></svg>
`,
`,
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#CED663;" d="M512,241.696c-28.024,42.777-53.46,68.625-74.096,84.249c-25.165,19.059-39.024,49.331-38.354,80.908 c0.353,16.342,1.176,47.931-16.495,45.33c-121.967-17.895-127.05-96.708-127.05-96.708s-5.118,79.602-127.05,96.708 c-17.695,2.482-16.847-28.989-16.506-45.33c0.671-31.577-13.177-61.848-38.354-80.908C53.472,310.321,28.024,284.473,0,241.696 c0,0,49.86-63.06,113.473-66.66c16.424-0.929,30.46-12.059,35.013-27.859c14.671-50.907,38.177-107.85,107.52-142.521 c69.343,34.671,92.837,91.614,107.508,142.521c4.553,15.8,18.589,26.93,35.013,27.859C462.14,178.635,512,241.696,512,241.696z"></path> <path style="fill:#B2B548;" d="M256.006,4.655v350.82c0,0-5.118,79.602-127.05,96.708c-17.695,2.482-16.847-28.989-16.506-45.33 c0.671-31.577-13.177-61.848-38.354-80.908C53.472,310.321,28.024,284.473,0,241.696c0,0,49.86-63.06,113.473-66.66 c16.424-0.929,30.46-12.059,35.013-27.859C163.157,96.269,186.663,39.326,256.006,4.655z"></path> <path style="fill:#B27214;" d="M440.463,254.692c-0.844-3.137-4.073-4.995-7.21-4.151c-96.474,25.981-146.762,60.725-168.427,79.455 V211.063l57.421-53.114c2.384-2.206,2.529-5.928,0.324-8.312c-2.208-2.386-5.928-2.529-8.313-0.324l-49.432,45.723V42.584 c0-4.873-3.949-8.824-8.824-8.824s-8.824,3.951-8.824,8.824v152.453l-49.432-45.725c-2.382-2.206-6.106-2.061-8.313,0.324 c-2.206,2.385-2.061,6.106,0.324,8.312l57.421,53.114v118.933c-21.666-18.73-71.953-53.474-168.429-79.455 c-3.135-0.842-6.365,1.013-7.21,4.151c-0.845,3.138,1.013,6.365,4.151,7.21c108.994,29.352,157.766,70.652,171.487,84.202v152.419 c0,4.873,3.949,8.824,8.824,8.824s8.824-3.951,8.824-8.824V346.104c13.723-13.55,62.494-54.851,171.486-84.201 C439.45,261.058,441.308,257.83,440.463,254.692z"></path> </g></svg>
`,
])}
</g>
<!-- Mist Overlay -->
<rect x="0" y="0" width="${this.width}" height="${this.height}" fill="#FFFFFF" opacity="0.1" class="mist"/>
Expand Down Expand Up @@ -463,6 +478,51 @@ class Card {
`;
}).join("");
}

renderLeaves(leafIcons = []) {
const defaultLeafIcon = `
<svg class="static-rotate" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#CED663;" d="M512,241.696c-28.024,42.777-53.46,68.625-74.096,84.249c-25.165,19.059-39.024,49.331-38.354,80.908 c0.353,16.342,1.176,47.931-16.495,45.33c-121.967-17.895-127.05-96.708-127.05-96.708s-5.118,79.602-127.05,96.708 c-17.695,2.482-16.847-28.989-16.506-45.33c0.671-31.577-13.177-61.848-38.354-80.908C53.472,310.321,28.024,284.473,0,241.696 c0,0,49.86-63.06,113.473-66.66c16.424-0.929,30.46-12.059,35.013-27.859c14.671-50.907,38.177-107.85,107.52-142.521 c69.343,34.671,92.837,91.614,107.508,142.521c4.553,15.8,18.589,26.93,35.013,27.859C462.14,178.635,512,241.696,512,241.696z"></path> <path style="fill:#B2B548;" d="M256.006,4.655v350.82c0,0-5.118,79.602-127.05,96.708c-17.695,2.482-16.847-28.989-16.506-45.33 c0.671-31.577-13.177-61.848-38.354-80.908C53.472,310.321,28.024,284.473,0,241.696c0,0,49.86-63.06,113.473-66.66 c16.424-0.929,30.46-12.059,35.013-27.859C163.157,96.269,186.663,39.326,256.006,4.655z"></path> <path style="fill:#B27214;" d="M440.463,254.692c-0.844-3.137-4.073-4.995-7.21-4.151c-96.474,25.981-146.762,60.725-168.427,79.455 V211.063l57.421-53.114c2.384-2.206,2.529-5.928,0.324-8.312c-2.208-2.386-5.928-2.529-8.313-0.324l-49.432,45.723V42.584 c0-4.873-3.949-8.824-8.824-8.824s-8.824,3.951-8.824,8.824v152.453l-49.432-45.725c-2.382-2.206-6.106-2.061-8.313,0.324 c-2.206,2.385-2.061,6.106,0.324,8.312l57.421,53.114v118.933c-21.666-18.73-71.953-53.474-168.429-79.455 c-3.135-0.842-6.365,1.013-7.21,4.151c-0.845,3.138,1.013,6.365,4.151,7.21c108.994,29.352,157.766,70.652,171.487,84.202v152.419 c0,4.873,3.949,8.824,8.824,8.824s8.824-3.951,8.824-8.824V346.104c13.723-13.55,62.494-54.851,171.486-84.201 C439.45,261.058,441.308,257.83,440.463,254.692z"></path> </g></svg>
`;

const leafIconsToUse = leafIcons.length > 0 ? leafIcons : [defaultLeafIcon];

return Array.from({ length: 40 }, () => {
const x = Math.random() * this.width;
const y = 0;
const size = Math.random() * 12 + 6;
const speed = Math.random() * 25 + 14;

const leafIcon =
leafIconsToUse[Math.floor(Math.random() * leafIconsToUse.length)];

return `
<g style="animation: leafFall ${speed}s linear infinite">
<svg
x="${x}"
y="${y}"
height="${size}px"
width="${size}px"
>
${leafIcon}
</svg>
</g>
<g style="animation: leafFallMirrored ${speed}s linear infinite">
<svg
x="${x}"
y="${y}"
height="${size}px"
width="${size}px"
style="transform: rotate(180deg); transform-origin: center;"
>
${leafIcon}
</svg>
</g>
`;
}).join("");
}

renderSnowflakes() {
return Array.from({ length: 100 }, () => {
const x = Math.random() * this.width;
Expand Down Expand Up @@ -672,78 +732,6 @@ class Card {
`;
}

renderFallingLeaves() {
const leafColors = [
"#8B4513",
"#D2691E",
"#CD853F",
"#DEB887",
"#A0522D",
"#B8860B",
];

return Array.from({ length: 300 }, () => {
const x = Math.random() * (this.width * 2);
const y = -50;
const size = Math.random() * 10 + 5;
const rotation = Math.random() * 360;
const color = leafColors[Math.floor(Math.random() * leafColors.length)];
const fallDuration = Math.random() * 20 + 15;
const horizontalDrift = Math.random() * 100 - 50;
const depth = 0.6 + Math.random() * 0.4;

return `
<g class="leaf" style="animation: fallLeaf ${fallDuration}s linear infinite">
<polygon
points="0,0 ${size / 2},${size} ${size},0"
fill="${color}"
transform="translate(${x},${y}) rotate(${rotation}) translate(${horizontalDrift},0)"
class="falling-leaf"
/>
</g>
`;
}).join("");
}

renderAutumnForestLayers() {
const treeColors = {
trunk: ["#5D4037", "#6D4C41", "#4E342E"],
leaves: ["#D35400", "#FF8C00", "#8B0000", "#B22222", "#A0522D"],
};

return [
{ depth: 0.9, treeSize: 30, opacity: 0.3 },
{ depth: 0.8, treeSize: 50, opacity: 0.5 },
{ depth: 0.7, treeSize: 70, opacity: 0.7 },
{ depth: 0.6, treeSize: 90, opacity: 0.9 },
]
.map(
(layer) => `
<g class="forest-layer" style="opacity: ${layer.opacity}">
${Array.from(
{ length: 20 },
(_, i) => `
<g transform="translate(${i * (this.width / 20)}, ${this.height * layer.depth})">
<rect
x="0"
y="0"
width="5"
height="${layer.treeSize}"
fill="${treeColors.trunk[Math.floor(Math.random() * treeColors.trunk.length)]}"
/>
<polygon
points="0,0 10,-${layer.treeSize} 20,0"
fill="${treeColors.leaves[Math.floor(Math.random() * treeColors.leaves.length)]}"
/>
</g>
`,
).join("")}
</g>
`,
)
.join("");
}

renderScene(
groundColor1,
groundColor2,
Expand Down Expand Up @@ -913,32 +901,15 @@ class Card {
getAnimations() {
return `
@keyframes fallLeaf {
0% {
transform: translateY(-50px) rotate(0deg);
@keyframes leafFall {
0% { transform: translate(-70px, -100px) rotate(140deg); }
100% { transform: translate(${this.width + 50}px, ${this.height + 100}px) rotate(0deg); }
}
100% {
transform: translateY(${this.height + 100}px) rotate(720deg) translateX(${this.width * -1});
}
}
.forest-layer {
animation: move ${Math.random() * 20 + 10}s linear infinite;
}
.falling-leaves {
animation: fallLeavesLoop ${Math.random() * 10 + 30}s linear infinite;
}
@keyframes fallLeavesLoop {
0% {
transform: translateX(0);
@keyframes leafFallMirrored {
0% { transform: translate(-500px, -140px) rotate(6deg); }
100% { transform: translate(${this.width - 100}px, ${this.height + 100}px) rotate(20deg); }
}
100% {
transform: translateX(${this.width * -1});
}
}
@keyframes scaleInAnimation {
from { transform: translate(-5px, 5px) scale(0); }
Expand Down Expand Up @@ -1039,6 +1010,10 @@ class Card {
to { transform: translateX(-${this.width / 2}px); }
}
.static-rotate {
transform: rotate(180deg);
}
.layer-1 {
animation: move 10s linear infinite;
}
Expand Down
2 changes: 1 addition & 1 deletion themes/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ export const themes = {
bg_color: "transparent",
border_color: "ffffff",
},
autumn: {
forest_autumn: {
title_color: "ffffff",
icon_color: "ffffff",
text_color: "ffffff",
Expand Down

0 comments on commit 9e1a810

Please sign in to comment.