IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

add tactic preview in home

Browse Source
pull/120/head
maxime 1 year ago
parent 3da28f828d
commit 7289a956b3
14 changed files with 308 additions and 240 deletions
Show Stats Download Patch File Download Diff File

156
src/assets/court/full_court.svg
Unescape View File

@ -1,77 +1,77 @@
<svg width="567" height="269" viewBox="0 0 567 269" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="73" y1="24" x2="495" y2="24" stroke="black" stroke-width="2"/>
<line x1="494" y1="23" x2="494" y2="247" stroke="black" stroke-width="2"/>
<line x1="495" y1="248" x2="73" y2="248" stroke="black" stroke-width="2"/>
<line x1="72" y1="249" x2="72" y2="23" stroke="black" stroke-width="2"/>
<line x1="283.5" y1="23" x2="283.5" y2="247" stroke="black"/>
<g filter="url(#filter0_i_3_2)">
<circle cx="283.5" cy="135.5" r="27" stroke="black"/>
<svg width="424" height="226" viewBox="0 0 424 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1H424" stroke="black" stroke-width="2"/>
<path d="M423 0V224" stroke="black" stroke-width="2"/>
<path d="M424 225H2" stroke="black" stroke-width="2"/>
<path d="M1 226V0" stroke="black" stroke-width="2"/>
<path d="M212.5 0V224" stroke="black"/>
<g filter="url(#filter0_i_2_68)">
<path d="M212.5 139.5C227.412 139.5 239.5 127.412 239.5 112.5C239.5 97.5883 227.412 85.5 212.5 85.5C197.588 85.5 185.5 97.5883 185.5 112.5C185.5 127.412 197.588 139.5 212.5 139.5Z" stroke="black"/>
</g>
<line x1="73" y1="99.5" x2="158" y2="99.5" stroke="black"/>
<line x1="73" y1="100.5" x2="158" y2="100.5" stroke="black"/>
<path d="M158.5 172V100" stroke="black"/>
<path d="M158 99.5H159" stroke="black"/>
<path d="M158 172.5H159" stroke="black"/>
<line x1="158" y1="172.5" x2="73" y2="172.5" stroke="black"/>
<line x1="158" y1="171.5" x2="73" y2="171.5" stroke="black"/>
<line x1="73" y1="37.5" x2="139" y2="37.5" stroke="black"/>
<line x1="73" y1="233.5" x2="139" y2="233.5" stroke="black"/>
<g filter="url(#filter1_i_3_2)">
<path d="M158.5 163C161.98 163 165.426 162.315 168.641 160.983C171.856 159.651 174.778 157.699 177.238 155.238C179.699 152.778 181.651 149.856 182.983 146.641C184.315 143.426 185 139.98 185 136.5C185 133.02 184.315 129.574 182.983 126.359C181.651 123.144 179.699 120.222 177.238 117.762C174.778 115.301 171.856 113.349 168.641 112.017C165.426 110.685 161.98 110 158.5 110L158.5 136.5L158.5 163Z" stroke="black"/>
<path d="M2 76.5H87" stroke="black"/>
<path d="M2 77.5H87" stroke="black"/>
<path d="M87.5 149V77" stroke="black"/>
<path d="M87 76.5H88" stroke="black"/>
<path d="M87 149.5H88" stroke="black"/>
<path d="M87 149.5H2" stroke="black"/>
<path d="M87 148.5H2" stroke="black"/>
<path d="M2 14.5H68" stroke="black"/>
<path d="M2 210.5H68" stroke="black"/>
<g filter="url(#filter1_i_2_68)">
<path d="M87.5 140C90.98 140 94.426 139.315 97.641 137.983C100.856 136.651 103.778 134.699 106.238 132.238C108.699 129.778 110.651 126.856 111.983 123.641C113.315 120.426 114 116.98 114 113.5C114 110.02 113.315 106.574 111.983 103.359C110.651 100.144 108.699 97.222 106.238 94.762C103.778 92.301 100.856 90.349 97.641 89.017C94.426 87.685 90.98 87 87.5 87V113.5V140Z" stroke="black"/>
</g>
<g filter="url(#filter2_i_3_2)">
<path d="M158.5 110C155.02 110 151.574 110.685 148.359 112.017C145.144 113.349 142.222 115.301 139.762 117.762C137.301 120.222 135.349 123.144 134.017 126.359C132.685 129.574 132 133.02 132 136.5C132 139.98 132.685 143.426 134.017 146.641C135.349 149.856 137.301 152.778 139.762 155.238C142.222 157.699 145.144 159.651 148.359 160.983C151.574 162.315 155.02 163 158.5 163" stroke="black" stroke-dasharray="4 4"/>
<g filter="url(#filter2_i_2_68)">
<path d="M87.5 87C84.02 87 80.574 87.685 77.359 89.017C74.144 90.349 71.222 92.301 68.762 94.762C66.301 97.222 64.349 100.144 63.017 103.359C61.685 106.574 61 110.02 61 113.5C61 116.98 61.685 120.426 63.017 123.641C64.349 126.856 66.301 129.778 68.762 132.238C71.222 134.699 74.144 136.651 77.359 137.983C80.574 139.315 84.02 140 87.5 140" stroke="black" stroke-dasharray="4 4"/>
</g>
<line x1="135.5" y1="177" x2="135.5" y2="172" stroke="black"/>
<line x1="123.5" y1="177" x2="123.5" y2="172" stroke="black"/>
<line x1="111.5" y1="177" x2="111.5" y2="172" stroke="black"/>
<line x1="99.5" y1="177" x2="99.5" y2="172" stroke="black"/>
<line x1="135.5" y1="100" x2="135.5" y2="95" stroke="black"/>
<line x1="123.5" y1="100" x2="123.5" y2="95" stroke="black"/>
<line x1="111.5" y1="100" x2="111.5" y2="95" stroke="black"/>
<line x1="99.5" y1="100" x2="99.5" y2="95" stroke="black"/>
<path d="M140.212 233.607C159.054 225.612 175.149 211.967 186.427 194.431C197.705 176.895 203.649 156.271 203.497 135.213C203.345 114.155 197.104 93.6242 185.574 76.2645C174.045 58.9047 157.755 45.5096 138.799 37.8066" stroke="black"/>
<path d="M140 233.5H141" stroke="black"/>
<path d="M139 233.5H140" stroke="black"/>
<path d="M90.5 118.5C95.0041 118.5 99.3266 120.34 102.516 123.621C105.706 126.901 107.5 131.354 107.5 136C107.5 140.646 105.706 145.099 102.516 148.379C99.3266 151.66 95.0041 153.5 90.5 153.5" stroke="black"/>
<circle cx="87.5" cy="136.5" r="3" stroke="black"/>
<line x1="83.5" y1="149" x2="83.5" y2="123" stroke="black"/>
<line y1="-0.5" x2="85" y2="-0.5" transform="matrix(-1 0 0 1 494 100)" stroke="black"/>
<line y1="-0.5" x2="85" y2="-0.5" transform="matrix(-1 0 0 1 494 101)" stroke="black"/>
<path d="M408.5 172V100" stroke="black"/>
<path d="M409 99.5H408" stroke="black"/>
<path d="M409 172.5H408" stroke="black"/>
<line y1="-0.5" x2="85" y2="-0.5" transform="matrix(1 0 0 -1 409 172)" stroke="black"/>
<line y1="-0.5" x2="85" y2="-0.5" transform="matrix(1 0 0 -1 409 171)" stroke="black"/>
<line y1="-0.5" x2="66" y2="-0.5" transform="matrix(-1 0 0 1 494 38)" stroke="black"/>
<line y1="-0.5" x2="66" y2="-0.5" transform="matrix(-1 0 0 1 494 234)" stroke="black"/>
<g filter="url(#filter3_i_3_2)">
<path d="M408.5 163C405.02 163 401.574 162.315 398.359 160.983C395.144 159.651 392.222 157.699 389.762 155.238C387.301 152.778 385.349 149.856 384.017 146.641C382.685 143.426 382 139.98 382 136.5C382 133.02 382.685 129.574 384.017 126.359C385.349 123.144 387.301 120.222 389.762 117.762C392.222 115.301 395.144 113.349 398.359 112.017C401.574 110.685 405.02 110 408.5 110L408.5 136.5L408.5 163Z" stroke="black"/>
<path d="M64.5 154V149" stroke="black"/>
<path d="M52.5 154V149" stroke="black"/>
<path d="M40.5 154V149" stroke="black"/>
<path d="M28.5 154V149" stroke="black"/>
<path d="M64.5 77V72" stroke="black"/>
<path d="M52.5 77V72" stroke="black"/>
<path d="M40.5 77V72" stroke="black"/>
<path d="M28.5 77V72" stroke="black"/>
<path d="M69.212 210.607C88.054 202.612 104.149 188.967 115.427 171.431C126.705 153.895 132.649 133.271 132.497 112.213C132.345 91.155 126.104 70.6242 114.574 53.2645C103.045 35.9047 86.755 22.5096 67.799 14.8066" stroke="black"/>
<path d="M69 210.5H70" stroke="black"/>
<path d="M68 210.5H69" stroke="black"/>
<path d="M19.5 95.5C24.0041 95.5 28.3266 97.34 31.516 100.621C34.706 103.901 36.5 108.354 36.5 113C36.5 117.646 34.706 122.099 31.516 125.379C28.3266 128.66 24.0041 130.5 19.5 130.5" stroke="black"/>
<path d="M16.5 116.5C18.1569 116.5 19.5 115.157 19.5 113.5C19.5 111.843 18.1569 110.5 16.5 110.5C14.8431 110.5 13.5 111.843 13.5 113.5C13.5 115.157 14.8431 116.5 16.5 116.5Z" stroke="black"/>
<path d="M12.5 126V100" stroke="black"/>
<path d="M423 76.5H338" stroke="black"/>
<path d="M423 77.5H338" stroke="black"/>
<path d="M337.5 149V77" stroke="black"/>
<path d="M338 76.5H337" stroke="black"/>
<path d="M338 149.5H337" stroke="black"/>
<path d="M338 149.5H423" stroke="black"/>
<path d="M338 148.5H423" stroke="black"/>
<path d="M423 14.5H357" stroke="black"/>
<path d="M423 210.5H357" stroke="black"/>
<g filter="url(#filter3_i_2_68)">
<path d="M337.5 140C334.02 140 330.574 139.315 327.359 137.983C324.144 136.651 321.222 134.699 318.762 132.238C316.301 129.778 314.349 126.856 313.017 123.641C311.685 120.426 311 116.98 311 113.5C311 110.02 311.685 106.574 313.017 103.359C314.349 100.144 316.301 97.222 318.762 94.762C321.222 92.301 324.144 90.349 327.359 89.017C330.574 87.685 334.02 87 337.5 87V113.5V140Z" stroke="black"/>
</g>
<g filter="url(#filter4_i_3_2)">
<path d="M408.5 110C411.98 110 415.426 110.685 418.641 112.017C421.856 113.349 424.778 115.301 427.238 117.762C429.699 120.222 431.651 123.144 432.983 126.359C434.315 129.574 435 133.02 435 136.5C435 139.98 434.315 143.426 432.983 146.641C431.651 149.856 429.699 152.778 427.238 155.238C424.778 157.699 421.856 159.651 418.641 160.983C415.426 162.315 411.98 163 408.5 163" stroke="black" stroke-dasharray="4 4"/>
<g filter="url(#filter4_i_2_68)">
<path d="M337.5 87C340.98 87 344.426 87.685 347.641 89.017C350.856 90.349 353.778 92.301 356.238 94.762C358.699 97.222 360.651 100.144 361.983 103.359C363.315 106.574 364 110.02 364 113.5C364 116.98 363.315 120.426 361.983 123.641C360.651 126.856 358.699 129.778 356.238 132.238C353.778 134.699 350.856 136.651 347.641 137.983C344.426 139.315 340.98 140 337.5 140" stroke="black" stroke-dasharray="4 4"/>
</g>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 431 177)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 443 177)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 455 177)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 467 177)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 431 100)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 443 100)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 455 100)" stroke="black"/>
<line y1="-0.5" x2="5" y2="-0.5" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 467 100)" stroke="black"/>
<path d="M426.788 233.607C407.946 225.612 391.851 211.967 380.573 194.431C369.295 176.895 363.351 156.271 363.503 135.213C363.655 114.155 369.896 93.6242 381.426 76.2645C392.955 58.9047 409.245 45.5096 428.201 37.8066" stroke="black"/>
<path d="M427 233.5H426" stroke="black"/>
<path d="M428 233.5H427" stroke="black"/>
<g filter="url(#filter5_i_3_2)">
<path d="M476.5 118.5C471.996 118.5 467.673 120.34 464.484 123.621C461.294 126.901 459.5 131.354 459.5 136C459.5 140.646 461.294 145.099 464.484 148.379C467.673 151.66 471.996 153.5 476.5 153.5" stroke="black"/>
<path d="M360.5 154L360.5 149" stroke="black"/>
<path d="M372.5 154L372.5 149" stroke="black"/>
<path d="M384.5 154L384.5 149" stroke="black"/>
<path d="M396.5 154L396.5 149" stroke="black"/>
<path d="M360.5 77L360.5 72" stroke="black"/>
<path d="M372.5 77L372.5 72" stroke="black"/>
<path d="M384.5 77L384.5 72" stroke="black"/>
<path d="M396.5 77L396.5 72" stroke="black"/>
<path d="M355.788 210.607C336.946 202.612 320.851 188.967 309.573 171.431C298.295 153.895 292.351 133.271 292.503 112.213C292.655 91.155 298.896 70.6242 310.426 53.2645C321.955 35.9047 338.245 22.5096 357.201 14.8066" stroke="black"/>
<path d="M356 210.5H355" stroke="black"/>
<path d="M357 210.5H356" stroke="black"/>
<g filter="url(#filter5_i_2_68)">
<path d="M405.5 95.5C400.996 95.5 396.673 97.34 393.484 100.621C390.294 103.901 388.5 108.354 388.5 113C388.5 117.646 390.294 122.099 393.484 125.379C396.673 128.66 400.996 130.5 405.5 130.5" stroke="black"/>
</g>
<circle cx="3.5" cy="3.5" r="3" transform="matrix(-1 0 0 1 483 133)" stroke="black"/>
<line y1="-0.5" x2="26" y2="-0.5" transform="matrix(0 -1 -1 0 483 149)" stroke="black"/>
<path d="M138 37.5H139" stroke="black"/>
<path d="M139.225 38.1519C139.221 38.1187 139.099 38.1364 139.073 38.135C138.98 38.1302 138.889 38.0674 138.794 38.0674C138.755 38.0674 138.672 38.0388 138.633 38.0252C138.581 38.0065 138.52 37.9719 138.465 37.9661C138.4 37.9593 138.366 37.9109 138.312 37.8854C138.275 37.8677 138.202 37.8366 138.177 37.8056C138.161 37.7847 138.063 37.7566 138.033 37.7371C137.962 37.6922 137.879 37.6309 137.806 37.5944" stroke="black" stroke-width="0.5"/>
<path d="M139.926 37.9883C139.906 37.9888 139.887 37.9922 139.867 37.9922C139.838 37.9922 139.812 37.978 139.787 37.9622C139.682 37.8946 139.599 37.7958 139.504 37.7151C139.388 37.6172 139.275 37.5101 139.135 37.4512C139.051 37.4159 138.965 37.3877 138.879 37.3594C138.85 37.3498 138.785 37.3113 138.754 37.332" stroke="black" stroke-width="0.5"/>
<path d="M408.5 116.5C406.843 116.5 405.5 115.157 405.5 113.5C405.5 111.843 406.843 110.5 408.5 110.5C410.157 110.5 411.5 111.843 411.5 113.5C411.5 115.157 410.157 116.5 408.5 116.5Z" stroke="black"/>
<path d="M412.5 126V100" stroke="black"/>
<path d="M67 14.5H68" stroke="black"/>
<path d="M68.225 15.1519C68.221 15.1187 68.099 15.1364 68.073 15.135C67.98 15.1302 67.889 15.0674 67.794 15.0674C67.755 15.0674 67.672 15.0388 67.633 15.0252C67.581 15.0065 67.52 14.9719 67.465 14.9661C67.4 14.9593 67.366 14.9109 67.312 14.8854C67.275 14.8677 67.202 14.8366 67.177 14.8056C67.161 14.7847 67.063 14.7566 67.033 14.7371C66.962 14.6922 66.879 14.6309 66.806 14.5944" stroke="black" stroke-width="0.5"/>
<path d="M68.926 14.9883C68.906 14.9888 68.887 14.9922 68.867 14.9922C68.838 14.9922 68.812 14.978 68.787 14.9622C68.682 14.8946 68.599 14.7958 68.504 14.7151C68.388 14.6172 68.275 14.5101 68.135 14.4512C68.051 14.4159 67.965 14.3877 67.879 14.3594C67.85 14.3498 67.785 14.3113 67.754 14.332" stroke="black" stroke-width="0.5"/>
<defs>
<filter id="filter0_i_3_2" x="256" y="108" width="55" height="59" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_i_2_68" x="185" y="85" width="55" height="59" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -79,9 +79,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
<filter id="filter1_i_3_2" x="158" y="109.5" width="27.5" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter1_i_2_68" x="87" y="86.5" width="27.5" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -89,9 +89,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
<filter id="filter2_i_3_2" x="131.5" y="109.5" width="27" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter2_i_2_68" x="60.5" y="86.5" width="27" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -99,9 +99,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
<filter id="filter3_i_3_2" x="381.5" y="109.5" width="27.5" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter3_i_2_68" x="310.5" y="86.5" width="27.5" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -109,9 +109,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
<filter id="filter4_i_3_2" x="408.5" y="109.5" width="27" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter4_i_2_68" x="337.5" y="86.5" width="27" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -119,9 +119,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
<filter id="filter5_i_3_2" x="459" y="118" width="17.5" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter5_i_2_68" x="388" y="95" width="17.5" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -129,7 +129,7 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_2"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_68"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

85
src/assets/court/half_court.svg
Unescape View File

@ -1,45 +1,45 @@
<svg width="269" height="309" viewBox="0 0 269 309" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="24" y1="236" x2="24" y2="26" stroke="black" stroke-width="2"/>
<line x1="248" y1="25" x2="248" y2="236" stroke="black" stroke-width="2"/>
<line x1="249" y1="237" x2="23" y2="237" stroke="black" stroke-width="2"/>
<line x1="23" y1="25.5" x2="247" y2="25.5" stroke="black"/>
<g filter="url(#filter0_i_3_4)">
<path d="M108.5 26C108.5 33.0313 111.347 39.7727 116.411 44.7417C121.476 49.7103 128.342 52.5 135.5 52.5C142.658 52.5 149.524 49.7103 154.588 44.7417C159.653 39.7727 162.5 33.0313 162.5 26" stroke="black"/>
<svg width="226" height="213" viewBox="0 0 226 213" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 211V1" stroke="black" stroke-width="2"/>
<path d="M225 0V211" stroke="black" stroke-width="2"/>
<path d="M226 212H0" stroke="black" stroke-width="2"/>
<path d="M0 0.5H224" stroke="black"/>
<g filter="url(#filter0_i_2_106)">
<path d="M85.5 1C85.5 8.0313 88.347 14.7727 93.411 19.7417C98.476 24.7103 105.342 27.5 112.5 27.5C119.658 27.5 126.524 24.7103 131.588 19.7417C136.653 14.7727 139.5 8.0313 139.5 1" stroke="black"/>
</g>
<line x1="99.5" y1="236" x2="99.5" y2="151" stroke="black"/>
<line x1="100.5" y1="236" x2="100.5" y2="151" stroke="black"/>
<path d="M172 150.5H100" stroke="black"/>
<path d="M99.5 151V150" stroke="black"/>
<path d="M172.5 151V150" stroke="black"/>
<line x1="172.5" y1="151" x2="172.5" y2="236" stroke="black"/>
<line x1="171.5" y1="151" x2="171.5" y2="236" stroke="black"/>
<line x1="37.5" y1="236" x2="37.5" y2="170" stroke="black"/>
<line x1="233.5" y1="236" x2="233.5" y2="170" stroke="black"/>
<g filter="url(#filter1_i_3_4)">
<path d="M163 150.5C163 147.02 162.315 143.574 160.983 140.359C159.651 137.144 157.699 134.222 155.238 131.762C152.778 129.301 149.856 127.349 146.641 126.017C143.426 124.685 139.98 124 136.5 124C133.02 124 129.574 124.685 126.359 126.017C123.144 127.349 120.222 129.301 117.762 131.762C115.301 134.222 113.349 137.144 112.017 140.359C110.685 143.574 110 147.02 110 150.5L136.5 150.5L163 150.5Z" stroke="black"/>
<path d="M76.5 211V126" stroke="black"/>
<path d="M77.5 211V126" stroke="black"/>
<path d="M149 125.5H77" stroke="black"/>
<path d="M76.5 126V125" stroke="black"/>
<path d="M149.5 126V125" stroke="black"/>
<path d="M149.5 126V211" stroke="black"/>
<path d="M148.5 126V211" stroke="black"/>
<path d="M14.5 211V145" stroke="black"/>
<path d="M210.5 211V145" stroke="black"/>
<g filter="url(#filter1_i_2_106)">
<path d="M140 125.5C140 122.02 139.315 118.574 137.983 115.359C136.651 112.144 134.699 109.222 132.238 106.762C129.778 104.301 126.856 102.349 123.641 101.017C120.426 99.685 116.98 99 113.5 99C110.02 99 106.574 99.685 103.359 101.017C100.144 102.349 97.222 104.301 94.762 106.762C92.301 109.222 90.349 112.144 89.017 115.359C87.685 118.574 87 122.02 87 125.5H113.5H140Z" stroke="black"/>
</g>
<g filter="url(#filter2_i_3_4)">
<path d="M110 150.5C110 153.98 110.685 157.426 112.017 160.641C113.349 163.856 115.301 166.778 117.762 169.238C120.222 171.699 123.144 173.651 126.359 174.983C129.574 176.315 133.02 177 136.5 177C139.98 177 143.426 176.315 146.641 174.983C149.856 173.651 152.778 171.699 155.238 169.238C157.699 166.778 159.651 163.856 160.983 160.641C162.315 157.426 163 153.98 163 150.5" stroke="black" stroke-dasharray="4 4"/>
<g filter="url(#filter2_i_2_106)">
<path d="M87 125.5C87 128.98 87.685 132.426 89.017 135.641C90.349 138.856 92.301 141.778 94.762 144.238C97.222 146.699 100.144 148.651 103.359 149.983C106.574 151.315 110.02 152 113.5 152C116.98 152 120.426 151.315 123.641 149.983C126.856 148.651 129.778 146.699 132.238 144.238C134.699 141.778 136.651 138.856 137.983 135.641C139.315 132.426 140 128.98 140 125.5" stroke="black" stroke-dasharray="4 4"/>
</g>
<line x1="177" y1="173.5" x2="172" y2="173.5" stroke="black"/>
<line x1="177" y1="185.5" x2="172" y2="185.5" stroke="black"/>
<line x1="177" y1="197.5" x2="172" y2="197.5" stroke="black"/>
<line x1="177" y1="209.5" x2="172" y2="209.5" stroke="black"/>
<line x1="100" y1="173.5" x2="95" y2="173.5" stroke="black"/>
<line x1="100" y1="185.5" x2="95" y2="185.5" stroke="black"/>
<line x1="100" y1="197.5" x2="95" y2="197.5" stroke="black"/>
<line x1="100" y1="209.5" x2="95" y2="209.5" stroke="black"/>
<path d="M233.607 168.788C225.612 149.946 211.967 133.851 194.431 122.573C176.895 111.295 156.271 105.351 135.213 105.503C114.155 105.655 93.6242 111.896 76.2645 123.426C58.9047 134.955 45.5096 151.245 37.8066 170.201" stroke="black"/>
<path d="M233.5 169V168" stroke="black"/>
<path d="M233.5 170V169" stroke="black"/>
<path d="M118.5 218.5C118.5 213.996 120.34 209.673 123.621 206.484C126.901 203.294 131.354 201.5 136 201.5C140.646 201.5 145.099 203.294 148.379 206.484C151.66 209.673 153.5 213.996 153.5 218.5" stroke="black"/>
<circle cx="136.5" cy="221.5" r="3" transform="rotate(-90 136.5 221.5)" stroke="black"/>
<line x1="149" y1="225.5" x2="123" y2="225.5" stroke="black"/>
<path d="M37.5 171V170" stroke="black"/>
<path d="M38.1519 169.775C38.1187 169.779 38.1364 169.901 38.135 169.927C38.1302 170.02 38.0674 170.111 38.0674 170.206C38.0674 170.245 38.0388 170.328 38.0252 170.367C38.0065 170.419 37.9719 170.48 37.9661 170.535C37.9593 170.6 37.9109 170.634 37.8854 170.688C37.8677 170.725 37.8366 170.798 37.8056 170.823C37.7847 170.839 37.7566 170.937 37.7371 170.967C37.6922 171.038 37.6309 171.121 37.5944 171.194" stroke="black" stroke-width="0.5"/>
<path d="M37.9883 169.074C37.9888 169.094 37.9922 169.113 37.9922 169.133C37.9922 169.162 37.978 169.188 37.9622 169.213C37.8946 169.318 37.7958 169.401 37.7151 169.496C37.6172 169.612 37.5101 169.725 37.4512 169.865C37.4159 169.949 37.3877 170.035 37.3594 170.121C37.3498 170.15 37.3113 170.215 37.332 170.246" stroke="black" stroke-width="0.5"/>
<path d="M154 148.5H149" stroke="black"/>
<path d="M154 160.5H149" stroke="black"/>
<path d="M154 172.5H149" stroke="black"/>
<path d="M154 184.5H149" stroke="black"/>
<path d="M77 148.5H72" stroke="black"/>
<path d="M77 160.5H72" stroke="black"/>
<path d="M77 172.5H72" stroke="black"/>
<path d="M77 184.5H72" stroke="black"/>
<path d="M210.607 143.788C202.612 124.946 188.967 108.851 171.431 97.573C153.895 86.295 133.271 80.351 112.213 80.503C91.155 80.655 70.6242 86.896 53.2645 98.426C35.9047 109.955 22.5096 126.245 14.8066 145.201" stroke="black"/>
<path d="M210.5 144V143" stroke="black"/>
<path d="M210.5 145V144" stroke="black"/>
<path d="M95.5 193.5C95.5 188.996 97.34 184.673 100.621 181.484C103.901 178.294 108.354 176.5 113 176.5C117.646 176.5 122.099 178.294 125.379 181.484C128.66 184.673 130.5 188.996 130.5 193.5" stroke="black"/>
<path d="M116.5 196.5C116.5 194.843 115.157 193.5 113.5 193.5C111.843 193.5 110.5 194.843 110.5 196.5C110.5 198.157 111.843 199.5 113.5 199.5C115.157 199.5 116.5 198.157 116.5 196.5Z" stroke="black"/>
<path d="M126 200.5H100" stroke="black"/>
<path d="M14.5 146V145" stroke="black"/>
<path d="M15.1519 144.775C15.1187 144.779 15.1364 144.901 15.135 144.927C15.1302 145.02 15.0674 145.111 15.0674 145.206C15.0674 145.245 15.0388 145.328 15.0252 145.367C15.0065 145.419 14.9719 145.48 14.9661 145.535C14.9593 145.6 14.9109 145.634 14.8854 145.688C14.8677 145.725 14.8366 145.798 14.8056 145.823C14.7847 145.839 14.7566 145.937 14.7371 145.967C14.6922 146.038 14.6309 146.121 14.5944 146.194" stroke="black" stroke-width="0.5"/>
<path d="M14.9883 144.074C14.9888 144.094 14.9922 144.113 14.9922 144.133C14.9922 144.162 14.978 144.188 14.9622 144.213C14.8946 144.318 14.7958 144.401 14.7151 144.496C14.6172 144.612 14.5101 144.725 14.4512 144.865C14.4159 144.949 14.3877 145.035 14.3594 145.121C14.3498 145.15 14.3113 145.215 14.332 145.246" stroke="black" stroke-width="0.5"/>
<defs>
<filter id="filter0_i_3_4" x="108" y="26" width="55" height="31" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_i_2_106" x="85" y="1" width="55" height="31" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -47,9 +47,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_4"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_106"/>
</filter>
<filter id="filter1_i_3_4" x="109.5" y="123.5" width="54" height="31.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter1_i_2_106" x="86.5" y="98.5" width="54" height="31.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -57,9 +57,9 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_4"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2_106"/>
</filter>
<filter id="filter2_i_3_4" x="109.5" y="150.5" width="54" height="31" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter2_i_2_106" x="86.5" y="125.5" width="54" height="31" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@ -67,7 +67,6 @@
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_4"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

30
src/components/Visualizer.tsx
Unescape View File

@ -26,13 +26,19 @@ import { CourtAction } from "./editor/CourtAction.tsx"
import { BasketCourt, Court } from "./editor/BasketCourt.tsx"
import { TacticService } from "../service/MutableTacticService.ts"
import { useAppFetcher } from "../App.tsx"
import { mapIdentifiers } from "../domains/TacticContentDomains.ts"
export interface VisualizerProps {
tacticId: number
stepId?: number
visualizerId: string | number
}
export function Visualizer({ tacticId, stepId }: VisualizerProps) {
export function Visualizer({
visualizerId,
tacticId,
stepId,
}: VisualizerProps) {
const [panicMessage, setPanicMessage] = useState<string | null>(null)
const [courtType, setCourtType] = useState<CourtType | null>()
const [stepsTree, setStepsTree] = useState<StepInfoNode | null>()
@ -68,6 +74,7 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
return (
<StepVisualizer
visualizerId={visualizerId}
courtType={courtType}
stepsTree={stepsTree}
stepId={stepId}
@ -78,6 +85,7 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
export interface StepVisualizerProps {
stepId?: number
visualizerId: string | number
stepsTree: StepInfoNode
courtType: CourtType
service: TacticService
@ -85,15 +93,16 @@ export interface StepVisualizerProps {
export function StepVisualizer({
stepId,
visualizerId,
stepsTree,
courtType,
service,
}: StepVisualizerProps) {
const [panicMessage, setPanicMessage] = useState<string | null>(null)
const [content, setContent] = useState<StepContent | null>(null)
const [parentContent, setParentContent] = useState<StepContent | null>()
const [parentContent, setParentContent] = useState<StepContent | null>(null)
const isNotInit = !content || !parentContent
const isNotInit = !content
useEffect(() => {
async function init() {
@ -116,12 +125,21 @@ export function StepVisualizer({
parentContent = parentResult
}
setContent(contentResult)
setParentContent(parentContent)
setContent(
mapIdentifiers(contentResult, (id) => `${id}-${visualizerId}`),
)
if (parentContent) {
setParentContent(
mapIdentifiers(
parentContent,
(id) => `${id}-${visualizerId}-parent`,
),
)
}
}
if (isNotInit) init()
}, [isNotInit, service, stepId, stepsTree])
}, [isNotInit, visualizerId, service, stepId, stepsTree])
if (panicMessage) {
return <p>{panicMessage}</p>

12
src/components/arrows/BendableArrow.tsx
Unescape View File

@ -544,14 +544,22 @@ export default function BendableArrow({
<div
className={"arrow-head"}
style={{ position: "absolute", transformOrigin: "center" }}
style={{
position: "absolute",
transformOrigin: "center",
pointerEvents: "none",
}}
ref={headRef}>
{style?.head?.call(style)}
</div>
<div
className={"arrow-tail"}
style={{ position: "absolute", transformOrigin: "center" }}
style={{
position: "absolute",
transformOrigin: "center",
pointerEvents: "none",
}}
ref={tailRef}>
{style?.tail?.call(style)}
</div>

6
src/components/editor/BasketCourt.tsx
Unescape View File

@ -65,9 +65,6 @@ export function BasketCourt({
origin={previewAction.origin}
color={previewAction.isInvalid ? "red" : "black"}
isEditable={true}
//do nothing on interacted, not really possible as it's a preview arrow
onActionDeleted={() => {}}
onActionChanges={() => {}}
/>
)}
</div>
@ -76,9 +73,10 @@ export function BasketCourt({
export function Court({ courtType }: { courtType: CourtType }) {
const CourtSvg = courtType === "PLAIN" ? PlainCourt : HalfCourt
const courtSpecificClassName = courtType === "PLAIN" ? "plain-court" : "half-court"
return (
<div className="court-image-div">
<CourtSvg className="court-image" />
<CourtSvg className={`court-image ${courtSpecificClassName}`} />
</div>
)
}

21
src/domains/TacticContentDomains.ts
Unescape View File

@ -499,13 +499,20 @@ export function drainTerminalStateOnChildContent(
}
export function mapToParentContent(content: StepContent): StepContent {
return mapIdentifiers(content, (id) => id + "-parent")
}
export function mapIdentifiers(
content: StepContent,
f: (id: string) => string,
): StepContent {
function mapToParentActions(actions: Action[]): Action[] {
return actions.map((a) => ({
...a,
target: a.target + "-parent",
target: typeof a.target === "string" ? f(a.target) : a.target,
segments: a.segments.map((s) => ({
...s,
next: typeof s.next === "string" ? s.next + "-parent" : s.next,
next: typeof s.next === "string" ? f(s.next) : s.next,
})),
}))
}
@ -517,10 +524,10 @@ export function mapToParentContent(content: StepContent): StepContent {
if (p.type == "player") {
return {
...p,
id: p.id + "-parent",
id: f(p.id),
actions: mapToParentActions(p.actions),
path: p.path && {
items: p.path.items.map((p) => p + "-parent"),
items: p.path.items.map(f),
},
}
}
@ -528,10 +535,10 @@ export function mapToParentContent(content: StepContent): StepContent {
...p,
pos:
p.pos.type == "follows"
? { ...p.pos, attach: p.pos.attach + "-parent" }
? { ...p.pos, attach: f(p.pos.attach) }
: p.pos,
id: p.id + "-parent",
originPlayerId: p.originPlayerId + "-parent",
id: f(p.id),
originPlayerId: f(p.originPlayerId),
actions: mapToParentActions(p.actions),
}
}),

3
src/pages/Editor.tsx
Unescape View File

@ -158,6 +158,7 @@ export default function Editor({ guestMode }: EditorProps) {
interface EditorPageWrapperProps {
service: MutableTacticService
openVisualizer(): void
}
@ -759,7 +760,6 @@ function EditorPage({
/>
</div>
<div id="court-div">
<div id="court-div-bounds">
<BasketCourt
parentComponents={parentContent?.components ?? null}
components={content.components}
@ -771,7 +771,6 @@ function EditorPage({
/>
</div>
</div>
</div>
)
const stepsTreeNode = (

116
src/pages/HomePage.tsx
Unescape View File

@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"
import { useEffect, useState } from "react"
import { User } from "../model/User.ts"
import { useAppFetcher } from "../App.tsx"
import { Visualizer } from "../components/Visualizer.tsx"
interface Tactic {
id: number
@ -44,48 +45,42 @@ export default function HomePage() {
tactics!.sort((a, b) => b.creationDate - a.creationDate)
const lastTactics = tactics.slice(0, 5)
return (
<Home teams={teams!} allTactics={tactics!} lastTactics={lastTactics} />
)
return <Home teams={teams!} tactics={tactics!} lastTactics={lastTactics} />
}
function Home({
lastTactics,
allTactics,
tactics,
teams,
}: {
lastTactics: Tactic[]
allTactics: Tactic[]
tactics: Tactic[]
teams: Team[]
}) {
return (
<div id="main">
<Body
lastTactics={lastTactics}
allTactics={allTactics}
teams={teams}
/>
<Body lastTactics={lastTactics} tactics={tactics} teams={teams} />
</div>
)
}
function Body({
lastTactics,
allTactics,
tactics,
teams,
}: {
lastTactics: Tactic[]
allTactics: Tactic[]
tactics: Tactic[]
teams: Team[]
}) {
const widthPersonalSpace = 78
const widthSideMenu = 100 - widthPersonalSpace
return (
<div id="body">
<PersonalSpace width={widthPersonalSpace} allTactics={allTactics} />
<PersonalSpace width={widthPersonalSpace} tactics={tactics} />
<SideMenu
width={widthSideMenu}
lastTactics={lastTactics}
tactics={lastTactics}
teams={teams}
/>
</div>
@ -94,11 +89,11 @@ function Body({
function SideMenu({
width,
lastTactics,
tactics,
teams,
}: {
width: number
lastTactics: Tactic[]
tactics: Tactic[]
teams: Team[]
}) {
return (
@ -108,8 +103,8 @@ function SideMenu({
width: width + "%",
}}>
<div id="side-menu-content">
<Team teams={teams} />
<Tactic lastTactics={lastTactics} />
<LastTeamsSideMenu teams={teams} />
<LastTacticsSideMenu tactics={tactics} />
</div>
</div>
)
@ -117,10 +112,10 @@ function SideMenu({
function PersonalSpace({
width,
allTactics,
tactics,
}: {
width: number
allTactics: Tactic[]
tactics: Tactic[]
}) {
return (
<div
@ -129,7 +124,7 @@ function PersonalSpace({
width: width + "%",
}}>
<TitlePersonalSpace />
<BodyPersonalSpace allTactics={allTactics} />
<BodyPersonalSpace tactics={tactics} />
</div>
)
}
@ -142,69 +137,46 @@ function TitlePersonalSpace() {
)
}
function TableData({ allTactics }: { allTactics: Tactic[] }) {
const nbRow = Math.floor(allTactics.length / 3) + 1
const listTactic = Array(nbRow)
for (let i = 0; i < nbRow; i++) {
listTactic[i] = Array(0)
}
let i = 0
let j = 0
allTactics.forEach((tactic) => {
listTactic[i].push(tactic)
j++
if (j === 3) {
i++
j = 0
function TacticGrid({ tactics }: { tactics: Tactic[] }) {
return (
<div id={"tactics-grid"}>
{tactics.map((team) => (
<TacticCard key={team.id} tactic={team} />
))}
</div>
)
}
})
function TacticCard({ tactic }: { tactic: Tactic }) {
const navigate = useNavigate()
i = 0
while (i < nbRow) {
listTactic[i] = listTactic[i].map((tactic: Tactic) => (
<td
key={tactic.id}
className="data"
onClick={() => {
navigate("/tactic/" + tactic.id + "/edit")
}}>
{truncateString(tactic.name, 25)}
</td>
))
i++
}
if (nbRow == 1) {
if (listTactic[0].length < 3) {
for (let i = 0; i <= 3 - listTactic[0].length; i++) {
listTactic[0].push(<td key={"tdNone" + i}></td>)
}
}
}
return listTactic.map((tactic, rowIndex) => (
<tr key={rowIndex + "row"}>{tactic}</tr>
))
return (
<div className={"tactic-card"}>
<div
className={"tactic-card-preview"}
onClick={() => navigate(`/tactic/${tactic.id}/edit`)}>
<Visualizer
visualizerId={tactic.id.toString()}
tacticId={tactic.id}
/>
</div>
<p className="tactic-card-title">{tactic.name}</p>
</div>
)
}
function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) {
function BodyPersonalSpace({ tactics }: { tactics: Tactic[] }) {
return (
<div id="body-personal-space">
{allTactics.length == 0 ? (
{tactics.length == 0 ? (
<p>Aucune tactique créée !</p>
) : (
<table>
<tbody key="tbody">
<TableData allTactics={allTactics} />
</tbody>
</table>
<TacticGrid tactics={tactics} />
)}
</div>
)
}
function Team({ teams }: { teams: Team[] }) {
function LastTeamsSideMenu({ teams }: { teams: Team[] }) {
const navigate = useNavigate()
return (
<div id="teams">
@ -219,7 +191,7 @@ function Team({ teams }: { teams: Team[] }) {
)
}
function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
function LastTacticsSideMenu({ tactics }: { tactics: Tactic[] }) {
const navigate = useNavigate()
return (
@ -233,7 +205,7 @@ function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
+
</button>
</div>
<SetButtonTactic tactics={lastTactics} />
<SetButtonTactic tactics={tactics} />
</div>
)
}

2
src/pages/VisualizerPage.tsx
Unescape View File

@ -177,12 +177,14 @@ function VisualizerPageContent({
const contentNode = (
<div id="content-div">
<div id="court-div">
<VisualizerFrame
content={content}
parentContent={parentContent}
courtType={courtType}
/>
</div>
</div>
)
return (

23
src/style/court.css
Unescape View File

@ -1,24 +1,33 @@
.court-image-div {
position: relative;
background-color: white;
height: 80vh;
}
.court-container {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
background-color: black;
background-color: white;
padding: 5%;
}
.court-container:has(.plain-court) {
width: 80%;
}
.court-container:has(.half-court) {
height: 80%;
}
.court-image {
height: 100%;
width: 100%;
background-color: white;
user-select: none;
}
.court-image * {
stroke: var(--selected-team-secondarycolor);
}
.half-court {
max-height: 70vh;
width: fit-content;
}

3
src/style/editor.css
Unescape View File

@ -102,10 +102,7 @@
}
#court-div {
background-color: var(--background-color);
height: 100%;
width: 100%;
display: flex;
align-items: center;

42
src/style/home/home.css
Unescape View File

@ -42,3 +42,45 @@ body {
margin-left: 5%;
margin-top: 5%;
}
#tactics-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.tactic-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 32%;
}
.tactic-card-title {
pointer-events: none;
z-index: 1000;
position: absolute;
padding: 0 10px 0 10px;
border-radius: 200px;
background: rgba(236, 235, 235, 0.87);
}
.tactic-card-preview {
display: flex;
justify-content: center;
cursor: pointer;
overflow: hidden;
}
.tactic-card-preview .court-container {
overflow: hidden;
}
.tactic-card-preview * {
pointer-events: none;
}

7
src/style/home/personnal_space.css
Unescape View File

@ -16,6 +16,13 @@
border: 3px var(--home-main-color) solid;
border-radius: 0.5cap;
align-self: center;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
#body-personal-space::-webkit-scrollbar {
display: none;
}
#body-personal-space > p {

12
src/style/visualizer.css
Unescape View File

@ -27,7 +27,7 @@
display: flex;
justify-content: center;
align-items: center;
width: 100%;
width: 50%;
height: 100%;
}
@ -70,3 +70,13 @@
overflow: scroll;
height: 100%;
}
#court-div {
height: 100%;
width: 70%;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}

Write Preview
Loading…
Cancel
Save