-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
295 lines (295 loc) · 29.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Noughts & Crosses</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pangolin&family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<script defer src="app.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
</head>
<body>
<div class="container">
<div class="board__container">
<div class="board__item" data-number="1"></div>
<div class="board__item" data-number="2"></div>
<div class="board__item" data-number="3"></div>
<div class="board__item" data-number="4"></div>
<div class="board__item" data-number="5"></div>
<div class="board__item" data-number="6"></div>
<div class="board__item" data-number="7"></div>
<div class="board__item" data-number="8"></div>
<div class="board__item" data-number="9"></div>
</div>
<div class="score__wrapper">
<div class="image__referee">
<svg
width="100%"
height="100%"
viewBox="0 0 1460 711"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
"
>
<g
transform="matrix(1.8501,0.300067,-0.300067,1.8501,193.958,-1098.85)"
>
<path
class="hand__left"
d="M294.067,882.698C295.233,882.317 295.321,881.824 294.067,881.197L294.067,882.698C284.28,885.9 207.215,874.802 201.539,874.802C197.175,874.802 113.105,854.79 105.403,847.088C101.075,842.76 107.438,813.948 104.338,810.848C99.598,806.108 77.88,796.422 74.492,806.584C73.032,810.966 81.367,819.962 77.69,823.638C72.245,829.084 50.753,810.652 45.713,825.77C36.51,853.379 57.264,842.651 63.833,849.22C65.304,850.69 53.467,851.739 52.109,852.418C46.901,855.022 44.77,856.558 41.45,859.879C32.489,868.84 59.693,874.802 63.833,874.802C64.484,874.802 67.682,874.386 68.097,874.802C71.172,877.877 62.434,885.927 60.636,886.526C48.535,890.56 50.925,898.134 57.438,904.647C62.062,909.271 79.588,901.854 83.02,900.383C89.84,897.46 104.095,895.296 108.601,890.79C110.26,889.131 122.708,890.79 124.59,890.79C130.46,890.79 144.144,888.309 149.105,890.79C154.024,893.249 289.225,917.681 294.067,920.102L294.067,882.698Z"
style="fill: rgb(217, 128, 250)"
/>
</g>
<path
d="M428.143,628.058C446.13,531.591 475.505,349.472 494.78,282.001L494.782,282.001C487.742,226.959 482.465,173.413 494.517,134.597C474.465,151.255 454.115,167.08 429.757,171.682C428.544,171.902 427.624,170.663 428.14,169.563C436.344,152.085 449.886,124.737 460.052,105.796C479.921,68.776 502.295,33.076 529.148,0.678C529.915,-0.246 530.918,0.547 530.995,1.396C531.34,5.205 531.041,9.059 531.463,12.86C532.403,21.336 536.884,36.524 538.571,43.089C540.701,51.382 541.497,56.78 544.601,64.098C547.863,71.788 552.555,78.726 555.473,86.591C561.308,102.319 564.702,118.417 568.723,134.653C581.055,124.074 594.903,116.212 609.941,110.248C637.456,99.334 664.863,86.61 694.604,83.235C715.672,80.844 737.597,84.938 757.701,91.04C807.182,106.057 851.428,136.738 885.196,175.633C912.197,126.048 932.36,80.717 946.096,27.019C946.581,25.114 949.182,24.713 950.227,26.37C975.786,66.852 1001.18,107.432 1026.58,148.013C1031.78,165.018 1036.99,182.024 1041.89,199.118C1042.17,200.073 1041.36,200.998 1040.36,200.801C1024.29,196.968 995.316,173.735 961.062,146.648L951.767,290.43C962.199,298.262 1012.07,513.296 1037.24,628.058L1041.95,628.058L1041.95,691.668L425.435,691.668L425.435,628.058L428.143,628.058Z"
style="fill: url(#_Linear1)"
/>
<g transform="matrix(1.44299,0,0,1.44299,309.261,-670.635)">
<path
class="hand__right"
d="M574.495,900.383C574.495,900.383 611.129,896.94 619.166,892.922C634.862,885.074 647.042,880.05 661.802,872.67C667.514,869.813 693.566,865.421 696.976,862.011C699.229,859.758 703.364,857.755 705.503,855.615C708.928,852.191 712.305,811.101 716.162,803.386C719.492,796.728 725.572,796.109 730.019,791.662C736.507,785.174 749.308,804.247 744.942,812.979C743.274,816.315 732.744,833.825 734.283,835.363C737.797,838.878 745.76,832.289 748.139,831.1C754.271,828.034 781.632,815.561 790.775,824.704C802.807,836.736 755.601,844.941 755.601,847.088C755.601,849.168 765.856,850.617 767.325,851.352C770.202,852.79 792.356,868.441 789.709,873.736C785.136,882.881 761.895,874.701 757.732,870.538C756.696,869.502 753.469,869.472 753.469,869.472C753.469,869.472 758.579,877.78 761.996,881.197C764.25,883.451 781.895,907.132 776.918,912.108C751.559,937.467 732.721,892.636 708.701,904.647C703.302,907.346 702.181,910.101 699.108,913.174C695.076,917.206 686.025,917.73 682.054,921.701C676.114,927.641 661.422,925.621 654.34,929.162C646.475,933.095 637.513,932.64 628.759,935.558C615.911,939.84 602.656,941.975 589.321,943.038L589.321,944.086L478.092,944.086L478.092,900.383L480.555,900.383C480.584,899.942 480.599,899.582 480.599,899.317L480.708,900.383L574.495,900.383Z"
style="fill: rgb(217, 128, 250)"
/>
</g>
<g transform="matrix(1.12534,0,0,1.12534,-77.7348,-49.7278)">
<g transform="matrix(0.351572,0,0,0.351572,426.626,-2.06408)">
<path
d="M575.585,855.898C572.287,850.95 596.909,838.712 607.502,837.66C608.769,837.534 615.985,834.736 617.924,835.706C630.782,842.134 634.65,853.083 643.328,861.76C649.483,867.916 660.716,869.832 664.172,876.742C666.069,880.537 670.349,882.583 671.988,885.861C674.943,891.77 673.502,899.08 675.245,906.053C676.066,909.339 676.82,917.506 674.593,919.732C662.957,931.368 650.445,943.229 640.722,952.952C638.582,955.093 626.281,957.622 621.833,962.071C620.267,963.636 613.738,963.187 612.062,964.025C605.779,967.166 581.838,967.021 576.888,962.071C574.366,959.549 561.67,950.288 560.604,947.09C558.702,941.383 556.613,936.503 554.09,931.457C550.255,923.786 550.833,911.738 550.833,902.797C550.833,900.244 550.094,894.417 551.485,893.026C556.07,888.441 559.872,879.508 562.558,874.136C564.516,870.22 570.208,855.898 575.585,855.898Z"
style="fill: white; stroke: black; stroke-width: 11.25px"
/>
</g>
<g transform="matrix(0.351572,0,0,0.351572,426.626,-2.06408)">
<ellipse
class="eyes eyes-animation"
cx="613.932"
cy="916.989"
rx="16.284"
ry="16.171"
style="stroke: black; stroke-width: 3.71px"
/>
</g>
</g>
<g transform="matrix(1.12534,0,0,1.12534,-77.7348,-49.7278)">
<g transform="matrix(0.351572,0,0,0.351572,426.626,-2.06408)">
<path
d="M981.744,924.345C983.102,922.826 984.149,921.056 984.825,919.135C986.22,915.029 988.311,909.144 989.856,906.053C991.58,902.605 991.42,887.554 993.113,885.861C994.703,884.27 992.509,877.997 994.416,876.09C997.473,873.032 998.254,866.389 1001.58,863.063C1004.94,859.708 1010.12,857.785 1013.31,854.595C1014.07,853.827 1019.95,854.595 1021.12,854.595C1025.06,854.595 1041.32,861.762 1042.62,864.366C1044.2,867.541 1052.36,868.871 1054.34,872.834C1056.82,877.793 1062.59,880.208 1065.41,885.861C1069.86,894.755 1071.08,903.043 1075.18,911.264C1077.11,915.121 1082.09,929.374 1079.09,935.365C1072.77,948.005 1069.35,958.14 1061.51,965.979C1058.45,969.039 1056.7,974.311 1052.39,975.75C1047.21,977.476 1040.03,985.202 1031.54,980.961C1028.03,979.203 1025.73,975.122 1021.77,973.144C1005.06,964.787 997.545,960.641 985.296,948.392C983.265,946.361 978.292,928.171 981.744,924.345Z"
style="fill: white; stroke: black; stroke-width: 11.25px"
/>
</g>
<g transform="matrix(0.351572,0,0,0.351572,426.626,-2.06408)">
<ellipse
class="eyes eyes-animation"
cx="1036.27"
cy="930.692"
rx="16.284"
ry="16.171"
style="stroke: black; stroke-width: 3.71px"
/>
</g>
</g>
<g transform="matrix(0.395637,0,0,0.395637,402.363,-52.0506)">
<path
d="M856.977,937.97C854.661,942.602 852.301,946.671 850.463,950.346C849.277,952.718 850.463,959.441 850.463,962.071C850.463,968.261 851.411,991.794 849.812,996.594C847.392,1003.85 849.541,1017.82 853.72,1022C855.6,1023.88 852.483,1031.25 853.72,1033.72C858.437,1043.16 862.839,1059.89 862.839,1070.85C862.839,1074.02 863.989,1082.73 862.188,1084.53C860.935,1085.78 863.012,1090.7 862.188,1092.35C859.419,1097.88 856.395,1100.09 853.069,1103.42C845.911,1110.58 846.055,1114.49 831.573,1114.49C829.532,1114.49 818.187,1116.09 816.592,1114.49C813.708,1111.61 807.342,1110.45 804.216,1107.33C798.566,1101.68 797.302,1080.07 794.445,1071.5C792.852,1066.72 796.683,1059.04 794.445,1054.57C792.971,1051.62 790.049,1046.67 784.675,1049.36C778.029,1052.68 778.314,1060.28 772.95,1065.64C761.03,1077.56 744.917,1108.62 717.584,1099.51C713.164,1098.04 709.454,1099.2 706.511,1096.25C706.46,1096.2 707.848,1090.46 707.162,1089.09C702.278,1079.32 704.921,1062.59 708.465,1051.96C710.251,1046.6 710.711,1028.22 714.327,1024.6C720.635,1018.29 723.314,1010.4 729.308,1004.41C730.238,1003.48 730.574,999.888 731.914,998.548C735.887,994.575 741.412,991.655 745.593,987.474C752.847,980.22 756.065,970.488 763.18,963.374C768.436,958.118 771.647,936.828 771.647,927.549C771.647,925.703 772.186,914.521 770.996,914.521"
style="fill: none; stroke: black; stroke-width: 11.25px"
/>
</g>
<g transform="matrix(0.395637,0,0,0.395637,402.363,-52.0506)">
<g transform="matrix(1,0,0,1,24.1088,-56.2538)">
<path
class="mouth__shut mouth__shut-animation"
d="M672.639,1361.36C677.38,1366.1 681.077,1382.17 683.713,1384.81C687.408,1388.5 689.962,1397.57 691.529,1399.14C695.983,1403.59 699.627,1409.19 704.556,1414.12C711.255,1420.82 721.568,1419.37 728.006,1422.59C731.672,1424.42 757.143,1428.62 760.574,1425.19C764.631,1421.14 770.512,1413.41 776.207,1411.52C784.156,1408.87 788.707,1397.71 793.143,1393.28C795.735,1390.68 795.548,1384.36 798.354,1381.55C801.582,1378.32 802.618,1373.67 804.867,1369.18C809.572,1359.77 815.323,1352.17 819.849,1343.12C820.978,1340.86 823.954,1339.74 825.06,1337.91C827.503,1333.87 830.086,1327.02 833.527,1323.58C835.704,1321.4 836.754,1317.1 838.738,1315.11C844.731,1309.12 851.573,1302.93 858.279,1296.22C860.071,1294.43 866.683,1285.8 868.701,1285.8"
style="fill: none; stroke: black; stroke-width: 11.25px"
/>
</g>
<g transform="matrix(1,0,0,1,24.1088,-56.2538)">
<path
class="mouth__open"
d="M672.639,1361.36C677.38,1366.1 681.077,1382.17 683.713,1384.81C687.408,1388.5 689.962,1397.57 691.529,1399.14C695.983,1403.59 699.627,1409.19 704.556,1414.12C711.255,1420.82 721.568,1419.37 728.006,1422.59C731.672,1424.42 757.143,1428.62 760.574,1425.19C764.631,1421.14 770.512,1413.41 776.207,1411.52C784.156,1408.87 788.707,1397.71 793.143,1393.28C795.735,1390.68 795.548,1384.36 798.354,1381.55C801.582,1378.32 802.618,1373.67 804.867,1369.18C809.572,1359.77 815.323,1352.17 819.849,1343.12C820.978,1340.86 823.954,1339.74 825.06,1337.91C827.503,1333.87 830.086,1327.02 833.527,1323.58C835.704,1321.4 836.754,1317.1 838.738,1315.11C844.731,1309.12 851.573,1302.93 858.279,1296.22C860.071,1294.43 866.683,1285.8 868.701,1285.8L868.701,1290.11C867.405,1290.11 864.389,1365.59 874.154,1425.19C879.593,1458.39 876.532,1490.42 875.403,1492.68C870.877,1501.73 865.59,1512.31 860.885,1521.72C858.636,1526.21 857.6,1530.86 854.372,1534.09C851.566,1536.9 851.753,1543.22 849.161,1545.82C844.725,1550.25 840.174,1561.41 832.225,1564.06C826.53,1565.95 820.649,1573.68 816.592,1577.73C813.161,1581.16 787.69,1576.96 784.024,1575.13C777.586,1571.91 767.273,1573.36 760.574,1566.66C755.645,1561.73 752.001,1556.13 747.547,1551.68C745.98,1550.11 743.426,1541.04 739.731,1537.35C738.669,1536.29 732.493,1530.01 719.262,1492.68C699.662,1437.4 675.469,1368.93 672.639,1366.1"
style="stroke: black; stroke-width: 11.25px"
/>
</g>
</g>
<g
transform="matrix(1.32946,-0.269811,0.252623,1.24477,-306.947,190.404)"
>
<g
transform="matrix(1.86502,0.636542,-0.52635,1.54217,378.514,-305.925)"
>
<path
d="M195.835,160.161C195.835,156.791 196.686,144.425 198.832,142.278C199.845,141.266 201.096,132.045 202.628,130.513C209.531,123.611 215.387,117.582 224.849,112.851C228.064,111.243 234.665,112.151 236.814,110.002C237.608,109.208 240.911,110.517 241.942,110.002C251.384,105.281 267.609,107.737 275.557,111.711C277.635,112.75 282.653,112.539 284.104,113.99C289.802,119.688 292.857,121.241 296.638,128.804C298.883,133.293 299.496,139.639 302.905,143.048C303.38,143.523 302.431,145.422 302.905,145.897C305.53,148.521 304.94,154.979 304.94,159.816"
style="fill: rgb(38, 38, 38)"
/>
<path
d="M302.513,143.479C302.513,143.532 302.512,143.628 302.504,143.695C302.469,144.002 302.383,144.358 302.323,144.69C302.259,145.049 302.225,145.387 302.254,145.653C302.288,145.967 302.397,146.213 302.57,146.387C303.53,147.346 303.995,148.88 304.237,150.641C304.629,153.5 304.414,156.947 304.414,159.816C304.414,160.167 304.65,160.452 304.94,160.452C305.23,160.452 305.466,160.167 305.466,159.816C305.466,156.881 305.675,153.357 305.274,150.433C304.992,148.375 304.401,146.608 303.298,145.465C303.298,145.413 303.299,145.316 303.307,145.249C303.342,144.942 303.428,144.586 303.488,144.254C303.552,143.896 303.586,143.557 303.557,143.292C303.523,142.978 303.414,142.732 303.241,142.558C301.602,140.92 300.649,138.566 299.823,136.093C298.952,133.487 298.224,130.747 297.088,128.475C293.269,120.836 290.194,119.255 284.439,113.5C283.807,112.869 282.565,112.487 281.144,112.231C279.231,111.887 276.976,111.733 275.758,111.124C267.715,107.102 251.296,104.637 241.741,109.414C241.547,109.511 241.251,109.502 240.904,109.477C240.247,109.429 239.445,109.268 238.72,109.175C238.186,109.107 237.69,109.077 237.303,109.135C236.949,109.188 236.669,109.321 236.479,109.512C235.678,110.313 234.203,110.616 232.542,110.838C229.818,111.202 226.613,111.28 224.648,112.263C215.13,117.022 209.236,123.08 202.293,130.023C201.942,130.374 201.586,131.065 201.26,131.975C200.826,133.187 200.416,134.812 200.031,136.413C199.656,137.971 199.305,139.507 198.975,140.594C198.797,141.181 198.66,141.626 198.497,141.788C197.799,142.487 197.188,144.16 196.729,146.29C195.731,150.928 195.309,157.774 195.309,160.161C195.309,160.512 195.544,160.797 195.835,160.797C196.125,160.797 196.36,160.512 196.36,160.161C196.36,157.829 196.772,151.141 197.747,146.611C198.134,144.812 198.578,143.358 199.167,142.769C199.33,142.606 199.512,142.299 199.683,141.857C199.991,141.065 200.322,139.767 200.67,138.318C201.101,136.524 201.564,134.492 202.063,132.958C202.357,132.052 202.641,131.325 202.963,131.003C209.825,124.141 215.643,118.142 225.05,113.438C226.943,112.492 230.034,112.452 232.658,112.102C234.562,111.848 236.231,111.41 237.149,110.492C237.24,110.4 237.397,110.394 237.583,110.381C237.88,110.361 238.234,110.392 238.61,110.44C239.351,110.534 240.17,110.698 240.841,110.747C241.381,110.786 241.841,110.74 242.142,110.59C251.472,105.925 267.503,108.372 275.356,112.299C276.631,112.936 278.987,113.129 280.989,113.489C282.18,113.704 283.239,113.951 283.768,114.48C289.41,120.121 292.444,121.645 296.188,129.133C297.297,131.35 297.998,134.027 298.848,136.569C299.732,139.214 300.776,141.712 302.513,143.479Z"
style="fill: rgb(38, 38, 38)"
/>
</g>
<g
transform="matrix(1.01886,0.188802,-0.188802,1.01886,28.1253,-129.964)"
>
<path
d="M751.41,6.983C751.41,21.87 746.069,36.874 746.069,53.276"
style="fill: none; stroke: white; stroke-width: 1.49px"
/>
</g>
<g
transform="matrix(1.01886,0.188802,-0.188802,1.01886,28.1253,-129.964)"
>
<path
d="M804.318,25.648C803.098,23.686 806.275,28.334 806.506,28.565C807.676,29.735 809.423,33.723 809.423,35.858C809.423,44.573 815.258,50.55 815.258,59.196C815.258,61.861 815.399,66.712 813.799,68.312C812.997,69.113 813.07,73.799 813.07,74.875C813.07,75.482 813.353,77.063 812.705,77.063"
style="fill: none; stroke: white; stroke-width: 1.49px"
/>
</g>
<g
transform="matrix(1.01886,0.188802,-0.188802,1.01886,28.1253,-129.964)"
>
<path
d="M670.13,20.543C670.13,22.16 668.523,22.126 667.577,22.731C665.012,24.373 661.219,28.153 660.284,30.024C659.466,31.661 659.073,35.246 657.732,36.588C656.954,37.365 657.741,40.589 657.002,41.328C656.024,42.306 656.158,45.454 655.179,46.433C654.471,47.141 654.67,48.766 654.085,49.35C653.024,50.412 653.763,52.183 652.991,53.726C651.651,56.407 651.533,61.117 651.533,64.301"
style="fill: none; stroke: white; stroke-width: 1.49px"
/>
</g>
<g
transform="matrix(1.86502,0.636542,-0.52635,1.54217,328.553,-620.224)"
>
<path
d="M307.107,315.417C308.085,315.504 309.03,315.559 309.475,315.114C314.535,310.055 327.193,309.417 336.254,309.417C338.74,309.417 344.334,308.329 346.51,309.417C361.942,317.133 375.72,323.813 388.672,336.765C390.719,338.813 392.762,341.995 394.939,344.172C395.2,344.432 395.2,350.178 394.939,350.439C394.536,350.842 391.583,350.439 390.951,350.439L386.478,350.439L383.637,350.943C384.079,351.398 383.238,350.467 383.637,350.943C352.665,323.048 274.453,345.428 274.487,347.356C273.02,350.003 267.122,351.843 266.744,348.73C266.387,345.792 257.058,346.212 257.058,344.741L258.236,344.824C258.662,342.011 262.571,338.217 265.604,336.195C270.197,333.133 272.333,329.412 276.999,327.079C279.002,326.078 282.041,325.456 283.836,323.66C288.054,319.442 300.94,319.091 304.348,315.684C304.793,315.239 305.738,315.294 306.716,315.381L307.107,315.417Z"
/>
<path
d="M274.925,347.707L274.924,347.71C273.973,349.427 271.312,350.868 269.235,350.989C267.637,351.082 266.412,350.376 266.224,348.822C266.193,348.571 266.032,348.381 265.817,348.202C265.503,347.939 265.075,347.728 264.581,347.544C262.943,346.935 260.634,346.659 258.995,346.323C258.074,346.135 257.347,345.907 256.99,345.634C256.66,345.381 256.532,345.058 256.532,344.741C256.532,344.566 256.592,344.399 256.697,344.279C256.802,344.159 256.944,344.096 257.088,344.107L257.837,344.159C258.136,343.076 258.831,341.88 259.762,340.713C261.305,338.775 263.489,336.879 265.35,335.638C269.962,332.563 272.112,328.834 276.798,326.491C278.759,325.511 281.743,324.928 283.501,323.17C285.658,321.014 290.021,319.81 294.29,318.745C296.776,318.126 299.226,317.543 301.153,316.81C302.37,316.348 303.372,315.834 304.013,315.194C304.256,314.95 304.603,314.795 305.025,314.729C305.517,314.653 306.13,314.692 306.754,314.747L307.146,314.782C307.61,314.824 308.066,314.859 308.459,314.83C308.742,314.809 308.988,314.776 309.14,314.624C311.219,312.545 314.54,311.172 318.38,310.298C324.019,309.014 330.788,308.781 336.254,308.781C337.742,308.781 340.347,308.389 342.661,308.311C344.295,308.256 345.791,308.369 346.711,308.829C362.194,316.57 376.012,323.28 389.007,336.275C391.054,338.322 393.097,341.505 395.274,343.682C395.345,343.752 395.468,343.94 395.525,344.277C395.612,344.798 395.66,346.052 395.66,347.305C395.66,348.559 395.612,349.812 395.525,350.333C395.468,350.671 395.345,350.858 395.274,350.929C395.194,351.01 395.073,351.09 394.908,351.143C394.706,351.209 394.395,351.246 394.028,351.252C392.979,351.272 391.395,351.075 390.951,351.075L386.517,351.075L384.183,351.489C384.115,351.588 384.017,351.655 383.889,351.691C383.834,351.707 383.699,351.749 383.518,351.631C383.504,351.622 383.44,351.574 383.312,351.443C373.473,342.589 358.832,338.866 343.477,337.926C320.321,336.507 295.537,341.444 282.97,344.93C279.689,345.84 277.244,346.65 275.887,347.221C275.456,347.402 275.045,347.637 274.925,347.707ZM394.488,344.544C394.513,344.876 394.609,346.214 394.609,347.305C394.609,348.284 394.532,349.462 394.497,349.933C394.366,349.953 394.175,349.978 394.011,349.981C392.968,350 391.392,349.803 390.951,349.803L386.478,349.803C386.453,349.803 386.427,349.805 386.402,349.81L383.813,350.269C383.767,350.233 383.723,350.208 383.68,350.191C372.447,340.265 355.201,336.738 337.683,336.427C311.303,335.96 284.32,342.751 276.545,345.626C275.307,346.084 274.528,346.47 274.266,346.704C274.133,346.823 274.056,346.95 274.012,347.069C273.461,348.004 272.292,348.798 271.075,349.275C270.133,349.644 269.155,349.82 268.385,349.678C267.803,349.571 267.343,349.286 267.264,348.637C267.179,347.933 266.747,347.331 266.03,346.876C264.733,346.053 262.406,345.651 260.44,345.305C259.82,345.196 259.238,345.093 258.746,344.978C258.749,344.965 258.751,344.952 258.753,344.938C258.909,343.908 259.598,342.751 260.519,341.595C261.993,339.744 264.08,337.937 265.858,336.752C270.431,333.703 272.554,329.99 277.2,327.667C279.245,326.644 282.338,325.984 284.172,324.15C286.233,322.089 290.422,321.008 294.502,319.991C297.026,319.362 299.512,318.768 301.469,318.024C302.841,317.502 303.96,316.896 304.683,316.174C304.835,316.022 305.081,315.989 305.365,315.968C305.757,315.938 306.214,315.974 306.677,316.015L307.069,316.051C307.693,316.106 308.306,316.145 308.798,316.069C309.22,316.003 309.567,315.848 309.811,315.604C311.779,313.635 314.938,312.376 318.575,311.548C324.153,310.278 330.847,310.052 336.254,310.052C337.749,310.052 340.366,309.661 342.691,309.582C344.149,309.533 345.488,309.594 346.309,310.004C361.691,317.695 375.427,324.345 388.337,337.255C390.348,339.266 392.354,342.372 394.488,344.544ZM275.011,347.398L275.01,347.419L275.011,347.405L275.011,347.398ZM275.012,347.384C275.013,347.37 275.013,347.356 275.013,347.342L275.012,347.384Z"
/>
</g>
</g>
<g transform="matrix(1.37735,0,0,1.37735,-256.117,-15.522)">
<g
transform="matrix(0.836783,0.547535,-0.547535,0.836783,767.793,48.9741)"
>
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.079,-0L0.079,-0.716L0.597,-0.716L0.597,-0.631L0.174,-0.631L0.174,-0.412L0.57,-0.412L0.57,-0.328L0.174,-0.328L0.174,-0.084L0.613,-0.084L0.613,-0L0.079,-0Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
<g
transform="matrix(0.96265,0.270748,-0.270748,0.96265,748.764,44.5496)"
>
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.079,-0L0.079,-0.716L0.597,-0.716L0.597,-0.631L0.174,-0.631L0.174,-0.412L0.57,-0.412L0.57,-0.328L0.174,-0.328L0.174,-0.084L0.613,-0.084L0.613,-0L0.079,-0Z"
style="fill: grey; fill-rule: nonzero"
/>
</g>
</g>
<g
transform="matrix(0.983369,0.181618,-0.181618,0.983369,727.649,41.3573)"
>
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.079,-0L0.079,-0.716L0.396,-0.716C0.46,-0.716 0.508,-0.709 0.542,-0.697C0.575,-0.684 0.601,-0.661 0.621,-0.628C0.641,-0.596 0.651,-0.56 0.651,-0.521C0.651,-0.47 0.634,-0.427 0.602,-0.392C0.569,-0.357 0.518,-0.335 0.449,-0.326C0.474,-0.314 0.493,-0.302 0.506,-0.29C0.534,-0.265 0.56,-0.233 0.585,-0.195L0.709,-0L0.59,-0L0.496,-0.149C0.468,-0.192 0.445,-0.225 0.427,-0.248C0.409,-0.27 0.393,-0.286 0.379,-0.295C0.365,-0.305 0.351,-0.311 0.336,-0.314C0.325,-0.317 0.308,-0.318 0.283,-0.318L0.173,-0.318L0.173,-0L0.079,-0ZM0.173,-0.4L0.377,-0.4C0.42,-0.4 0.454,-0.404 0.479,-0.413C0.503,-0.422 0.521,-0.437 0.534,-0.456C0.547,-0.476 0.553,-0.497 0.553,-0.521C0.553,-0.554 0.541,-0.582 0.516,-0.604C0.492,-0.626 0.453,-0.637 0.4,-0.637L0.173,-0.637L0.173,-0.4Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
<g transform="matrix(1,0,0,1,704.043,43.2952)">
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.079,-0L0.079,-0.716L0.597,-0.716L0.597,-0.631L0.174,-0.631L0.174,-0.412L0.57,-0.412L0.57,-0.328L0.174,-0.328L0.174,-0.084L0.613,-0.084L0.613,-0L0.079,-0Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
<g
transform="matrix(0.996833,-0.0795192,0.0795192,0.996833,686.947,46.3682)"
>
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.082,-0L0.082,-0.716L0.565,-0.716L0.565,-0.631L0.177,-0.631L0.177,-0.41L0.513,-0.41L0.513,-0.325L0.177,-0.325L0.177,-0L0.082,-0Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
<g
transform="matrix(0.965441,-0.260622,0.260622,0.965441,668.512,50.8488)"
>
<g transform="matrix(25,0,0,25,0,0)">
<path
d="M0.079,-0L0.079,-0.716L0.597,-0.716L0.597,-0.631L0.174,-0.631L0.174,-0.412L0.57,-0.412L0.57,-0.328L0.174,-0.328L0.174,-0.084L0.613,-0.084L0.613,-0L0.079,-0Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
<g
transform="matrix(0.600956,-0.25552,0.25552,0.600956,311.135,182.451)"
>
<g transform="matrix(38.2835,0,0,38.2835,551.239,27.5087)">
<path
d="M0.079,-0L0.079,-0.716L0.396,-0.716C0.46,-0.716 0.508,-0.709 0.542,-0.697C0.575,-0.684 0.601,-0.661 0.621,-0.628C0.641,-0.596 0.651,-0.56 0.651,-0.521C0.651,-0.47 0.634,-0.427 0.602,-0.392C0.569,-0.357 0.518,-0.335 0.449,-0.326C0.474,-0.314 0.493,-0.302 0.506,-0.29C0.534,-0.265 0.56,-0.233 0.585,-0.195L0.709,-0L0.59,-0L0.496,-0.149C0.468,-0.192 0.445,-0.225 0.427,-0.248C0.409,-0.27 0.393,-0.286 0.379,-0.295C0.365,-0.305 0.351,-0.311 0.336,-0.314C0.325,-0.317 0.308,-0.318 0.283,-0.318L0.173,-0.318L0.173,-0L0.079,-0ZM0.173,-0.4L0.377,-0.4C0.42,-0.4 0.454,-0.404 0.479,-0.413C0.503,-0.422 0.521,-0.437 0.534,-0.456C0.547,-0.476 0.553,-0.497 0.553,-0.521C0.553,-0.554 0.541,-0.582 0.516,-0.604C0.492,-0.626 0.453,-0.637 0.4,-0.637L0.173,-0.637L0.173,-0.4Z"
style="fill: white; fill-rule: nonzero"
/>
</g>
</g>
</g>
<defs>
<linearGradient
id="_Linear1"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(2e-06,0,0,2e-06,-595.053,854.254)"
>
<stop
offset="0"
style="stop-color: rgb(217, 128, 250); stop-opacity: 1"
/>
<stop
offset="1"
style="stop-color: rgb(217, 128, 250); stop-opacity: 1"
/>
</linearGradient>
</defs>
</svg>
</div>
<ul class="score__container">
<li class="score__total opacity-full">
Player1
<img class="score__image" src="img/cross.svg" alt="x" />
<span class="score__number" data-id="1">0</span>
</li>
<li class="score__draw">
Draw
<span class="score__number" data-id="0">0</span>
</li>
<li class="score__total">
Player2
<img class="score__image" src="img/circle.svg" alt="y" />
<span class="score__number" data-id="2">0</span>
</li>
</ul>
<div class="score__button">
<button id="btn__reset-score">reset</button>
</div>
</div>
<div class="modal__container hidden">
<button id="btn__next-round">Next round</button>
</div>
</div>
</body>
</html>