mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 09:20:47 +00:00
create player panel
This commit is contained in:
Evan
+3
-1
@@ -1,4 +1,6 @@
|
||||
build/
|
||||
node_modules/
|
||||
out/
|
||||
TODO.txt
|
||||
TODO.txt
|
||||
resources/images/.DS_Store
|
||||
resources/.DS_Store
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 18 22.5"
|
||||
x="0px"
|
||||
y="0px"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="InfoIcon.svg"
|
||||
inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="39.6"
|
||||
inkscape:cx="9.0025253"
|
||||
inkscape:cy="11.262626"
|
||||
inkscape:window-width="1200"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2" />
|
||||
<path
|
||||
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"
|
||||
id="path2" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke-width:0.0252525"
|
||||
d="M 8.3208874,5.9446216 C 8.2061572,5.8948683 8.1252762,5.8178876 8.0657243,5.7017636 8.0224201,5.6173219 8.0176768,5.5480428 8.0176768,5 c 0,-0.5480428 0.00474,-0.6173219 0.048047,-0.7017636 0.06075,-0.1184593 0.1417743,-0.1942564 0.2608295,-0.2440008 0.07549,-0.031542 0.2069985,-0.038977 0.6814735,-0.03853 0.6384307,6.022e-4 0.7175535,0.01504 0.8455654,0.154287 C 9.9751489,4.3022184 9.9873737,4.3780637 9.9873737,5 c 0,0.6219363 -0.012225,0.6977816 -0.133781,0.8300068 C 9.7251218,5.9697537 9.6472698,5.9837768 9.0025253,5.9833055 8.528851,5.9829592 8.3912907,5.9751524 8.3208874,5.9446216 Z"
|
||||
id="path3" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke-width:0.0252525"
|
||||
d="M 8.1691919,17.950891 C 7.8078856,17.917696 7.1900068,17.809512 6.7956131,17.710392 4.5710427,17.151308 2.5996288,15.71115 1.3688963,13.746065 1.1353602,13.373183 0.72507134,12.535971 0.57261179,12.121212 -0.32195129,9.6875982 -0.13340528,7.0042571 1.0916174,4.7348485 1.2997337,4.349304 1.7116318,3.7290366 1.9971611,3.3712121 2.4470562,2.8074051 3.2226354,2.0818765 3.8462889,1.6414141 5.8362859,0.23595705 8.3239987,-0.28452364 10.775664,0.1916464 c 1.91157,0.37127095 3.774235,1.4655235 5.045404,2.9640023 1.188905,1.4015053 1.889759,3.0110402 2.111619,4.8494018 0.0601,0.4979753 0.06009,1.4886141 -7e-6,1.9949495 -0.298337,2.513429 -1.587345,4.738473 -3.614498,6.239232 -1.294172,0.958113 -2.910431,1.569425 -4.5328285,1.714437 -0.3404838,0.03043 -1.2721151,0.02883 -1.6161616,-0.0028 z m 1.5555429,-3.996195 c 0.1351018,-0.06291 0.2101478,-0.147164 0.2587766,-0.290535 0.021253,-0.06266 0.028966,-0.7855 0.028561,-2.676768 C 10.01145,8.0827909 10.024509,8.286171 9.827528,8.1132197 9.685971,7.9889311 9.5940907,7.9755841 8.9411025,7.9844548 l -0.5866528,0.00797 -0.122234,0.075758 C 8.152004,8.1178949 8.0897745,8.182201 8.051203,8.2552343 L 7.992424,8.3665295 v 2.6269445 c 0,2.617969 1.814e-4,2.627319 0.05309,2.736613 0.056373,0.116452 0.1633639,0.211093 0.2878189,0.254596 0.043929,0.01535 0.3250854,0.02721 0.669192,0.02823 0.5735093,0.0017 0.597758,-2.66e-4 0.7222095,-0.05822 z M 9.7371899,5.9513442 C 9.798402,5.9190278 9.8825758,5.8441854 9.9242424,5.7850275 L 10,5.6774677 V 5 4.3225323 L 9.9242424,4.2149725 C 9.8825758,4.1558146 9.798402,4.0809722 9.7371899,4.0486558 9.6293194,3.9917071 9.6067854,3.9899162 9.0048667,3.9904535 8.3301566,3.9910561 8.2554258,4.0041783 8.1262053,4.1447407 8.0038399,4.2778462 7.9924242,4.3508255 7.9924242,5 c 0,0.6491745 0.011416,0.7221538 0.1337811,0.8552593 0.1292205,0.1405624 0.2039513,0.1536846 0.8786614,0.1542872 0.6019187,5.373e-4 0.6244527,-0.00125 0.7323232,-0.058202 z"
|
||||
id="path4" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke-width:0.0252525"
|
||||
d="m 8.3080808,13.922596 c -0.1169842,-0.06181 -0.1672559,-0.11334 -0.2176583,-0.223101 -0.044056,-0.09594 -0.046384,-0.231536 -0.046384,-2.70202 0,-2.5012395 0.00184,-2.6050631 0.047968,-2.7066634 0.030151,-0.06641 0.087851,-0.1320674 0.1553428,-0.1767677 l 0.1073747,-0.071115 0.5574865,-0.00798 c 0.7182684,-0.010279 0.7385729,-0.00701 0.9046147,0.1456443 l 0.1326697,0.1219733 0.012706,2.6353325 c 0.011874,2.462755 0.00984,2.641119 -0.030993,2.723715 -0.051075,0.103303 -0.1052616,0.168101 -0.2060781,0.24643 -0.07113,0.05526 -0.08782,0.05658 -0.7070707,0.05559 -0.5288105,-8.43e-4 -0.646812,-0.0077 -0.7099783,-0.04104 z"
|
||||
id="path5" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0252525"
|
||||
d="M 8.1691919,17.950891 C 7.5259667,17.891795 6.7132775,17.714836 6.0755861,17.49502 4.777299,17.047492 3.6417331,16.333774 2.650303,15.342186 1.8870501,14.578811 1.3634109,13.840752 0.89597131,12.869491 -0.48329018,10.003615 -0.23292358,6.6172609 1.5532868,3.9789154 1.894768,3.474526 2.1777983,3.1345253 2.6498124,2.6616732 4.1721927,1.1365898 5.9939278,0.27645152 8.1818182,0.04971825 8.5136548,0.01532969 9.4743561,0.01527668 9.8242551,0.04962763 11.888511,0.25228369 13.763177,1.1141246 15.235881,2.5375157 c 2.558902,2.4732194 3.420068,6.1836265 2.210932,9.5259913 -0.922775,2.550788 -2.990712,4.572617 -5.578126,5.453752 -0.595402,0.202762 -1.433525,0.378329 -2.0833335,0.43641 -0.3404838,0.03043 -1.2721151,0.02883 -1.6161616,-0.0028 z M 9.7374106,13.94484 C 9.8467005,13.88775 9.885347,13.84898 9.9429854,13.738652 l 0.070983,-0.135876 -0.007,-2.628408 C 10.00056,8.5568114 9.9965583,8.3396765 9.957098,8.2676374 9.9017631,8.1666177 9.7531008,8.0363997 9.6649409,8.0117285 9.6270013,8.0011111 9.3175505,7.9924242 8.9772727,7.9924242 c -0.6087022,0 -0.6204134,9.889e-4 -0.7256631,0.061273 -0.058837,0.0337 -0.1383823,0.1065891 -0.1767677,0.1619755 l -0.069791,0.1007023 -0.00666,2.651311 -0.00666,2.65131 0.053434,0.110381 c 0.056686,0.117097 0.163495,0.211728 0.2881631,0.255306 0.043892,0.01534 0.3268137,0.02732 0.6726215,0.02848 l 0.5968639,0.002 z M 9.7371899,5.9513442 C 9.798402,5.9190278 9.8825758,5.8441854 9.9242424,5.7850275 L 10,5.6774677 V 5 4.3225323 L 9.9242424,4.2149725 C 9.8825758,4.1558146 9.798402,4.0809722 9.7371899,4.0486558 9.6293194,3.9917071 9.6067854,3.9899162 9.0048667,3.9904535 8.3301566,3.9910561 8.2554258,4.0041783 8.1262053,4.1447407 8.0035273,4.2781861 7.9923861,4.3501682 7.9929788,5.005502 c 6.053e-4,0.6691584 0.013659,0.7414472 0.1578614,0.8741758 0.1242525,0.1143666 0.2164957,0.1281303 0.8666527,0.1293149 0.5892435,0.00107 0.6119066,-7.419e-4 0.719697,-0.057648 z"
|
||||
id="path6" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="m 8.3080808,13.922596 c -0.1169842,-0.06181 -0.1672559,-0.11334 -0.2176583,-0.223101 -0.044056,-0.09594 -0.046384,-0.231536 -0.046384,-2.70202 0,-2.5012395 0.00184,-2.6050631 0.047968,-2.7066634 0.030151,-0.06641 0.087851,-0.1320674 0.1553428,-0.1767677 l 0.1073747,-0.071115 0.5574865,-0.00798 c 0.7182684,-0.010279 0.7385729,-0.00701 0.9046147,0.1456443 l 0.1326697,0.1219733 0.012737,2.6353325 c 0.013597,2.813238 0.018166,2.689434 -0.1050927,2.84758 -0.026035,0.0334 -0.083454,0.08738 -0.1275981,0.11995 -0.079264,0.05848 -0.08813,0.0592 -0.7129826,0.0582 -0.5274406,-8.42e-4 -0.6453257,-0.0077 -0.7084778,-0.04104 z"
|
||||
id="path7" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="M 8.2904968,5.9080669 C 8.2391589,5.8809536 8.1652952,5.8170147 8.1263554,5.7659804 8.0589303,5.6776138 8.0549537,5.6571466 8.0429293,5.3365954 c -0.00694,-0.1851275 -0.00694,-0.4880633 0,-0.6731908 0.012029,-0.3206837 0.015978,-0.3409885 0.083534,-0.429526 0.1389432,-0.1820978 0.1968131,-0.1953908 0.8512465,-0.195536 0.3187074,-7.07e-5 0.6226838,0.011508 0.6755032,0.025731 0.1167133,0.031428 0.25025,0.1633273 0.2844854,0.280998 0.033107,0.1137919 0.033515,1.1839493 4.981e-4,1.3065642 C 9.9069606,5.767636 9.7745796,5.9012217 9.6576203,5.9347652 9.6100014,5.9484221 9.30392,5.9590937 8.9774394,5.9584799 8.4386797,5.9574669 8.3752148,5.9528094 8.2904968,5.9080669 Z"
|
||||
id="path8" />
|
||||
<path
|
||||
style="fill:#6b6b6b;fill-opacity:0.88803089;stroke-width:0.0252525"
|
||||
d="m 8.3080808,13.922596 c -0.1169842,-0.06181 -0.1672559,-0.11334 -0.2176583,-0.223101 -0.044056,-0.09594 -0.046384,-0.231536 -0.046384,-2.70202 0,-2.5012395 0.00184,-2.6050631 0.047968,-2.7066634 0.030151,-0.06641 0.087851,-0.1320674 0.1553428,-0.1767677 l 0.1073747,-0.071115 0.5574865,-0.00798 c 0.7182684,-0.010279 0.7385729,-0.00701 0.9046147,0.1456443 l 0.1326697,0.1219733 0.012737,2.6353325 c 0.013597,2.813238 0.018166,2.689434 -0.1050927,2.84758 -0.026035,0.0334 -0.083454,0.08738 -0.1275981,0.11995 -0.079264,0.05848 -0.08813,0.0592 -0.7129826,0.0582 -0.5274406,-8.42e-4 -0.6453257,-0.0077 -0.7084778,-0.04104 z"
|
||||
id="path9" />
|
||||
<path
|
||||
style="fill:#52b620;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="m 8.3081371,13.899611 c -0.1149444,-0.05993 -0.1586207,-0.107992 -0.2018904,-0.222148 -0.03509,-0.09258 -0.038721,-0.3979 -0.032473,-2.730493 l 0.00703,-2.6262629 0.05727,-0.08029 c 0.031498,-0.04416 0.09534,-0.1038188 0.1418696,-0.1325758 0.079424,-0.049087 0.1217761,-0.052285 0.6923486,-0.052285 0.3342621,0 0.6368108,0.011049 0.6723306,0.024554 0.03552,0.013505 0.1143234,0.070404 0.1751191,0.1264438 l 0.1105375,0.1018899 0.016989,2.443001 c 0.00955,1.373614 0.0072,2.549699 -0.00538,2.686753 -0.024177,0.263501 -0.059306,0.334532 -0.2212371,0.447335 -0.073909,0.05149 -0.1051057,0.05386 -0.7070707,0.05371 -0.5217345,-1.28e-4 -0.6427349,-0.0069 -0.7054518,-0.03963 z"
|
||||
id="path10" />
|
||||
<path
|
||||
style="fill:#4ca61d;fill-opacity:0.1891892;stroke-width:0.0252525"
|
||||
d="M 8.2904968,5.9080669 C 8.2391589,5.8809536 8.1652952,5.8170147 8.1263554,5.7659804 8.0589303,5.6776138 8.0549537,5.6571466 8.0429293,5.3365954 c -0.00694,-0.1851275 -0.00694,-0.4880633 0,-0.6731908 0.012029,-0.3206837 0.015978,-0.3409885 0.083534,-0.429526 0.1389432,-0.1820978 0.1968131,-0.1953908 0.8512465,-0.195536 0.3187074,-7.07e-5 0.6226838,0.011508 0.6755032,0.025731 0.1167133,0.031428 0.25025,0.1633273 0.2844854,0.280998 0.033107,0.1137919 0.033515,1.1839493 4.981e-4,1.3065642 C 9.9069606,5.767636 9.7745796,5.9012217 9.6576203,5.9347652 9.6100014,5.9484221 9.30392,5.9590937 8.9774394,5.9584799 8.4386797,5.9574669 8.3752148,5.9528094 8.2904968,5.9080669 Z"
|
||||
id="path11" />
|
||||
<path
|
||||
style="fill:#4ca61d;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="m 8.3081371,13.899611 c -0.1149444,-0.05993 -0.1586207,-0.107992 -0.2018904,-0.222148 -0.03509,-0.09258 -0.038721,-0.3979 -0.032473,-2.730493 l 0.00703,-2.6262629 0.05727,-0.08029 c 0.031498,-0.04416 0.09534,-0.1038188 0.1418696,-0.1325758 0.079424,-0.049087 0.1217761,-0.052285 0.6923486,-0.052285 0.3342621,0 0.6368108,0.011049 0.6723306,0.024554 0.03552,0.013505 0.1143234,0.070404 0.1751191,0.1264438 l 0.1105375,0.1018899 0.016989,2.443001 c 0.00955,1.373614 0.0072,2.549699 -0.00538,2.686753 -0.024177,0.263501 -0.059306,0.334532 -0.2212371,0.447335 -0.073909,0.05149 -0.1051057,0.05386 -0.7070707,0.05371 -0.5217345,-1.28e-4 -0.6427349,-0.0069 -0.7054518,-0.03963 z"
|
||||
id="path12" />
|
||||
<path
|
||||
style="fill:#4ca61d;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="M 8.5433602,5.9375235 C 8.3036863,5.920246 8.2277143,5.8834688 8.1274203,5.7361715 8.0576744,5.6337388 8.0295335,5.2677811 8.0509648,4.7419069 c 0.016301,-0.3999796 0.033003,-0.4593902 0.164207,-0.5841024 0.064146,-0.060972 0.1079827,-0.075823 0.2863453,-0.097005 0.2857026,-0.033931 1.1141069,-0.00593 1.203696,0.040686 0.07849,0.040841 0.1609943,0.1269346 0.2076611,0.2166961 0.046537,0.089512 0.046219,1.2740198 -3.656e-4,1.3640457 -0.04548,0.087891 -0.12862,0.1754177 -0.2029126,0.21362 -0.074938,0.038534 -0.8336904,0.065648 -1.1662358,0.041676 z"
|
||||
id="path13" />
|
||||
<path
|
||||
style="fill:#4ca61d;fill-opacity:0;stroke-width:0.0252525"
|
||||
d="M 8.5433602,5.9375235 C 8.3036863,5.920246 8.2277143,5.8834688 8.1274203,5.7361715 8.0576744,5.6337388 8.0295335,5.2677811 8.0509648,4.7419069 c 0.016301,-0.3999796 0.033003,-0.4593902 0.164207,-0.5841024 0.064146,-0.060972 0.1079827,-0.075823 0.2863453,-0.097005 0.2857026,-0.033931 1.1141069,-0.00593 1.203696,0.040686 0.07849,0.040841 0.1609943,0.1269346 0.2076611,0.2166961 0.046537,0.089512 0.046219,1.2740198 -3.656e-4,1.3640457 -0.04548,0.087891 -0.12862,0.1754177 -0.2029126,0.21362 -0.074938,0.038534 -0.8336904,0.065648 -1.1662358,0.041676 z"
|
||||
id="path14" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 125"
|
||||
enable-background="new 0 0 100 100"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
sodipodi:docname="XIcon.svg"
|
||||
inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs2" /><sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showguides="true"
|
||||
inkscape:zoom="7.128"
|
||||
inkscape:cx="50.014029"
|
||||
inkscape:cy="62.570146"
|
||||
inkscape:window-width="1200"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2"><sodipodi:guide
|
||||
position="2.8058361,8.9786756"
|
||||
orientation="1,0"
|
||||
id="guide4"
|
||||
inkscape:locked="false" /></sodipodi:namedview><g
|
||||
id="g1"><path
|
||||
fill="#000000"
|
||||
d="M32.4,50.6L10,27.4C5,22.4,5,15,10,10s12.4-5,17.4,0l22.4,22.4L72.2,10c5-5,13.3-5,18.2,0 c5,5,5,13.3,0,18.2L68,50.6L90.4,73c5,5,5,12.4,0,17.4s-12.4,5-17.4,0L50.6,68L28.2,90.4c-5,5-13.3,5-18.2,0c-5-5-5-13.3,0-18.2 L32.4,50.6z"
|
||||
id="path1" /></g><path
|
||||
id="text1"
|
||||
d="m 1.8710938,111.35156 c -0.2428476,0.008 -0.4668951,0.0512 -0.6660157,0.13867 -0.21666657,0.0967 -0.40078124,0.2304 -0.55078122,0.40039 -0.15000001,0.17002 -0.26375003,0.36961 -0.34375,0.59961 -0.08,0.22667 -0.12109374,0.47357 -0.12109376,0.74024 0,0.26 0.0410938,0.5038 0.12109376,0.73047 0.0781857,0.21826 0.18899167,0.40817 0.33398437,0.57226 -0.21328325,-0.47331 -0.14364514,-1.11789 0.38085935,-1.75586 v -0.002 c 0.036667,-0.14667 0.093255,-0.27729 0.1699219,-0.39062 0.076667,-0.11667 0.1754948,-0.20873 0.2988281,-0.27539 0.033595,-0.0191 0.078732,-0.0225 0.1171875,-0.0352 0.02316,-0.0622 0.045972,-0.12454 0.070312,-0.18555 0.067325,-0.17696 0.1406729,-0.3541 0.1894532,-0.53711 z m 2.1269531,3.5625 c -0.00739,0.0111 -0.015585,0.0209 -0.023437,0.0312 v 0.0391 c 0.034629,0.002 0.065377,0.002 0.109375,0.004 -0.029676,-0.0224 -0.057857,-0.0486 -0.085938,-0.0742 z" /><path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path6" /><path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path7" /><path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path8" /><path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path9" /><path
|
||||
style="fill:#ffffff;fill-opacity:0;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path10" /><path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.140292"
|
||||
d="M 17.606622,93.991059 C 13.826287,93.543887 10.499508,91.456496 8.3712295,88.196299 5.5421317,83.862556 5.7187382,77.889645 8.7991646,73.723345 9.1414642,73.260382 14.603688,67.89422 20.93744,61.798541 27.271192,55.702862 32.458798,50.679223 32.465453,50.634898 32.472109,50.590572 27.388736,45.287542 21.169071,38.850386 14.949407,32.41323 9.515813,26.736111 9.0944188,26.234568 8.1549179,25.116375 7.0358258,22.895389 6.6620094,21.407132 6.091467,19.135659 6.372369,16.126456 7.3578281,13.953073 8.2288113,12.03216 9.9844592,9.9130535 11.784512,8.6099646 12.736195,7.9210253 14.797593,6.959301 15.993266,6.6464139 c 1.457691,-0.3814529 4.131902,-0.3529485 5.582001,0.059499 1.397427,0.3974659 2.640335,0.9627926 3.766652,1.7132326 0.591685,0.3942254 4.842632,4.5384155 12.608143,12.2915065 6.443521,6.433216 11.777249,11.696755 11.852727,11.696755 0.07548,0 5.409568,-5.26278 11.85353,-11.695067 6.443963,-6.432286 12.015576,-11.8957686 12.381362,-12.1410719 5.030426,-3.3735 11.655114,-2.8620662 15.998314,1.2350891 3.858771,3.6401698 5.079509,9.3511758 3.04398,14.2407348 -0.965556,2.319368 -1.110698,2.479655 -13.453506,14.857348 -6.371719,6.389727 -11.613443,11.647604 -11.648277,11.684173 -0.03483,0.03657 5.242083,5.383106 11.726483,11.881193 7.251113,7.266422 11.980709,12.111748 12.285687,12.586311 2.171916,3.379631 2.643789,7.055475 1.358676,10.583967 -1.948338,5.349481 -7.575823,9.005124 -12.856614,8.351723 -1.610301,-0.199245 -3.483027,-0.832086 -4.87514,-1.64743 -1.008475,-0.590652 -2.33296,-1.864378 -13.055767,-12.555433 L 50.628084,67.890849 39.062639,79.438012 c -6.731511,6.720871 -11.95576,11.825682 -12.499294,12.213533 -1.774171,1.265998 -3.851455,2.056129 -6.147207,2.338195 -1.301057,0.159855 -1.468611,0.159933 -2.809516,0.0013 z"
|
||||
id="path11" /><path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.140292"
|
||||
d="M 16.764871,93.790944 C 8.7936758,92.077182 4.3711928,83.890742 7.401817,76.459035 8.376498,74.068918 8.75946,73.665784 24.375701,58.591049 c 4.456019,-4.301502 8.101852,-7.887133 8.101852,-7.968069 0,-0.08094 -0.617271,-0.787678 -1.371714,-1.570535 C 26.395161,44.164349 12.058006,29.239478 10.668933,27.777778 8.556955,25.555376 7.6734447,24.189818 6.9411959,22.01617 6.0694273,19.428365 6.4144397,15.935738 7.7970289,13.352411 9.4200043,10.319928 12.04743,8.1070849 15.432099,6.9220812 c 1.045805,-0.366146 1.27061,-0.3926869 3.296857,-0.3892334 2.008314,0.00342 2.260309,0.033455 3.296858,0.3929108 0.617284,0.2140625 1.621889,0.6530601 2.232456,0.9755502 1.352211,0.7142125 1.944969,1.2779858 15.548846,14.7885462 5.381567,5.344654 9.880896,9.717552 9.998508,9.717552 0.117614,0 4.585282,-4.340277 9.928154,-9.645061 C 74.641009,7.9613831 73.97463,8.5910853 75.547138,7.819338 c 2.178913,-1.0693554 3.193287,-1.2968193 5.751964,-1.2898238 2.361635,0.00646 3.160876,0.1539509 4.947753,0.9130731 3.038667,1.2909225 5.643148,3.9977087 6.877605,7.1477607 1.010345,2.578171 1.07593,5.938242 0.168408,8.627946 -0.477848,1.41624 -1.059647,2.419502 -2.197362,3.78916 -0.640354,0.7709 -6.105245,6.362942 -12.144203,12.426758 -6.038957,6.063815 -10.979923,11.099928 -10.979923,11.19136 0,0.09143 4.24605,4.441998 9.435665,9.667921 14.475632,14.576908 14.376337,14.472249 15.141048,15.958954 0.983297,1.911664 1.256424,2.927317 1.338273,4.976509 0.05855,1.465768 0.02159,1.956346 -0.225143,2.988405 -0.910485,3.808535 -3.513529,6.929323 -7.224799,8.661801 -2.778676,1.29713 -5.3897,1.439263 -8.356665,0.454899 C 76.503326,92.811042 75.514928,92.236448 74.165342,91.058457 73.497861,90.475845 67.974659,85.042911 61.89156,78.985271 55.808461,72.92763 50.772567,67.949947 50.700686,67.923749 c -0.07188,-0.0262 -4.974851,4.766498 -10.895488,10.650433 -5.920637,5.883935 -11.416233,11.286978 -12.212438,12.006762 -2.451295,2.216017 -4.99267,3.251113 -8.232491,3.353071 -1.10508,0.03478 -1.996813,-0.01438 -2.595398,-0.143071 z"
|
||||
id="path12" /><path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.140292"
|
||||
d="M 16.764871,93.793694 C 11.793638,92.7399 8.0249718,89.129554 6.7976911,84.24523 6.179351,81.784364 6.4479697,78.573872 7.4659006,76.258886 8.4528441,74.014371 8.4016571,74.06828 22.551908,60.370838 c 5.459105,-5.284414 9.925645,-9.667945 9.925645,-9.74118 0,-0.149557 0.307907,0.17451 -11.581838,-12.189703 C 7.785639,24.806712 8.7217173,25.84561 7.6734075,23.765293 6.3536676,21.146337 6.1059634,18.241257 6.9568895,15.361953 7.8335636,12.395524 10.370174,9.3720536 13.219253,7.8976319 c 2.353152,-1.2177756 2.986995,-1.3751025 5.509703,-1.3675704 1.99222,0.00595 2.266061,0.038339 3.266384,0.3863548 1.74785,0.6080837 2.973378,1.2977171 4.152394,2.3366508 0.605253,0.5333413 6.134543,5.9612529 12.287311,12.0620259 6.152768,6.100773 11.273062,11.092314 11.378431,11.092314 0.105369,0 4.661307,-4.434974 10.124305,-9.855499 C 74.696037,7.9083959 73.966995,8.5964254 75.547138,7.8206563 c 1.836368,-0.901562 3.104341,-1.2343771 5.050505,-1.3256478 3.794036,-0.1779317 6.896229,0.9946405 9.540147,3.6060015 2.529139,2.497996 3.787575,5.5045 3.787575,9.048822 0,1.762674 -0.27713,3.225019 -0.907378,4.788009 -0.918529,2.277908 -1.086522,2.462674 -14.346031,15.778189 -5.885317,5.910174 -10.700576,10.817097 -10.700576,10.904276 0,0.08718 4.245581,4.437186 9.434624,9.666686 14.56302,14.676562 14.379711,14.483286 15.142089,15.965455 0.983297,1.911664 1.256424,2.927317 1.338273,4.976509 0.05855,1.465768 0.02159,1.956346 -0.225143,2.988405 -0.910485,3.808535 -3.513529,6.929323 -7.224799,8.661801 -2.778676,1.29713 -5.3897,1.439263 -8.356665,0.454899 -1.517263,-0.503388 -2.527634,-1.074987 -3.76417,-2.129509 C 73.719794,90.696455 68.175139,85.245349 61.994136,79.090986 55.813133,72.936623 50.709077,67.901235 50.65179,67.901235 c -0.05729,0 -4.943284,4.808557 -10.857772,10.685684 -5.914488,5.877127 -11.405053,11.274519 -12.201258,11.994205 -2.463126,2.226407 -4.980672,3.25188 -8.232491,3.353344 -1.090656,0.03403 -2.004626,-0.01554 -2.595398,-0.140774 z"
|
||||
id="path13" /></svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
@@ -23,6 +23,7 @@ import { WinModal } from "./layers/WinModal";
|
||||
import { SpawnTimer } from "./layers/SpawnTimer";
|
||||
import { OptionsMenu } from "./layers/OptionsMenu";
|
||||
import { TopBar } from "./layers/TopBar";
|
||||
import { PlayerPanel } from "./layers/PlayerPanel";
|
||||
|
||||
export function createRenderer(
|
||||
canvas: HTMLCanvasElement,
|
||||
@@ -104,6 +105,14 @@ export function createRenderer(
|
||||
}
|
||||
topBar.game = game;
|
||||
|
||||
const playerPanel = document.querySelector("player-panel") as PlayerPanel;
|
||||
if (!(playerPanel instanceof PlayerPanel)) {
|
||||
console.error("player panel not found");
|
||||
}
|
||||
playerPanel.g = game;
|
||||
playerPanel.eventBus = eventBus;
|
||||
playerPanel.emojiTable = emojiTable;
|
||||
|
||||
const layers: Layer[] = [
|
||||
new TerrainLayer(game),
|
||||
new TerritoryLayer(game, eventBus),
|
||||
@@ -119,7 +128,8 @@ export function createRenderer(
|
||||
emojiTable as EmojiTable,
|
||||
buildMenu,
|
||||
uiState,
|
||||
playerInfo
|
||||
playerInfo,
|
||||
playerPanel
|
||||
),
|
||||
new SpawnTimer(game, transformHandler),
|
||||
leaderboard,
|
||||
@@ -128,6 +138,7 @@ export function createRenderer(
|
||||
winModel,
|
||||
optionsMenu,
|
||||
topBar,
|
||||
playerPanel,
|
||||
];
|
||||
|
||||
return new GameRenderer(
|
||||
|
||||
@@ -93,7 +93,7 @@ export class EmojiTable extends LitElement {
|
||||
@state()
|
||||
private _hidden = true;
|
||||
|
||||
public onEmojiClicked: (emoji: string) => void = () => {};
|
||||
private onEmojiClicked: (emoji: string) => void = () => {};
|
||||
|
||||
render() {
|
||||
return html`
|
||||
@@ -109,10 +109,10 @@ export class EmojiTable extends LitElement {
|
||||
>
|
||||
${emoji}
|
||||
</button>
|
||||
`,
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
@@ -123,7 +123,8 @@ export class EmojiTable extends LitElement {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
showTable() {
|
||||
showTable(oneEmojiClicked: (emoji: string) => void) {
|
||||
this.onEmojiClicked = oneEmojiClicked;
|
||||
this._hidden = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,253 @@
|
||||
import { LitElement, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { EventBus } from "../../../core/EventBus";
|
||||
import { GameView, PlayerView } from "../../../core/game/GameView";
|
||||
import { Layer } from "./Layer";
|
||||
import { MouseUpEvent } from "../../InputHandler";
|
||||
import { AllPlayers, Player, PlayerActions } from "../../../core/game/Game";
|
||||
import { TileRef } from "../../../core/game/GameMap";
|
||||
import { renderNumber, renderTroops } from "../../Utils";
|
||||
import targetIcon from "../../../../resources/images/TargetIconWhite.png";
|
||||
import emojiIcon from "../../../../resources/images/EmojiIconWhite.png";
|
||||
import donateIcon from "../../../../resources/images/DonateIconWhite.png";
|
||||
import traitorIcon from "../../../../resources/images/TraitorIconWhite.png";
|
||||
import allianceIcon from "../../../../resources/images/AllianceIconWhite.png";
|
||||
import {
|
||||
SendAllianceRequestIntentEvent,
|
||||
SendBreakAllianceIntentEvent,
|
||||
SendDonateIntentEvent,
|
||||
SendEmojiIntentEvent,
|
||||
SendTargetPlayerIntentEvent,
|
||||
} from "../../Transport";
|
||||
import { EmojiTable } from "./EmojiTable";
|
||||
|
||||
@customElement("player-panel")
|
||||
export class PlayerPanel extends LitElement implements Layer {
|
||||
public g: GameView;
|
||||
public eventBus: EventBus;
|
||||
public emojiTable: EmojiTable;
|
||||
|
||||
private actions: PlayerActions = null;
|
||||
private tile: TileRef = null;
|
||||
|
||||
@state()
|
||||
private isVisible: boolean = false;
|
||||
|
||||
public show(actions: PlayerActions, tile: TileRef) {
|
||||
this.actions = actions;
|
||||
this.tile = tile;
|
||||
this.isVisible = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
public hide() {
|
||||
this.isVisible = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private handleClose(e: Event) {
|
||||
e.stopPropagation();
|
||||
this.hide();
|
||||
}
|
||||
|
||||
private handleAllianceClick(
|
||||
e: Event,
|
||||
myPlayer: PlayerView,
|
||||
other: PlayerView
|
||||
) {
|
||||
e.stopPropagation();
|
||||
this.eventBus.emit(new SendAllianceRequestIntentEvent(myPlayer, other));
|
||||
this.hide();
|
||||
}
|
||||
|
||||
private handleBreakAllianceClick(
|
||||
e: Event,
|
||||
myPlayer: PlayerView,
|
||||
other: PlayerView
|
||||
) {
|
||||
e.stopPropagation();
|
||||
this.eventBus.emit(new SendBreakAllianceIntentEvent(myPlayer, other));
|
||||
this.hide();
|
||||
}
|
||||
|
||||
private handleDonateClick(e: Event, myPlayer: PlayerView, other: PlayerView) {
|
||||
e.stopPropagation();
|
||||
this.eventBus.emit(new SendDonateIntentEvent(myPlayer, other, null));
|
||||
this.hide();
|
||||
}
|
||||
|
||||
private handleEmojiClick(e: Event, myPlayer: PlayerView, other: PlayerView) {
|
||||
e.stopPropagation();
|
||||
this.emojiTable.showTable((emoji: string) => {
|
||||
if (myPlayer == other) {
|
||||
this.eventBus.emit(new SendEmojiIntentEvent(AllPlayers, emoji));
|
||||
} else {
|
||||
this.eventBus.emit(new SendEmojiIntentEvent(other, emoji));
|
||||
}
|
||||
this.emojiTable.hideTable();
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
|
||||
private handleTargetClick(e: Event, other: PlayerView) {
|
||||
e.stopPropagation();
|
||||
this.eventBus.emit(new SendTargetPlayerIntentEvent(other.id()));
|
||||
this.hide();
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
init() {
|
||||
this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.isVisible) {
|
||||
return html``;
|
||||
}
|
||||
const myPlayer = this.g.myPlayer();
|
||||
if (myPlayer == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let other = this.g.owner(this.tile);
|
||||
if (!other.isPlayer()) {
|
||||
throw new Error("Tile is not owned by a player");
|
||||
}
|
||||
other = other as PlayerView;
|
||||
|
||||
const canDonate = this.actions.interaction?.canDonate;
|
||||
const canSendAllianceRequest =
|
||||
this.actions.interaction?.canSendAllianceRequest;
|
||||
const canSendEmoji = this.actions.interaction?.canSendEmoji;
|
||||
const canBreakAlliance = this.actions.interaction?.canBreakAlliance;
|
||||
const canTarget = this.actions.interaction?.canTarget;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 pointer-events-auto"
|
||||
>
|
||||
<div
|
||||
class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md relative"
|
||||
>
|
||||
<!-- Close button -->
|
||||
<button
|
||||
@click=${this.handleClose}
|
||||
class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center
|
||||
bg-red-500 hover:bg-red-600 text-white rounded-full
|
||||
text-sm font-bold transition-colors"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<div class="flex flex-col gap-2 min-w-[240px]">
|
||||
<!-- Name section -->
|
||||
<div class="flex items-center gap-1 lg:gap-2">
|
||||
<div
|
||||
class="px-4 h-8 lg:h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 text-opacity-90 text-white
|
||||
rounded text-sm lg:text-xl w-full"
|
||||
>
|
||||
${other?.name()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resources section -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- Gold -->
|
||||
<div class="text-white text-opacity-80 text-sm px-2">Gold</div>
|
||||
<div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
|
||||
${renderNumber(other.gold() || 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- Troops -->
|
||||
<div class="text-white text-opacity-80 text-sm px-2">
|
||||
Troops
|
||||
</div>
|
||||
<div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
|
||||
${renderTroops(other.troops() || 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attitude section -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="text-white text-opacity-80 text-sm px-2">Traitor</div>
|
||||
<div class="bg-opacity-50 bg-gray-700 rounded p-2 text-white">
|
||||
${other.isTraitor()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex justify-center gap-2">
|
||||
${canTarget
|
||||
? html`<button
|
||||
@click=${(e) => this.handleTargetClick(e, other)}
|
||||
class="w-10 h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 hover:bg-opacity-70
|
||||
text-white rounded-lg transition-colors"
|
||||
>
|
||||
<img src=${targetIcon} alt="Target" class="w-6 h-6" />
|
||||
</button>`
|
||||
: ""}
|
||||
${canBreakAlliance
|
||||
? html`<button
|
||||
@click=${(e) =>
|
||||
this.handleBreakAllianceClick(e, myPlayer, other)}
|
||||
class="w-10 h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 hover:bg-opacity-70
|
||||
text-white rounded-lg transition-colors"
|
||||
>
|
||||
<img
|
||||
src=${traitorIcon}
|
||||
alt="Break Alliance"
|
||||
class="w-6 h-6"
|
||||
/>
|
||||
</button>`
|
||||
: ""}
|
||||
${canSendAllianceRequest
|
||||
? html`<button
|
||||
@click=${(e) =>
|
||||
this.handleAllianceClick(e, myPlayer, other)}
|
||||
class="w-10 h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 hover:bg-opacity-70
|
||||
text-white rounded-lg transition-colors"
|
||||
>
|
||||
<img src=${allianceIcon} alt="Alliance" class="w-6 h-6" />
|
||||
</button>`
|
||||
: ""}
|
||||
${canDonate
|
||||
? html`<button
|
||||
@click=${(e) => this.handleDonateClick(e, myPlayer, other)}
|
||||
class="w-10 h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 hover:bg-opacity-70
|
||||
text-white rounded-lg transition-colors"
|
||||
>
|
||||
<img src=${donateIcon} alt="Donate" class="w-6 h-6" />
|
||||
</button>`
|
||||
: ""}
|
||||
${canSendEmoji
|
||||
? html`<button
|
||||
@click=${(e) => this.handleEmojiClick(e, myPlayer, other)}
|
||||
class="w-10 h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 hover:bg-opacity-70
|
||||
text-white rounded-lg transition-colors"
|
||||
>
|
||||
<img src=${emojiIcon} alt="Emoji" class="w-6 h-6" />
|
||||
</button>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -29,9 +29,11 @@ import traitorIcon from "../../../../resources/images/TraitorIconWhite.png";
|
||||
import allianceIcon from "../../../../resources/images/AllianceIconWhite.png";
|
||||
import boatIcon from "../../../../resources/images/BoatIconWhite.png";
|
||||
import swordIcon from "../../../../resources/images/SwordIconWhite.png";
|
||||
import infoIcon from "../../../../resources/images/InfoIcon.svg";
|
||||
import targetIcon from "../../../../resources/images/TargetIconWhite.png";
|
||||
import emojiIcon from "../../../../resources/images/EmojiIconWhite.png";
|
||||
import disabledIcon from "../../../../resources/images/DisabledIcon.png";
|
||||
import xIcon from "../../../../resources/images/XIcon.svg";
|
||||
import donateIcon from "../../../../resources/images/DonateIconWhite.png";
|
||||
import buildIcon from "../../../../resources/images/BuildIconWhite.svg";
|
||||
import { EmojiTable } from "./EmojiTable";
|
||||
@@ -41,13 +43,13 @@ import { consolex } from "../../../core/Consolex";
|
||||
import { GameView, PlayerView } from "../../../core/game/GameView";
|
||||
import { TileRef } from "../../../core/game/GameMap";
|
||||
import { PlayerInfoOverlay } from "./PlayerInfoOverlay";
|
||||
import { PlayerPanel } from "./PlayerPanel";
|
||||
|
||||
enum Slot {
|
||||
Alliance,
|
||||
Info,
|
||||
Boat,
|
||||
Target,
|
||||
Emoji,
|
||||
Build,
|
||||
Close,
|
||||
}
|
||||
|
||||
export class RadialMenu implements Layer {
|
||||
@@ -56,16 +58,6 @@ export class RadialMenu implements Layer {
|
||||
private menuElement: d3.Selection<HTMLDivElement, unknown, null, undefined>;
|
||||
private isVisible: boolean = false;
|
||||
private readonly menuItems = new Map([
|
||||
[
|
||||
Slot.Alliance,
|
||||
{
|
||||
name: "alliance",
|
||||
disabled: true,
|
||||
action: () => {},
|
||||
color: null,
|
||||
icon: null,
|
||||
},
|
||||
],
|
||||
[
|
||||
Slot.Boat,
|
||||
{
|
||||
@@ -76,9 +68,18 @@ export class RadialMenu implements Layer {
|
||||
icon: null,
|
||||
},
|
||||
],
|
||||
[Slot.Target, { name: "target", disabled: true, action: () => {} }],
|
||||
[Slot.Emoji, { name: "emoji", disabled: true, action: () => {} }],
|
||||
[Slot.Close, { name: "close", disabled: true, action: () => {} }],
|
||||
[Slot.Build, { name: "build", disabled: true, action: () => {} }],
|
||||
[
|
||||
Slot.Info,
|
||||
{
|
||||
name: "info",
|
||||
disabled: true,
|
||||
action: () => {},
|
||||
color: null,
|
||||
icon: null,
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
private readonly menuSize = 190;
|
||||
@@ -97,7 +98,8 @@ export class RadialMenu implements Layer {
|
||||
private emojiTable: EmojiTable,
|
||||
private buildMenu: BuildMenu,
|
||||
private uiState: UIState,
|
||||
private playerInfoOverlay: PlayerInfoOverlay
|
||||
private playerInfoOverlay: PlayerInfoOverlay,
|
||||
private playerPanel: PlayerPanel
|
||||
) {}
|
||||
|
||||
init() {
|
||||
@@ -145,7 +147,9 @@ export class RadialMenu implements Layer {
|
||||
const pie = d3
|
||||
.pie<any>()
|
||||
.value(() => 1)
|
||||
.padAngle(0.03);
|
||||
.padAngle(0.03)
|
||||
.startAngle(Math.PI / 4) // Start at 45 degrees (π/4 radians)
|
||||
.endAngle(2 * Math.PI + Math.PI / 4); // Complete the circle but shifted by 45 degrees
|
||||
|
||||
const arc = d3
|
||||
.arc<any>()
|
||||
@@ -200,6 +204,7 @@ export class RadialMenu implements Layer {
|
||||
this.hideRadialMenu();
|
||||
}
|
||||
});
|
||||
|
||||
arcs
|
||||
.append("image")
|
||||
.attr("xlink:href", (d) => d.data.icon)
|
||||
@@ -244,7 +249,6 @@ export class RadialMenu implements Layer {
|
||||
.attr("fill", "#2c3e50")
|
||||
.style("pointer-events", "none");
|
||||
|
||||
// Replace text with sword icon
|
||||
centerButton
|
||||
.append("image")
|
||||
.attr("class", "center-button-icon")
|
||||
@@ -321,26 +325,32 @@ export class RadialMenu implements Layer {
|
||||
this.activateMenuElement(Slot.Build, "#ebe250", buildIcon, () => {
|
||||
this.buildMenu.showMenu(myPlayer, this.clickedCell);
|
||||
});
|
||||
const canSendEmojiToPlayer =
|
||||
this.g.hasOwner(tile) &&
|
||||
this.g.ownerID(tile) != myPlayer.smallID() &&
|
||||
actions.interaction?.canSendEmoji;
|
||||
const canSendEmojiToAllPlayers =
|
||||
this.g.ownerID(tile) == myPlayer.smallID() &&
|
||||
actions.canSendEmojiAllPlayers;
|
||||
if (canSendEmojiToPlayer || canSendEmojiToAllPlayers) {
|
||||
this.activateMenuElement(Slot.Emoji, "#00a6a4", emojiIcon, () => {
|
||||
const target =
|
||||
this.g.owner(tile) == myPlayer
|
||||
? AllPlayers
|
||||
: (this.g.owner(tile) as PlayerView);
|
||||
this.emojiTable.onEmojiClicked = (emoji: string) => {
|
||||
this.emojiTable.hideTable();
|
||||
this.eventBus.emit(new SendEmojiIntentEvent(target, emoji));
|
||||
};
|
||||
this.emojiTable.showTable();
|
||||
if (this.g.hasOwner(tile)) {
|
||||
this.activateMenuElement(Slot.Info, "#64748B", infoIcon, () => {
|
||||
this.playerPanel.show(actions, tile);
|
||||
});
|
||||
}
|
||||
this.activateMenuElement(Slot.Close, "#DC2626", xIcon, () => {});
|
||||
// const canSendEmojiToPlayer =
|
||||
// this.g.hasOwner(tile) &&
|
||||
// this.g.ownerID(tile) != myPlayer.smallID() &&
|
||||
// actions.interaction?.canSendEmoji;
|
||||
// const canSendEmojiToAllPlayers =
|
||||
// this.g.ownerID(tile) == myPlayer.smallID() &&
|
||||
// actions.canSendEmojiAllPlayers;
|
||||
// if (canSendEmojiToPlayer || canSendEmojiToAllPlayers) {
|
||||
// this.activateMenuElement(Slot.Emoji, "#00a6a4", emojiIcon, () => {
|
||||
// const target =
|
||||
// this.g.owner(tile) == myPlayer
|
||||
// ? AllPlayers
|
||||
// : (this.g.owner(tile) as PlayerView);
|
||||
// this.emojiTable.onEmojiClicked = (emoji: string) => {
|
||||
// this.emojiTable.hideTable();
|
||||
// this.eventBus.emit(new SendEmojiIntentEvent(target, emoji));
|
||||
// };
|
||||
// this.emojiTable.showTable();
|
||||
// });
|
||||
// }
|
||||
|
||||
if (actions.canBoat) {
|
||||
this.activateMenuElement(Slot.Boat, "#3f6ab1", boatIcon, () => {
|
||||
@@ -362,29 +372,29 @@ export class RadialMenu implements Layer {
|
||||
}
|
||||
const other = this.g.owner(tile) as PlayerView;
|
||||
|
||||
if (actions?.interaction.canDonate) {
|
||||
this.activateMenuElement(Slot.Target, "#53ac75", donateIcon, () => {
|
||||
this.eventBus.emit(new SendDonateIntentEvent(myPlayer, other, null));
|
||||
});
|
||||
}
|
||||
// if (actions?.interaction.canDonate) {
|
||||
// this.activateMenuElement(Slot.Target, "#53ac75", donateIcon, () => {
|
||||
// this.eventBus.emit(new SendDonateIntentEvent(myPlayer, other, null));
|
||||
// });
|
||||
// }
|
||||
|
||||
if (actions?.interaction.canTarget) {
|
||||
this.activateMenuElement(Slot.Target, "#c74848", targetIcon, () => {
|
||||
this.eventBus.emit(new SendTargetPlayerIntentEvent(other.id()));
|
||||
});
|
||||
}
|
||||
// if (actions?.interaction.canTarget) {
|
||||
// this.activateMenuElement(Slot.Target, "#c74848", targetIcon, () => {
|
||||
// this.eventBus.emit(new SendTargetPlayerIntentEvent(other.id()));
|
||||
// });
|
||||
// }
|
||||
|
||||
if (actions?.interaction.canSendAllianceRequest) {
|
||||
this.activateMenuElement(Slot.Alliance, "#53ac75", allianceIcon, () => {
|
||||
this.eventBus.emit(new SendAllianceRequestIntentEvent(myPlayer, other));
|
||||
});
|
||||
}
|
||||
// if (actions?.interaction.canSendAllianceRequest) {
|
||||
// this.activateMenuElement(Slot.Alliance, "#53ac75", allianceIcon, () => {
|
||||
// this.eventBus.emit(new SendAllianceRequestIntentEvent(myPlayer, other));
|
||||
// });
|
||||
// }
|
||||
|
||||
if (actions?.interaction.canBreakAlliance) {
|
||||
this.activateMenuElement(Slot.Alliance, "#c74848", traitorIcon, () => {
|
||||
this.eventBus.emit(new SendBreakAllianceIntentEvent(myPlayer, other));
|
||||
});
|
||||
}
|
||||
// if (actions?.interaction.canBreakAlliance) {
|
||||
// this.activateMenuElement(Slot.Alliance, "#c74848", traitorIcon, () => {
|
||||
// this.eventBus.emit(new SendBreakAllianceIntentEvent(myPlayer, other));
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
private onPointerUp(event: MouseUpEvent) {
|
||||
|
||||
@@ -178,6 +178,7 @@
|
||||
<build-menu></build-menu>
|
||||
<win-modal></win-modal>
|
||||
<top-bar></top-bar>
|
||||
<player-panel></player-panel>
|
||||
|
||||
<div class="fixed right-0 top-0 z-50 flex flex-col w-32 sm:w-32 lg:w-48">
|
||||
<options-menu></options-menu>
|
||||
|
||||
@@ -348,6 +348,9 @@ export class PlayerImpl implements Player {
|
||||
}
|
||||
|
||||
canTarget(other: Player): boolean {
|
||||
if (this == other) {
|
||||
return false;
|
||||
}
|
||||
if (this.isAlliedWith(other)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user