Fixed dark mode class being added in different places (body and html elements).

Fixed flag "None" (xx.svg) being able to be set and used ingame.

All menu modals will now close if you click outside of them.

Fixed info icon in instructions.

Added an icon to show the number of new events that happened while the events panel is hidden.

Removed opacity from the svg icons files and added it to the player-icons div, making them have the same opacity and being more visible.
This commit is contained in:
NewHappyRabbit
2025-03-01 14:11:33 +02:00
committed by Evan
parent ccc2140f2d
commit 9b85651ad8
15 changed files with 102 additions and 42 deletions
+8 -8
View File
@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="834px" height="834px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.655" fill="#278f06" d="M -0.5,397.5 C -0.5,395.833 -0.5,394.167 -0.5,392.5C 44.6795,312.648 90.0129,232.815 135.5,153C 137.167,152.333 138.833,152.333 140.5,153C 161.252,165.458 181.752,178.291 202,191.5C 202.638,192.609 203.138,193.775 203.5,195C 159.14,275.555 114.14,355.722 68.5,435.5C 65.4383,437.997 62.4383,437.83 59.5,435C 39.3038,422.739 19.3038,410.239 -0.5,397.5 Z"/></g>
<g><path style="opacity:0.655" fill="#278f06" d="M 833.5,392.5 C 833.5,394.167 833.5,395.833 833.5,397.5C 812.262,411.707 790.429,425.041 768,437.5C 766.715,437.05 765.548,436.383 764.5,435.5C 718.86,355.722 673.86,275.555 629.5,195C 630.083,192.501 631.416,190.501 633.5,189C 653.333,177.251 673,165.251 692.5,153C 694.167,152.333 695.833,152.333 697.5,153C 742.987,232.815 788.32,312.648 833.5,392.5 Z"/></g>
<g><path style="opacity:0.655" fill="#278f04" d="M 432.5,217.5 C 454.565,216.918 476.565,217.751 498.5,220C 526.867,225.508 555.2,231.175 583.5,237C 589.167,237.667 594.833,237.667 600.5,237C 610.347,235.451 620.014,233.451 629.5,231C 665.047,292.944 699.88,355.11 734,417.5C 723.137,428.697 711.971,439.53 700.5,450C 693.085,455.46 685.252,460.293 677,464.5C 597.446,397.776 511.279,340.609 418.5,293C 414.302,290.486 409.802,288.653 405,287.5C 390.991,291.461 377.158,295.961 363.5,301C 349.788,321.712 332.455,338.712 311.5,352C 297.958,359.51 283.458,363.677 268,364.5C 264.417,363.942 260.917,363.109 257.5,362C 255.418,359.591 254.418,356.757 254.5,353.5C 255.061,347.256 256.561,341.256 259,335.5C 280.319,301.023 303.486,267.856 328.5,236C 339.522,230.327 351.188,226.66 363.5,225C 386.537,221.431 409.537,218.931 432.5,217.5 Z"/></g>
<g><path style="opacity:0.655" fill="#278f04" d="M 201.5,232.5 C 211.945,238.224 222.612,243.724 233.5,249C 252.001,253.528 270.668,257.195 289.5,260C 272.05,283.055 256.217,307.222 242,332.5C 230.84,367.414 243.34,383.247 279.5,380C 296.864,377.547 312.864,371.547 327.5,362C 345.877,349.29 361.21,333.624 373.5,315C 384.249,310.745 395.249,307.745 406.5,306C 473.343,338.897 536.343,377.564 595.5,422C 620.377,440.276 644.71,459.276 668.5,479C 685.816,495.374 685.816,511.708 668.5,528C 658.279,533.794 647.612,534.794 636.5,531C 591.897,504.053 547.064,477.553 502,451.5C 492.799,454.525 491.299,459.691 497.5,467C 539.083,492.041 580.583,517.208 622,542.5C 625.242,566.905 614.742,580.405 590.5,583C 586.167,583.667 581.833,583.667 577.5,583C 541.33,561.747 504.997,540.747 468.5,520C 459.972,519.844 456.805,524.011 459,532.5C 494.337,554.004 530.004,575.004 566,595.5C 567.107,607.85 563.274,618.35 554.5,627C 551.052,628.927 547.385,630.261 543.5,631C 534.78,631.839 526.113,631.505 517.5,630C 489.289,616.061 460.955,602.394 432.5,589C 422.952,588.253 419.785,592.42 423,601.5C 423.833,602.333 424.667,603.167 425.5,604C 453.042,616.955 480.375,630.289 507.5,644C 490.599,668.862 467.432,677.362 438,669.5C 419.079,665.812 400.579,660.645 382.5,654C 399.437,634.309 400.937,613.476 387,591.5C 376.531,578.176 363.031,571.843 346.5,572.5C 348.341,546.672 337.675,528.172 314.5,517C 308.736,514.786 302.903,513.953 297,514.5C 299.293,484.475 286.127,464.975 257.5,456C 241.526,453.323 228.359,458.157 218,470.5C 215.027,474.974 211.86,479.307 208.5,483.5C 194.849,452.501 172.182,442.668 140.5,454C 136.682,457.185 133.015,460.185 129.5,463C 118.644,448.964 107.31,435.298 95.5,422C 131.491,359.182 166.824,296.016 201.5,232.5 Z"/></g>
<g><path style="opacity:0.655" fill="#28900b" d="M 158.5,464.5 C 175.508,465.009 186.675,473.342 192,489.5C 193.31,496.871 192.31,503.871 189,510.5C 181.527,520.607 173.694,530.44 165.5,540C 147.399,546.072 133.899,540.572 125,523.5C 121.399,514.654 121.733,505.988 126,497.5C 133.473,487.393 141.306,477.56 149.5,468C 152.571,466.704 155.571,465.538 158.5,464.5 Z"/></g>
<g><path style="opacity:0.655" fill="#289009" d="M 246.5,471.5 C 271.231,474.34 282.064,488.007 279,512.5C 260.055,539.779 240.721,566.779 221,593.5C 210.288,603.218 198.788,604.052 186.5,596C 174.201,586.578 170.035,574.412 174,559.5C 193.728,531.104 214.228,503.271 235.5,476C 239.053,473.879 242.72,472.379 246.5,471.5 Z"/></g>
<g><path style="opacity:0.655" fill="#28900b" d="M 293.5,530.5 C 312.401,530.236 324.234,539.236 329,557.5C 330.405,564.717 329.071,571.384 325,577.5C 309.833,598 294.667,618.5 279.5,639C 259.89,647.459 245.39,641.959 236,622.5C 232.774,615.487 232.774,608.487 236,601.5C 251.422,579.657 267.088,557.99 283,536.5C 286.101,533.648 289.601,531.648 293.5,530.5 Z"/></g>
<g><path style="opacity:0.655" fill="#28900c" d="M 344.5,588.5 C 368.069,589.569 379.902,601.902 380,625.5C 379.144,629.544 377.478,633.211 375,636.5C 366.09,647.988 357.423,659.655 349,671.5C 339.128,681.673 327.961,683.173 315.5,676C 301.764,666.368 297.264,653.535 302,637.5C 313.116,622.049 324.616,606.883 336.5,592C 339.309,590.907 341.976,589.74 344.5,588.5 Z"/></g>
<g><path fill="#278f06" d="M -0.5,397.5 C -0.5,395.833 -0.5,394.167 -0.5,392.5C 44.6795,312.648 90.0129,232.815 135.5,153C 137.167,152.333 138.833,152.333 140.5,153C 161.252,165.458 181.752,178.291 202,191.5C 202.638,192.609 203.138,193.775 203.5,195C 159.14,275.555 114.14,355.722 68.5,435.5C 65.4383,437.997 62.4383,437.83 59.5,435C 39.3038,422.739 19.3038,410.239 -0.5,397.5 Z"/></g>
<g><path fill="#278f06" d="M 833.5,392.5 C 833.5,394.167 833.5,395.833 833.5,397.5C 812.262,411.707 790.429,425.041 768,437.5C 766.715,437.05 765.548,436.383 764.5,435.5C 718.86,355.722 673.86,275.555 629.5,195C 630.083,192.501 631.416,190.501 633.5,189C 653.333,177.251 673,165.251 692.5,153C 694.167,152.333 695.833,152.333 697.5,153C 742.987,232.815 788.32,312.648 833.5,392.5 Z"/></g>
<g><path fill="#278f04" d="M 432.5,217.5 C 454.565,216.918 476.565,217.751 498.5,220C 526.867,225.508 555.2,231.175 583.5,237C 589.167,237.667 594.833,237.667 600.5,237C 610.347,235.451 620.014,233.451 629.5,231C 665.047,292.944 699.88,355.11 734,417.5C 723.137,428.697 711.971,439.53 700.5,450C 693.085,455.46 685.252,460.293 677,464.5C 597.446,397.776 511.279,340.609 418.5,293C 414.302,290.486 409.802,288.653 405,287.5C 390.991,291.461 377.158,295.961 363.5,301C 349.788,321.712 332.455,338.712 311.5,352C 297.958,359.51 283.458,363.677 268,364.5C 264.417,363.942 260.917,363.109 257.5,362C 255.418,359.591 254.418,356.757 254.5,353.5C 255.061,347.256 256.561,341.256 259,335.5C 280.319,301.023 303.486,267.856 328.5,236C 339.522,230.327 351.188,226.66 363.5,225C 386.537,221.431 409.537,218.931 432.5,217.5 Z"/></g>
<g><path fill="#278f04" d="M 201.5,232.5 C 211.945,238.224 222.612,243.724 233.5,249C 252.001,253.528 270.668,257.195 289.5,260C 272.05,283.055 256.217,307.222 242,332.5C 230.84,367.414 243.34,383.247 279.5,380C 296.864,377.547 312.864,371.547 327.5,362C 345.877,349.29 361.21,333.624 373.5,315C 384.249,310.745 395.249,307.745 406.5,306C 473.343,338.897 536.343,377.564 595.5,422C 620.377,440.276 644.71,459.276 668.5,479C 685.816,495.374 685.816,511.708 668.5,528C 658.279,533.794 647.612,534.794 636.5,531C 591.897,504.053 547.064,477.553 502,451.5C 492.799,454.525 491.299,459.691 497.5,467C 539.083,492.041 580.583,517.208 622,542.5C 625.242,566.905 614.742,580.405 590.5,583C 586.167,583.667 581.833,583.667 577.5,583C 541.33,561.747 504.997,540.747 468.5,520C 459.972,519.844 456.805,524.011 459,532.5C 494.337,554.004 530.004,575.004 566,595.5C 567.107,607.85 563.274,618.35 554.5,627C 551.052,628.927 547.385,630.261 543.5,631C 534.78,631.839 526.113,631.505 517.5,630C 489.289,616.061 460.955,602.394 432.5,589C 422.952,588.253 419.785,592.42 423,601.5C 423.833,602.333 424.667,603.167 425.5,604C 453.042,616.955 480.375,630.289 507.5,644C 490.599,668.862 467.432,677.362 438,669.5C 419.079,665.812 400.579,660.645 382.5,654C 399.437,634.309 400.937,613.476 387,591.5C 376.531,578.176 363.031,571.843 346.5,572.5C 348.341,546.672 337.675,528.172 314.5,517C 308.736,514.786 302.903,513.953 297,514.5C 299.293,484.475 286.127,464.975 257.5,456C 241.526,453.323 228.359,458.157 218,470.5C 215.027,474.974 211.86,479.307 208.5,483.5C 194.849,452.501 172.182,442.668 140.5,454C 136.682,457.185 133.015,460.185 129.5,463C 118.644,448.964 107.31,435.298 95.5,422C 131.491,359.182 166.824,296.016 201.5,232.5 Z"/></g>
<g><path fill="#28900b" d="M 158.5,464.5 C 175.508,465.009 186.675,473.342 192,489.5C 193.31,496.871 192.31,503.871 189,510.5C 181.527,520.607 173.694,530.44 165.5,540C 147.399,546.072 133.899,540.572 125,523.5C 121.399,514.654 121.733,505.988 126,497.5C 133.473,487.393 141.306,477.56 149.5,468C 152.571,466.704 155.571,465.538 158.5,464.5 Z"/></g>
<g><path fill="#289009" d="M 246.5,471.5 C 271.231,474.34 282.064,488.007 279,512.5C 260.055,539.779 240.721,566.779 221,593.5C 210.288,603.218 198.788,604.052 186.5,596C 174.201,586.578 170.035,574.412 174,559.5C 193.728,531.104 214.228,503.271 235.5,476C 239.053,473.879 242.72,472.379 246.5,471.5 Z"/></g>
<g><path fill="#28900b" d="M 293.5,530.5 C 312.401,530.236 324.234,539.236 329,557.5C 330.405,564.717 329.071,571.384 325,577.5C 309.833,598 294.667,618.5 279.5,639C 259.89,647.459 245.39,641.959 236,622.5C 232.774,615.487 232.774,608.487 236,601.5C 251.422,579.657 267.088,557.99 283,536.5C 286.101,533.648 289.601,531.648 293.5,530.5 Z"/></g>
<g><path fill="#28900c" d="M 344.5,588.5 C 368.069,589.569 379.902,601.902 380,625.5C 379.144,629.544 377.478,633.211 375,636.5C 366.09,647.988 357.423,659.655 349,671.5C 339.128,681.673 327.961,683.173 315.5,676C 301.764,666.368 297.264,653.535 302,637.5C 313.116,622.049 324.616,606.883 336.5,592C 339.309,590.907 341.976,589.74 344.5,588.5 Z"/></g>
</svg>

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

+2 -2
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="450px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.553" fill="#feea4f" d="M 248.5,-0.5 C 252.167,-0.5 255.833,-0.5 259.5,-0.5C 278.819,5.4526 286.319,18.4526 282,38.5C 279.284,45.8812 274.451,51.3812 267.5,55C 266.941,55.7247 266.608,56.5581 266.5,57.5C 273.333,88.8333 280.167,120.167 287,151.5C 289.807,165.255 296.307,176.755 306.5,186C 316.671,191.131 326.004,189.798 334.5,182C 345.222,172.37 353.888,161.204 360.5,148.5C 347.194,133.298 347.194,118.131 360.5,103C 376.565,92.8493 391.065,94.6826 404,108.5C 413.587,127.733 409.087,142.566 390.5,153C 385.077,153.627 379.911,154.794 375,156.5C 373.24,167.82 371.573,179.154 370,190.5C 368.693,201.412 369.693,212.079 373,222.5C 376.407,231.455 382.907,235.788 392.5,235.5C 404.426,234.039 415.092,229.539 424.5,222C 435.833,212.667 447.167,203.333 458.5,194C 451.529,181.867 452.029,170.034 460,158.5C 471.782,147.376 484.948,145.543 499.5,153C 505.328,157.305 509.328,162.805 511.5,169.5C 511.5,174.833 511.5,180.167 511.5,185.5C 504.523,202.241 492.023,209.241 474,206.5C 456.963,254.069 439.796,301.569 422.5,349C 310.5,349.5 198.5,349.667 86.5,349.5C 70.6411,301.757 54.4744,254.09 38,206.5C 19.5189,211.509 6.68559,205.176 -0.5,187.5C -0.5,182.167 -0.5,176.833 -0.5,171.5C 7.69791,152.574 21.6979,146.407 41.5,153C 57.7565,164.191 61.4231,178.691 52.5,196.5C 68.4555,208.943 85.1222,220.443 102.5,231C 111.912,235.038 121.246,235.038 130.5,231C 136.151,226.533 139.317,220.699 140,213.5C 140.668,193.676 139.168,174.009 135.5,154.5C 114.743,156.249 103.077,146.749 100.5,126C 104.608,102.566 118.275,93.5665 141.5,99C 158.634,108.45 163.467,122.284 156,140.5C 153.486,143.678 150.986,146.844 148.5,150C 155.392,160.231 163.058,169.898 171.5,179C 177.581,185.207 184.915,189.041 193.5,190.5C 198.804,190.264 203.304,188.264 207,184.5C 214.423,174.592 219.757,163.592 223,151.5C 230.341,120.468 237.841,89.4681 245.5,58.5C 239.652,55.167 234.485,50.8337 230,45.5C 219.901,23.3887 226.068,8.05541 248.5,-0.5 Z"/></g>
<g><path style="opacity:0.553" fill="#feea4f" d="M 423.5,449.5 C 311.167,449.5 198.833,449.5 86.5,449.5C 86.5,429.167 86.5,408.833 86.5,388.5C 198.833,388.5 311.167,388.5 423.5,388.5C 423.5,408.833 423.5,429.167 423.5,449.5 Z"/></g>
<g><path fill="#feea4f" d="M 248.5,-0.5 C 252.167,-0.5 255.833,-0.5 259.5,-0.5C 278.819,5.4526 286.319,18.4526 282,38.5C 279.284,45.8812 274.451,51.3812 267.5,55C 266.941,55.7247 266.608,56.5581 266.5,57.5C 273.333,88.8333 280.167,120.167 287,151.5C 289.807,165.255 296.307,176.755 306.5,186C 316.671,191.131 326.004,189.798 334.5,182C 345.222,172.37 353.888,161.204 360.5,148.5C 347.194,133.298 347.194,118.131 360.5,103C 376.565,92.8493 391.065,94.6826 404,108.5C 413.587,127.733 409.087,142.566 390.5,153C 385.077,153.627 379.911,154.794 375,156.5C 373.24,167.82 371.573,179.154 370,190.5C 368.693,201.412 369.693,212.079 373,222.5C 376.407,231.455 382.907,235.788 392.5,235.5C 404.426,234.039 415.092,229.539 424.5,222C 435.833,212.667 447.167,203.333 458.5,194C 451.529,181.867 452.029,170.034 460,158.5C 471.782,147.376 484.948,145.543 499.5,153C 505.328,157.305 509.328,162.805 511.5,169.5C 511.5,174.833 511.5,180.167 511.5,185.5C 504.523,202.241 492.023,209.241 474,206.5C 456.963,254.069 439.796,301.569 422.5,349C 310.5,349.5 198.5,349.667 86.5,349.5C 70.6411,301.757 54.4744,254.09 38,206.5C 19.5189,211.509 6.68559,205.176 -0.5,187.5C -0.5,182.167 -0.5,176.833 -0.5,171.5C 7.69791,152.574 21.6979,146.407 41.5,153C 57.7565,164.191 61.4231,178.691 52.5,196.5C 68.4555,208.943 85.1222,220.443 102.5,231C 111.912,235.038 121.246,235.038 130.5,231C 136.151,226.533 139.317,220.699 140,213.5C 140.668,193.676 139.168,174.009 135.5,154.5C 114.743,156.249 103.077,146.749 100.5,126C 104.608,102.566 118.275,93.5665 141.5,99C 158.634,108.45 163.467,122.284 156,140.5C 153.486,143.678 150.986,146.844 148.5,150C 155.392,160.231 163.058,169.898 171.5,179C 177.581,185.207 184.915,189.041 193.5,190.5C 198.804,190.264 203.304,188.264 207,184.5C 214.423,174.592 219.757,163.592 223,151.5C 230.341,120.468 237.841,89.4681 245.5,58.5C 239.652,55.167 234.485,50.8337 230,45.5C 219.901,23.3887 226.068,8.05541 248.5,-0.5 Z"/></g>
<g><path fill="#feea4f" d="M 423.5,449.5 C 311.167,449.5 198.833,449.5 86.5,449.5C 86.5,429.167 86.5,408.833 86.5,388.5C 198.833,388.5 311.167,388.5 423.5,388.5C 423.5,408.833 423.5,429.167 423.5,449.5 Z"/></g>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

+2 -17
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 18 22.5"
viewBox="0 0 18 18"
x="0px"
y="0px"
version="1.1"
@@ -35,22 +35,7 @@
fill-rule="evenodd"
d="M9,0 C4.029,0 0,4.029 0,9 C0,13.971 4.029,18 9,18 C13.971,18 18,13.971 18,9 C18,4.029 13.971,0 9,0 M9.5,6 L8.5,6 C8.224,6 8,5.776 8,5.5 L8,4.5 C8,4.224 8.224,4 8.5,4 L9.5,4 C9.776,4 10,4.224 10,4.5 L10,5.5 C10,5.776 9.776,6 9.5,6 M9.5,14 L8.5,14 C8.224,14 8,13.776 8,13.5 L8,8.5 C8,8.224 8.224,8 8.5,8 L9.5,8 C9.776,8 10,8.224 10,8.5 L10,13.5 C10,13.776 9.776,14 9.5,14"
id="path1" />
<text
x="0"
y="33"
fill="#000000"
font-size="5px"
font-weight="bold"
font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"
id="text1">Created by Kevin White</text>
<text
x="0"
y="38"
fill="#000000"
font-size="5px"
font-weight="bold"
font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"
id="text2">from the Noun Project</text>
<path
style="fill:#000000;stroke-width:0.0252525;fill-opacity:1"
d="m 8.3080808,13.943016 c -0.122592,-0.05761 -0.1993586,-0.137633 -0.25132,-0.261994 -0.034429,-0.0824 -0.039018,-0.402646 -0.038529,-2.689049 5.3e-4,-2.4803968 0.00265,-2.6001182 0.047756,-2.69945 0.05802,-0.127763 0.1797421,-0.2238457 0.3320856,-0.2621343 0.074823,-0.018805 0.3095405,-0.026114 0.6691919,-0.020838 0.5517602,0.00809 0.5544116,0.0084 0.6716986,0.077347 0.064763,0.038072 0.144309,0.1119352 0.1767677,0.1641414 l 0.059016,0.09492 0.00677,2.6277479 0.00677,2.627746 -0.05921,0.112153 c -0.032566,0.06168 -0.1075808,0.146242 -0.1667004,0.187909 l -0.1074902,0.07576 -0.6228943,0.0066 c -0.5652599,0.006 -0.6322404,0.0022 -0.7239044,-0.04086 z"

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 13 KiB

+1 -1
View File
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.384" fill="#9e0000" d="M 57.5,16.5 C 79.6232,16.1252 88.4565,26.7919 84,48.5C 83.2196,51.5117 82.0529,54.3451 80.5,57C 111.436,74.9338 136.936,98.7672 157,128.5C 182.331,109.668 210.831,100.334 242.5,100.5C 242.5,106.833 242.5,113.167 242.5,119.5C 215.494,119.225 191.16,127.058 169.5,143C 181.768,144.418 194.101,145.418 206.5,146C 223.046,163.709 239.379,181.543 255.5,199.5C 271.621,181.543 287.954,163.709 304.5,146C 316.899,145.418 329.232,144.418 341.5,143C 319.84,127.058 295.506,119.225 268.5,119.5C 268.5,113.167 268.5,106.833 268.5,100.5C 300.169,100.334 328.669,109.668 354,128.5C 374.064,98.7672 399.564,74.9338 430.5,57C 422.929,44.1613 423.929,32.1613 433.5,21C 441.053,16.4447 449.053,15.4447 457.5,18C 478.079,25.4111 490.079,39.9111 493.5,61.5C 490.867,80.2657 480.201,87.4324 461.5,83C 458.488,82.2196 455.655,81.0529 453,79.5C 435.066,110.436 411.233,135.936 381.5,156C 400.886,181.491 410.72,210.324 411,242.5C 404.924,243.476 398.758,243.81 392.5,243.5C 391.875,215.457 383.375,190.124 367,167.5C 365.477,180.07 364.477,192.737 364,205.5C 344.658,222.677 325.492,240.01 306.5,257.5C 367.877,327.636 426.377,399.969 482,474.5C 486.572,480.683 490.572,487.016 494,493.5C 465.55,472.718 437.384,451.551 409.5,430C 357.697,387.864 306.197,345.364 255,302.5C 178.278,369.57 98.9443,433.237 17,493.5C 20.4282,487.016 24.4282,480.683 29,474.5C 84.5044,400.043 143.004,327.876 204.5,258C 185.762,240.273 166.596,222.773 147,205.5C 146.523,192.737 145.523,180.07 144,167.5C 127.625,190.124 119.125,215.457 118.5,243.5C 112.242,243.81 106.076,243.476 100,242.5C 100.28,210.324 110.114,181.491 129.5,156C 99.7672,135.936 75.9338,110.436 58,79.5C 46.6724,86.2353 35.5058,86.0686 24.5,79C 18.004,71.1766 16.1706,62.3433 19,52.5C 25.9173,34.08 38.7506,22.08 57.5,16.5 Z"/></g>
<g><path fill="#9e0000" d="M 57.5,16.5 C 79.6232,16.1252 88.4565,26.7919 84,48.5C 83.2196,51.5117 82.0529,54.3451 80.5,57C 111.436,74.9338 136.936,98.7672 157,128.5C 182.331,109.668 210.831,100.334 242.5,100.5C 242.5,106.833 242.5,113.167 242.5,119.5C 215.494,119.225 191.16,127.058 169.5,143C 181.768,144.418 194.101,145.418 206.5,146C 223.046,163.709 239.379,181.543 255.5,199.5C 271.621,181.543 287.954,163.709 304.5,146C 316.899,145.418 329.232,144.418 341.5,143C 319.84,127.058 295.506,119.225 268.5,119.5C 268.5,113.167 268.5,106.833 268.5,100.5C 300.169,100.334 328.669,109.668 354,128.5C 374.064,98.7672 399.564,74.9338 430.5,57C 422.929,44.1613 423.929,32.1613 433.5,21C 441.053,16.4447 449.053,15.4447 457.5,18C 478.079,25.4111 490.079,39.9111 493.5,61.5C 490.867,80.2657 480.201,87.4324 461.5,83C 458.488,82.2196 455.655,81.0529 453,79.5C 435.066,110.436 411.233,135.936 381.5,156C 400.886,181.491 410.72,210.324 411,242.5C 404.924,243.476 398.758,243.81 392.5,243.5C 391.875,215.457 383.375,190.124 367,167.5C 365.477,180.07 364.477,192.737 364,205.5C 344.658,222.677 325.492,240.01 306.5,257.5C 367.877,327.636 426.377,399.969 482,474.5C 486.572,480.683 490.572,487.016 494,493.5C 465.55,472.718 437.384,451.551 409.5,430C 357.697,387.864 306.197,345.364 255,302.5C 178.278,369.57 98.9443,433.237 17,493.5C 20.4282,487.016 24.4282,480.683 29,474.5C 84.5044,400.043 143.004,327.876 204.5,258C 185.762,240.273 166.596,222.773 147,205.5C 146.523,192.737 145.523,180.07 144,167.5C 127.625,190.124 119.125,215.457 118.5,243.5C 112.242,243.81 106.076,243.476 100,242.5C 100.28,210.324 110.114,181.491 129.5,156C 99.7672,135.936 75.9338,110.436 58,79.5C 46.6724,86.2353 35.5058,86.0686 24.5,79C 18.004,71.1766 16.1706,62.3433 19,52.5C 25.9173,34.08 38.7506,22.08 57.5,16.5 Z"/></g>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

+10 -7
View File
@@ -1,8 +1,7 @@
import { LitElement, html, css } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import Countries from "./data/countries.json";
import { UserSettings } from "../core/game/UserSettings";
import { ModalOverlay } from "./components/ModalOverlay";
const flagKey: string = "flag";
@customElement("flag-input")
@@ -10,7 +9,6 @@ export class FlagInput extends LitElement {
@state() private flag: string = "";
@state() private search: string = "";
@state() private showModal: boolean = false;
private userSettings: UserSettings = new UserSettings();
static styles = css`
@media (max-width: 768px) {
@@ -29,11 +27,10 @@ export class FlagInput extends LitElement {
}
private setFlag(flag: string) {
if (flag == "") {
this.flag = "";
} else {
this.flag = flag;
if (flag == "xx") {
flag = "";
}
this.flag = flag;
this.showModal = false;
this.storeFlag(flag);
}
@@ -80,6 +77,12 @@ export class FlagInput extends LitElement {
render() {
return html`
<div
class="absolute left-0 top-0 w-full h-full ${this.showModal
? ""
: "hidden"}"
@click=${() => (this.showModal = false)}
></div>
<div class="flex relative">
<button
@click=${() => (this.showModal = !this.showModal)}
+9 -1
View File
@@ -207,6 +207,12 @@ export class HelpModal extends LitElement {
class="modal-overlay"
style="display: ${this.isModalOpen ? "flex" : "none"}"
>
<div
class="absolute left-0 top-0 w-full h-full ${
this.isModalOpen ? "" : "hidden"
}"
@click=${this.close}
></div>
<div class="modal-content">
<span class="close" @click=${this.close}>&times;</span>
@@ -315,7 +321,8 @@ export class HelpModal extends LitElement {
<p class="mb-4">Right clicking (or touch on mobile) opens the radial menu. From there you can:</p>
<ul>
<li class="mb-4"><div class="inline-block icon build-icon"></div> - Open the build menu.</li>
<li class="mb-4"><div class="inline-block icon info-icon"></div> - Open the Info menu.</li>
<li class="mb-4">
<img src="/images/InfoIcon.svg" class="inline-block icon" style="fill: white; background: transparent;"/> - Open the Info menu.</li>
<li class="mb-4"><div class="inline-block icon boat-icon"></div> - Send a boat to attack at the selected location (only available if you have access to water).</li>
<li class="mb-4"><div class="inline-block icon cancel-icon"></div> - Close the menu.</li>
</ul>
@@ -467,5 +474,6 @@ export class HelpModal extends LitElement {
public close() {
this.isModalOpen = false;
console.log("closing modal");
}
}
+5
View File
@@ -323,6 +323,11 @@ export class HostLobbyModal extends LitElement {
class="modal-overlay"
style="display: ${this.isModalOpen ? "flex" : "none"}"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
class="${this.isModalOpen ? "" : "hidden"}"
@click=${this.close}
></div>
<div class="modal-content">
<span class="close" @click=${this.close}>&times;</span>
+5
View File
@@ -233,6 +233,11 @@ export class JoinPrivateLobbyModal extends LitElement {
class="modal-overlay"
style="display: ${this.isModalOpen ? "flex" : "none"}"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
class="${this.isModalOpen ? "" : "hidden"}"
@click=${this.close}
></div>
<div class="modal-content">
<span class="close" @click=${this.closeAndLeave}>&times;</span>
<div class="title">Join Private Lobby</div>
+2 -2
View File
@@ -108,9 +108,9 @@ class Client {
});
if (this.userSettings.darkMode()) {
document.body.classList.add("dark");
document.documentElement.classList.add("dark");
} else {
document.body.classList.remove("dark");
document.documentElement.classList.remove("dark");
}
page("/join/:lobbyId", (ctx) => {
if (ctx.init && sessionStorage.getItem("inLobby")) {
+5
View File
@@ -245,6 +245,11 @@ export class SinglePlayerModal extends LitElement {
class="modal-overlay"
style="display: ${this.isModalOpen ? "flex" : "none"}"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
class="${this.isModalOpen ? "" : "hidden"}"
@click=${this.close}
></div>
<div class="modal-content">
<span class="close" @click=${this.close}>&times;</span>
+26
View File
@@ -0,0 +1,26 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("modal-overlay")
export class ModalOverlay extends LitElement {
@property({ reflect: true }) public visible: boolean = false;
static styles = css`
.overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
`;
render() {
return html`
<div
class="overlay ${this.visible ? "" : "hidden"}"
@click=${() => (this.visible = false)}
></div>
`;
}
}
+20 -2
View File
@@ -55,6 +55,15 @@ export class EventsDisplay extends LitElement implements Layer {
@state() private incomingAttacks: AttackUpdate[] = [];
@state() private outgoingAttacks: AttackUpdate[] = [];
@state() private _hidden: boolean = false;
@state() private newEvents: number = 0;
private toggleHidden() {
this._hidden = !this._hidden;
if (this._hidden) {
this.newEvents = 0;
}
this.requestUpdate();
}
private updateMap = new Map([
[GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
@@ -121,6 +130,9 @@ export class EventsDisplay extends LitElement implements Layer {
private addEvent(event: Event) {
this.events = [...this.events, event];
if (this._hidden == true) {
this.newEvents++;
}
this.requestUpdate();
}
@@ -414,7 +426,7 @@ export class EventsDisplay extends LitElement implements Layer {
._hidden
? "hidden"
: ""}"
@click=${() => (this._hidden = true)}
@click=${this.toggleHidden}
>
Hide
</button>
@@ -423,9 +435,15 @@ export class EventsDisplay extends LitElement implements Layer {
class="text-white cursor-pointer pointer-events-auto ${this._hidden
? ""
: "hidden"}"
@click=${() => (this._hidden = false)}
@click=${this.toggleHidden}
>
Events
<span
class="${this.newEvents
? ""
: "hidden"} inline-block px-2 bg-red-500 rounded-sm"
>${this.newEvents}</span
>
</button>
<table
class="w-full border-collapse text-white shadow-lg lg:text-xl text-xs ${this
+1
View File
@@ -166,6 +166,7 @@ export class NameLayer implements Layer {
iconsDiv.style.justifyContent = "center";
iconsDiv.style.alignItems = "center";
iconsDiv.style.zIndex = "2";
iconsDiv.style.opacity = "0.8";
element.appendChild(iconsDiv);
const nameDiv = document.createElement("div");
+1 -1
View File
@@ -165,7 +165,7 @@
<div class="flex justify-center items-center flex-grow">
<div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
<div
class="relative flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
class="flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
>
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
<username-input class="w-full"></username-input>
+5 -1
View File
@@ -10,7 +10,6 @@ export class UserSettings {
set(key: string, value: boolean) {
localStorage.setItem(key, value ? "true" : "false");
document.body.classList.toggle("dark");
}
emojis() {
@@ -27,5 +26,10 @@ export class UserSettings {
toggleDarkMode() {
this.set("settings.darkMode", !this.darkMode());
if (this.darkMode()) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
}