This commit is contained in:
parent
86c50b315a
commit
9e0e842c2d
22
client/public/leaf-brown.svg
Normal file
22
client/public/leaf-brown.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#8B4513" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
22
client/public/leaf-green.svg
Normal file
22
client/public/leaf-green.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#228B22" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
22
client/public/leaf-orange.svg
Normal file
22
client/public/leaf-orange.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#D2691E" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
22
client/public/leaf-red.svg
Normal file
22
client/public/leaf-red.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#B22222" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
22
client/public/leaf-yellow.svg
Normal file
22
client/public/leaf-yellow.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#FFD700" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
22
client/public/leaf.svg
Normal file
22
client/public/leaf.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="100px" height="100px" viewBox="1 0 100 100" enable-background="new 1 0 100 100" xml:space="preserve">
|
||||||
|
<path fill="#471C37" d="M31.5,77.2c0,0,2.6-1.9,3.4-2.8c0.8-0.9,2-2.5,2-2.5s-4.7-0.7-7.9-1.6c-3.2-0.9-9.7-3.7-9.7-3.7
|
||||||
|
s1.3-0.4,2.9-1.4c1.6-1.1,2-1.7,2-1.7s-4.7-1.3-7.5-2.4c-2.8-1-7.3-2.9-7.3-2.9s1.4-0.2,2.8-1.3c1.4-1.1,1.5-2.2,1.5-2.2
|
||||||
|
S9.4,53.3,7,51.9c-2.4-1.5-5.3-3.7-5.3-3.7s5.2-4,8.7-5.5c3.5-1.5,9.1-2.6,9.1-2.6s-0.9-1.5-2.1-2.6c-1.1-1.1-4.2-2.9-4.2-2.9
|
||||||
|
s5.6-1.9,8.3-2.5c2.7-0.6,8.2,0,8.2,0s-0.1-1.1-1.3-2.2c-1.2-1.1-2.7-2-2.7-2S33,25.4,37,24.4c4-1,10.8-0.6,10.8-0.6
|
||||||
|
S46.1,22.1,45,21c-1.1-1.1-2.7-2.3-2.7-2.3s5.4-0.4,9.1-0.4c3.7,0.1,9.5,1.1,9.5,1.1s-0.7-1-1.4-2.3c-0.8-1.3-1.5-2.6-1.5-2.6
|
||||||
|
s7.1,1.7,9.5,2.8c2.4,1,7.6,3.9,7.6,3.9s-0.1-1.8-1-3.5c-0.9-1.7-1.8-3-1.8-3s27.7,17.2,28.1,33.5c0.1,1.8-0.1,3.7-0.3,5.5
|
||||||
|
c-1.5-0.7-3.1-1.3-4.7-1.8c-2.3-6.3-4.3-9.9-6.4-12.6c-2.4-2.9-6.9-8-9.6-9.1c2.3,1.9,6.8,6.2,9.7,11.8c2.3,4.6,3,5.6,3.8,9.2
|
||||||
|
c-3.6-1.1-7.3-1.9-11-2.5c-0.7-0.1-1.4-0.2-2.1-0.3c-2-4.3-4.4-8.8-7.6-11.5c-3.7-3.2-8.3-6.7-11.1-7.5c2.6,1.5,8.7,6.8,11.8,10.9
|
||||||
|
c2.2,3,2.9,5.1,4,7.7c-5-0.6-9.9-0.9-14.9-1.1c-2-3.7-4.5-7.5-7.6-9.6c-3.4-2.4-7.6-5-10-5.5c2.3,1.1,7.9,5.1,10.8,8.3
|
||||||
|
c2.3,2.6,3,4.4,4.2,6.9c-11.1,0.4-22,1.7-32.8,3.6c9.4-0.8,18.9-1,28.3-0.6c-1.1,1.7-1.8,3-3.8,4.7c-2.6,2.2-7.5,4.5-9.5,4.9
|
||||||
|
c2,0.1,5.6-1.3,8.6-2.6c2.7-1.3,5.1-4.1,7.1-6.9c1.8,0.1,3.5,0.2,5.3,0.3c2.9,0.1,5.8,0.3,8.7,0.5c-1.4,3-2,5-4.6,8.1
|
||||||
|
c-3.1,3.6-9.1,8-11.6,9.2c2.7-0.4,7.2-3.3,10.8-5.9c3.3-2.4,6-6.8,8.1-11c2.7,0.3,5.4,0.6,8.1,1.1c2,0.3,3.9,0.7,5.9,1.2
|
||||||
|
c-1.9,4.1-2,4.6-5,8c-3.4,3.9-9.1,8.9-11.6,10.4c2.9-0.7,8.5-4.7,11.1-6.7c2.4-1.8,5.8-5.5,8.2-11.1c3,0.8,5.9,1.9,8.7,3.2
|
||||||
|
c-3.1,12.9-11.9,24.1-11.9,24.1s0.2-1.7-0.5-3.9c-0.8-2.2-1-2-1-2s-1.1,2.9-5,6.8c-3.9,3.9-8.9,5-8.9,5s0.7-1.1,0.8-2.4
|
||||||
|
c0.1-1.3-0.3-2-0.3-2s-2.6,1.9-5.3,3c-2.7,1.2-8.6,2.5-8.6,2.5s1.6-1.9,1.9-3c0.3-1-0.3-1.9-0.3-1.9s-3.9,1.5-7.5,1.5
|
||||||
|
c-3.6,0-7.7-1.5-7.7-1.5s1-0.5,1.7-1.8c0.8-1.3,0.2-1.9,0.2-1.9s-4.4,0.5-7.5,0.1C36.6,79.3,31.5,77.2,31.5,77.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -20,6 +20,8 @@ import NoteModal from './components/modals/NoteModal';
|
|||||||
import { useEasterEgg } from './context/eggs';
|
import { useEasterEgg } from './context/eggs';
|
||||||
import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime } from '../../types';
|
import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime } from '../../types';
|
||||||
import { getLunchChoiceName } from './enums';
|
import { getLunchChoiceName } from './enums';
|
||||||
|
import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
|
||||||
|
import './FallingLeaves.scss';
|
||||||
|
|
||||||
const EVENT_CONNECT = "connect"
|
const EVENT_CONNECT = "connect"
|
||||||
|
|
||||||
@ -684,6 +686,10 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</> || "Jejda, něco se nám nepovedlo :("}
|
</> || "Jejda, něco se nám nepovedlo :("}
|
||||||
</div>
|
</div>
|
||||||
|
<FallingLeaves
|
||||||
|
numLeaves={LEAF_PRESETS.NORMAL}
|
||||||
|
leafVariants={LEAF_COLOR_THEMES.AUTUMN}
|
||||||
|
/>
|
||||||
<Footer />
|
<Footer />
|
||||||
<NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
|
<NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
31
client/src/FallingLeaves.scss
Normal file
31
client/src/FallingLeaves.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.falling-leaves {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaf-scene {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
backface-visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
317
client/src/FallingLeaves.tsx
Normal file
317
client/src/FallingLeaves.tsx
Normal file
@ -0,0 +1,317 @@
|
|||||||
|
import React, { useEffect, useRef, useCallback } from 'react';
|
||||||
|
|
||||||
|
// Různé barevné varianty listů
|
||||||
|
const LEAF_VARIANTS = [
|
||||||
|
'leaf.svg', // Původní tmavě hnědá
|
||||||
|
'leaf-orange.svg', // Oranžová
|
||||||
|
'leaf-yellow.svg', // Žlutá
|
||||||
|
'leaf-red.svg', // Červená
|
||||||
|
'leaf-brown.svg', // Světle hnědá
|
||||||
|
'leaf-green.svg', // Zelená
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
interface LeafData {
|
||||||
|
el: HTMLDivElement;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
z: number;
|
||||||
|
rotation: {
|
||||||
|
axis: 'X' | 'Y' | 'Z';
|
||||||
|
value: number;
|
||||||
|
speed: number;
|
||||||
|
x: number;
|
||||||
|
};
|
||||||
|
xSpeedVariation: number;
|
||||||
|
ySpeed: number;
|
||||||
|
path: {
|
||||||
|
type: number;
|
||||||
|
start: number;
|
||||||
|
};
|
||||||
|
image: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WindOptions {
|
||||||
|
magnitude: number;
|
||||||
|
maxSpeed: number;
|
||||||
|
duration: number;
|
||||||
|
start: number;
|
||||||
|
speed: (t: number, y: number) => number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LeafSceneOptions {
|
||||||
|
numLeaves: number;
|
||||||
|
wind: WindOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FallingLeavesProps {
|
||||||
|
/** Počet padających listů (výchozí: 20) */
|
||||||
|
numLeaves?: number;
|
||||||
|
/** CSS třída pro kontejner (výchozí: 'falling-leaves') */
|
||||||
|
className?: string;
|
||||||
|
/** Barevné varianty listů k použití (výchozí: všechny) */
|
||||||
|
leafVariants?: readonly string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
class LeafScene {
|
||||||
|
private viewport: HTMLElement;
|
||||||
|
private world: HTMLDivElement;
|
||||||
|
private leaves: LeafData[] = [];
|
||||||
|
private options: LeafSceneOptions;
|
||||||
|
private width: number;
|
||||||
|
private height: number;
|
||||||
|
private timer: number = 0;
|
||||||
|
private animationId: number | null = null;
|
||||||
|
private leafVariants: readonly string[];
|
||||||
|
|
||||||
|
constructor(el: HTMLElement, numLeaves: number = 20, leafVariants: readonly string[] = LEAF_VARIANTS) {
|
||||||
|
this.viewport = el;
|
||||||
|
this.world = document.createElement('div');
|
||||||
|
this.leafVariants = leafVariants;
|
||||||
|
|
||||||
|
this.options = {
|
||||||
|
numLeaves,
|
||||||
|
wind: {
|
||||||
|
magnitude: 1.2,
|
||||||
|
maxSpeed: 12,
|
||||||
|
duration: 300,
|
||||||
|
start: 0,
|
||||||
|
speed: () => 0
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
this.width = this.viewport.offsetWidth;
|
||||||
|
this.height = this.viewport.offsetHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
private resetLeaf = (leaf: LeafData): LeafData => {
|
||||||
|
// place leaf towards the top left
|
||||||
|
leaf.x = this.width * 2 - Math.random() * this.width * 1.75;
|
||||||
|
leaf.y = -10;
|
||||||
|
leaf.z = Math.random() * 200;
|
||||||
|
|
||||||
|
if (leaf.x > this.width) {
|
||||||
|
leaf.x = this.width + 10;
|
||||||
|
leaf.y = Math.random() * this.height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// at the start, the leaf can be anywhere
|
||||||
|
if (this.timer === 0) {
|
||||||
|
leaf.y = Math.random() * this.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Choose axis of rotation.
|
||||||
|
// If axis is not X, chose a random static x-rotation for greater variability
|
||||||
|
leaf.rotation.speed = Math.random() * 10;
|
||||||
|
const randomAxis = Math.random();
|
||||||
|
|
||||||
|
if (randomAxis > 0.5) {
|
||||||
|
leaf.rotation.axis = 'X';
|
||||||
|
} else if (randomAxis > 0.25) {
|
||||||
|
leaf.rotation.axis = 'Y';
|
||||||
|
leaf.rotation.x = Math.random() * 180 + 90;
|
||||||
|
} else {
|
||||||
|
leaf.rotation.axis = 'Z';
|
||||||
|
leaf.rotation.x = Math.random() * 360 - 180;
|
||||||
|
// looks weird if the rotation is too fast around this axis
|
||||||
|
leaf.rotation.speed = Math.random() * 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
// random speed
|
||||||
|
leaf.xSpeedVariation = Math.random() * 0.8 - 0.4;
|
||||||
|
leaf.ySpeed = Math.random() + 1.5;
|
||||||
|
|
||||||
|
// randomly select leaf color variant
|
||||||
|
const randomVariantIndex = Math.floor(Math.random() * this.leafVariants.length);
|
||||||
|
leaf.image = randomVariantIndex;
|
||||||
|
|
||||||
|
// apply the background image to the leaf element
|
||||||
|
const leafVariant = this.leafVariants[randomVariantIndex];
|
||||||
|
leaf.el.style.backgroundImage = `url(${leafVariant})`;
|
||||||
|
|
||||||
|
return leaf;
|
||||||
|
};
|
||||||
|
|
||||||
|
private updateLeaf = (leaf: LeafData): void => {
|
||||||
|
const leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
|
||||||
|
|
||||||
|
const xSpeed = leafWindSpeed + leaf.xSpeedVariation;
|
||||||
|
leaf.x -= xSpeed;
|
||||||
|
leaf.y += leaf.ySpeed;
|
||||||
|
leaf.rotation.value += leaf.rotation.speed;
|
||||||
|
|
||||||
|
const transform = `translateX(${leaf.x}px) translateY(${leaf.y}px) translateZ(${leaf.z}px) rotate${leaf.rotation.axis}(${leaf.rotation.value}deg)${leaf.rotation.axis !== 'X' ? ` rotateX(${leaf.rotation.x}deg)` : ''
|
||||||
|
}`;
|
||||||
|
|
||||||
|
leaf.el.style.transform = transform;
|
||||||
|
|
||||||
|
// reset if out of view
|
||||||
|
if (leaf.x < -10 || leaf.y > this.height + 10) {
|
||||||
|
this.resetLeaf(leaf);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private updateWind = (): void => {
|
||||||
|
// wind follows a sine curve: asin(b*time + c) + a
|
||||||
|
// where a = wind magnitude as a function of leaf position, b = wind.duration, c = offset
|
||||||
|
// wind duration should be related to wind magnitude, e.g. higher windspeed means longer gust duration
|
||||||
|
|
||||||
|
if (this.timer === 0 || this.timer > (this.options.wind.start + this.options.wind.duration)) {
|
||||||
|
this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
|
||||||
|
this.options.wind.duration = this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
|
||||||
|
this.options.wind.start = this.timer;
|
||||||
|
|
||||||
|
const screenHeight = this.height;
|
||||||
|
|
||||||
|
this.options.wind.speed = function (t: number, y: number) {
|
||||||
|
// should go from full wind speed at the top, to 1/2 speed at the bottom, using leaf Y
|
||||||
|
const a = this.magnitude / 2 * (screenHeight - 2 * y / 3) / screenHeight;
|
||||||
|
return a * Math.sin(2 * Math.PI / this.duration * t + (3 * Math.PI / 2)) + a;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
public init = (): void => {
|
||||||
|
// Clear existing leaves
|
||||||
|
this.leaves = [];
|
||||||
|
this.world.innerHTML = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < this.options.numLeaves; i++) {
|
||||||
|
const leaf: LeafData = {
|
||||||
|
el: document.createElement('div'),
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0,
|
||||||
|
rotation: {
|
||||||
|
axis: 'X',
|
||||||
|
value: 0,
|
||||||
|
speed: 0,
|
||||||
|
x: 0
|
||||||
|
},
|
||||||
|
xSpeedVariation: 0,
|
||||||
|
ySpeed: 0,
|
||||||
|
path: {
|
||||||
|
type: 1,
|
||||||
|
start: 0,
|
||||||
|
},
|
||||||
|
image: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
this.resetLeaf(leaf);
|
||||||
|
this.leaves.push(leaf);
|
||||||
|
this.world.appendChild(leaf.el);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.world.className = 'leaf-scene';
|
||||||
|
this.viewport.appendChild(this.world);
|
||||||
|
|
||||||
|
// set perspective
|
||||||
|
this.world.style.perspective = "400px";
|
||||||
|
|
||||||
|
// reset window height/width on resize
|
||||||
|
const handleResize = (): void => {
|
||||||
|
this.width = this.viewport.offsetWidth;
|
||||||
|
this.height = this.viewport.offsetHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
|
||||||
|
public render = (): void => {
|
||||||
|
this.updateWind();
|
||||||
|
|
||||||
|
for (let i = 0; i < this.leaves.length; i++) {
|
||||||
|
this.updateLeaf(this.leaves[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.timer++;
|
||||||
|
this.animationId = requestAnimationFrame(this.render);
|
||||||
|
};
|
||||||
|
|
||||||
|
public destroy = (): void => {
|
||||||
|
if (this.animationId) {
|
||||||
|
cancelAnimationFrame(this.animationId);
|
||||||
|
this.animationId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.world && this.world.parentNode) {
|
||||||
|
this.world.parentNode.removeChild(this.world);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.removeEventListener('resize', () => {
|
||||||
|
this.width = this.viewport.offsetWidth;
|
||||||
|
this.height = this.viewport.offsetHeight;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Komponenta pro zobrazení padajících listů na pozadí stránky
|
||||||
|
*
|
||||||
|
* @param numLeaves - Počet padajících listů (výchozí: 20)
|
||||||
|
* @param className - CSS třída pro kontejner (výchozí: 'falling-leaves')
|
||||||
|
* @param leafVariants - Barevné varianty listů k použití (výchozí: všechny)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // Základní použití s výchozím počtem listů
|
||||||
|
* <FallingLeaves />
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // Použití s vlastním počtem listů
|
||||||
|
* <FallingLeaves numLeaves={50} />
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // Použití s vlastní CSS třídou a pouze podzimními barvami
|
||||||
|
* <FallingLeaves
|
||||||
|
* numLeaves={15}
|
||||||
|
* className="autumn-leaves"
|
||||||
|
* leafVariants={['leaf-orange.svg', 'leaf-red.svg', 'leaf-yellow.svg']}
|
||||||
|
* />
|
||||||
|
*/
|
||||||
|
const FallingLeaves: React.FC<FallingLeavesProps> = ({
|
||||||
|
numLeaves = 20,
|
||||||
|
className = 'falling-leaves',
|
||||||
|
leafVariants = LEAF_VARIANTS
|
||||||
|
}) => {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const leafSceneRef = useRef<LeafScene | null>(null);
|
||||||
|
|
||||||
|
const initializeLeafScene = useCallback(() => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
leafSceneRef.current = new LeafScene(containerRef.current, numLeaves, leafVariants);
|
||||||
|
leafSceneRef.current.init();
|
||||||
|
leafSceneRef.current.render();
|
||||||
|
}
|
||||||
|
}, [numLeaves, leafVariants]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initializeLeafScene();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (leafSceneRef.current) {
|
||||||
|
leafSceneRef.current.destroy();
|
||||||
|
leafSceneRef.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [initializeLeafScene]);
|
||||||
|
|
||||||
|
return <div ref={containerRef} className={className} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Přednastavení pro různé účely
|
||||||
|
export const LEAF_PRESETS = {
|
||||||
|
LIGHT: 10, // Lehký podzimní efekt
|
||||||
|
NORMAL: 20, // Standardní množství
|
||||||
|
HEAVY: 40, // Silný podzimní vítr
|
||||||
|
BLIZZARD: 80 // Hustý pád listí
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// Přednastavené barevné kombinace
|
||||||
|
export const LEAF_COLOR_THEMES = {
|
||||||
|
ALL: LEAF_VARIANTS, // Všechny barvy
|
||||||
|
AUTUMN: ['leaf-orange.svg', 'leaf-red.svg', 'leaf-yellow.svg', 'leaf-brown.svg'] as const, // Podzimní barvy
|
||||||
|
WARM: ['leaf-orange.svg', 'leaf-red.svg', 'leaf-brown.svg'] as const, // Teplé barvy
|
||||||
|
CLASSIC: ['leaf.svg', 'leaf-brown.svg'] as const, // Klasické hnědé odstíny
|
||||||
|
BRIGHT: ['leaf-yellow.svg', 'leaf-orange.svg'] as const, // Světlé barvy
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export default FallingLeaves;
|
||||||
Loading…
x
Reference in New Issue
Block a user