Maxim Sokhatsky 11 years ago
parent
commit
281aae0210
33 changed files with 3530 additions and 1322 deletions
  1. 514 0
      apps/web/priv/static/dart/Kakaranet-Scene.svg
  2. 35 0
      apps/web/priv/static/dart/SVG.txt
  3. 6 0
      apps/web/priv/static/dart/Timer.svg
  4. 20 20
      apps/web/priv/static/dart/dart.htm
  5. 55 0
      apps/web/priv/static/dart/index.htm
  6. 256 1102
      apps/web/priv/static/dart/js/app.js
  7. 147 147
      apps/web/priv/static/dart/js/bert.js
  8. 130 0
      apps/web/priv/static/dart/js/bootloader.js
  9. 138 0
      apps/web/priv/static/dart/js/chat.js
  10. 46 0
      apps/web/priv/static/dart/js/controller.js
  11. 1137 0
      apps/web/priv/static/dart/js/dart.js
  12. 120 0
      apps/web/priv/static/dart/js/okey/apiprovider.js
  13. 109 0
      apps/web/priv/static/dart/js/okey/card.js
  14. 186 0
      apps/web/priv/static/dart/js/okey/deck.js
  15. 134 0
      apps/web/priv/static/dart/js/okey/dragndrop.js
  16. 100 0
      apps/web/priv/static/dart/js/okey/hand.js
  17. 59 0
      apps/web/priv/static/dart/js/player.js
  18. 236 0
      apps/web/priv/static/dart/js/selector.js
  19. 62 0
      apps/web/priv/static/dart/js/timer.js
  20. 11 30
      apps/web/priv/static/dart/style/main.css
  21. 6 0
      apps/web/priv/static/dart/svg/ButtonAnimation.svg
  22. 2 2
      apps/web/priv/static/dart/svg/person-center-alina.svg
  23. 2 2
      apps/web/priv/static/dart/svg/person-center-gabrielo.svg
  24. 2 2
      apps/web/priv/static/dart/svg/person-center-mustafa.svg
  25. 2 2
      apps/web/priv/static/dart/svg/person-left-alina.svg
  26. 2 2
      apps/web/priv/static/dart/svg/person-left-gabrielo.svg
  27. 2 2
      apps/web/priv/static/dart/svg/person-left-mustafa.svg
  28. 2 2
      apps/web/priv/static/dart/svg/person-right-alina.svg
  29. 2 2
      apps/web/priv/static/dart/svg/person-right-gabrielo.svg
  30. 2 2
      apps/web/priv/static/dart/svg/person-right-mustafa.svg
  31. BIN
      apps/web/priv/static/doc/Kakaranet-Scene.sketch/Data
  32. 4 4
      apps/web/priv/static/doc/Kakaranet-Scene.sketch/metadata
  33. 1 1
      apps/web/priv/static/doc/Kakaranet-Scene.sketch/version

+ 514 - 0
apps/web/priv/static/dart/Kakaranet-Scene.svg

@@ -0,0 +1,514 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1070px" height="660px" viewBox="0 0 1070 660" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.0.3 (7892) - http://www.bohemiancoding.com/sketch -->
+    <title>Kakaranet-Scene</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Kakaranet-12-maxim" sketch:type="MSLayerGroup">
+            <rect id="Sky" fill="#EDF9FF" sketch:type="MSShapeGroup" x="0" y="0" width="1070.148" height="453"></rect>
+            <path d="M255.029,177.162 C292.600379,177.162 323.058,146.681098 323.058,109.081 C323.058,71.4809019 292.600379,41 255.029,41 C217.457621,41 187,71.4809019 187,109.081 C187,146.681098 217.457621,177.162 255.029,177.162 Z" id="Sun" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+            <path d="M973.021,106.358 L973.021,148.932 L949.433,148.932 L949.433,86.595 L882.922,86.714 L882.922,160.891 L862.149,160.891 L862.149,156.176 L853.66,156.176 L853.66,142.97 L843.284,142.97 L843.284,167.495 L840.454,167.495 C829.065,150.1 829.136,145.8 829.136,145.8 L829.136,141.084 L826.305,141.084 C822.356,126.876 821.589,118.445 821.589,118.445 L822.531,118.445 L822.531,114.672 L820.644,114.672 C815.581,67.28 814.985,40.153 814.985,40.153 L815.928,40.153 L815.928,37.323 L814.985,37.323 L814.985,35.437 L815.928,35.437 L815.928,33.55 L814.04,30.719 L813.1,30.719 L813.1,17.515 L811.214,17.515 L811.214,30.72 L810.271,30.72 L808.384,33.551 L808.384,35.438 L809.326,35.438 L809.326,37.323 L808.384,37.323 L808.384,40.153 L809.326,40.153 C809.326,79.498 804.608,114.672 804.608,114.672 L802.722,114.672 L802.722,118.445 L803.665,118.445 C803.114,129.843 798.947,141.084 798.947,141.084 L796.118,141.084 L796.118,145.8 C795.566,151.296 787.146,165.565 785.756,167.516 C785.068,167.516 784.587,167.495 783.856,167.495 L783.856,145.8 L775.289,145.8 C775.289,145.8 775.277,154.513 775.289,156.182 C774.904,156.182 773.533,156.18 771.654,156.18 C771.654,145.685 771.594,129.764 771.594,129.764 L757.445,129.764 L757.445,156.176 L745.183,156.176 L745.183,144.857 L737.636,144.857 L737.636,115.615 L712.17,115.615 L712.17,125.991 L697.076,125.991 L697.076,87.318 L636.707,87.318 L636.707,128.821 L620.673,128.821 L620.673,157.119 L596.148,157.119 C595.835,148.148 590.489,147.687 590.489,147.687 L590.489,142.971 L588.601,142.971 L588.601,147.687 C582.824,149.632 583.885,157.119 583.885,157.119 L574.451,157.119 C572.507,148.395 566.904,147.687 566.904,147.687 L566.904,143.914 L565.018,143.914 L565.018,147.687 C563.368,148.571 563.131,149.573 563.131,149.573 L563.131,141.084 L565.018,141.084 L565.018,138.254 L563.131,138.254 L563.131,112.786 L565.018,112.786 L565.018,110.899 L565.961,110.899 L565.961,107.125 L562.188,107.125 L562.188,91.09 L563.131,91.09 L563.131,88.259 L564.073,88.259 L564.073,85.429 L561.243,85.429 L561.243,78.826 L562.186,78.826 L562.186,74.109 L559.356,74.109 L559.356,68.449 C560.948,67.271 559.356,65.62 559.356,65.62 L559.356,58.073 L557.47,58.073 L557.47,65.62 C555.642,67.035 557.47,68.449 557.47,68.449 L557.47,74.109 L554.64,74.109 L554.64,78.826 L555.583,78.826 L555.583,85.429 L552.753,85.429 L552.753,88.259 L553.695,88.259 L553.695,91.09 L554.638,91.09 L554.638,107.125 L550.866,107.125 L550.866,110.899 L551.808,110.899 L551.808,112.786 L553.695,112.786 L553.695,138.254 L551.808,138.254 L551.808,141.084 L553.695,141.084 L553.695,149.573 L548.035,149.573 C547.446,147.805 544.264,147.687 544.264,147.687 L544.264,144.857 L542.377,144.857 L542.377,147.687 C538.84,147.864 537.659,149.573 537.659,149.573 L537.659,135.423 L539.547,135.423 L539.547,131.65 L537.659,131.65 L537.659,103.352 L539.547,103.352 L539.547,98.636 L541.434,98.636 L541.434,94.863 L536.718,94.863 L536.718,75.054 L538.604,75.054 L538.604,68.45 L535.775,68.45 L535.775,61.847 L536.718,61.847 L536.718,55.244 L533.888,55.244 L533.888,48.64 C534.654,48.346 534.95,47.166 534.83,45.811 C534.713,44.455 533.888,43.924 533.888,43.924 L533.888,36.378 L532.002,36.378 L532.002,43.924 C531.411,44.218 531.169,45.04 531.059,45.811 C530.823,48.346 532.002,48.64 532.002,48.64 L532.002,55.244 L529.172,55.244 L529.172,61.847 L530.114,61.847 L530.114,68.45 L527.284,68.45 L527.284,75.054 L529.171,75.054 L529.171,94.863 L524.453,94.863 L524.453,98.636 L526.34,98.636 L526.34,103.352 L528.228,103.352 L528.228,126.934 L527.285,126.934 L527.285,122.218 L525.397,122.218 L525.397,126.934 C515.14,128.585 515.965,140.14 515.965,140.14 L515.965,145.799 L514.078,145.799 L514.078,137.309 L512.191,137.309 C512.603,131.827 511.189,130.707 509.361,130.707 C506.236,130.883 506.531,135.422 506.531,135.422 L504.643,135.422 C504.525,128.879 501.873,128.819 500.871,128.819 C500.871,114.848 497.039,110.898 495.212,110.898 C492.616,91.03 478.233,89.203 478.233,89.203 L478.233,87.317 L476.346,87.317 L476.346,75.997 L473.516,75.997 L473.516,87.317 L471.63,87.317 L471.63,89.203 C465.91,90.795 463.14,94.863 463.14,94.863 L463.14,88.259 L461.254,88.259 L461.254,96.749 L459.366,96.749 L459.366,98.636 C441.68,102.468 445.218,125.047 445.218,125.047 L447.106,125.047 L447.106,131.65 C443.215,127.818 439.736,131.12 438.617,134.481 C437.969,132.122 434.844,131.65 434.844,131.65 L434.844,127.877 L432.958,127.877 L432.958,131.65 C424.625,131.965 425.32,139.196 425.32,139.196 L425.32,146.176 L410.013,146.176 L410.013,139.244 L395.325,139.244 L395.325,146.176 L381.275,146.176 L381.275,116.908 L373.936,116.908 L373.936,106.94 L363.451,106.94 L363.451,95.922 L358.209,95.922 L340.903,67.591 L322.026,96.446 L316.259,96.446 L316.259,106.94 L306.298,106.94 L306.298,116.908 L299.484,116.908 L299.484,139.433 L290.457,139.433 L290.457,129.912 L275.25,129.912 L275.25,150.898 L254.477,150.898 L254.477,163.561 L245.876,163.561 L245.876,126.663 L222.285,126.663 L222.285,118.269 L217.042,118.269 L217.042,109.874 L210.75,109.874 L210.75,100.431 L207.08,100.431 L207.08,81.543 L202.887,81.543 L202.887,100.431 L199.218,100.431 L199.218,109.874 L193.45,109.874 L193.45,118.794 L188.207,118.794 L188.207,126.663 L165.14,126.663 L165.072,143.913 C159.36,141.713 154.38,140.088 149.038,138.253 L149.038,38.266 L142.434,38.266 L142.434,53.359 L125.455,53.359 L125.455,38.267 L118.851,38.267 L118.851,128.821 C81.324,120.66 55.486,121.175 37.761,125.265 L37.761,85.431 L33.013,85.431 L33.013,92.977 L23.58,92.977 L23.58,85.431 L18.87,85.431 L18.87,132.251 C3.001,141.002 0,152.403 0,152.403 L0,459.423 L1070,459.423 L1070,106.358 L973.021,106.358 L973.021,106.358 Z M18.866,156.176 L3.773,156.176 C3.773,156.176 7.054,147.077 18.867,140.14 L18.867,156.176 L18.866,156.176 L18.866,156.176 Z M33.014,143.913 L31.127,143.913 L31.127,156.176 L23.581,156.176 L23.581,138.254 C28.238,135.571 33.014,134.482 33.014,134.482 L33.014,143.913 L33.014,143.913 Z M33.014,125.991 C33.014,125.991 26.883,127.641 23.581,129.764 L23.581,112.727 C24.378,112.727 32.219,112.786 33.014,112.786 L33.014,125.991 L33.014,125.991 Z M33.014,108.069 L23.581,108.069 L23.581,97.694 C24.583,97.694 30.803,97.635 33.014,97.635 L33.014,108.069 L33.014,108.069 Z M118.853,156.176 L108.477,156.176 L108.477,149.572 L95.271,149.572 L95.271,156.176 L91.499,156.176 L91.499,142.97 L82.978,142.97 L82.978,156.176 L77.348,156.176 L77.348,151.459 L61.254,151.459 L61.254,156.176 L44.334,156.176 C44.334,154.669 44.341,149.126 44.334,143.913 C44.334,143.88 37.73,143.946 37.73,143.913 C37.723,138.761 37.702,133.858 37.702,133.505 C55.073,130.613 80.877,133.044 118.852,148.629 C118.853,149.902 118.853,153.582 118.853,156.176 L118.853,156.176 L118.853,156.176 Z M125.455,156.176 L125.455,150.516 C130.09,152.307 133.657,154.069 138.661,156.176 L125.455,156.176 L125.455,156.176 Z M142.434,135.423 L125.455,130.708 L125.455,92.033 L142.434,92.033 L142.434,135.423 L142.434,135.423 Z M142.434,83.544 L125.455,83.544 L125.455,61.848 L142.434,61.848 L142.434,83.544 L142.434,83.544 Z M809.326,124.104 L815.93,124.104 C816.107,127.346 818.76,141.083 818.76,141.083 L806.495,141.083 C807.886,136.713 809.326,124.104 809.326,124.104 L809.326,124.104 L809.326,124.104 Z M796.12,167.495 C796.12,165.284 799.757,153.346 813.099,153.346 C819.135,153.346 829.267,156.666 830.078,167.495 L796.12,167.495 L796.12,167.495 Z M289.123,69.208 C289.366,70.842 289.903,74.626 290.276,78.475 L289.837,78.475 L289.837,84.373 L290.681,85.216 L298.263,85.216 L299.106,84.373 L299.106,78.475 L298.634,78.475 C299.016,74.626 299.568,70.842 299.817,69.208 L300.791,69.208 C300.791,69.208 302.546,63.66 310.059,55.728 C317.571,47.793 319.326,43.56 319.326,37.192 C319.326,32.277 312.652,16.971 294.892,16.971 C286.467,16.971 269.617,21.465 269.617,38.034 C269.617,42.807 271.583,48.215 278.885,55.727 C286.187,63.239 287.876,68.817 288.153,69.208 L289.123,69.208 Z M291.5,69.062 L297.25,69.062 L297.25,69.208 L298.954,69.208 C298.365,72.524 297.991,75.856 297.762,78.475 L297.25,78.475 L296.416,78.475 L295.61,78.475 L293.201,78.475 L292.416,78.475 L291.5,78.475 L291.126,78.475 C290.902,75.857 290.538,72.525 289.963,69.208 L291.5,69.208 L291.5,69.062 L291.5,69.062 Z" id="City" fill="#DFF1F4" sketch:type="MSShapeGroup"></path>
+            <g id="Detailed-Houses" transform="translate(21.000000, 105.000000)" sketch:type="MSShapeGroup">
+                <g id="Group" transform="translate(117.000000, 268.000000)" fill="#F4EDE2">
+                    <path d="M16,-0.002 L0,-0.002 L0,9.998 L16,9.998 L16,-0.002 L16,-0.002 Z M42,-0.002 L26,-0.002 L26,9.998 L42,9.998 L42,-0.002 L42,-0.002 Z M52,9.998 L68,9.998 L68,-0.002 L52,-0.002 L52,9.998 L52,9.998 Z M40,30.998 L41,30.998 L41,51.998 L40,51.998 L40,54.998 L60,54.998 L60,51.998 L59,51.998 L59,30.998 L60,30.998 L60,27.998 L40,27.998 L40,30.998 L40,30.998 Z M9,30.998 L10,30.998 L10,51.998 L9,51.998 L9,54.998 L29,54.998 L29,51.998 L28,51.998 L28,30.998 L29,30.998 L29,27.998 L9,27.998 L9,30.998 L9,30.998 Z M738.332,9.998 C731.756,9.998 732,14.998 732,14.998 L732,25.998 L744.664,25.998 L744.664,14.998 C744.664,14.998 745,9.998 738.332,9.998 L738.332,9.998 L738.332,9.998 Z" id="Shape"></path>
+                </g>
+                <g id="Buildings" transform="translate(119.000000, 269.000000)" fill="#A9BCC2">
+                    <path d="M12,-0.002 L0,-0.002 L0,5.998 L12,5.998 L12,-0.002 L12,-0.002 Z M26,5.998 L38,5.998 L38,-0.002 L26,-0.002 L26,5.998 L26,5.998 Z M52,5.998 L64,5.998 L64,-0.002 L52,-0.002 L52,5.998 L52,5.998 Z M10,49.998 L24,49.998 L24,40.998 L10,40.998 L10,49.998 L10,49.998 Z M10,38.998 L24,38.998 L24,28.998 L10,28.998 L10,38.998 L10,38.998 Z M41,38.998 L55,38.998 L55,28.998 L41,28.998 L41,38.998 L41,38.998 Z M41,49.998 L55,49.998 L55,40.998 L41,40.998 L41,49.998 L41,49.998 Z M675,75.998 L682,75.998 L682,60.998 L675,60.998 L675,75.998 L675,75.998 Z M665.026,39.547 C665.026,42.186 664.968,57.123 664.968,58.998 L673,58.998 L673,39.998 C673,39.998 670.358,38.998 668.75,38.998 C667.365,38.998 666.129,39.193 665.026,39.547 L665.026,39.547 L665.026,39.547 Z M675.02,40.643 C675.02,43.081 674.969,58.998 674.969,58.998 L682,58.998 C682,58.998 682.805,45.428 675.02,40.643 L675.02,40.643 L675.02,40.643 Z M656,61.029 L656,75.998 L663,75.998 C663,75.998 662.969,62.395 662.969,61.02 C659.42,61.027 656.618,61.029 656,61.029 L656,61.029 L656,61.029 Z M656,58.998 L663,58.998 C663,58.998 662.968,42.17 662.968,40.467 C655.131,45.082 656,58.998 656,58.998 L656,58.998 L656,58.998 Z M665,60.998 L665,75.998 L673,75.998 L672.969,61.01 L665,60.998 L665,60.998 Z M669.438,6.998 C664.959,6.998 665,10.998 665,10.998 L665,18.998 L674,18.998 L674,10.998 C674,10.998 674.146,6.998 669.438,6.998 L669.438,6.998 L669.438,6.998 Z M740.847,14.998 C740.847,14.998 740.99,10.998 736.362,10.998 C731.961,10.998 732.001,14.998 732.001,14.998 L732.001,22.998 L740.849,22.998 L740.847,14.998 L740.847,14.998 Z M736.25,47.998 C728.71,47.998 729,58.998 729,58.998 L729,64.998 L744,64.998 L744,58.998 C744,58.998 744.269,47.998 736.25,47.998 L736.25,47.998 L736.25,47.998 Z M729,79.998 L744,79.998 L744,66.998 L729,66.998 L729,79.998 L729,79.998 Z" id="Shape"></path>
+                </g>
+                <g id="Houses">
+                    <g id="Group" transform="translate(89.000000, 21.000000)" fill="#F8BEB0">
+                        <path d="M684,327 L733.991,327 L734,140 L684,140 L684,327 L684,327 Z M785.991,327 L842,327 L842,190 L786,190 C786,190 785.991,320.984 785.991,327 L785.991,327 L785.991,327 Z M747,291.998 L773,291.998 L773,247.998 L747,247.998 L747,291.998 L747,291.998 Z M855,247.998 L855,291.998 L881,291.998 L881,247.998 L855,247.998 L855,247.998 Z M116.063,0 L96.969,20 L91,20 L91,327 L141.992,327 L142,20 L136,20 L116.063,0 L116.063,0 Z M25.063,0 L5.969,20 L0,20 L0,327 L50.992,327 L51,20 L45,20 L25.063,0 L25.063,0 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(74.000000, 49.000000)" fill="#F8BEB0">
+                        <path d="M883,126 L857,152 L857,299 L909,299 L909,152 L883,126 L883,126 Z M896,263.998 L870,263.998 L870,219.998 L896,219.998 L896,263.998 L896,263.998 Z M689,299 L699,299 L699,162 L689,162 L689,299 L689,299 Z M749,152 L749,299 L801,299 L801,152 L775,126 L749,152 L749,152 Z M788,263.998 L762,263.998 L762,219.998 L788,219.998 L788,263.998 L788,263.998 Z M65.875,14 L65.875,299 L105.938,299 L106,14 L86,0 L65.875,14 L65.875,14 Z M0,299 L14.938,299 C14.938,299 14.984,48.603 14.984,45.068 C6.069,50.977 0,55 0,55 L0,299 L0,299 Z M157.125,299 L172,299 L172,55 L156.935,45.016 C156.935,45.016 157.125,293.438 157.125,299 L157.125,299 L157.125,299 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(74.000000, 12.000000)" fill="#F89D8D">
+                        <path d="M749,149 L749,189 L775,163 L801,189 L801,197 L857,197 L857,189 L883,163 L909,189 L909,149 L749,149 L749,149 Z M699,149 L749,149 L724,104 L699,149 L699,149 Z M762,253.998 L788,253.998 L775,240.998 L762,253.998 L762,253.998 Z M870,253.998 L896,253.998 L883,240.998 L870,253.998 L870,253.998 Z M0,93 L14.949,83.439 C14.949,83.439 14.992,77.828 14.992,75.298 C6.018,80.963 0,85 0,85 L0,93 L0,93 Z M89,31 L89,24 L83,24 L83,31 C83,31 73.711,37.305 65.983,42.305 C65.984,43.899 66,51 66,51 L86,38 L106,51 C106,51 106.001,44.937 106,42 C98.276,37.002 89,31 89,31 L89,31 L89,31 Z M157.014,83.416 L172,93 L172,85 C172,85 165.901,81.055 156.973,75.276 C156.973,78.053 157.014,83.416 157.014,83.416 L157.014,83.416 L157.014,83.416 Z M133,0 L129,0 L129.006,5.13 L108,29 L113,29 L131,9 L150,29 L155,29 L133.004,5.092 L133,0 L133,0 Z M42,0 L38,0 L38.006,5.13 L17,29 L22,29 L40,9 L59,29 L64,29 L42.004,5.092 L42,0 L42,0 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(89.000000, 41.000000)" fill="#E9E9EB">
+                        <path d="M842,165 L786,165 L786,170 L842,170 L842,165 L842,165 Z M684,170 L734,170 L734,165 L684,165 L684,170 L684,170 Z M842,205.998 L786,205.998 L786,210.998 L842,210.998 L842,205.998 L842,205.998 Z M684,210.998 L734,210.998 L734,205.998 L684,205.998 L684,210.998 L684,210.998 Z M786,296.998 L842,296.998 L842,291.998 L786,291.998 L786,296.998 L786,296.998 Z M684,296.998 L734,296.998 L734,291.998 L684,291.998 L684,296.998 L684,296.998 Z M747,227.998 L773,227.998 L773,224.998 L747,224.998 L747,227.998 L747,227.998 Z M747,274.998 L773,274.998 L773,271.998 L747,271.998 L747,274.998 L747,274.998 Z M881,224.998 L855,224.998 L855,227.998 L881,227.998 L881,224.998 L881,224.998 Z M842,271.998 L842,274.998 L894,274.998 L894,271.998 L842,271.998 L842,271.998 Z M91,5 L142,5 L142,0 L91,0 L91,5 L91,5 Z M0,5 L51,5 L51,0 L0,0 L0,5 L0,5 Z M91,66 L142,66 L142,61 L91,61 L91,66 L91,66 Z M0,66 L51,66 L51,61 L0,61 L0,66 L0,66 Z M91,147 L142,147 L142,142 L91,142 L91,147 L91,147 Z M0,147 L51,147 L51,142 L0,142 L0,147 L0,147 Z M91,207.998 L142,207.998 L142,202.998 L91,202.998 L91,207.998 L91,207.998 Z M0,207.998 L51,207.998 L51,202.998 L0,202.998 L0,207.998 L0,207.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(74.000000, 107.000000)" fill="#E9E9EB">
+                        <path d="M749,99 L801,99 L801,94 L749,94 L749,99 L749,99 Z M749,139.998 L801,139.998 L801,134.998 L749,134.998 L749,139.998 L749,139.998 Z M762,161.998 L749,161.998 L749,164.998 L762,164.998 L762,161.998 L762,161.998 Z M788,164.998 L801,164.998 L801,161.998 L788,161.998 L788,164.998 L788,164.998 Z M762,208.998 L749,208.998 L749,211.998 L762,211.998 L762,208.998 L762,208.998 Z M788,211.998 L801,211.998 L801,208.998 L788,208.998 L788,211.998 L788,211.998 Z M749,225.998 L801,225.998 L801,220.998 L749,220.998 L749,225.998 L749,225.998 Z M857,94 L857,99 L909,99 L909,94 L857,94 L857,94 Z M857,139.998 L909,139.998 L909,134.998 L857,134.998 L857,139.998 L857,139.998 Z M870,161.998 L857,161.998 L857,164.998 L870,164.998 L870,161.998 L870,161.998 Z M896,164.998 L909,164.998 L909,161.998 L896,161.998 L896,164.998 L896,164.998 Z M857,225.998 L909,225.998 L909,220.998 L857,220.998 L857,225.998 L857,225.998 Z M689,139.998 L699,139.998 L699,134.998 L689,134.998 L689,139.998 L689,139.998 Z M689,225.998 L699,225.998 L699,220.998 L689,220.998 L689,225.998 L689,225.998 Z M66,5 L106,5 L106,0 L66,0 L66,5 L66,5 Z M157,5 L172,5 L172,0 L157,0 L157,5 L157,5 Z M0,5 L15,5 L15,0 L0,0 L0,5 L0,5 Z M66,86 L106,86 L106,81 L66,81 L66,86 L66,86 Z M157,86 L172,86 L172,81 L157,81 L157,86 L157,86 Z M157,146.998 L172,146.998 L172,141.998 L157,141.998 L157,146.998 L157,146.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(96.000000, 60.000000)" fill="#F8E2B0">
+                        <path d="M789.825,158 C783.601,158 784,162.444 784,162.444 L784,177.998 L796,177.998 L796,162.444 C796,162.444 795.987,158 789.825,158 L789.825,158 L789.825,158 Z M806.825,158 C800.601,158 801,162.444 801,162.444 L801,177.998 L813,177.998 L813,162.444 C813,162.444 812.987,158 806.825,158 L806.825,158 L806.825,158 Z M823.825,158 C817.601,158 818,162.444 818,162.444 L818,177.998 L830,177.998 L830,162.444 C830,162.444 829.987,158 823.825,158 L823.825,158 L823.825,158 Z M806.825,204.998 C800.601,204.998 801,209.443 801,209.443 L801,224.998 L813,224.998 L813,209.443 C813,209.443 812.987,204.998 806.825,204.998 L806.825,204.998 L806.825,204.998 Z M823.825,204.998 C817.601,204.998 818,209.443 818,209.443 L818,224.998 L830,224.998 L830,209.443 C830,209.443 829.987,204.998 823.825,204.998 L823.825,204.998 L823.825,204.998 Z M806.825,240.998 C800.601,240.998 801,245.443 801,245.443 L801,260.998 L813,260.998 L813,245.443 C813,245.443 812.987,240.998 806.825,240.998 L806.825,240.998 L806.825,240.998 Z M823.825,240.998 C817.601,240.998 818,245.443 818,245.443 L818,260.998 L830,260.998 L830,245.443 C830,245.443 829.987,240.998 823.825,240.998 L823.825,240.998 L823.825,240.998 Z M855,215.998 L855,227.998 L867,227.998 L867,215.998 L855,215.998 L855,215.998 Z M855,245.998 L867,245.998 L867,233.998 L855,233.998 L855,245.998 L855,245.998 Z M692.825,158 C686.601,158 687,162.444 687,162.444 L687,177.998 L699,177.998 L699,162.444 C699,162.444 698.987,158 692.825,158 L692.825,158 L692.825,158 Z M710.824,158 C704.601,158 705,162.444 705,162.444 L705,177.998 L717,177.998 L717,162.444 C717,162.444 716.987,158 710.824,158 L710.824,158 L710.824,158 Z M692.825,117 C686.601,117 687,121.444 687,121.444 L687,137 L699,137 L699,121.444 C699,121.444 698.987,117 692.825,117 L692.825,117 L692.825,117 Z M710.824,117 C704.601,117 705,121.444 705,121.444 L705,137 L717,137 L717,121.444 C717,121.444 716.987,117 710.824,117 L710.824,117 L710.824,117 Z M123,29 L121,29 L121,0 L97,0 L97,29 L95,29 L95,32 L123,32 L123,29 L123,29 Z M32,29 L30,29 L30,0 L6,0 L6,29 L4,29 L4,32 L32,32 L32,29 L32,29 Z M128,62 L91,62 L91,105 L128,105 L128,62 L128,62 Z M37,62 L0,62 L0,105 L37,105 L37,62 L37,62 Z M106,149 C106,149 106.381,139 97.934,139 C89.602,139 90,149 90,149 L90,170.998 L89,170.998 L89,172.998 L107,172.998 L107,170.998 L106,170.998 L106,149 L106,149 Z M129,149 C129,149 129.381,139 120.934,139 C112.602,139 113,149 113,149 L113,170.998 L112,170.998 L112,172.998 L130,172.998 L130,170.998 L129,170.998 L129,149 L129,149 Z M38,149 C38,149 38.381,139 29.934,139 C21.602,139 22,149 22,149 L22,170.998 L21,170.998 L21,172.998 L39,172.998 L39,170.998 L38,170.998 L38,149 L38,149 Z M129,209.998 C129,209.998 129.381,199.998 120.934,199.998 C112.602,199.998 113,209.998 113,209.998 L113,231.998 L112,231.998 L112,233.998 L130,233.998 L130,231.998 L129,231.998 L129,209.998 L129,209.998 Z M129,260.998 C129,260.998 129.381,250.998 120.934,250.998 C112.602,250.998 113,260.998 113,260.998 L113,282.998 L112,282.998 L112,284.998 L130,284.998 L130,282.998 L129,282.998 L129,260.998 L129,260.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Windows" transform="translate(99.000000, 63.000000)" fill="#B5C6D8">
+                        <path d="M747,168.998 L753,168.998 L753,155 L747,155 L747,168.998 L747,168.998 Z M786.831,158 C784.06,158 784,161 784,161 L784,171.998 L790,171.998 L790,161 C790,161 789.998,158 786.831,158 L786.831,158 L786.831,158 Z M803.831,158 C801.06,158 801,161 801,161 L801,171.998 L807,171.998 L807,161 C807,161 806.998,158 803.831,158 L803.831,158 L803.831,158 Z M820.831,158 C818.06,158 818,161 818,161 L818,171.998 L824,171.998 L824,161 C824,161 823.998,158 820.831,158 L820.831,158 L820.831,158 Z M855,155 L855,168.998 L861,168.998 L861,155 L855,155 L855,155 Z M803.831,204.998 C801.06,204.998 801,207.998 801,207.998 L801,218.998 L807,218.998 L807,207.998 C807,207.998 806.998,204.998 803.831,204.998 L803.831,204.998 L803.831,204.998 Z M820.831,204.998 C818.06,204.998 818,207.998 818,207.998 L818,218.998 L824,218.998 L824,207.998 C824,207.998 823.998,204.998 820.831,204.998 L820.831,204.998 L820.831,204.998 Z M803.831,240.998 C801.06,240.998 801,243.998 801,243.998 L801,254.998 L807,254.998 L807,243.998 C807,243.998 806.998,240.998 803.831,240.998 L803.831,240.998 L803.831,240.998 Z M820.831,240.998 C818.06,240.998 818,243.998 818,243.998 L818,254.998 L824,254.998 L824,243.998 C824,243.998 823.998,240.998 820.831,240.998 L820.831,240.998 L820.831,240.998 Z M855,222.998 L861,222.998 L861,214.998 L855,214.998 L855,222.998 L855,222.998 Z M855,240.998 L861,240.998 L861,232.998 L855,232.998 L855,240.998 L855,240.998 Z M689.831,117 C687.06,117 687,120 687,120 L687,131 L693,131 L693,120 C693,120 692.998,117 689.831,117 L689.831,117 L689.831,117 Z M707.831,117 C705.06,117 705,120 705,120 L705,131 L711,131 L711,120 C711,120 710.998,117 707.831,117 L707.831,117 L707.831,117 Z M689.831,158 C687.06,158 687,161 687,161 L687,171.998 L693,171.998 L693,161 C693,161 692.998,158 689.831,158 L689.831,158 L689.831,158 Z M707.831,158 C705.06,158 705,161 705,161 L705,171.998 L711,171.998 L711,161 C711,161 710.998,158 707.831,158 L707.831,158 L707.831,158 Z M66.906,20 C66.906,16.687 64.219,14 60.906,14 C57.593,14 54.906,16.687 54.906,20 C54.906,23.313 57.593,26 60.906,26 C64.22,26 66.906,23.313 66.906,20 L66.906,20 L66.906,20 Z M52,85 L60,85 L60,75 L52,75 L52,85 L52,85 Z M62,85 L70,85 L70,75 L62,75 L62,85 L62,85 Z M52,97 L60,97 L60,87 L52,87 L52,97 L52,97 Z M62,97 L70,97 L70,87 L62,87 L62,97 L62,97 Z M52,156 L60,156 L60,146 L52,146 L52,156 L52,156 Z M62,156 L70,156 L70,146 L62,146 L62,156 L62,156 Z M52,167.998 L60,167.998 L60,158 L52,158 L52,167.998 L52,167.998 Z M62,167.998 L70,167.998 L70,158 L62,158 L62,167.998 L62,167.998 Z M105,0 L97,0 L97,11 L105,11 L105,0 L105,0 Z M115,0 L107,0 L107,11 L115,11 L115,0 L115,0 Z M105,13 L97,13 L97,24 L105,24 L105,13 L105,13 Z M115,13 L107,13 L107,24 L115,24 L115,13 L115,13 Z M14,0 L6,0 L6,11 L14,11 L14,0 L14,0 Z M24,0 L16,0 L16,11 L24,11 L24,0 L24,0 Z M14,13 L6,13 L6,24 L14,24 L14,13 L14,13 Z M24,13 L16,13 L16,24 L24,24 L24,13 L24,13 Z M99,62 L91,62 L91,73 L99,73 L99,62 L99,62 Z M112,62 L101,62 L101,73 L112,73 L112,62 L112,62 Z M122,62 L114,62 L114,73 L122,73 L122,62 L122,62 Z M99,75 L91,75 L91,86 L99,86 L99,75 L99,75 Z M101,86 L112,86 L112,75 L101,75 L101,86 L101,86 Z M122,75 L114,75 L114,86 L122,86 L122,75 L122,75 Z M99,88 L91,88 L91,99 L99,99 L99,88 L99,88 Z M112,88 L101,88 L101,99 L112,99 L112,88 L112,88 Z M114,99 L122,99 L122,88 L114,88 L114,99 L114,99 Z M0,73 L8,73 L8,62 L0,62 L0,73 L0,73 Z M21,62 L10,62 L10,73 L21,73 L21,62 L21,62 Z M31,62 L23,62 L23,73 L31,73 L31,62 L31,62 Z M0,86 L8,86 L8,75 L0,75 L0,86 L0,86 Z M10,86 L21,86 L21,75 L10,75 L10,86 L10,86 Z M31,75 L23,75 L23,86 L31,86 L31,75 L31,75 Z M0,99 L8,99 L8,88 L0,88 L0,99 L0,99 Z M21,88 L10,88 L10,99 L21,99 L21,88 L21,88 Z M23,99 L31,99 L31,88 L23,88 L23,99 L23,99 Z M89,166.998 L94,166.998 L94,159 L89,159 L89,166.998 L89,166.998 Z M96,166.998 L101,166.998 L101,159 L96,159 L96,166.998 L96,166.998 Z M89,157 L94,157 L94,149 L89,149 L89,157 L89,157 Z M96,157 L101,157 L101,149 L96,149 L96,157 L96,157 Z M96,138 L96,147 L101,147 C101,138.75 96,138 96,138 L96,138 L96,138 Z M89,147 L94,147 L94,138 C94,138 89,138.75 89,147 L89,147 L89,147 Z M112,166.998 L117,166.998 L117,159 L112,159 L112,166.998 L112,166.998 Z M119,166.998 L124,166.998 L124,159 L119,159 L119,166.998 L119,166.998 Z M112,157 L117,157 L117,149 L112,149 L112,157 L112,157 Z M119,157 L124,157 L124,149 L119,149 L119,157 L119,157 Z M119,138 L119,147 L124,147 C124,138.75 119,138 119,138 L119,138 L119,138 Z M112,147 L117,147 L117,138 C117,138 112,138.75 112,147 L112,147 L112,147 Z M21,166.998 L26,166.998 L26,159 L21,159 L21,166.998 L21,166.998 Z M28,166.998 L33,166.998 L33,159 L28,159 L28,166.998 L28,166.998 Z M21,157 L26,157 L26,149 L21,149 L21,157 L21,157 Z M28,157 L33,157 L33,149 L28,149 L28,157 L28,157 Z M28,138 L28,147 L33,147 C33,138.75 28,138 28,138 L28,138 L28,138 Z M21,147 L26,147 L26,138 C26,138 21,138.75 21,147 L21,147 L21,147 Z M112,227.998 L117,227.998 L117,219.998 L112,219.998 L112,227.998 L112,227.998 Z M119,227.998 L124,227.998 L124,219.998 L119,219.998 L119,227.998 L119,227.998 Z M112,217.998 L117,217.998 L117,209.998 L112,209.998 L112,217.998 L112,217.998 Z M119,217.998 L124,217.998 L124,209.998 L119,209.998 L119,217.998 L119,217.998 Z M119,198.998 L119,207.998 L124,207.998 C124,199.748 119,198.998 119,198.998 L119,198.998 L119,198.998 Z M112,207.998 L117,207.998 L117,198.998 C117,198.998 112,199.748 112,207.998 L112,207.998 L112,207.998 Z M112,278.998 L117,278.998 L117,270.998 L112,270.998 L112,278.998 L112,278.998 Z M119,278.998 L124,278.998 L124,270.998 L119,270.998 L119,278.998 L119,278.998 Z M112,268.998 L117,268.998 L117,260.998 L112,260.998 L112,268.998 L112,268.998 Z M119,268.998 L124,268.998 L124,260.998 L119,260.998 L119,268.998 L119,268.998 Z M119,249.998 L119,258.998 L124,258.998 C124,250.748 119,249.998 119,249.998 L119,249.998 L119,249.998 Z M112,258.998 L117,258.998 L117,249.998 C117,249.998 112,250.748 112,258.998 L112,258.998 L112,258.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(0.000000, 329.000000)" fill="#D5B3A1">
+                        <rect id="Rectangle-path" x="0" y="0" width="116" height="19.002"></rect>
+                    </g>
+                    <g id="Group" transform="translate(18.000000, 0.000000)" fill="#82A4C4">
+                        <path d="M0,184 L80,184 L41,104 L0,184 L0,184 Z M965,0 L963,0 L917,37 L917,43 L964,6 L1012,43 L1012,37 L965,0 L965,0 Z" id="Shape"></path>
+                    </g>
+                    <path d="M104.345,184 L11.655,184 L11.655,195 L104.344,195 C104.345,189.042 104.345,184 104.345,184 L104.345,184 L104.345,184 Z" id="Shape" fill="#B5C6D8"></path>
+                    <path d="M2,324.094 L114,324.094 L114,200 L2,200 L2,324.094 L2,324.094 Z M981.875,5 L935,42 L935,161 L983,161 L983,348 L1030,348 L1030,42 L981.875,5 L981.875,5 Z" id="Path" fill="#B5C6D8"></path>
+                    <g id="Group" transform="translate(18.000000, 28.000000)" fill="#71A3CC">
+                        <path d="M4.4408921e-15,213.998 L8,213.998 L8,199.998 C8,199.998 8.438,196 4,196 C-0.406,196 4.4408921e-15,199.998 4.4408921e-15,199.998 L4.4408921e-15,213.998 L4.4408921e-15,213.998 Z M28,196 C23.594,196 24,199.998 24,199.998 L24,213.998 L32,213.998 L32,199.998 C32,199.998 32.438,196 28,196 L28,196 L28,196 Z M52,196 C47.594,196 48,199.998 48,199.998 L48,213.998 L56,213.998 L56,199.998 C56,199.998 56.438,196 52,196 L52,196 L52,196 Z M76,196 C71.594,196 72,199.998 72,199.998 L72,213.998 L80,213.998 L80,199.998 C80,199.998 80.438,196 76,196 L76,196 L76,196 Z M7,227.898 C-0.523,227.898 3.55271368e-15,238.898 3.55271368e-15,238.898 L3.55271368e-15,279.898 L14,279.898 L14,238.898 C14,238.898 14.547,227.898 7,227.898 L7,227.898 L7,227.898 Z M40,227.898 C32.477,227.898 33,238.898 33,238.898 L33,279.898 L47,279.898 L47,238.898 C47,238.898 47.547,227.898 40,227.898 L40,227.898 L40,227.898 Z M73,227.998 C65.477,227.998 66,238.998 66,238.998 L66,279.998 L80,279.898 L80,238.898 C80,238.898 80.547,227.998 73,227.998 L73,227.998 L73,227.998 Z M942,110 L948,110 L948,99 L942,99 L942,110 L942,110 Z M950,110 L956,110 L956,99 L950,99 L950,110 L950,110 Z M942,97 L948,97 L948,86 L942,86 L942,97 L942,97 Z M950,97 L956,97 L956,86 L950,86 L950,97 L950,97 Z M950,73 L950,84 L956,84 C956,73.313 950,73 950,73 L950,73 L950,73 Z M942,84 L948,84 L948,73 C948,73 942,73.313 942,84 L942,84 L942,84 Z M975,110 L981,110 L981,99 L975,99 L975,110 L975,110 Z M983,110 L989,110 L989,99 L983,99 L983,110 L983,110 Z M975,97 L981,97 L981,86 L975,86 L975,97 L975,97 Z M983,97 L989,97 L989,86 L983,86 L983,97 L983,97 Z M983,73 L983,84 L989,84 C989,73.313 983,73 983,73 L983,73 L983,73 Z M975,84 L981,84 L981,73 C981,73 975,73.313 975,84 L975,84 L975,84 Z M975,178 L981,178 L981,167 L975,167 L975,178 L975,178 Z M983,178 L989,178 L989,167 L983,167 L983,178 L983,178 Z M975,165 L981,165 L981,154 L975,154 L975,165 L975,165 Z M983,165 L989,165 L989,154 L983,154 L983,165 L983,165 Z M983,141 L983,152 L989,152 C989,141.313 983,141 983,141 L983,141 L983,141 Z M975,152 L981,152 L981,141 C981,141 975,141.313 975,152 L975,152 L975,152 Z M975,247.998 L981,247.998 L981,236.998 L975,236.998 L975,247.998 L975,247.998 Z M983,247.998 L989,247.998 L989,236.998 L983,236.998 L983,247.998 L983,247.998 Z M975,234.998 L981,234.998 L981,223.998 L975,223.998 L975,234.998 L975,234.998 Z M983,234.998 L989,234.998 L989,223.998 L983,223.998 L983,234.998 L983,234.998 Z M983,210.998 L983,221.998 L989,221.998 C989,211.311 983,210.998 983,210.998 L983,210.998 L983,210.998 Z M975,221.998 L981,221.998 L981,210.998 C981,210.998 975,211.311 975,221.998 L975,221.998 L975,221.998 Z M975,318.998 L981,318.998 L981,307.998 L975,307.998 L975,318.998 L975,318.998 Z M983,318.998 L989,318.998 L989,307.998 L983,307.998 L983,318.998 L983,318.998 Z M975,305.998 L981,305.998 L981,294.998 L975,294.998 L975,305.998 L975,305.998 Z M983,305.998 L989,305.998 L989,294.998 L983,294.998 L983,305.998 L983,305.998 Z M983,281.998 L983,292.998 L989,292.998 C989,282.311 983,281.998 983,281.998 L983,281.998 L983,281.998 Z M975,292.998 L981,292.998 L981,281.998 C981,281.998 975,282.311 975,292.998 L975,292.998 L975,292.998 Z M931,30 L938,30 L938,21 L931,21 L931,30 L931,30 Z M931,41 L938,41 L938,32 L931,32 L931,41 L931,41 Z M991,21 L991,30 L998,30 L998,21 L991,21 L991,21 Z M991,41 L998,41 L998,32 L991,32 L991,41 L991,41 Z M982,30 L989,30 L989,21 L982,21 L982,30 L982,30 Z M982,41 L989,41 L989,32 L982,32 L982,41 L982,41 Z M947,21 L940,21 L940,30 L947,30 L947,21 L947,21 Z M947,32 L940,32 L940,41 L947,41 L947,32 L947,32 Z M949,30 L963,30 L963,21 L949,21 L949,30 L949,30 Z M966,30 L980,30 L980,21 L966,21 L966,30 L966,30 Z M949,41 L963,41 L963,32 L949,32 L949,41 L949,41 Z M980,32 L966,32 L966,41 L980,41 L980,32 L980,32 Z M974,19 L984,19 C984,19 983.187,12.859 979.306,7.545 C978.215,8.612 973.961,12.651 972.844,13.624 C973.549,14.995 974,16.752 974,19 L974,19 L974,19 Z M977.491,5.383 C974.835,2.635 971.133,0.442 966,0 L966,9 C967.447,9.188 969.649,9.835 971.378,11.591 C972.513,10.449 975.794,7.166 977.491,5.383 L977.491,5.383 L977.491,5.383 Z M956.021,14.058 C954.987,13.155 950.435,8.62 949.302,7.484 C946.191,11.742 945,16.677 945,19 L954.969,19 C954.969,18.602 954.965,16.344 956.021,14.058 L956.021,14.058 L956.021,14.058 Z M957.656,11.627 C958.84,10.389 960.545,9.382 963,9 C963,8.215 962.967,1.945 962.967,0.025 C957.827,0.277 954.012,2.401 951.25,5.188 C952.482,6.398 956.774,10.805 957.656,11.627 L957.656,11.627 L957.656,11.627 Z M957,19 L971.938,19 C971.938,13.031 967.5,11 965,11 C957.75,11 957,18.469 957,19 L957,19 L957,19 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(0.000000, 79.000000)" fill="#82A4C4">
+                        <path d="M0,249.998 L116,249.998 L116,244.998 L0,244.998 L0,249.998 L0,249.998 Z M114,116 L2,116 L2,121 L114,121 L114,116 L114,116 Z M935,0 L935,5 L1030,5 L1030,0 L935,0 L935,0 Z M935,76 L1030,76 L1030,71 L935,71 L935,76 L935,76 Z M983,147 L1030,147 L1030,142 L983,142 L983,147 L983,147 Z M983,217.998 L1030,217.998 L1030,212.998 L983,212.998 L983,217.998 L983,217.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(114.000000, 258.000000)" fill="#B6C9CF">
+                        <path d="M0,65.998 L2,65.998 L2,90 L82,90 L82,-0.002 L0,-0.002 L0,65.998 L0,65.998 Z M705,35.998 L705,90 L779,90 L779,35.998 L705,35.998 L705,35.998 Z" id="Shape"></path>
+                    </g>
+                    <g id="Group" transform="translate(114.000000, 253.000000)" fill="#E7EFF1">
+                        <path d="M0,6.998 L82,6.998 L82,-0.002 L0,-0.002 L0,6.998 L0,6.998 Z M684,8.998 L676,1.998 L673,1.998 L646,29.998 L646,34.998 L674,5.998 L675,5.998 L705,35.998 L705,40.998 L779,40.998 L779,8.998 L684,8.998 L684,8.998 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+            <g id="Kakaranet-Logo" transform="translate(436.000000, 18.000000)" sketch:type="MSShapeGroup">
+                <path d="M-0.039,1.22 C-0.039,1.22 -0.032,1.408 -0.02,1.754 C0.094,5.121 0.788,23.57 2.45,32.116 L8.734,31.986 L7.423,19.549 L15.539,30.939 L21.954,26.488 L12.006,16.669 L20.646,3.185 L13.839,1.221 L6.376,12.349 L7.03,2.007 L-0.039,1.22 L-0.039,1.22 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M35.439,1.613 L28.239,1.22 L20.908,30.677 L27.716,31.855 L29.943,22.298 L34.786,22.298 L37.799,31.463 L44.607,29.499 L35.439,1.613 L35.439,1.613 Z M30.465,16.93 L32.166,10.384 L33.998,16.406 L30.465,16.93 L30.465,16.93 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M123.022,2.398 L115.824,2.005 L108.491,31.462 L115.3,32.64 L117.527,23.083 L122.371,23.083 L125.382,32.247 L132.19,30.283 L123.022,2.398 L123.022,2.398 Z M118.048,17.716 L119.75,11.17 L121.582,17.192 L118.048,17.716 L118.048,17.716 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M44.537,1.809 C44.537,1.809 44.545,1.996 44.556,2.342 C44.671,5.709 45.365,24.158 47.026,32.705 L53.31,32.574 L52.001,20.137 L60.116,31.527 L66.532,27.076 L56.581,17.257 L65.223,3.773 L58.416,1.809 L50.952,12.937 L51.607,2.595 L44.537,1.809 L44.537,1.809 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M80.018,2.202 L72.817,1.809 L65.486,31.265 L72.295,32.444 L74.52,22.886 L79.364,22.886 L82.377,32.051 L89.185,30.087 L80.018,2.202 L80.018,2.202 Z M75.041,17.519 L76.744,10.973 L78.575,16.995 L75.041,17.519 L75.041,17.519 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M101.421,20.203 C105.61,20.334 118.57,-0.089 88.723,-0.089 L89.377,32.64 L95.793,32.378 L95.793,24.523 L103.255,33.426 L111.503,32.378 L101.421,20.203 L101.421,20.203 Z M96.186,15.489 L96.186,7.242 C96.186,7.242 100.898,7.504 100.898,10.515 C100.897,14.181 96.186,15.489 96.186,15.489 L96.186,15.489 L96.186,15.489 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M132.578,4.231 L132.842,31.854 L138.993,32.116 L138.863,17.846 L145.538,32.77 L152.217,32.378 L151.301,3.838 L144.492,4.362 L145.145,17.977 L139.386,4.755 L132.578,4.231 L132.578,4.231 Z" id="Shape" fill="#517ECE"></path>
+                <path d="M154.443,1.875 L153.658,32.509 L170.547,32.64 L171.331,24.393 L160.203,24.24 L160.203,20.334 L170.153,20.464 L170.283,13.918 L160.203,13.657 L160.203,9.075 L172.641,8.662 L172.246,1.2 L154.443,1.875 L154.443,1.875 Z" id="Shape" fill="#517ECE"></path>
+                <path d="M198.038,2.791 L197.384,9.468 L188.35,9.468 L188.35,32.901 L182.064,32.64 L181.672,10.253 L172.246,11.432 L172.116,4.492 L198.038,2.791 L198.038,2.791 Z" id="Shape" fill="#517ECE"></path>
+            </g>
+            <g id="Facebook-Login" transform="translate(921.000000, 16.000000)">
+                <path d="M130.399,-0.41 L85.075,-0.41 L9.835,-0.41 L4.197,-0.41 C1.988,-0.41 0.197,1.381 0.197,3.59 L0.197,31.923 C0.197,34.132 1.988,35.923 4.197,35.923 L10.195,35.923 L84.716,35.923 L130.4,35.923 C132.609,35.923 134.4,34.132 134.4,31.923 L134.4,3.59 C134.399,1.381 132.608,-0.41 130.399,-0.41 L130.399,-0.41 L130.399,-0.41 Z" id="Shape" fill="#3B5998" sketch:type="MSShapeGroup"></path>
+                <path d="M119.525,10.542 L123.24,10.542 L123.24,5.668 L119.136,5.668 C115.722,5.668 113.337,8.44 113.337,12.537 L113.337,15.571 L108.384,15.571 L108.384,20.52 L113.337,20.52 L113.337,35.977 L118.287,35.977 L118.287,20.521 L123.238,20.521 L123.238,15.572 L118.287,15.572 L118.287,11.587 C118.289,10.775 119.1,10.542 119.525,10.542" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+                <text id="Login-with" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <tspan x="13" y="24">Login with</tspan>
+                </text>
+            </g>
+            <g id="Online-Users" transform="translate(18.000000, 13.000000)">
+                <rect id="Online-Users-Pad" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="196.066" height="43" rx="5"></rect>
+                <g id="Online-Logo" transform="translate(5.000000, 6.000000)" sketch:type="MSShapeGroup">
+                    <path d="M-0.065,15.891 C-0.065,7.39 6.851,0.474 15.352,0.474 C23.853,0.474 30.769,7.39 30.769,15.891 C30.769,24.392 23.853,31.308 15.352,31.308 C6.852,31.308 -0.065,24.392 -0.065,15.891 Z" id="Shape" fill="#517ECE"></path>
+                    <path d="M23.89,14.8977927 C24.135,14.6127927 24.272,14.2607927 24.272,13.8257927 L24.272,13.2507927 C24.448,13.2537927 24.568,13.1357927 24.568,12.9897927 L24.568,12.4017927 C24.597,12.3997927 24.625,12.3967927 24.654,12.3947927 C26.186,9.84879271 23,7.91179271 21.701,9.99579271 C20.682,9.86379271 19.539,10.6517927 20.389,12.4267927 C20.442,12.5367927 20.497,12.6357927 20.554,12.7217927 L20.56,12.9907927 C20.56,13.1367927 20.68,13.2547927 20.827,13.2547927 C20.83,13.2547927 20.836,13.8257927 20.836,13.8257927 C20.836,14.2247927 20.971,14.5597927 21.19,14.8377927 L21.158,15.1027927 C19.997,15.1027927 19.014,15.7417927 18.502,16.6717927 C18.138,16.5727927 17.756,16.5157927 17.359,16.5157927 L17.26,16.5157927 L17.218,16.2207927 C17.571,15.8117927 17.765,15.3067927 17.765,14.6817927 L17.765,13.8587927 C18.019,13.8627927 18.19,13.6937927 18.19,13.4857927 L18.19,12.6407927 C18.233,12.6377927 18.271,12.6337927 18.313,12.6307927 C20.511,8.97679271 15.806,6.31579271 14.112,7.15579271 C14.013,7.20979271 14.049,7.28279271 14.113,7.28579271 C14.266,7.28879271 14.372,7.31679271 14.462,7.44979271 C14.488,7.50379271 14.667,8.01779271 13.803,8.23279271 C12.722,8.48279271 10.973,10.1307927 12.194,12.6777927 C12.27,12.8357927 12.35,12.9777927 12.43,13.1007927 C12.433,13.1007927 12.439,13.4857927 12.439,13.4857927 C12.439,13.6937927 12.609,13.8627927 12.821,13.8627927 L12.833,14.6837927 C12.833,15.2557927 13.025,15.7367927 13.343,16.1357927 L13.296,16.5167927 C13.039,16.5167927 12.809,16.5397927 12.585,16.5767927 C12.102,15.5647927 11.069,14.8587927 9.864,14.8587927 L9.765,14.6527927 C10.011,14.3677927 10.146,14.0167927 10.146,13.5807927 L10.146,13.0067927 C10.323,13.0097927 10.444,12.8927927 10.444,12.7467927 L10.444,12.1577927 C10.473,12.1557927 10.499,12.1537927 10.53,12.1507927 C11.364,10.7627927 10.551,9.64279271 10.149,8.26779271 C9.342,9.50879271 8.139,8.06879271 7.602,8.33479271 C7.572,8.35079271 7.148,9.41979271 6.074,9.02179271 C6.522,10.0417927 5.782,11.1747927 6.265,12.1837927 C6.318,12.2937927 6.373,12.3927927 6.43,12.4787927 L6.435,12.7487927 C6.435,12.8947927 6.554,13.0117927 6.702,13.0117927 L6.71,13.5837927 C6.71,13.9827927 6.845,14.3177927 7.065,14.5957927 L7.032,14.8607927 C5.35,14.8607927 4,16.1977927 4,17.8457927 C4,17.8457927 4.369,20.0787927 8.507,20.0747927 C8.687,20.0747927 8.851,20.0647927 9.016,20.0567927 C8.973,20.2997927 8.946,20.5467927 8.946,20.8027927 C8.946,20.8027927 9.475,24.0077927 15.413,24.0017927 C21.208,23.9947927 21.684,20.8027927 21.684,20.8027927 C21.684,20.6217927 21.668,20.4447927 21.646,20.2687927 C21.951,20.2987927 22.272,20.3207927 22.63,20.3197927 C26.668,20.3157927 27,18.0907927 27,18.0907927 C27.001,16.4407927 25.651,15.1037927 23.987,15.1037927 L23.89,14.8977927 Z" id="Path" fill="#FFFFFF"></path>
+                </g>
+                <text id="Users-Online-Number" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="bold">
+                    <tspan x="41" y="28">722</tspan>
+                </text>
+                <text id="Users-Online-Message" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <tspan x="81" y="27">users online</tspan>
+                </text>
+            </g>
+            <rect id="Back-5" fill="#D6E8EA" sketch:type="MSShapeGroup" x="0" y="453" width="1070" height="206.792"></rect>
+            <path d="M1071,660 L1,660 L1,600.976 L850.979,600.976 L1071,600.976 L1071,660 L1071,660 Z" id="Back-4" fill="#A8CACC" sketch:type="MSShapeGroup"></path>
+            <g id="Deck-Root" transform="translate(215.000000, 457.000000)" sketch:type="MSShapeGroup">
+                <path d="M640,68.0096 L279.226,68.0096 L0,68 L0,73.9916 L275.816,73.9916 L640,74 L640,68.0096 Z" id="Shape" fill="#BC8864"></path>
+                <g id="Deck">
+                    <rect id="Rectangle-path" fill="#AF7B58" x="0" y="3" width="640" height="65"></rect>
+                    <rect id="Rectangle-path" fill="#AF7B58" x="0" y="75" width="640" height="72"></rect>
+                    <path d="M640,4 L0,4 L2.614,0 L637.177,0 L640,4 L640,4 Z" id="Shape" fill="#BC8864"></path>
+                </g>
+            </g>
+            <g id="Table" transform="translate(218.000000, 310.000000)" sketch:type="MSShapeGroup">
+                <path d="M634.171,146.66 L-0.36,146.66 L115.967,0.23 L524.45,0.23 L634.171,146.66 L634.171,146.66 Z" id="Shape" fill="#48AF5E"></path>
+                <path d="M475.849,63.473 C484.752,87.426 414.057,108.909 317,108.909 C219.942,108.909 149.248,87.428 158.15,63.473 C166.156,41.932 236.962,26 317,26 C397.037,26 467.843,41.932 475.849,63.473 L475.849,63.473 L475.849,63.473 Z" id="Table-Oval" fill="#5CBF6F"></path>
+            </g>
+            <g id="Gabrielo-Deck" transform="translate(281.000000, 293.000000)" sketch:type="MSShapeGroup">
+                <path d="M78.207,-0.443 L72.577,-0.443 L23.768,67.33 L30.907,67.33 L78.207,-0.443 L78.207,-0.443 Z" id="Shape" fill="#BB8764"></path>
+                <path d="M30.907,121.374 L78.207,42.363 L78.207,-0.443 L30.907,67.121 L30.907,121.374 L30.907,121.374 Z" id="Shape" fill="#AF7B58"></path>
+                <path d="M17.554,81.92 L9.221,93.579 L12.589,93.579 L17.554,81.92 L17.554,81.92 Z" id="Shape" fill="#BB8764"></path>
+                <path d="M9.221,93.579 L12.589,93.579 L23.768,67.33 L30.907,67.33 L30.907,121.374 L-0.11,121.374 L9.221,93.579 L9.221,93.579 Z" id="Shape" fill="#C2906E"></path>
+            </g>
+            <g id="Alina-Deck" transform="translate(717.000000, 293.000000)" sketch:type="MSShapeGroup">
+                <path d="M-0.209,-0.443 L5.421,-0.443 L54.231,67.33 L47.091,67.33 L-0.209,-0.443 L-0.209,-0.443 Z" id="Shape" fill="#BB8764"></path>
+                <path d="M47.091,121.374 L-0.209,42.363 L-0.209,-0.443 L47.091,67.121 L47.091,121.374 L47.091,121.374 Z" id="Shape" fill="#AF7B58"></path>
+                <path d="M60.445,81.92 L68.778,93.579 L65.409,93.579 L60.445,81.92 L60.445,81.92 Z" id="Shape" fill="#BB8764"></path>
+                <path d="M68.778,93.579 L65.409,93.579 L54.231,67.33 L47.091,67.33 L47.091,121.374 L78.109,121.374 L68.778,93.579 L68.778,93.579 Z" id="Shape" fill="#C2906E"></path>
+            </g>
+            <g id="Mustafa-Deck" transform="translate(420.000000, 269.000000)" sketch:type="MSShapeGroup">
+                <path d="M234.674,19.765 L1.715,19.765 L0.218,23.232 L236.245,23.232 L234.674,19.765 L234.674,19.765 Z" id="Shape" fill="#AA6F48"></path>
+                <path d="M234.598,2.849 L1.993,2.849 L3.456,-0.404 L233.049,-0.404 L234.598,2.849 L234.598,2.849 Z" id="Shape" fill="#BC8864"></path>
+                <path d="M234.598,23.232 L234.598,2.849 L1.993,2.849 L1.993,23.232 L0.218,23.232 L0.218,46.726 L236.245,46.726 L236.245,23.232 L234.598,23.232 L234.598,23.232 Z" id="Shape" fill="#AF7B58"></path>
+            </g>
+            <g id="Center-Cards" transform="translate(517.000000, 350.000000)" sketch:type="MSShapeGroup">
+                <g id="Group" transform="translate(0.000000, 20.000000)">
+                    <path d="M33.973,35.172 C34.029,36.361 32.806,37.329 31.24,37.329 L2.957,37.329 C1.394,37.329 0.168,36.361 0.222,35.172 L1.55,5.65 C1.595,4.65 2.784,3.845 4.207,3.845 L29.936,3.845 C31.36,3.845 32.551,4.65 32.598,5.65 L33.973,35.172 L33.973,35.172 Z" id="Shape" fill="#AFD5D8"></path>
+                    <path d="M33.714,30.193 C33.768,31.349 32.561,32.293 31.017,32.293 L3.118,32.293 C1.575,32.293 0.366,31.352 0.419,30.193 L1.715,1.433 C1.759,0.457 2.934,-0.329 4.34,-0.329 L29.748,-0.329 C31.155,-0.329 32.332,0.457 32.377,1.434 L33.714,30.193 L33.714,30.193 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(0.000000, 13.000000)">
+                    <path d="M33.973,35.605 C34.029,36.793 32.806,37.763 31.24,37.763 L2.957,37.763 C1.394,37.763 0.168,36.793 0.222,35.605 L1.55,6.084 C1.595,5.084 2.784,4.277 4.207,4.277 L29.936,4.277 C31.36,4.277 32.551,5.084 32.598,6.084 L33.973,35.605 L33.973,35.605 Z" id="Shape" fill="#AFD5D8"></path>
+                    <path d="M33.714,30.627 C33.768,31.784 32.561,32.727 31.017,32.727 L3.118,32.727 C1.575,32.727 0.366,31.786 0.419,30.627 L1.715,1.867 C1.759,0.891 2.934,0.105 4.34,0.105 L29.748,0.105 C31.155,0.105 32.332,0.89 32.377,1.867 L33.714,30.627 L33.714,30.627 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(0.000000, 7.000000)">
+                    <path d="M33.973,35.04 C34.029,36.228 32.806,37.197 31.24,37.197 L2.957,37.197 C1.394,37.197 0.168,36.228 0.222,35.04 L1.55,5.52 C1.595,4.52 2.784,3.713 4.207,3.713 L29.936,3.713 C31.36,3.713 32.551,4.52 32.598,5.52 L33.973,35.04 L33.973,35.04 Z" id="Shape" fill="#AFD5D8"></path>
+                    <path d="M33.714,30.063 C33.768,31.219 32.561,32.163 31.017,32.163 L3.118,32.163 C1.575,32.163 0.366,31.222 0.419,30.063 L1.715,1.302 C1.759,0.326 2.934,-0.46 4.34,-0.46 L29.748,-0.46 C31.155,-0.46 32.332,0.326 32.377,1.302 L33.714,30.063 L33.714,30.063 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group">
+                    <path d="M33.973,35.475 C34.029,36.663 32.806,37.632 31.24,37.632 L2.957,37.632 C1.394,37.632 0.168,36.663 0.222,35.475 L1.55,5.954 C1.595,4.954 2.784,4.146 4.207,4.146 L29.936,4.146 C31.36,4.146 32.551,4.954 32.598,5.954 L33.973,35.475 L33.973,35.475 Z" id="Shape" fill="#AFD5D8"></path>
+                    <path d="M33.714,30.496 C33.768,31.652 32.561,32.596 31.017,32.596 L3.118,32.596 C1.575,32.596 0.366,31.655 0.419,30.496 L1.715,1.734 C1.759,0.758 2.934,-0.026 4.34,-0.026 L29.748,-0.026 C31.155,-0.026 32.332,0.758 32.377,1.734 L33.714,30.496 L33.714,30.496 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+            <g id="Gosterme" transform="translate(619.000000, 336.000000)">
+                <rect id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup" x="14.576" y="-0.3231875" width="39" height="58" rx="8"></rect>
+                <text id="4" sketch:type="MSTextLayer" font-family="Lucida Grande" font-size="24" font-weight="bold" sketch:alignment="middle" letter-spacing="-1" fill="#F8E81C">
+                    <tspan x="26.3339844" y="26.4873125">4</tspan>
+                </text>
+                <path d="M33.5,50 C37.0898509,50 40,47.0898509 40,43.5 C40,39.9101491 37.0898509,37 33.5,37 C29.9101491,37 27,39.9101491 27,43.5 C27,47.0898509 29.9101491,50 33.5,50 Z" id="Oval-23" fill="#FFC800" sketch:type="MSShapeGroup"></path>
+                <text sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" fill="#FFFFFF">
+                    <tspan x="0" y="74">Gosterme</tspan>
+                </text>
+            </g>
+            <g id="Stupid-Cards" transform="translate(442.000000, 300.000000)" sketch:type="MSShapeGroup">
+                <g id="Group">
+                    <path d="M16.1,17.802 C16.127,18.384 15.529,18.857 14.763,18.857 L0.931,18.857 C0.166,18.857 -0.433,18.383 -0.407,17.802 L0.242,3.364 C0.264,2.875 0.846,2.481 1.542,2.481 L14.124,2.481 C14.821,2.481 15.403,2.875 15.426,3.364 L16.1,17.802 L16.1,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M15.974,15.368 C16,15.934 15.41,16.395 14.655,16.395 L1.011,16.395 C0.256,16.395 -0.335,15.934 -0.31,15.368 L0.324,1.303 C0.345,0.826 0.92,0.442 1.607,0.442 L14.034,0.442 C14.722,0.442 15.297,0.826 15.319,1.303 L15.974,15.368 L15.974,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(21.000000, 10.000000)">
+                    <path d="M16.184,17.436 C16.211,18.018 15.613,18.491 14.847,18.491 L1.015,18.491 C0.25,18.491 -0.349,18.017 -0.323,17.436 L0.327,2.998 C0.349,2.509 0.931,2.115 1.627,2.115 L14.21,2.115 C14.907,2.115 15.489,2.509 15.512,2.998 L16.184,17.436 L16.184,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.057,15 C16.083,15.566 15.493,16.027 14.738,16.027 L1.094,16.027 C0.339,16.027 -0.252,15.567 -0.226,15 L0.408,0.935 C0.429,0.458 1.004,0.073 1.692,0.073 L14.119,0.073 C14.807,0.073 15.382,0.458 15.404,0.935 L16.057,15 L16.057,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(21.000000, 7.000000)">
+                    <path d="M16.184,17.225 C16.211,17.807 15.613,18.28 14.847,18.28 L1.015,18.28 C0.25,18.28 -0.349,17.807 -0.323,17.225 L0.327,2.787 C0.349,2.298 0.931,1.904 1.627,1.904 L14.21,1.904 C14.907,1.904 15.489,2.299 15.512,2.787 L16.184,17.225 L16.184,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.057,14.79 C16.083,15.356 15.493,15.817 14.738,15.817 L1.094,15.817 C0.339,15.817 -0.252,15.356 -0.226,14.79 L0.408,0.725 C0.429,0.248 1.004,-0.136 1.692,-0.136 L14.119,-0.136 C14.807,-0.136 15.382,0.248 15.404,0.725 L16.057,14.79 L16.057,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(21.000000, 4.000000)">
+                    <path d="M16.184,17.013 C16.211,17.595 15.613,18.068 14.847,18.068 L1.015,18.068 C0.25,18.068 -0.349,17.594 -0.323,17.013 L0.327,2.575 C0.349,2.086 0.931,1.692 1.627,1.692 L14.21,1.692 C14.907,1.692 15.489,2.086 15.512,2.575 L16.184,17.013 L16.184,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.057,14.579 C16.083,15.145 15.493,15.606 14.738,15.606 L1.094,15.606 C0.339,15.606 -0.252,15.145 -0.226,14.579 L0.408,0.514 C0.429,0.037 1.004,-0.347 1.692,-0.347 L14.119,-0.347 C14.807,-0.347 15.382,0.037 15.404,0.514 L16.057,14.579 L16.057,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(21.000000, 0.000000)">
+                    <path d="M16.184,17.802 C16.211,18.384 15.613,18.857 14.847,18.857 L1.015,18.857 C0.25,18.857 -0.349,18.383 -0.323,17.802 L0.327,3.364 C0.349,2.875 0.931,2.481 1.627,2.481 L14.21,2.481 C14.907,2.481 15.489,2.875 15.512,3.364 L16.184,17.802 L16.184,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.057,15.368 C16.083,15.934 15.493,16.395 14.738,16.395 L1.094,16.395 C0.339,16.395 -0.252,15.934 -0.226,15.368 L0.408,1.303 C0.429,0.826 1.004,0.442 1.692,0.442 L14.119,0.442 C14.807,0.442 15.382,0.826 15.404,1.303 L16.057,15.368 L16.057,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(42.000000, 10.000000)">
+                    <path d="M16.267,17.436 C16.294,18.018 15.696,18.491 14.93,18.491 L1.098,18.491 C0.332,18.491 -0.267,18.017 -0.24,17.436 L0.409,2.998 C0.431,2.509 1.013,2.115 1.709,2.115 L14.291,2.115 C14.988,2.115 15.57,2.509 15.593,2.998 L16.267,17.436 L16.267,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.141,15 C16.167,15.566 15.577,16.027 14.821,16.027 L1.177,16.027 C0.422,16.027 -0.169,15.567 -0.143,15 L0.491,0.935 C0.512,0.458 1.087,0.073 1.775,0.073 L14.201,0.073 C14.889,0.073 15.464,0.458 15.487,0.935 L16.141,15 L16.141,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(42.000000, 7.000000)">
+                    <path d="M16.267,17.225 C16.294,17.807 15.696,18.28 14.93,18.28 L1.098,18.28 C0.332,18.28 -0.267,17.807 -0.24,17.225 L0.409,2.787 C0.431,2.298 1.013,1.904 1.709,1.904 L14.291,1.904 C14.988,1.904 15.57,2.299 15.593,2.787 L16.267,17.225 L16.267,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.141,14.79 C16.167,15.356 15.577,15.817 14.821,15.817 L1.177,15.817 C0.422,15.817 -0.169,15.356 -0.143,14.79 L0.491,0.725 C0.512,0.248 1.087,-0.136 1.775,-0.136 L14.201,-0.136 C14.889,-0.136 15.464,0.248 15.487,0.725 L16.141,14.79 L16.141,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(42.000000, 4.000000)">
+                    <path d="M16.267,17.013 C16.294,17.595 15.696,18.068 14.93,18.068 L1.098,18.068 C0.332,18.068 -0.267,17.594 -0.24,17.013 L0.409,2.575 C0.431,2.086 1.013,1.692 1.709,1.692 L14.291,1.692 C14.988,1.692 15.57,2.086 15.593,2.575 L16.267,17.013 L16.267,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.141,14.579 C16.167,15.145 15.577,15.606 14.821,15.606 L1.177,15.606 C0.422,15.606 -0.169,15.145 -0.143,14.579 L0.491,0.514 C0.512,0.037 1.087,-0.347 1.775,-0.347 L14.201,-0.347 C14.889,-0.347 15.464,0.037 15.487,0.514 L16.141,14.579 L16.141,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(42.000000, 0.000000)">
+                    <path d="M16.267,17.802 C16.294,18.384 15.696,18.857 14.93,18.857 L1.098,18.857 C0.332,18.857 -0.267,18.383 -0.24,17.802 L0.409,3.364 C0.431,2.875 1.013,2.481 1.709,2.481 L14.291,2.481 C14.988,2.481 15.57,2.875 15.593,3.364 L16.267,17.802 L16.267,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.141,15.368 C16.167,15.934 15.577,16.395 14.821,16.395 L1.177,16.395 C0.422,16.395 -0.169,15.934 -0.143,15.368 L0.491,1.303 C0.512,0.826 1.087,0.442 1.775,0.442 L14.201,0.442 C14.889,0.442 15.464,0.826 15.487,1.303 L16.141,15.368 L16.141,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(168.000000, 10.000000)">
+                    <path d="M16.755,17.436 C16.782,18.018 16.184,18.491 15.418,18.491 L1.587,18.491 C0.821,18.491 0.223,18.017 0.248,17.436 L0.897,2.998 C0.919,2.509 1.501,2.115 2.198,2.115 L14.78,2.115 C15.476,2.115 16.059,2.509 16.082,2.998 L16.755,17.436 L16.755,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.629,15 C16.654,15.566 16.065,16.027 15.309,16.027 L1.665,16.027 C0.91,16.027 0.319,15.567 0.345,15 L0.979,0.935 C1,0.458 1.576,0.073 2.263,0.073 L14.689,0.073 C15.377,0.073 15.953,0.458 15.975,0.935 L16.629,15 L16.629,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(168.000000, 7.000000)">
+                    <path d="M16.755,17.225 C16.782,17.807 16.184,18.28 15.418,18.28 L1.587,18.28 C0.821,18.28 0.223,17.807 0.248,17.225 L0.897,2.787 C0.919,2.298 1.501,1.904 2.198,1.904 L14.78,1.904 C15.476,1.904 16.059,2.299 16.082,2.787 L16.755,17.225 L16.755,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.629,14.79 C16.654,15.356 16.065,15.817 15.309,15.817 L1.665,15.817 C0.91,15.817 0.319,15.356 0.345,14.79 L0.979,0.725 C1,0.248 1.576,-0.136 2.263,-0.136 L14.689,-0.136 C15.377,-0.136 15.953,0.248 15.975,0.725 L16.629,14.79 L16.629,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(168.000000, 4.000000)">
+                    <path d="M16.755,17.013 C16.782,17.595 16.184,18.068 15.418,18.068 L1.587,18.068 C0.821,18.068 0.223,17.594 0.248,17.013 L0.897,2.575 C0.919,2.086 1.501,1.692 2.198,1.692 L14.78,1.692 C15.476,1.692 16.059,2.086 16.082,2.575 L16.755,17.013 L16.755,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.629,14.579 C16.654,15.145 16.065,15.606 15.309,15.606 L1.665,15.606 C0.91,15.606 0.319,15.145 0.345,14.579 L0.979,0.514 C1,0.037 1.576,-0.347 2.263,-0.347 L14.689,-0.347 C15.377,-0.347 15.953,0.037 15.975,0.514 L16.629,14.579 L16.629,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(168.000000, 0.000000)">
+                    <path d="M16.755,17.802 C16.782,18.384 16.184,18.857 15.418,18.857 L1.587,18.857 C0.821,18.857 0.223,18.383 0.248,17.802 L0.897,3.364 C0.919,2.875 1.501,2.481 2.198,2.481 L14.78,2.481 C15.476,2.481 16.059,2.875 16.082,3.364 L16.755,17.802 L16.755,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.629,15.368 C16.654,15.934 16.065,16.395 15.309,16.395 L1.665,16.395 C0.91,16.395 0.319,15.934 0.345,15.368 L0.979,1.303 C1,0.826 1.576,0.442 2.263,0.442 L14.689,0.442 C15.377,0.442 15.953,0.826 15.975,1.303 L16.629,15.368 L16.629,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(63.000000, 10.000000)">
+                    <path d="M16.35,17.436 C16.377,18.018 15.779,18.491 15.013,18.491 L1.181,18.491 C0.416,18.491 -0.183,18.017 -0.157,17.436 L0.492,2.998 C0.514,2.509 1.096,2.115 1.792,2.115 L14.374,2.115 C15.071,2.115 15.653,2.509 15.676,2.998 L16.35,17.436 L16.35,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.224,15 C16.25,15.566 15.66,16.027 14.905,16.027 L1.261,16.027 C0.506,16.027 -0.085,15.567 -0.06,15 L0.574,0.935 C0.595,0.458 1.17,0.073 1.857,0.073 L14.284,0.073 C14.972,0.073 15.547,0.458 15.569,0.935 L16.224,15 L16.224,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(63.000000, 7.000000)">
+                    <path d="M16.35,17.225 C16.377,17.807 15.779,18.28 15.013,18.28 L1.181,18.28 C0.416,18.28 -0.183,17.807 -0.157,17.225 L0.492,2.787 C0.514,2.298 1.096,1.904 1.792,1.904 L14.374,1.904 C15.071,1.904 15.653,2.299 15.676,2.787 L16.35,17.225 L16.35,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.224,14.79 C16.25,15.356 15.66,15.817 14.905,15.817 L1.261,15.817 C0.506,15.817 -0.085,15.356 -0.06,14.79 L0.574,0.725 C0.595,0.248 1.17,-0.136 1.857,-0.136 L14.284,-0.136 C14.972,-0.136 15.547,0.248 15.569,0.725 L16.224,14.79 L16.224,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(63.000000, 4.000000)">
+                    <path d="M16.35,17.013 C16.377,17.595 15.779,18.068 15.013,18.068 L1.181,18.068 C0.416,18.068 -0.183,17.594 -0.157,17.013 L0.492,2.575 C0.514,2.086 1.096,1.692 1.792,1.692 L14.374,1.692 C15.071,1.692 15.653,2.086 15.676,2.575 L16.35,17.013 L16.35,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.224,14.579 C16.25,15.145 15.66,15.606 14.905,15.606 L1.261,15.606 C0.506,15.606 -0.085,15.145 -0.06,14.579 L0.574,0.514 C0.595,0.037 1.17,-0.347 1.857,-0.347 L14.284,-0.347 C14.972,-0.347 15.547,0.037 15.569,0.514 L16.224,14.579 L16.224,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(63.000000, 0.000000)">
+                    <path d="M16.35,17.802 C16.377,18.384 15.779,18.857 15.013,18.857 L1.181,18.857 C0.416,18.857 -0.183,18.383 -0.157,17.802 L0.492,3.364 C0.514,2.875 1.096,2.481 1.792,2.481 L14.374,2.481 C15.071,2.481 15.653,2.875 15.676,3.364 L16.35,17.802 L16.35,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.224,15.368 C16.25,15.934 15.66,16.395 14.905,16.395 L1.261,16.395 C0.506,16.395 -0.085,15.934 -0.06,15.368 L0.574,1.303 C0.595,0.826 1.17,0.442 1.857,0.442 L14.284,0.442 C14.972,0.442 15.547,0.826 15.569,1.303 L16.224,15.368 L16.224,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(84.000000, 10.000000)">
+                    <path d="M16.434,17.436 C16.461,18.018 15.863,18.491 15.097,18.491 L1.265,18.491 C0.5,18.491 -0.099,18.017 -0.073,17.436 L0.577,2.998 C0.599,2.509 1.181,2.115 1.877,2.115 L14.459,2.115 C15.155,2.115 15.738,2.509 15.761,2.998 L16.434,17.436 L16.434,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.307,15 C16.333,15.566 15.744,16.027 14.988,16.027 L1.344,16.027 C0.589,16.027 -0.002,15.567 0.024,15 L0.658,0.935 C0.679,0.458 1.254,0.073 1.942,0.073 L14.368,0.073 C15.056,0.073 15.632,0.458 15.653,0.935 L16.307,15 L16.307,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(84.000000, 7.000000)">
+                    <path d="M16.434,17.225 C16.461,17.807 15.863,18.28 15.097,18.28 L1.265,18.28 C0.5,18.28 -0.099,17.807 -0.073,17.225 L0.577,2.787 C0.599,2.298 1.181,1.904 1.877,1.904 L14.459,1.904 C15.155,1.904 15.738,2.299 15.761,2.787 L16.434,17.225 L16.434,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.307,14.79 C16.333,15.356 15.744,15.817 14.988,15.817 L1.344,15.817 C0.589,15.817 -0.002,15.356 0.024,14.79 L0.658,0.725 C0.679,0.248 1.254,-0.136 1.942,-0.136 L14.368,-0.136 C15.056,-0.136 15.632,0.248 15.653,0.725 L16.307,14.79 L16.307,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(84.000000, 4.000000)">
+                    <path d="M16.434,17.013 C16.461,17.595 15.863,18.068 15.097,18.068 L1.265,18.068 C0.5,18.068 -0.099,17.594 -0.073,17.013 L0.577,2.575 C0.599,2.086 1.181,1.692 1.877,1.692 L14.459,1.692 C15.155,1.692 15.738,2.086 15.761,2.575 L16.434,17.013 L16.434,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.307,14.579 C16.333,15.145 15.744,15.606 14.988,15.606 L1.344,15.606 C0.589,15.606 -0.002,15.145 0.024,14.579 L0.658,0.514 C0.679,0.037 1.254,-0.347 1.942,-0.347 L14.368,-0.347 C15.056,-0.347 15.632,0.037 15.653,0.514 L16.307,14.579 L16.307,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(84.000000, 0.000000)">
+                    <path d="M16.434,17.802 C16.461,18.384 15.863,18.857 15.097,18.857 L1.265,18.857 C0.5,18.857 -0.099,18.383 -0.073,17.802 L0.577,3.364 C0.599,2.875 1.181,2.481 1.877,2.481 L14.459,2.481 C15.155,2.481 15.738,2.875 15.761,3.364 L16.434,17.802 L16.434,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.307,15.368 C16.333,15.934 15.744,16.395 14.988,16.395 L1.344,16.395 C0.589,16.395 -0.002,15.934 0.024,15.368 L0.658,1.303 C0.679,0.826 1.254,0.442 1.942,0.442 L14.368,0.442 C15.056,0.442 15.632,0.826 15.653,1.303 L16.307,15.368 L16.307,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(105.000000, 10.000000)">
+                    <path d="M16.517,17.436 C16.544,18.018 15.947,18.491 15.18,18.491 L1.349,18.491 C0.583,18.491 -0.015,18.017 0.011,17.436 L0.66,2.998 C0.681,2.509 1.264,2.115 1.96,2.115 L14.542,2.115 C15.239,2.115 15.821,2.509 15.844,2.998 L16.517,17.436 L16.517,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.391,15 C16.417,15.566 15.827,16.027 15.072,16.027 L1.428,16.027 C0.673,16.027 0.081,15.567 0.107,15 L0.741,0.935 C0.762,0.458 1.338,0.073 2.025,0.073 L14.452,0.073 C15.14,0.073 15.715,0.458 15.737,0.935 L16.391,15 L16.391,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(105.000000, 7.000000)">
+                    <path d="M16.517,17.225 C16.544,17.807 15.947,18.28 15.18,18.28 L1.349,18.28 C0.583,18.28 -0.015,17.807 0.011,17.225 L0.66,2.787 C0.681,2.298 1.264,1.904 1.96,1.904 L14.542,1.904 C15.239,1.904 15.821,2.299 15.844,2.787 L16.517,17.225 L16.517,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.391,14.79 C16.417,15.356 15.827,15.817 15.072,15.817 L1.428,15.817 C0.673,15.817 0.081,15.356 0.107,14.79 L0.741,0.725 C0.762,0.248 1.338,-0.136 2.025,-0.136 L14.452,-0.136 C15.14,-0.136 15.715,0.248 15.737,0.725 L16.391,14.79 L16.391,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(105.000000, 4.000000)">
+                    <path d="M16.517,17.013 C16.544,17.595 15.947,18.068 15.18,18.068 L1.349,18.068 C0.583,18.068 -0.015,17.594 0.011,17.013 L0.66,2.575 C0.681,2.086 1.264,1.692 1.96,1.692 L14.542,1.692 C15.239,1.692 15.821,2.086 15.844,2.575 L16.517,17.013 L16.517,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.391,14.579 C16.417,15.145 15.827,15.606 15.072,15.606 L1.428,15.606 C0.673,15.606 0.081,15.145 0.107,14.579 L0.741,0.514 C0.762,0.037 1.338,-0.347 2.025,-0.347 L14.452,-0.347 C15.14,-0.347 15.715,0.037 15.737,0.514 L16.391,14.579 L16.391,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(105.000000, 0.000000)">
+                    <path d="M16.517,17.802 C16.544,18.384 15.947,18.857 15.18,18.857 L1.349,18.857 C0.583,18.857 -0.015,18.383 0.011,17.802 L0.66,3.364 C0.681,2.875 1.264,2.481 1.96,2.481 L14.542,2.481 C15.239,2.481 15.821,2.875 15.844,3.364 L16.517,17.802 L16.517,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.391,15.368 C16.417,15.934 15.827,16.395 15.072,16.395 L1.428,16.395 C0.673,16.395 0.081,15.934 0.107,15.368 L0.741,1.303 C0.762,0.826 1.338,0.442 2.025,0.442 L14.452,0.442 C15.14,0.442 15.715,0.826 15.737,1.303 L16.391,15.368 L16.391,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(126.000000, 10.000000)">
+                    <path d="M16.601,17.436 C16.627,18.018 16.03,18.491 15.264,18.491 L1.432,18.491 C0.666,18.491 0.068,18.017 0.094,17.436 L0.743,2.998 C0.765,2.509 1.347,2.115 2.043,2.115 L14.626,2.115 C15.322,2.115 15.904,2.509 15.928,2.998 L16.601,17.436 L16.601,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.474,15 C16.5,15.566 15.911,16.027 15.155,16.027 L1.511,16.027 C0.756,16.027 0.165,15.567 0.191,15 L0.825,0.935 C0.846,0.458 1.421,0.073 2.108,0.073 L14.535,0.073 C15.223,0.073 15.798,0.458 15.82,0.935 L16.474,15 L16.474,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(126.000000, 7.000000)">
+                    <path d="M16.601,17.225 C16.627,17.807 16.03,18.28 15.264,18.28 L1.432,18.28 C0.666,18.28 0.068,17.807 0.094,17.225 L0.743,2.787 C0.765,2.298 1.347,1.904 2.043,1.904 L14.626,1.904 C15.322,1.904 15.904,2.299 15.928,2.787 L16.601,17.225 L16.601,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.474,14.79 C16.5,15.356 15.911,15.817 15.155,15.817 L1.511,15.817 C0.756,15.817 0.165,15.356 0.191,14.79 L0.825,0.725 C0.846,0.248 1.421,-0.136 2.108,-0.136 L14.535,-0.136 C15.223,-0.136 15.798,0.248 15.82,0.725 L16.474,14.79 L16.474,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(126.000000, 4.000000)">
+                    <path d="M16.601,17.013 C16.627,17.595 16.03,18.068 15.264,18.068 L1.432,18.068 C0.666,18.068 0.068,17.594 0.094,17.013 L0.743,2.575 C0.765,2.086 1.347,1.692 2.043,1.692 L14.626,1.692 C15.322,1.692 15.904,2.086 15.928,2.575 L16.601,17.013 L16.601,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.474,14.579 C16.5,15.145 15.911,15.606 15.155,15.606 L1.511,15.606 C0.756,15.606 0.165,15.145 0.191,14.579 L0.825,0.514 C0.846,0.037 1.421,-0.347 2.108,-0.347 L14.535,-0.347 C15.223,-0.347 15.798,0.037 15.82,0.514 L16.474,14.579 L16.474,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(126.000000, 0.000000)">
+                    <path d="M16.601,17.802 C16.627,18.384 16.03,18.857 15.264,18.857 L1.432,18.857 C0.666,18.857 0.068,18.383 0.094,17.802 L0.743,3.364 C0.765,2.875 1.347,2.481 2.043,2.481 L14.626,2.481 C15.322,2.481 15.904,2.875 15.928,3.364 L16.601,17.802 L16.601,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.474,15.368 C16.5,15.934 15.911,16.395 15.155,16.395 L1.511,16.395 C0.756,16.395 0.165,15.934 0.191,15.368 L0.825,1.303 C0.846,0.826 1.421,0.442 2.108,0.442 L14.535,0.442 C15.223,0.442 15.798,0.826 15.82,1.303 L16.474,15.368 L16.474,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(147.000000, 10.000000)">
+                    <path d="M16.783,17.436 C16.81,18.018 16.212,18.491 15.446,18.491 L1.615,18.491 C0.849,18.491 0.25,18.017 0.276,17.436 L0.925,2.998 C0.947,2.509 1.529,2.115 2.226,2.115 L14.808,2.115 C15.504,2.115 16.087,2.509 16.11,2.998 L16.783,17.436 L16.783,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.657,15 C16.683,15.566 16.093,16.027 15.338,16.027 L1.693,16.027 C0.938,16.027 0.347,15.567 0.373,15 L1.007,0.935 C1.028,0.458 1.604,0.073 2.291,0.073 L14.717,0.073 C15.405,0.073 15.981,0.458 16.003,0.935 L16.657,15 L16.657,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(147.000000, 7.000000)">
+                    <path d="M16.783,17.225 C16.81,17.807 16.212,18.28 15.446,18.28 L1.615,18.28 C0.849,18.28 0.25,17.807 0.276,17.225 L0.925,2.787 C0.947,2.298 1.529,1.904 2.226,1.904 L14.808,1.904 C15.504,1.904 16.087,2.299 16.11,2.787 L16.783,17.225 L16.783,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.657,14.79 C16.683,15.356 16.093,15.817 15.338,15.817 L1.693,15.817 C0.938,15.817 0.347,15.356 0.373,14.79 L1.007,0.725 C1.028,0.248 1.604,-0.136 2.291,-0.136 L14.717,-0.136 C15.405,-0.136 15.981,0.248 16.003,0.725 L16.657,14.79 L16.657,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(147.000000, 4.000000)">
+                    <path d="M16.783,17.013 C16.81,17.595 16.212,18.068 15.446,18.068 L1.615,18.068 C0.849,18.068 0.25,17.594 0.276,17.013 L0.925,2.575 C0.947,2.086 1.529,1.692 2.226,1.692 L14.808,1.692 C15.504,1.692 16.087,2.086 16.11,2.575 L16.783,17.013 L16.783,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.657,14.579 C16.683,15.145 16.093,15.606 15.338,15.606 L1.693,15.606 C0.938,15.606 0.347,15.145 0.373,14.579 L1.007,0.514 C1.028,0.037 1.604,-0.347 2.291,-0.347 L14.717,-0.347 C15.405,-0.347 15.981,0.037 16.003,0.514 L16.657,14.579 L16.657,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(147.000000, 0.000000)">
+                    <path d="M16.783,17.802 C16.81,18.384 16.212,18.857 15.446,18.857 L1.615,18.857 C0.849,18.857 0.25,18.383 0.276,17.802 L0.925,3.364 C0.947,2.875 1.529,2.481 2.226,2.481 L14.808,2.481 C15.504,2.481 16.087,2.875 16.11,3.364 L16.783,17.802 L16.783,17.802 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M16.657,15.368 C16.683,15.934 16.093,16.395 15.338,16.395 L1.693,16.395 C0.938,16.395 0.347,15.934 0.373,15.368 L1.007,1.303 C1.028,0.826 1.604,0.442 2.291,0.442 L14.717,0.442 C15.405,0.442 15.981,0.826 16.003,1.303 L16.657,15.368 L16.657,15.368 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(0.000000, 10.000000)">
+                    <path d="M16.1,17.436 C16.127,18.018 15.529,18.491 14.763,18.491 L0.931,18.491 C0.166,18.491 -0.433,18.017 -0.407,17.436 L0.242,2.998 C0.264,2.509 0.846,2.115 1.542,2.115 L14.124,2.115 C14.821,2.115 15.403,2.509 15.426,2.998 L16.1,17.436 L16.1,17.436 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M15.974,15 C16,15.566 15.41,16.027 14.655,16.027 L1.011,16.027 C0.256,16.027 -0.335,15.567 -0.31,15 L0.324,0.935 C0.345,0.458 0.92,0.073 1.607,0.073 L14.034,0.073 C14.722,0.073 15.297,0.458 15.319,0.935 L15.974,15 L15.974,15 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(0.000000, 7.000000)">
+                    <path d="M16.1,17.225 C16.127,17.807 15.529,18.28 14.763,18.28 L0.931,18.28 C0.166,18.28 -0.433,17.807 -0.407,17.225 L0.242,2.787 C0.264,2.298 0.846,1.904 1.542,1.904 L14.124,1.904 C14.821,1.904 15.403,2.299 15.426,2.787 L16.1,17.225 L16.1,17.225 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M15.974,14.79 C16,15.356 15.41,15.817 14.655,15.817 L1.011,15.817 C0.256,15.817 -0.335,15.356 -0.31,14.79 L0.324,0.725 C0.345,0.248 0.92,-0.136 1.607,-0.136 L14.034,-0.136 C14.722,-0.136 15.297,0.248 15.319,0.725 L15.974,14.79 L15.974,14.79 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+                <g id="Group" transform="translate(0.000000, 4.000000)">
+                    <path d="M16.1,17.013 C16.127,17.595 15.529,18.068 14.763,18.068 L0.931,18.068 C0.166,18.068 -0.433,17.594 -0.407,17.013 L0.242,2.575 C0.264,2.086 0.846,1.692 1.542,1.692 L14.124,1.692 C14.821,1.692 15.403,2.086 15.426,2.575 L16.1,17.013 L16.1,17.013 Z" id="Shape" fill="#8DCED7"></path>
+                    <path d="M15.974,14.579 C16,15.145 15.41,15.606 14.655,15.606 L1.011,15.606 C0.256,15.606 -0.335,15.145 -0.31,14.579 L0.324,0.514 C0.345,0.037 0.92,-0.347 1.607,-0.347 L14.034,-0.347 C14.722,-0.347 15.297,0.037 15.319,0.514 L15.974,14.579 L15.974,14.579 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+            <g id="Player-Center" transform="translate(444.000000, 90.000000)">
+                <g id="Name" transform="translate(42.000000, 0.000000)">
+                    <rect id="Player-Center-Pad" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="145" height="38" rx="8"></rect>
+                    <text id="Player-Center-Name" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" sketch:alignment="middle">
+                        <tspan x="29.732" y="26.7344">Mustafa</tspan>
+                    </text>
+                </g>
+                <g id="Timer">
+                    <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+                    <rect id="progress" fill="#5CBF6F" sketch:type="MSShapeGroup" x="2" y="2" width="34" height="33" rx="3"></rect>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20.7143027" font-weight="normal">
+                        <tspan x="9" y="27">12</tspan>
+                    </text>
+                </g>
+            </g>
+            <g id="Player-Right" transform="translate(632.000000, 150.000000)">
+                <g id="Name" transform="translate(42.000000, 0.000000)">
+                    <rect id="Player-Right-Pad" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="145" height="38" rx="8"></rect>
+                    <text id="Player-Right-Name" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" sketch:alignment="middle">
+                        <tspan x="43.436" y="28.7344">Alina</tspan>
+                    </text>
+                </g>
+                <g id="Timer">
+                    <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+                    <rect id="progress" fill="#5CBF6F" sketch:type="MSShapeGroup" x="2" y="2" width="34" height="33" rx="3"></rect>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20.7143027" font-weight="normal">
+                        <tspan x="9" y="27">12</tspan>
+                    </text>
+                </g>
+            </g>
+            <g id="Player-Left" transform="translate(228.000000, 150.000000)">
+                <g id="Name" transform="translate(42.000000, 0.000000)">
+                    <rect id="Player-Left-Pad" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="145" height="38" rx="8"></rect>
+                    <text id="Player-Left-Name" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" sketch:alignment="middle">
+                        <tspan x="24.924" y="27.1759033">Gabrielo</tspan>
+                    </text>
+                </g>
+                <g id="Timer">
+                    <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+                    <rect id="progress" fill="#5CBF6F" sketch:type="MSShapeGroup" x="2" y="2" width="34" height="33" rx="3"></rect>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20.7143027" font-weight="normal">
+                        <tspan x="9" y="27">12</tspan>
+                    </text>
+                </g>
+            </g>
+            <g id="Player-Me" transform="translate(397.000000, 413.000000)">
+                <g id="Name" transform="translate(43.000000, 0.000000)">
+                    <rect id="Player-Me-Pad" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="89" height="39" rx="8"></rect>
+                    <text id="Player-Me-Name" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal">
+                        <tspan x="26.9998" y="28.7344">Me</tspan>
+                    </text>
+                </g>
+                <g id="Timer">
+                    <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+                    <rect id="progress" fill="#5CBF6F" sketch:type="MSShapeGroup" x="2" y="2" width="34" height="33" rx="3"></rect>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20.7143027" font-weight="normal">
+                        <tspan x="9" y="27">12</tspan>
+                    </text>
+                </g>
+            </g>
+            <g id="Left-Menu" transform="translate(0.000000, 545.000000)" sketch:type="MSShapeGroup">
+                <path d="M115.342,115 L0,115 L0,-0.355 C63.601,-0.123 115.11,51.393 115.342,115" id="Shape" fill="#48AF5E"></path>
+                <g id="Group" transform="translate(25.000000, 50.000000)" fill="#FFFFFF">
+                    <path d="M39.941,5.161 L2.774,5.161 C1.229,5.161 -0.022,3.91 -0.022,2.365 C-0.022,0.821 1.229,-0.431 2.774,-0.431 L39.941,-0.431 C41.485,-0.431 42.738,0.821 42.738,2.365 C42.738,3.91 41.485,5.161 39.941,5.161" id="Shape"></path>
+                    <path d="M39.941,16.907 L2.774,16.907 C1.229,16.907 -0.022,15.655 -0.022,14.11 C-0.022,12.566 1.229,11.315 2.774,11.315 L39.941,11.315 C41.485,11.315 42.738,12.566 42.738,14.11 C42.738,15.655 41.485,16.907 39.941,16.907" id="Shape"></path>
+                    <path d="M39.941,28.652 L2.774,28.652 C1.229,28.652 -0.022,27.4 -0.022,25.855 C-0.022,24.31 1.229,23.059 2.774,23.059 L39.941,23.059 C41.485,23.059 42.738,24.31 42.738,25.855 C42.738,27.4 41.485,28.652 39.941,28.652" id="Shape"></path>
+                </g>
+            </g>
+            <g id="Gabrielo-Discard" transform="translate(232.000000, 379.000000)">
+                <g id="Player-Left-Hand">
+                    <g id="roll-up" transform="translate(4.000000, 0.000000)" sketch:type="MSShapeGroup">
+                        <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                        <path d="M19.24225,12.07775 C18.82425,12.07775 18.40525,11.91775 18.08525,11.59875 L15.43925,8.95175 L12.79325,11.59875 C12.15325,12.23475 11.11925,12.23475 10.47925,11.59875 C9.84025,10.95675 9.84025,9.92375 10.47925,9.28375 L14.28425,5.47775 C14.92625,4.84075 15.96025,4.84075 16.59725,5.47775 L20.40425,9.28375 C21.04425,9.92575 21.04425,10.95875 20.40425,11.59875 C20.08125,11.91775 19.66025,12.07775 19.24225,12.07775 L19.24225,12.07775 L19.24225,12.07775 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                    <g id="history" transform="translate(2.000000, 1.000000)">
+                        <g id="container" transform="translate(0.000000, 36.000000)" sketch:type="MSShapeGroup">
+                            <g id="roll-down">
+                                <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                                <path d="M12.053,5.132 C12.471,5.132 12.891,5.292 13.211,5.611 L15.857,8.258 L18.503,5.611 C19.142,4.975 20.177,4.975 20.817,5.611 C21.456,6.253 21.456,7.286 20.817,7.926 L17.012,11.732 C16.369,12.369 15.336,12.369 14.698,11.732 L10.891,7.926 C10.252,7.284 10.252,6.251 10.891,5.611 C11.215,5.292 11.635,5.132 12.053,5.132 L12.053,5.132 L12.053,5.132 Z" id="Shape" fill="#FFFFFF"></path>
+                            </g>
+                        </g>
+                        <g id="cards"></g>
+                    </g>
+                    <g id="top-card" transform="translate(0.000000, 14.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
+                        <rect id="Shape" x="0" y="0" width="40" height="60" rx="8"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="You-Discard" transform="translate(799.000000, 379.000000)">
+                <g id="Player-Me-Hand">
+                    <g id="roll-up" transform="translate(4.000000, 0.000000)" sketch:type="MSShapeGroup">
+                        <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                        <path d="M19.24225,12.07775 C18.82425,12.07775 18.40525,11.91775 18.08525,11.59875 L15.43925,8.95175 L12.79325,11.59875 C12.15325,12.23475 11.11925,12.23475 10.47925,11.59875 C9.84025,10.95675 9.84025,9.92375 10.47925,9.28375 L14.28425,5.47775 C14.92625,4.84075 15.96025,4.84075 16.59725,5.47775 L20.40425,9.28375 C21.04425,9.92575 21.04425,10.95875 20.40425,11.59875 C20.08125,11.91775 19.66025,12.07775 19.24225,12.07775 L19.24225,12.07775 L19.24225,12.07775 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                    <g id="history" transform="translate(2.000000, 1.000000)">
+                        <g id="container" transform="translate(0.000000, 36.000000)" sketch:type="MSShapeGroup">
+                            <g id="roll-down">
+                                <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                                <path d="M12.053,5.132 C12.471,5.132 12.891,5.292 13.211,5.611 L15.857,8.258 L18.503,5.611 C19.142,4.975 20.177,4.975 20.817,5.611 C21.456,6.253 21.456,7.286 20.817,7.926 L17.012,11.732 C16.369,12.369 15.336,12.369 14.698,11.732 L10.891,7.926 C10.252,7.284 10.252,6.251 10.891,5.611 C11.215,5.292 11.635,5.132 12.053,5.132 L12.053,5.132 L12.053,5.132 Z" id="Shape" fill="#FFFFFF"></path>
+                            </g>
+                        </g>
+                        <g id="cards"></g>
+                    </g>
+                    <g id="top-card" transform="translate(0.000000, 14.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
+                        <rect id="Shape" x="0" y="0" width="40" height="60" rx="8"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="Alina-Discard" transform="translate(666.000000, 247.000000)">
+                <g id="Player-Right-Hand">
+                    <g id="roll-up" transform="translate(4.000000, 0.000000)" sketch:type="MSShapeGroup">
+                        <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                        <path d="M19.24225,12.07775 C18.82425,12.07775 18.40525,11.91775 18.08525,11.59875 L15.43925,8.95175 L12.79325,11.59875 C12.15325,12.23475 11.11925,12.23475 10.47925,11.59875 C9.84025,10.95675 9.84025,9.92375 10.47925,9.28375 L14.28425,5.47775 C14.92625,4.84075 15.96025,4.84075 16.59725,5.47775 L20.40425,9.28375 C21.04425,9.92575 21.04425,10.95875 20.40425,11.59875 C20.08125,11.91775 19.66025,12.07775 19.24225,12.07775 L19.24225,12.07775 L19.24225,12.07775 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                    <g id="history" transform="translate(2.000000, 1.000000)">
+                        <g id="container" transform="translate(0.000000, 36.000000)" sketch:type="MSShapeGroup">
+                            <g id="roll-down">
+                                <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                                <path d="M12.053,5.132 C12.471,5.132 12.891,5.292 13.211,5.611 L15.857,8.258 L18.503,5.611 C19.142,4.975 20.177,4.975 20.817,5.611 C21.456,6.253 21.456,7.286 20.817,7.926 L17.012,11.732 C16.369,12.369 15.336,12.369 14.698,11.732 L10.891,7.926 C10.252,7.284 10.252,6.251 10.891,5.611 C11.215,5.292 11.635,5.132 12.053,5.132 L12.053,5.132 L12.053,5.132 Z" id="Shape" fill="#FFFFFF"></path>
+                            </g>
+                        </g>
+                        <g id="cards"></g>
+                    </g>
+                    <g id="top-card" transform="translate(0.000000, 14.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
+                        <rect id="Shape" x="0" y="0" width="40" height="60" rx="8"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="Mustafa-Discard" transform="translate(372.000000, 247.000000)">
+                <g id="Player-Center-Hand">
+                    <g id="roll-up" transform="translate(4.000000, 0.000000)" sketch:type="MSShapeGroup">
+                        <path d="M4.399,15.107 L27.399,15.107 C29.016,15.107 30.519,15.589 31.778,16.416 C31.784,16.244 31.803,16.076 31.803,15.902 C31.803,7.12 24.683,0 15.903,0 C7.12,0 1.13686838e-13,7.12 1.13686838e-13,15.902 C1.13686838e-13,16.075 0.021,16.243 0.024,16.414 C1.283,15.59 2.785,15.107 4.399,15.107 L4.399,15.107 L4.399,15.107 Z" id="Shape" fill="#B5C6D8"></path>
+                        <path d="M19.24225,12.07775 C18.82425,12.07775 18.40525,11.91775 18.08525,11.59875 L15.43925,8.95175 L12.79325,11.59875 C12.15325,12.23475 11.11925,12.23475 10.47925,11.59875 C9.84025,10.95675 9.84025,9.92375 10.47925,9.28375 L14.28425,5.47775 C14.92625,4.84075 15.96025,4.84075 16.59725,5.47775 L20.40425,9.28375 C21.04425,9.92575 21.04425,10.95875 20.40425,11.59875 C20.08125,11.91775 19.66025,12.07775 19.24225,12.07775 L19.24225,12.07775 L19.24225,12.07775 Z" id="Shape" fill="#FFFFFF"></path>
+                    </g>
+                    <g id="history" transform="translate(2.000000, 1.000000)">
+                        <g id="container" transform="translate(1.000000, 19.000000)" sketch:type="MSShapeGroup">
+                            <g id="roll-down">
+                                <path d="M4.399,16.995375 L27.399,16.995375 C29.016,16.995375 30.519,17.537625 31.778,18.468 C31.784,18.2745 31.803,18.0855 31.803,17.88975 C31.803,8.01 24.683,0 15.903,0 C7.12,0 1.13686838e-13,8.01 1.13686838e-13,17.88975 C1.13686838e-13,18.084375 0.021,18.273375 0.024,18.46575 C1.283,17.53875 2.785,16.995375 4.399,16.995375 L4.399,16.995375 L4.399,16.995375 Z" id="Shape" fill="#B5C6D8"></path>
+                                <path d="M12.053,5.7735 C12.471,5.7735 12.891,5.9535 13.211,6.312375 L15.857,9.29025 L18.503,6.312375 C19.142,5.596875 20.177,5.596875 20.817,6.312375 C21.456,7.034625 21.456,8.19675 20.817,8.91675 L17.012,13.1985 C16.369,13.915125 15.336,13.915125 14.698,13.1985 L10.891,8.91675 C10.252,8.1945 10.252,7.032375 10.891,6.312375 C11.215,5.9535 11.635,5.7735 12.053,5.7735 L12.053,5.7735 L12.053,5.7735 Z" id="Shape" fill="#FFFFFF"></path>
+                            </g>
+                        </g>
+                        <g id="cards"></g>
+                    </g>
+                    <g id="top-card" transform="translate(0.000000, 14.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
+                        <rect id="Shape" x="0" y="0" width="40" height="60" rx="8"></rect>
+                    </g>
+                </g>
+            </g>
+            <rect id="Left-Bar" opacity="0.64" fill="#FFFFFF" sketch:type="MSShapeGroup" x="2" y="90.6810161" width="213" height="455.318984" rx="5"></rect>
+            <g id="Have-8-Tashes" transform="translate(665.000000, 612.000000)">
+                <rect id="Rectangle" fill="#48AF5E" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="35" rx="5"></rect>
+                <text id="8" fill="#FFFFFF" sketch:type="MSTextLayer" transform="translate(19.000000, 16.000000) scale(-1, 1) translate(-19.000000, -16.000000) " font-family="Exo 2" font-size="17" font-weight="normal" sketch:alignment="middle">
+                    <tspan x="13.8405" y="23">8</tspan>
+                </text>
+            </g>
+            <rect id="Right-Bar" opacity="0.762360075" fill="#FFFFFF" sketch:type="MSShapeGroup" x="856" y="91" width="214" height="446" rx="5"></rect>
+            <g id="Okey" transform="translate(712.000000, 612.000000)">
+                <rect id="Rectangle" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="84" height="35" rx="5"></rect>
+                <text fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <tspan x="24.1611328" y="21.5">Okey</tspan>
+                </text>
+            </g>
+            <g id="Settings" transform="translate(482.000000, 613.000000)" sketch:type="MSShapeGroup">
+                <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="37" height="35" rx="5"></rect>
+                <path d="M27.789,14.801 L24.976,14.281 C24.703,14.23 24.607,14.002 24.761,13.77 L26.376,11.377 C26.529,11.148 26.496,10.797 26.3,10.602 L24.753,9.053 C24.556,8.857 24.207,8.824 23.978,8.98 L21.582,10.592 C21.353,10.746 21.123,10.652 21.074,10.379 L20.554,7.566 C20.503,7.293 20.236,7.068 19.958,7.068 L17.767,7.068 C17.49,7.068 17.222,7.293 17.171,7.566 L16.652,10.379 C16.601,10.65 16.374,10.746 16.142,10.592 L13.751,8.98 C13.521,8.824 13.173,8.857 12.974,9.053 L11.427,10.602 C11.23,10.797 11.197,11.148 11.351,11.377 L12.966,13.77 C13.119,14 13.025,14.23 12.753,14.281 L9.939,14.801 C9.666,14.85 9.443,15.117 9.443,15.395 L9.443,17.586 C9.443,17.863 9.666,18.131 9.939,18.182 L12.753,18.701 C13.025,18.752 13.121,18.98 12.966,19.211 L11.351,21.604 C11.197,21.834 11.23,22.184 11.427,22.379 L12.974,23.928 C13.173,24.125 13.521,24.158 13.751,24.002 L16.144,22.389 C16.373,22.234 16.603,22.33 16.654,22.604 L17.173,25.418 C17.224,25.689 17.49,25.914 17.769,25.914 L19.96,25.914 C20.236,25.914 20.505,25.689 20.556,25.418 L21.076,22.602 C21.125,22.331 21.353,22.234 21.584,22.389 L23.98,24.002 C24.209,24.158 24.558,24.125 24.755,23.928 L26.3,22.38 C26.496,22.183 26.529,21.833 26.376,21.606 L24.761,19.21 C24.605,18.981 24.701,18.751 24.976,18.7 L27.789,18.181 C28.062,18.13 28.285,17.864 28.285,17.585 L28.285,15.394 C28.285,15.117 28.063,14.85 27.789,14.801 M18.862,19.902 C16.983,19.902 15.458,18.377 15.458,16.498 C15.458,14.619 16.983,13.094 18.862,13.094 C20.743,13.094 22.268,14.619 22.268,16.498 C22.268,18.377 20.742,19.902 18.862,19.902" id="Shape" fill="#517ECE"></path>
+            </g>
+            <g id="Pause" transform="translate(438.000000, 613.000000)" sketch:type="MSShapeGroup">
+                <rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="37" height="35" rx="5"></rect>
+                <path d="M16.281,10.115 L13.473,10.115 C13.131,10.115 12.852,10.391 12.852,10.736 L12.852,24.244 C12.852,24.586 13.131,24.865 13.473,24.865 L16.282,24.865 C16.627,24.865 16.903,24.586 16.903,24.244 L16.903,10.736 C16.903,10.393 16.625,10.115 16.281,10.115" id="Shape" fill="#517ECE"></path>
+                <path d="M23.975,10.115 L21.166,10.115 C20.823,10.115 20.547,10.391 20.547,10.736 L20.547,24.244 C20.547,24.586 20.823,24.865 21.166,24.865 L23.975,24.865 C24.319,24.865 24.596,24.586 24.596,24.244 L24.596,10.736 C24.596,10.393 24.319,10.115 23.975,10.115" id="Shape" fill="#517ECE"></path>
+            </g>
+            <g id="Point-Table" transform="translate(308.000000, 613.000000)">
+                <rect id="Rectangle" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="123" height="35" rx="5"></rect>
+                <text fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <tspan x="21.5935059" y="24">Point Table</tspan>
+                </text>
+            </g>
+            <g id="Create" transform="translate(864.000000, 526.000000)" sketch:type="MSShapeGroup">
+                <path d="M82.71,45.24 C82.71,65.344 66.409,81.642 46.306,81.642 C26.2,81.643 9.903,65.345 9.903,45.24 C9.903,25.135 26.201,8.837 46.306,8.837 C66.41,8.837 82.71,25.135 82.71,45.24" id="Shape" fill="#517ECE"></path>
+                <path d="M61.009,41.115 L50.431,41.115 L50.431,30.537 C50.431,29.84 49.866,29.274 49.167,29.274 L43.444,29.274 C42.747,29.274 42.18,29.838 42.18,30.537 L42.18,41.115 L31.605,41.115 C30.908,41.115 30.341,41.681 30.341,42.381 L30.341,48.101 C30.341,48.8 30.906,49.366 31.605,49.366 L42.181,49.366 L42.181,59.94 C42.181,60.638 42.746,61.205 43.445,61.205 L49.168,61.205 C49.865,61.205 50.432,60.64 50.432,59.94 L50.432,49.365 L61.01,49.365 C61.707,49.365 62.273,48.801 62.273,48.1 L62.273,42.38 C62.272,41.683 61.707,41.115 61.009,41.115 L61.009,41.115 L61.009,41.115 Z" id="Shape" fill="#FFFFFF"></path>
+                <path d="M127,49 C127,49 63.5,-18.923 0,5.171" id="CreateShow"></path>
+                <path d="M13,5.803 C13,5.803 93.231,-20.748 129,51" id="CreateHide"></path>
+            </g>
+            <g id="Play" transform="translate(946.000000, 461.000000)" sketch:type="MSShapeGroup">
+                <path d="M84.888,36.573 C84.888,56.677 68.588,72.974 48.484,72.974 C28.38,72.974 12.08,56.678 12.08,36.573 C12.08,16.468 28.379,0.169 48.483,0.169 C68.587,0.169 84.888,16.468 84.888,36.573" id="PlayButton" fill="#517ECE"></path>
+                <path d="M43.722,22.389 C43.104,21.94 42.284,21.874 41.608,22.222 C40.928,22.569 40.501,23.268 40.501,24.034 L40.501,48.546 C40.501,49.31 40.93,50.008 41.608,50.356 C41.898,50.503 42.214,50.579 42.53,50.579 C42.95,50.579 43.37,50.445 43.722,50.189 L60.597,37.932 C61.125,37.55 61.435,36.939 61.435,36.289 C61.435,35.638 61.122,35.026 60.597,34.645 L43.722,22.389 L43.722,22.389 Z" id="PlayIcon" fill="#FFFFFF"></path>
+                <path d="M48,116 C48,116 10.037,108.47 1.99,66.371 C-6.057,24.272 12.896,2 12.896,2" id="PlayShow"></path>
+                <path d="M12,0 C12,0 1.137,32.774 12,69.197 C22.863,105.621 46,114 46,114" id="PlayHide"></path>
+            </g>
+            <g id="Promos" transform="translate(122.000000, 538.000000)" sketch:type="MSShapeGroup">
+                <path d="M-0.326,36.666 C-0.326,56.8261614 16.0163778,73.166 36.1730052,73.166 C56.332617,73.166 72.674,56.8251665 72.674,36.666 C72.674,16.5058386 56.3316222,0.166 36.1730052,0.166 C16.0163778,0.165005124 -0.326,16.5058386 -0.326,36.666" id="Shape-path" fill="#517ECE"></path>
+                <path d="M34.485,23.063 C34.162,22.741 33.707,22.59 33.254,22.667 C32.804,22.741 32.416,23.027 32.213,23.437 L21.849,44.393 L19.918,46.324 L17.18,48.139 C16.826,48.372 16.595,48.756 16.552,49.178 C16.51,49.6 16.661,50.019 16.961,50.323 L21.393,54.756 C21.663,55.021 22.023,55.169 22.395,55.169 C22.443,55.169 22.491,55.168 22.537,55.164 C22.961,55.119 23.342,54.892 23.578,54.538 L25.421,51.757 L27.173,50.006 C27.223,50.081 27.28,50.152 27.347,50.221 L31.909,54.78 C32.174,55.045 32.526,55.192 32.902,55.192 C33.278,55.192 33.631,55.046 33.894,54.782 L34.551,54.126 C35.098,53.577 35.096,52.687 34.549,52.141 L30.632,48.225 L48.273,39.499 C48.682,39.296 48.968,38.91 49.044,38.459 C49.118,38.009 48.97,37.55 48.648,37.229 L34.485,23.063 L34.485,23.063 Z M22.355,52.577 L19.17,49.392 L21.766,47.929 L23.818,49.982 L22.355,52.577 L22.355,52.577 Z" id="Shape" fill="#FFFFFF"></path>
+                <path d="M56.599,30.076 C55.858,25.888 54.067,22.361 51.405,19.7 C48.748,17.039 45.22,15.248 41.033,14.507 C40.538,14.419 39.902,14.812 39.613,15.373 C39.319,15.935 39.479,16.462 39.971,16.548 L39.965,16.552 C43.896,17.245 47.19,18.928 49.683,21.42 C52.179,23.917 53.863,27.212 54.553,31.14 C54.639,31.63 55.167,31.792 55.737,31.496 C55.89,31.413 56.031,31.308 56.151,31.188 C56.473,30.866 56.659,30.434 56.599,30.076" id="Shape" fill="#FFFFFF"></path>
+                <path d="M46.602,24.481 C45.034,22.912 43.084,21.719 40.82,21.002 C40.362,20.858 39.715,21.19 39.375,21.741 C39.03,22.287 39.124,22.854 39.581,22.999 C41.649,23.658 43.442,24.752 44.889,26.197 C46.341,27.65 47.437,29.464 48.109,31.551 C48.255,32.005 48.823,32.097 49.376,31.751 C49.487,31.68 49.594,31.598 49.686,31.506 C50.042,31.148 50.228,30.663 50.111,30.298 C49.373,28.035 48.181,26.063 46.602,24.481" id="Shape" fill="#FFFFFF"></path>
+            </g>
+            <g id="Tournaments" transform="translate(44.000000, 465.000000)" sketch:type="MSShapeGroup">
+                <circle id="Shape_246_" fill="#517ECE" cx="37" cy="37" r="37"></circle>
+                <path d="M44.349,51.316 C44.197,50.768 43.701,50.39 43.132,50.39 L40.451,50.39 L40.451,45.83 C39.769,45.944 39.075,46.007 38.365,46.007 C37.653,46.007 36.958,45.944 36.277,45.83 L36.277,50.391 L33.597,50.391 C33.029,50.391 32.533,50.769 32.38,51.317 L31.428,54.739 C31.324,55.12 31.401,55.527 31.639,55.841 C31.879,56.155 32.251,56.342 32.646,56.342 L44.084,56.342 L44.095,56.342 C44.792,56.342 45.358,55.777 45.358,55.077 C45.358,54.903 45.323,54.737 45.261,54.587 L44.349,51.316 L44.349,51.316 Z" id="Shape_247_" fill="#FFFFFF"></path>
+                <path d="M51.205,24.213 C50.854,24.119 50.499,24.074 50.146,24.074 C49.982,24.074 49.82,24.086 49.658,24.102 L49.658,20.732 C49.658,20.075 49.127,19.542 48.47,19.542 L28.259,19.542 C27.601,19.542 27.07,20.075 27.07,20.732 L27.07,24.102 C26.907,24.085 26.745,24.074 26.582,24.074 C26.228,24.074 25.874,24.119 25.524,24.213 C22.752,24.952 21.273,28.446 22.222,32.019 C23.054,35.142 25.466,37.29 27.912,37.29 C28.036,37.29 28.161,37.278 28.285,37.267 C28.375,37.463 28.472,37.656 28.571,37.844 C28.591,37.878 28.609,37.914 28.628,37.948 C28.775,38.22 28.933,38.488 29.1,38.745 C29.12,38.771 29.138,38.803 29.158,38.831 C29.333,39.096 29.514,39.352 29.707,39.602 C29.712,39.61 29.717,39.617 29.724,39.623 C30.127,40.143 30.572,40.624 31.05,41.065 C31.059,41.072 31.067,41.082 31.074,41.088 C31.31,41.304 31.554,41.509 31.806,41.705 C31.817,41.714 31.829,41.721 31.84,41.73 C32.879,42.529 34.048,43.14 35.304,43.525 C35.308,43.527 35.312,43.528 35.317,43.529 C35.632,43.624 35.952,43.706 36.276,43.772 L36.277,43.772 C36.615,43.839 36.956,43.893 37.299,43.927 C37.308,43.929 37.316,43.929 37.323,43.929 C37.666,43.964 38.013,43.985 38.364,43.985 C38.715,43.985 39.059,43.964 39.402,43.929 C39.411,43.929 39.42,43.929 39.428,43.927 C39.773,43.893 40.112,43.839 40.448,43.772 L40.45,43.772 L40.453,43.772 C40.777,43.706 41.097,43.625 41.41,43.53 C41.415,43.529 41.42,43.527 41.425,43.526 C42.682,43.14 43.85,42.529 44.888,41.731 C44.9,41.721 44.911,41.712 44.923,41.705 C45.176,41.51 45.421,41.304 45.656,41.088 C45.663,41.08 45.672,41.072 45.678,41.066 C46.157,40.626 46.603,40.141 47.007,39.622 C47.013,39.616 47.017,39.61 47.021,39.603 C47.213,39.355 47.396,39.095 47.573,38.832 C47.59,38.804 47.609,38.774 47.629,38.746 C47.796,38.489 47.954,38.223 48.102,37.949 C48.121,37.917 48.138,37.883 48.157,37.846 C48.259,37.658 48.353,37.465 48.445,37.268 C48.569,37.281 48.694,37.291 48.818,37.291 C51.263,37.291 53.675,35.143 54.506,32.02 C55.456,28.446 53.977,24.952 51.205,24.213 M24.178,31.498 C23.527,29.05 24.382,26.608 26.045,26.166 C26.22,26.12 26.4,26.096 26.583,26.096 C26.745,26.096 26.907,26.117 27.069,26.153 L27.069,31.765 C27.069,32.107 27.086,32.447 27.111,32.783 C27.115,32.828 27.117,32.874 27.121,32.92 C27.148,33.237 27.188,33.552 27.237,33.863 C27.248,33.92 27.257,33.972 27.266,34.028 C27.32,34.338 27.383,34.64 27.459,34.942 C27.469,34.988 27.481,35.034 27.494,35.081 C27.508,35.134 27.52,35.185 27.535,35.236 C26.104,35.001 24.704,33.477 24.178,31.498 M52.552,31.498 C52.024,33.477 50.626,35.001 49.193,35.234 C49.208,35.182 49.221,35.13 49.234,35.079 C49.248,35.032 49.259,34.987 49.271,34.94 C49.346,34.638 49.411,34.336 49.463,34.026 C49.473,33.97 49.482,33.918 49.49,33.861 C49.54,33.548 49.581,33.235 49.608,32.918 C49.612,32.872 49.615,32.827 49.618,32.784 C49.643,32.446 49.66,32.105 49.66,31.763 L49.66,26.151 C49.822,26.117 49.986,26.094 50.148,26.094 C50.33,26.094 50.511,26.118 50.684,26.164 C52.348,26.608 53.203,29.05 52.552,31.498" id="Shape_248_" fill="#FFFFFF"></path>
+            </g>
+            <g id="Right-Menu" transform="translate(956.000000, 546.000000)" sketch:type="MSShapeGroup">
+                <path d="M114,-0.235 L114,114 L-0.238,114 C-0.01,51.009 51.008,-0.008 114,-0.235" id="Shape_251_" fill="#48AF5E"></path>
+                <path d="M81.215,48.569 L59.96,48.569 C57.488,48.569 55.485,50.572 55.485,53.043 L55.485,85.483 C55.485,87.954 57.488,89.957 59.96,89.957 L81.215,89.957 C83.686,89.957 85.689,87.954 85.689,85.483 L85.689,53.043 C85.688,50.572 83.686,48.569 81.215,48.569 L81.215,48.569 L81.215,48.569 Z M70.588,75.609 C67.08,75.609 64.241,72.766 64.241,69.262 C64.241,65.755 67.08,62.915 70.588,62.915 C74.092,62.915 76.935,65.755 76.935,69.262 C76.935,72.768 74.092,75.609 70.588,75.609 L70.588,75.609 L70.588,75.609 Z" id="Shape_252_" fill="#FFFFFF"></path>
+            </g>
+            <text id="Quota" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="bold">
+                <tspan x="135.5" y="637.318984">Quota: 722 </tspan>
+            </text>
+            <text id="Kakush" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="bold">
+                <tspan x="814" y="638">Kakush: 722 </tspan>
+            </text>
+        </g>
+        <path d="M680.82681,16 L661.143994,16 C658.854843,16 657,17.8548426 657,20.1430683 L657,50.1835548 C657,52.4717805 658.854843,54.3266231 661.143994,54.3266231 L680.82681,54.3266231 C683.115036,54.3266231 684.969878,52.4717805 684.969878,50.1835548 L684.969878,20.1430683 C684.968952,17.8548426 683.115036,16 680.82681,16 L680.82681,16 L680.82681,16 Z M670.985865,41.0399123 C667.737344,41.0399123 665.108338,38.4072025 665.108338,35.1623855 C665.108338,31.9147904 667.737344,29.2848588 670.985865,29.2848588 C674.230682,29.2848588 676.863392,31.9147904 676.863392,35.1623855 C676.863392,38.4090546 674.230682,41.0399123 670.985865,41.0399123 L670.985865,41.0399123 L670.985865,41.0399123 Z" id="Okey-Tash-Logo-2" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+        <path d="M717.82681,16 L698.143994,16 C695.854843,16 694,17.8548426 694,20.1430683 L694,50.1835548 C694,52.4717805 695.854843,54.3266231 698.143994,54.3266231 L717.82681,54.3266231 C720.115036,54.3266231 721.969878,52.4717805 721.969878,50.1835548 L721.969878,20.1430683 C721.968952,17.8548426 720.115036,16 717.82681,16 L717.82681,16 L717.82681,16 Z M707.985865,41.0399123 C704.737344,41.0399123 702.108338,38.4072025 702.108338,35.1623855 C702.108338,31.9147904 704.737344,29.2848588 707.985865,29.2848588 C711.230682,29.2848588 713.863392,31.9147904 713.863392,35.1623855 C713.863392,38.4090546 711.230682,41.0399123 707.985865,41.0399123 L707.985865,41.0399123 L707.985865,41.0399123 Z" id="Okey-Tash-Logo-3" fill="#F6A623" sketch:type="MSShapeGroup"></path>
+        <path d="M754.82681,16 L735.143994,16 C732.854843,16 731,17.8548426 731,20.1430683 L731,50.1835548 C731,52.4717805 732.854843,54.3266231 735.143994,54.3266231 L754.82681,54.3266231 C757.115036,54.3266231 758.969878,52.4717805 758.969878,50.1835548 L758.969878,20.1430683 C758.968952,17.8548426 757.115036,16 754.82681,16 L754.82681,16 L754.82681,16 Z M744.985865,41.0399123 C741.737344,41.0399123 739.108338,38.4072025 739.108338,35.1623855 C739.108338,31.9147904 741.737344,29.2848588 744.985865,29.2848588 C748.230682,29.2848588 750.863392,31.9147904 750.863392,35.1623855 C750.863392,38.4090546 748.230682,41.0399123 744.985865,41.0399123 L744.985865,41.0399123 L744.985865,41.0399123 Z" id="Okey-Tash-Logo-4" fill="#517ECE" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>

+ 35 - 0
apps/web/priv/static/dart/SVG.txt

@@ -0,0 +1,35 @@
+
+    HOW TO PATCH SVG
+    ================
+
+    1. Clipping Regions for Sidebars
+    --------------------------------
+
+    <defs>
+    <clipPath id="myClip1"><rect id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>
+    <clipPath id="myClip2"><rect id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>
+    <clipPath id="myClip3"><rect id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>
+    </defs>
+
+    2. foreignObject TextEditors for Chat
+    -------------------------------------
+
+    <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
+        <div xmlns:data="Chat" id="edit"
+          style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
+        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
+    </foreignObject>
+
+    <foreignObject x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
+        <div xmlns:data="Chat+xxx" id="onlineChatEdit"
+          style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
+        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
+    </foreignObject>
+
+    3. Chat Containers
+    ------------------
+
+    <g id="Chat"         y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)"/>
+    <g id="Online-List"  y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)"/>
+    <g id="Online-Chat"  y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)"/>
+

+ 6 - 0
apps/web/priv/static/dart/Timer.svg

@@ -0,0 +1,6 @@
+                <g id="timer" transform="translate(355, 413)" type="MSLayerGroup">
+                    <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup" />
+                    <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
+                    </rect>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27">12</text>
+                </g>

+ 20 - 20
apps/web/priv/static/dart/index.html → apps/web/priv/static/dart/dart.htm

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Created with Sketch" />
     <title>Kakaranet</title>
-<link href='http://fonts.googleapis.com/css?family=Exo+2:600' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Exo+2:600' rel='stylesheet' type='text/css'>
     <link href="style/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
@@ -82,7 +82,7 @@
                 <g id="Facebook-Login" transform="translate(921, 16)">
                     <path d="M130.399,-0.41 L85.075,-0.41 L9.835,-0.41 L4.197,-0.41 C1.988,-0.41 0.197,1.381 0.197,3.59 L0.197,31.923 C0.197,34.132 1.988,35.923 4.197,35.923 L10.195,35.923 L84.716,35.923 L130.4,35.923 C132.609,35.923 134.4,34.132 134.4,31.923 L134.4,3.59 C134.399,1.381 132.608,-0.41 130.399,-0.41 L130.399,-0.41 L130.399,-0.41 Z" id="Shape" fill="#3B5998" sketch:type="MSShapeGroup" />
                     <path d="M119.525,10.542 L123.24,10.542 L123.24,5.668 L119.136,5.668 C115.722,5.668 113.337,8.44 113.337,12.537 L113.337,15.571 L108.384,15.571 L108.384,20.52 L113.337,20.52 L113.337,35.977 L118.287,35.977 L118.287,20.521 L123.238,20.521 L123.238,15.572 L118.287,15.572 L118.287,11.587 C118.289,10.775 119.1,10.542 119.525,10.542" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup" />
-                    <text id="Login-with" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <text id="Login-with" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="17" font-weight="normal">
                         <tspan x="13" y="23">Login with</tspan>
                     </text>
                 </g>
@@ -93,10 +93,10 @@
                         <path d="M23.89,14.8977927 C24.135,14.6127927 24.272,14.2607927 24.272,13.8257927 L24.272,13.2507927 C24.448,13.2537927 24.568,13.1357927 24.568,12.9897927 L24.568,12.4017927 C24.597,12.3997927 24.625,12.3967927 24.654,12.3947927 C26.186,9.84879271 23,7.91179271 21.701,9.99579271 C20.682,9.86379271 19.539,10.6517927 20.389,12.4267927 C20.442,12.5367927 20.497,12.6357927 20.554,12.7217927 L20.56,12.9907927 C20.56,13.1367927 20.68,13.2547927 20.827,13.2547927 C20.83,13.2547927 20.836,13.8257927 20.836,13.8257927 C20.836,14.2247927 20.971,14.5597927 21.19,14.8377927 L21.158,15.1027927 C19.997,15.1027927 19.014,15.7417927 18.502,16.6717927 C18.138,16.5727927 17.756,16.5157927 17.359,16.5157927 L17.26,16.5157927 L17.218,16.2207927 C17.571,15.8117927 17.765,15.3067927 17.765,14.6817927 L17.765,13.8587927 C18.019,13.8627927 18.19,13.6937927 18.19,13.4857927 L18.19,12.6407927 C18.233,12.6377927 18.271,12.6337927 18.313,12.6307927 C20.511,8.97679271 15.806,6.31579271 14.112,7.15579271 C14.013,7.20979271 14.049,7.28279271 14.113,7.28579271 C14.266,7.28879271 14.372,7.31679271 14.462,7.44979271 C14.488,7.50379271 14.667,8.01779271 13.803,8.23279271 C12.722,8.48279271 10.973,10.1307927 12.194,12.6777927 C12.27,12.8357927 12.35,12.9777927 12.43,13.1007927 C12.433,13.1007927 12.439,13.4857927 12.439,13.4857927 C12.439,13.6937927 12.609,13.8627927 12.821,13.8627927 L12.833,14.6837927 C12.833,15.2557927 13.025,15.7367927 13.343,16.1357927 L13.296,16.5167927 C13.039,16.5167927 12.809,16.5397927 12.585,16.5767927 C12.102,15.5647927 11.069,14.8587927 9.864,14.8587927 L9.765,14.6527927 C10.011,14.3677927 10.146,14.0167927 10.146,13.5807927 L10.146,13.0067927 C10.323,13.0097927 10.444,12.8927927 10.444,12.7467927 L10.444,12.1577927 C10.473,12.1557927 10.499,12.1537927 10.53,12.1507927 C11.364,10.7627927 10.551,9.64279271 10.149,8.26779271 C9.342,9.50879271 8.139,8.06879271 7.602,8.33479271 C7.572,8.35079271 7.148,9.41979271 6.074,9.02179271 C6.522,10.0417927 5.782,11.1747927 6.265,12.1837927 C6.318,12.2937927 6.373,12.3927927 6.43,12.4787927 L6.435,12.7487927 C6.435,12.8947927 6.554,13.0117927 6.702,13.0117927 L6.71,13.5837927 C6.71,13.9827927 6.845,14.3177927 7.065,14.5957927 L7.032,14.8607927 C5.35,14.8607927 4,16.1977927 4,17.8457927 C4,17.8457927 4.369,20.0787927 8.507,20.0747927 C8.687,20.0747927 8.851,20.0647927 9.016,20.0567927 C8.973,20.2997927 8.946,20.5467927 8.946,20.8027927 C8.946,20.8027927 9.475,24.0077927 15.413,24.0017927 C21.208,23.9947927 21.684,20.8027927 21.684,20.8027927 C21.684,20.6217927 21.668,20.4447927 21.646,20.2687927 C21.951,20.2987927 22.272,20.3207927 22.63,20.3197927 C26.668,20.3157927 27,18.0907927 27,18.0907927 C27.001,16.4407927 25.651,15.1037927 23.987,15.1037927 L23.89,14.8977927 Z" id="Path" fill="#FFFFFF" />
                     </g>
                 </g>
-                <text id="722" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="normal">
+                <text id="722" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo2" font-size="20" font-weight="normal">
                     <tspan x="59" y="40">722</tspan>
                 </text>
-                <text id="users-online" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                <text id="users-online" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo2" font-size="17" font-weight="normal">
                     <tspan x="99" y="39">users online</tspan>
                 </text>
                 <rect id="Back-5" fill="#D6E8EA" sketch:type="MSShapeGroup" x="0" y="453" width="1070" height="206.792" />
@@ -107,11 +107,11 @@
                         <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup" />
                         <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
                         </rect>
-                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
+                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
                     </g>
                     <g id="name" transform="translate(256, 151)">
                         <rect fill="#FFFFFF" x="0" y="0" width="130" height="38" rx="8"></rect>
-                        <text fill="#48AF5E" type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" y="27" x="20">Gabrielo</text>
+                        <text fill="#48AF5E" type="MSTextLayer" font-family="Exo2" font-size="24" font-weight="normal" y="27" x="20">Gabrielo</text>
                     </g>
                 </g>
                 <g id="player-center" style="display:none;">
@@ -119,11 +119,11 @@
                         <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup" />
                         <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
                         </rect>
-                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
+                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
                     </g>
                     <g id="name" transform="translate(486, 90)">
                         <rect fill="#517ECE" x="0" y="0" width="240" height="38" rx="8"></rect>
-                        <text fill="#FFFFFF" type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" y="27" x="20">Mustafa</text>
+                        <text fill="#FFFFFF" type="MSTextLayer" font-family="Exo2" font-size="24" font-weight="normal" y="27" x="20">Mustafa</text>
                     </g>
                 </g>
                 <g id="player-right" style="display:none;">
@@ -131,11 +131,11 @@
                         <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup" />
                         <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
                         </rect>
-                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
+                        <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
                     </g>
                     <g id="name" transform="translate(670, 161)">
                         <rect fill="#FFFFFF" x="0" y="0" width="100" height="38" rx="8"></rect>
-                        <text fill="#48AF5E" type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" y="27" x="20">Alina</text>
+                        <text fill="#48AF5E" type="MSTextLayer" font-family="Exo2" font-size="24" font-weight="normal" y="27" x="20">Alina</text>
                     </g>
                 </g>
 
@@ -166,11 +166,11 @@
                     <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup"/>
                     <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
                     </rect>
-                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
                 </g>
                 <g id="name" transform="translate(670, 161)">
                     <rect fill="#FFFFFF" x="0" y="0" width="100" height="38" rx="8"></rect>
-                    <text fill="#48AF5E" type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" y="27" x="20">Alina</text>
+                    <text fill="#48AF5E" type="MSTextLayer" font-family="Exo2" font-size="24" font-weight="normal" y="27" x="20">Alina</text>
                 </g>
             </g>
            
@@ -310,7 +310,7 @@
                     </g>
                 </g>
                 <g id="gosterge" transform="translate(619, 336)">
-                    <text sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" fill="#FFFFFF">
+                    <text sketch:type="MSTextLayer" font-family="Exo2" font-size="18" font-weight="normal" fill="#FFFFFF">
                         <tspan x="0" y="73">Gosterge</tspan>
                     </text>
                 </g>
@@ -502,14 +502,14 @@
 
                 <g id="Have-8-Tashes" transform="translate(665, 612)">
                     <rect id="Rectangle" fill="#48AF5E" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="35" rx="5" />
-                    <text id="8" fill="#FFFFFF" sketch:type="MSTextLayer" transform="translate(19, 16) scale(-1, 1) translate(-19, -16) " font-family="Exo 2" font-size="17" font-weight="normal" sketch:alignment="middle">
+                    <text id="8" fill="#FFFFFF" sketch:type="MSTextLayer" transform="translate(19, 16) scale(-1, 1) translate(-19, -16) " font-family="Exo2" font-size="17" font-weight="normal" sketch:alignment="middle">
                         <tspan x="13.6252441" y="22">8</tspan>
                     </text>
                 </g>
                 <rect id="Right-Bar" opacity="0.64" fill="#FFFFFF" sketch:type="MSShapeGroup" x="856" y="91" width="199" height="446" rx="5" />
                 <g id="Okey" transform="translate(712, 612)">
                     <rect id="Rectangle" fill="#517ECE" sketch:type="MSShapeGroup" x="0" y="0" width="84" height="35" rx="5" />
-                    <text fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <text fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="17" font-weight="normal">
                         <tspan x="24.1611328" y="20.5">Okey</tspan>
                     </text>
                 </g>
@@ -525,7 +525,7 @@
                 </g>
                 <g id="Point-Table" transform="translate(308, 613)">
                     <rect id="Rectangle" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="123" height="35" rx="5" />
-                    <text fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                    <text fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo2" font-size="17" font-weight="normal">
                         <tspan x="21.5935059" y="23">Point Table</tspan>
                     </text>
                 </g>
@@ -557,11 +557,11 @@
                     <path d="M5.558,38 C2.492,38 0,35.504 0,32.436 L0,5.564 C0,2.496 2.492,0 5.558,0 L32.439,0 C35.505,0 38,2.496 38,5.564 L38,32.436 C38,35.504 35.505,38 32.439,38 L5.558,38 L5.558,38 Z" id="Timer-Pad" fill="#517ECE" sketch:type="MSShapeGroup" />
                     <rect id="progress" x="2" y="2" rx="3" width="34" height="33" fill="#5CBF6F">
                     </rect>
-                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
+                    <text id="value" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo2" font-size="24.8571" font-weight="normal" text-anchor="middle" x="19" y="27"></text>
                 </g>
                 <g id="name" transform="translate(397, 413)">
                     <rect fill="#FFFFFF" type="MSShapeGroup" x="0" y="0" width="100" height="38" rx="8"></rect>
-                    <text fill="#48AF5E" type="MSTextLayer" font-family="Exo 2" font-size="24" font-weight="normal" y="27" x="20">Me</text>
+                    <text fill="#48AF5E" type="MSTextLayer" font-family="Exo2" font-size="24" font-weight="normal" y="27" x="20">Me</text>
                 </g>
             </g>
             <g id="deck-root" type="MSLayerGroup" transform="translate(215 457)">
@@ -574,13 +574,13 @@
             </g>
             <g id="overlay" style="display:none;">
                 <rect x="0" y="0" width="100%" height="100%" opacity="0.5"></rect>      
-                <g transform="translate(400 250)"><text fill="#d3d3d3" font-family="Exo 2" font-size="24"> Someone paused the game</text></g>
+                <g transform="translate(400 250)"><text fill="#d3d3d3" font-family="Exo2" font-size="24"> Someone paused the game</text></g>
             </g>
         </g>
     </svg>
 
     <script src="js/bert.js"></script>
     
-    <script src="js/app.js"></script>
+    <script src="js/dart.js"></script>
 </body>
 </html>

+ 55 - 0
apps/web/priv/static/dart/index.htm

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="description" content="Okey" />
+    <title>Kakaranet Okey</title>
+    <link href='http://fonts.googleapis.com/css?family=Exo+2:600' rel='stylesheet' type='text/css'>
+    <link href="style/main.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+    <svg id="Refined"  preserveAspectRatio="xMidYMin meet" class="svg" viewBox="0 0 1071 661"
+         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">    </svg>
+
+    <script src="js/bert.js"></script>
+    <script src="js/selector.js"></script>
+    <script src="js/controller.js"></script>
+
+    <script src="js/okey/apiprovider.js"></script>
+    <script src="js/okey/dragndrop.js"></script>
+
+    <script src="js/timer.js"></script>
+    <script src="js/player.js"></script>
+
+    <script src="js/okey/hand.js"></script>
+    <script src="js/okey/card.js"></script>
+    <script src="js/okey/deck.js"></script>
+
+    <script src="js/app.js"></script>
+    <script src="js/chat.js"></script>
+    <script src="js/bootloader.js"></script>
+
+<div class="controls" id="history" height=0 width=0>
+<p><button class="controls" id="pluslogin" type="button" data-gapiattached="true">Login</button>
+<label class="controls"  id="gosterge"> Google</label></div>
+<label class="controls"  id="player1"> Albert Einstein </label><select  class="controls" id="h1"></select>
+<label class="controls"  id="player2"> Marie Curie </label><select  class="controls" id="h2"></select>
+<label class="controls"  id="player3"> Ilya Prigogine </label><select  class="controls" id="h3"></select>
+<label class="controls"  id="player4" style="font-weight: bold; color: red;"> Asena Simsek </label><select  class="controls" id="h4"></select>
+<button class="controls"  id="logout" type="button">Logout</button>
+<button class="controls"  id="attach" type="button">Attach</button>
+<button class="controls"  id="join" type="button">Join</button>
+<select class="controls"  id="games_ids"></select>
+<select class="controls"  id="take_src"><option label="Table" value="0">Table</option><option label="Left" value="1">Left</option></select>
+<button class="controls"  id="take" type="button">Take</button>
+<select class="controls"  id="istaka"></select>
+<button class="controls"  id="discard" type="button">Discard</button>
+<button class="controls"  id="reveal" type="button">Reveal</button>
+<button class="controls"  id="saw_okey" type="button">I Saw Okey</button>
+<button class="controls"  id="have_8" type="button">8 Tashes</button>
+<button class="controls"  id="pause" type="button">Pause</button>
+<button class="controls"  id="info" type="button">PlayerInfo</button></p></div>
+
+</body>
+</html>

+ 256 - 1102
apps/web/priv/static/dart/js/app.js

@@ -1,1032 +1,120 @@
-var $ = function(_undefind) {
-    function Selector(elements) {
-        this.length = elements.length;
-        for (var i = 0, l = this.length; l > i; i++) this[i] = elements[i];
-    }
-    function $(selector) {
-        return tag.test(selector) ? new Selector([ document.createElementNS("http://www.w3.org/2000/svg", tag.exec(selector)[1]) ]) : "string" == typeof selector ? new Selector(document.querySelectorAll(selector)) : selector instanceof NodeList ? new Selector(selector) : selector instanceof Element ? new Selector([ selector ]) : selector.addEventListener ? new Selector([ selector ]) : selector instanceof Selector ? selector : new Selector([]);
-    }
-    var fn = Selector.prototype;
-    fn.each = function(callback) {
-        for (var i = 0, l = this.length; l > i; i++) callback(this[i], i);
-        return this;
-    }, fn.on = function(eventName, eventHandler) {
-        return this.each(function(el) {
-            el.addEventListener(eventName, eventHandler);
-        });
-    }, fn.off = function(eventName, eventHandler) {
-        return this.each(function(el) {
-            el.removeEventListener(eventName, eventHandler);
-        });
-    }, fn.trigger = function(eventName, data) {
-        return this.each(function(el) {
-            event = new CustomEvent(eventName, data), el.dispatchEvent(event);
-        });
-    }, fn.css = function(name, value) {
-        if (Object(name) === name) {
-            for (var prop in name) this.css(prop, name[prop]);
-            return this;
-        }
-        return null != value ? this.each(function(el) {
-            el.style[name] = value;
-        }) : this.length ? getComputedStyle(this[0]).getPropertyValue(name) : _undefind;
-    }, fn.show = function() {
-        return this.css("display", "block");
-    }, fn.hide = function() {
-        return this.css("display", "none");
-    }, fn.text = function(text) {
-        return null != text ? this.each(function(el) {
-            el.textContent = text;
-        }) : this.length ? this[0].textContent : _undefind;
-    }, fn.html = function(html) {
-        return null != html ? this.each(function(el) {
-            for (;el.firstChild; ) el.removeChild(el.firstChild);
-            var fragment = document.createElement("div");
-            fragment.innerHTML = "<svg>" + html + "</svg>";
-            for (var svg = fragment.firstChild, node = svg.firstChild; node; ) el.appendChild(node.cloneNode(!0)), 
-            node = node.nextSibling;
-        }) : this.length ? this[0].innerHTML : _undefind;
-    }, fn.remove = function() {
-        return this.each(function(el) {
-            el.parentNode && el.parentNode.removeChild(el);
-        });
-    }, fn.attr = function(name, value) {
-        if (Object(name) === name) {
-            for (var prop in name) this.attr(prop, name[prop]);
-            return this;
-        }
-        return null != value ? this.each(function(el) {
-            el.setAttribute(name, value);
-        }) : this.length ? this[0].getAttribute(name) : _undefind;
-    }, fn.removeAttr = function(name) {
-        return this.each(function(el) {
-            el.removeAttribute(name);
-        });
-    }, fn.append = function(target) {
-        return this.each(function(el) {
-            target instanceof Selector ? target.each(function(child) {
-                el.appendChild(child);
-            }) : el.appendChild(target);
-        });
-    }, fn.empty = function() {
-        return this.each(function(el) {
-            for (;el.firstChild; ) el.removeChild(el.firstChild);
-        });
-    }, fn.eq = function(idx) {
-        return new Selector(idx >= this.length ? [] : [ this[idx] ]);
-    }, fn.find = function(selector) {
-        var result = [];
-        return this.each(function(el) {
-            Array.prototype.push.apply(result, el.querySelectorAll(selector));
-        }), new Selector(result);
-    }, fn.parent = function() {
-        var result = [];
-        return this.each(function(el) {
-            result.push(el.parentNode);
-        }), new Selector(result);
-    }, fn.first = function() {
-        return new Selector(this.length ? [ this[0] ] : []);
-    }, fn.last = function() {
-        return new Selector(this.length ? [ this[this.length - 1] ] : []);
-    }, fn.clone = function() {
-        var result = [];
-        return this.each(function(el) {
-            result.push(el.cloneNode(!0));
-        }), new Selector(result);
-    }, fn.width = function() {
-        return this.length ? this[0].getBoundingClientRect().width : _undefind;
-    }, fn.height = function() {
-        return this.length ? this[0].getBoundingClientRect().height : _undefind;
-    }, fn.position = function() {
-        if (this.length) {
-            var clientRect = this[0].getBoundingClientRect();
-            return {
-                top: clientRect.top,
-                right: clientRect.right,
-                bottom: clientRect.bottom,
-                left: clientRect.left
-            };
-        }
-        return _undefind;
-    };
-    var defaultAnim = {
-        "class": "anim",
-        begin: "indefinite"
-    }, anim = function(anim) {
-        return $("<animate/>").attr(anim);
-    };
-    fn.animate = function(anims) {
-        var callbacks = [], thenable = {
-            then: function(complete) {
-                return callbacks.push(complete), thenable;
-            }
-        };
-        return anims = $.extend({}, defaultAnim, anims), this.each(function(el) {
-            var $el = $(el), $anim = $el.find(".anim");
-            $anim.length ? $anim.attr(anims) : ($el.append(anim(anims)[0]), $anim = $el.find(".anim")), 
-            el.timerId = setTimeout(function() {
-                $el.attr(anims.attributeName, anims.to), $el.removeAttr("animated"), callbacks.forEach(function(c) {
-                    c();
-                }), callbacks = [];
-            }, 1e3 * parseFloat(anims.dur)), $el.attr("animated", !0), $anim[0].beginElement();
-        }), thenable;
-    };
-    var animDelay = 62.5;
-    fn.move = function(anims) {
-        return this.each(function(el) {
-            function tick() {
-                if (!el.paused) {
-                    var cur = from + step;
-                    (to > from ? to >= cur : cur >= to) ? ($el.attr(property, cur), from = cur) : clearInterval(timer);
-                }
-            }
-            var property = anims.attributeName, dur = anims.dur, to = parseInt(anims.to), $el = $(el), from = parseInt($el.attr(property)), step = (to - from) / (1e3 * dur / animDelay);
-            el.timer = setInterval(tick, animDelay);
-        });
-    };
-    var defaultTrf = {
-        "class": "trf",
-        type: "translate",
-        dur: "0.3",
-        calcMode: "spline",
-        keySplines: "0.215 0.61 0.355 1",
-        additive: "replace",
-        attributeName: "transform",
-        begin: "indefinite",
-        keyTimes: "0; 1"
-    }, trf = function(trf) {
-        return $("<animateTransform/>").attr(trf);
-    };
-    fn.transform = function(trfs) {
-        var callbacks = [], thenable = {
-            then: function(complete) {
-                return callbacks.push(complete), thenable;
-            }
-        };
-        return trfs = $.extend({}, defaultTrf, trfs), this.each(function(el) {
-            var $el = $(el), $anim = $el.find(".trf");
-            $anim.length ? $anim.attr(trfs) : ($el.append(trf(trfs)[0]), $anim = $el.find(".trf")), 
-            el.timerId = setTimeout(function() {
-                $el.attr("transform", trfs.type + "(" + trfs.to + ")"), $el.removeAttr("animated"), 
-                callbacks.forEach(function(c) {
-                    c();
-                }), callbacks = [];
-            }, 1e3 * parseFloat(trfs.dur) - 20), $el.attr("animated", !0), $anim[0].beginElement();
-        }), thenable;
-    }, fn.stop = function() {
-        return this.each(function(el) {
-            $(el).find(".anim, .trf").each(function(anim) {
-                anim.endElement();
-            }), clearTimeout(el.timerId), clearInterval(el.timer);
-        });
-    }, fn.pause = function() {
-        return $("svg")[0].pauseAnimations(), this.each(function(el) {
-            el.paused = !0;
-        });
-    }, fn.resume = function() {
-        return $("svg")[0].unpauseAnimations(), this.each(function(el) {
-            el.paused = !1;
-        });
-    };
-    var tag = /^<(.+)\/>$/;
-    return $.extend = function(target) {
-        for (var obj, properties, i = 1, l = arguments.length; l > i; i++) {
-            obj = arguments[i], properties = Object.keys(obj);
-            for (var property, j = properties.length; j--; ) property = properties[j], target[property] = obj[property];
-        }
-        return target;
-    }, $.inherit = function(child, parent) {
-        function ctor() {
-            this.constructor = child, this.__super__ = parent.prototype;
-        }
-        return ctor.prototype = parent.prototype, child.prototype = new ctor(), child;
-    }, $.mixin = function(plagin) {
-        $.extend(fn, plagin);
-    }, $.timestamp = 1400668550599, $.load = function(url, complete) {
-        url = url + "?q=" + $.timestamp;
-        var result = localStorage.getItem(url);
-        if (null == result) {
-            var xhr = new XMLHttpRequest();
-            xhr.open("GET", url, !0), xhr.onload = function() {
-                localStorage.setItem(url, xhr.responseText), complete(xhr.responseText);
-            }, xhr.send();
-        } else complete(result);
-    }, $.rand = function(min, max) {
-        return min + Math.floor(Math.random() * (max - min + 1));
-    }, $;
-}(), 
 
-Core = function() {
-    var scope = {
-        apiUrl: "ws://srv5.kakaranet.com:8080/ws/",
-        gameId: 1000001,
-        defaultSessionId: "7hc6Vl0CpxvngjiQQWDspxUtKmhF1zCbT155+M73XhFcKw9e6jkNWLSLM8up4ZQbSUGJXKOphb0YNu4yDRKZkbkiyY1yZukqXFj4nAfvSUNuWx0352VWfLlKZWldHb1na7d7sA==",
-        CARD_SOURCE: "svg/card.svg",
-        CARD_SMALL_SOURCE: "svg/card-small.svg",
-        CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
-        SKIN_NAMES: [ "alina", "gabrielo", "mustafa" ]
-    };
-    return function(module) {
-        module(scope);
-    };
-}();
+function StartApp()      { $.load(scope.CARD_SOURCE, PostLoad); }
+function fadeOut()       { $(this).animate({ attributeName: "opacity", from: 1, to: 0, dur: .3}); }
+function fadeIn()        { $(this).animate({ attributeName: "opacity", from: 0, to: 1, dur: .3}); }
+function addFadeOut()    { $(this).on (document.createTouch ? "touchend" : "mouseup", fadeOut); }
+function removeFadeOut() { $(this).off(document.createTouch ? "touchend" : "mouseup", fadeOut); }
 
-Core(function(scope) {
-    function Controller() {
-        this.proxyAll(), this.refreshElements();
-    }
-    var isIE = window.navigator.msPointerEnabled;
-    $.extend(Controller.prototype, {
-        proxy: function(func) {
-            return func.bind(this);
-        },
-        proxyAll: function() {
-            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
-            this[method] = this.proxy(this[method]);
-        },
-        withDelay: function(func, timeout) {
-            return setTimeout(this.proxy(func), timeout || 0);
-        },
-        $: function(selector) {
-            return this.$el.find(selector);
-        },
-        refreshElements: function() {
-            if (this.elements) for (var element in this.elements) this[element] = this.$(this.elements[element]);
-        },
-        on: function(eventType, handler) {
-            return this.$el.on(eventType, handler), this;
-        },
-        off: function(eventType, handler) {
-            return this.$el.off(eventType, handler), this;
-        },
-        clientX: function(e) {
-            return isIE ? e.pageX : document.createTouch ? e.changedTouches[0].clientX : e.clientX;
-        },
-        clientY: function(e) {
-            return isIE ? e.pageY : document.createTouch ? e.changedTouches[0].clientY : e.clientY;
-        },
-        intersect: function(x, y) {
-            var pos = this.$el.position();
-            return pos.top < y && pos.bottom > y && pos.left < x && pos.right > x;
-        }
-    }), scope.Controller = Controller;
-}), 
+function PostLoad()
+{
+    rightFlag = !1;
+    leftFlag = !1;
 
-Core(function(scope) {
-    function ApiProvider(options) {
-        options = options || {}, this.url = options.url, this.sessionId = options.sessionId, 
-        this.gameId = options.gameId, this.proxies = [ "init", "handleMessage", "actionTake" ], 
-        this.proxyAll(), this.socket = new WebSocket(this.url), this.$socket = $(this.socket), 
-        this.$socket.on("open", this.init), this.$socket.on("message", this.handleMessage);
-    }
-    var eventMap = [ "okey_game_info", "okey_game_started", "okey_game_player_state", "okey_next_turn", "okey_tile_discarded", "okey_tile_taken", "okey_revealed", "player_left", "game_paused" ], 
-    session = /\('session_attach'\),'([^)]+)'\)/, 
-    userName = /document.user\s?=\s?'([^']+)'/;
-    $.extend(ApiProvider.prototype, {
-        proxy: function(func) {
-            return func.bind(this);
-        },
-        proxyAll: function() {
-            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
-            this[method] = this.proxy(this[method]);
-        },
-        on: function(eventType, handler) {
-            this.$socket.on(eventType, handler);
-        },
-        off: function(eventType, handler) {
-            this.$socket.off(eventType, handler);
-        },
-        init: function() {
-            this.socket.send([ "N2O", "" ]), setInterval(this.proxy(function() {
-                this.socket.send("PING");
-            }), 4e3);
-        },
-        handleMessage: function(e) {
-            var msg = JSON.parse(e.data);
-            if (msg.eval) {
-                var curSession, user;
-                (curSession = session.exec(msg.eval)) && (this.sessionId = curSession[1]), (user = userName.exec(msg.eval)) && (scope.user = user[1]);
-            }
-            msg.data ? (msg = dec(msg.data), this.emitEvent(this.beutify(this.parse(msg)))) : msg.eval && (this.socket.send(enc(tuple(atom("client"), tuple(atom("session_attach"), this.sessionId)))), 
-            this.socket.send(enc(tuple(atom("client"), tuple(atom("join_game"), this.gameId)))));
-        },
-        parse: function(msg) {
-            if (Array.isArray(msg)) {
-                if (msg.every(function(el, i) {
-                    return i % 2 == 0 || Object(el.value) === el.value;
-                }) || msg.length % 2 != 0) {
-                    for (var result = [], i = 0, l = msg.length; l > i; i++) result.push(this.parse(msg[i]));
-                    return result;
-                }
-                if (msg.length > 2 && msg.every(function(el) {
-                    return null != el && "object" != typeof el || null != el.value && "object" != typeof el.value;
-                })) {
-                    var result = {};
-                    return result[this.parse(msg[0])] = this.parse(msg.slice(1)), result;
-                }
-                for (var result = {}, i = 0, l = msg.length; l > i; i += 2) {
-                    {
-                        this.parse(msg[i]);
-                    }
-                    result[this.parse(msg[i])] = this.parse(msg[i + 1]);
-                }
-                return result;
-            }
-            return msg.value && Object(msg.value) === msg.value && msg.value[0] && msg.value.length ? this.parse(msg.value[0]) : null != msg.value ? msg.value : msg;
-        },
-        beutify: function(msg) {
-            var result = {};
-            for (var prop in msg) {
-                var tempObj = msg[prop];
-                if (Array.isArray(tempObj)) {
-                    for (var obj, i = tempObj.length; i--; ) if (obj = tempObj[i], Array.isArray(obj)) result[obj[0]] = obj[1]; else if (Object(obj) === obj) for (var p in obj) result[p] = obj[p]; else result[i] = obj;
-                    msg[prop] = result;
-                }
-            }
-            return msg;
-        },
-        emitEvent: function(msg) {
-            for (var event, i = eventMap.length; i--; ) event = eventMap[i], msg[event] && this.$socket.trigger(event, {
-                detail: msg[event]
-            });
-        },
-        actionTake: function(card) {
-            var from = null != card.value ? 1 : 0;
-            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_take"), {
-                pile: from
-            }))));
-        },
-        actionDiscard: function(card) {
-            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_discard"), {
-                tile: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value)
-            }))));
-        },
-        reveal: function(card, hand) {
-            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_reveal"), {
-                discarded: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value),
-                hand: hand
-            }))));
-        },
-        pause: function(resume) {
-            this.socket.send(enc(tuple(atom("client"), tuple(atom("pause_game"), atom("undefined"), this.gameId, atom(resume ? "resume" : "pause")))));
-        }
-    }), scope.ApiProvider = ApiProvider;
-}), 
+    window.deck = scope.deck;
+    deck = window.deck;
+    scope.user = document.user;
 
-Core(function(scope) {
-    function culcShift() {
-        sizeX = $svg[0].viewBox.baseVal.width / innerWidth, sizeY = $svg[0].viewBox.baseVal.height / innerHeight, 
-        size = Math.max(sizeX, sizeY) || 1;
-    }
-    function Draggable(root, options) {
-        options = options || {}, this.$el = $(root), this.revert = options.revert, this.elements = {}, 
-        this.proxies = [ "onDown", "onMove", "onUp" ], this.__super__.constructor.call(this), 
-        this.enable();
-    }
-    var sizeX, sizeY, size, moved, $svg = $("svg");
-    culcShift(), $(window).on("resize", culcShift), $(window).on("orientationchange", culcShift), 
-    $.inherit(Draggable, scope.Controller), $.extend(Draggable.prototype, {
-        storeTrf: function() {
-            var trf = this.$el.attr("transform");
-            this.initTrf = trf ? trf.slice(10, -1).split(/\s+/) : [ 0, 0 ];
-        },
-        disable: function() {
-            this.$el.off(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.css({
-                cursor: "default"
-            });
-        },
-        enable: function() {
-            this.$el.on(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;");
-        },
-        onDown: function(e, silent) {
-            e.preventDefault(), moved || (moved = !1, this.$el.attr("style", "cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"), 
-            this.$el[0].parentNode.appendChild(this.$el[0]), this.x = this.clientX(e), this.y = this.clientY(e), 
-            this.trf = this.$el.attr("transform"), this.trf && (this.trf = this.trf.slice(10, -1).split(/\s+/)), 
-            this.storeTrf(), silent || (document.createTouch ? (this.$el.on("touchmove", this.onMove), 
-            this.$el.on("touchend", this.onUp)) : ($("body").on("mousemove", this.onMove), $("body").on("mouseup", this.onUp)), 
-            this.$el.trigger("dragstart")));
-        },
-        onMove: function(e, silent) {
-            e.preventDefault(), moved = !0, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
-            this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0], 
-            this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"), 
-            silent || this.$el.trigger("dragmove", {
-                detail: {
-                    x: this.curX,
-                    y: this.curY,
-                    event: e
-                }
-            });
-        },
-        onUp: function(e, silent) {
-            if (e.preventDefault(), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"), 
-            moved) {
-                for (var droped, item, dropList = scope.Droppable.list, i = 0, l = dropList.length; l > i; i++) if (item = dropList[i], 
-                item.intersect(this.curX, this.curY)) {
-                    droped = item.drop(this, this.curX, this.curY);
-                    break;
-                }
-                droped || (this.$el.transform({
-                    from: [ this.dx, this.dy ].join(" "),
-                    to: this.initTrf.join(" ")
-                }), silent || this.$el.trigger("revert")), silent || this.$el.trigger("dragstop", {
-                    detail: {
-                        x: this.curX,
-                        y: this.curY,
-                        event: e
-                    }
-                }), moved = !1;
-            }
-            document.createTouch ? (this.$el.off("touchmove", this.onMove), this.$el.off("touchend", this.onUp)) : ($("body").off("mousemove", this.onMove), 
-            $("body").off("mouseup", this.onUp));
-        }
-    }), 
-	scope.Draggable = Draggable, 
-	$.mixin({
-        draggable: function() {
-            return this.each(function(el) {
-                new Draggable(el);
-            });
-        }
-    });
-}), 
+//    var centralCard,
+    apiProvider = new scope.ApiProvider({
+            url: scope.apiUrl,
+            gameId: scope.gameId,
+            sessionId: scope.defaultSessionId});
 
-Core(function(scope) {
-    function Droppable(root, options) {
-        options = options || {}, this.$el = $(root), this.accept = options.accept || function() {
-            return !0;
-        }, this.onDrop = options.drop || function() {}, this.elements = {}, this.proxies = [], 
-        this.__super__.constructor.call(this); this.activate();
-    }
-    Droppable.list = [], $.inherit(Droppable, scope.Controller), $.extend(Droppable.prototype, {
-        drop: function(target, x, y) {
-            return this.accept(target, x, y) ? (this.onDrop(target, x, y), !0) : !1;
-        },
-        activate: function() {
-            Droppable.list.push(this);
-        },
-        release: function() {
-            var i;
-            ~(i = Droppable.list.indexOf(this)) && Droppable.list.splice(i, 1);
-        }
-    }), 
-    scope.Droppable = Droppable, 
-    $.mixin({
-        droppable: function(options) {
-            return this.each(function(el) {
-                new Droppable(el, options);
-            });
-        }
+    createCentralCard(),
+
+    deck.on("take", function(e) {
+        e.detail.card.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn)
+                         .off(document.createTouch ? "touchend"   : "mouseup",   fadeOut),
+        centralCard.off("dragmove", removeFadeOut).off("dragstop", addFadeOut).off("revert", fadeOut),
+        ~playersLeftHandsMap[scope.user].cards.indexOf(e.detail.card) && playersLeftHandsMap[scope.user].pop(),
+        apiProvider.actionTake(e.detail.card);
     });
-}), 
 
-Core(function(scope) {
-    function Timer(root, options) {
-        options = options || {}, this.duration = options.duration, this.curTime = this.duration, 
-        this.$el = $(root), this.elements = {
-            $value: "#value",
-            $progress: "#progress"
-        }, this.proxies = [ "tick" ], this.__super__.constructor.call(this), this.$value.text(this.duration), 
-        defHeight = this.$progress.attr("height");
-    }
-    var defHeight;
-    $.inherit(Timer, scope.Controller), $.extend(Timer.prototype, {
-        from: function(time) {
-            this.$value.text(this.curTime = Math.round(time / 1e3));
-        },
-        start: function() {
-            this.$progress.move({
-                attributeName: "height",
-                to: "0",
-                dur: this.curTime
-            }), this.timerId = this.withDelay(this.tick, 1e3);
-        },
-        tick: function() {
-            return this.paused ? void (this.timerId = this.withDelay(this.tick, 1e3)) : void (this.curTime-- > 0 && (this.$value.text(this.curTime), 
-            this.timerId = this.withDelay(this.tick, 1e3)));
-        },
-        reset: function() {
-            this.$progress.stop().attr({
-                height: defHeight
-            }), this.$value.text(this.curTime = this.duration), clearTimeout(this.timerId);
-        },
-        pause: function() {
-            this.paused = !0, this.$progress.pause();
-        },
-        resume: function() {
-            this.paused = !1, this.$progress.resume();
-        }
-    }), 
-	scope.Timer = Timer;
-}), 
+    var $gosterme = $("#Gosterme"),
+        ended = !0;
 
-Core(function(scope) {
-    function Player(options) {
-        options = options || {}, this.name = options.name, this.position = options.position, 
-        this.noSkin = options.noSkin, this.skin = options.skin || scope.SKIN_NAMES[$.rand(0, scope.SKIN_NAMES.length - 1)], 
-        this.$el = $("#player-" + this.position), this.elements = {
-            $timer: "#timer",
-            $name: "#name",
-            $nameWrapper: "#name rect",
-            $nameText: "#name text"
-        }, this.proxies = [ "loadSkin" ], this.__super__.constructor.call(this), this.$el.show(), 
-        this.$timer.hide(), this.$name.show(), this.$nameText.text(this.name);
-        var nameWrapperWidth = this.$nameText.width() / $("#Page-1").width() * 100 + 2 * (this.$nameText.position().left - this.$nameWrapper.position().left) / $("#Page-1").width() * 100;
-        this.$nameWrapper.attr({
-            width: nameWrapperWidth + "%"
-        }), this.initTimer(), "me" == this.position || this.noSkin || $.load("svg/" + [ "person", this.position, this.skin ].join("-") + ".svg", this.loadSkin);
-    }
-    $.inherit(Player, scope.Controller), $.extend(Player.prototype, {
-        loadSkin: function(result) {
-            var $result = $("<g/>").html(result);
-            this.$el.append($result[0].firstChild), this.unselect();
-        },
-        initTimer: function() {
-            this.timer = new scope.Timer(this.$timer, {
-                duration: 30
-            });
-        },
-        select: function() {
-            this.$nameWrapper.attr({
-                fill: "#517ECE"
-            }), this.$nameText.attr({
-                fill: "#FFFFFF"
-            }), this.$timer.show(), this.$("#selection").show(), this.timer.start();
-        },
-        unselect: function() {
-            this.$nameWrapper.attr({
-                fill: "#FFFFFF"
-            }), this.$nameText.attr({
-                fill: "#48AF5E"
-            }), this.$timer.hide(), this.$("#selection").hide(), this.timer.reset();
-        }
-    }), scope.Player = Player;
-}), 
+    apiProvider.on("okey_game_started", initOkeyScene);
+    apiProvider.on("okey_game_player_state", initOkeyScene);
 
-Core(function(scope) {
-    function Hand(root, options) {
-        options = options || {}, this.$el = $(root), this.elements = {
-            $topCard: "#top-card",
-            $rollUp: "#roll-up",
-            $rollDown: "#roll-down",
-            $container: "#container",
-            $back: "#back",
-            $cards: "#cards"
-        }, this.proxies = [ "show", "hide" ], this.__super__.constructor.call(this), this.$rollUp.on("click", this.show), 
-        this.$rollDown.on("click", this.hide), this.cards = [];
-    }
-    var trfsMap = [ {
-        backHeight: 74,
-        containerTrf: "0 -44",
-        cardTrf: "0 -38"
-    }, {
-        backHeight: 124,
-        containerTrf: "0 -94",
-        cardTrf: "0 -89"
-    }, {
-        backHeight: 174,
-        containerTrf: "0 -144",
-        cardTrf: "0 -139"
-    } ], 
-    defCardTrf = "0 20";
-    $.inherit(Hand, scope.Controller), $.extend(Hand.prototype, {
-        take: function() {
-            var card = this.cards.pop();
-            return this.render(), card && card.$el.remove(), card;
-        },
-        discard: function(tile) {
-            var card = new scope.Card({
-                color: scope.CARD_COLORS[tile[1] - 1],
-                value: tile[2]
-            });
-            this.cards.push(card), this.render(), card.drag(), card.dragHandler.disable(), this.$topCard.append(card.$el[0]);
-        },
-        pop: function() {
-            this.cards.pop(), this.render();
-        },
-        show: function() {
-            var count = this.cards.length - 1;
-            count > 0 && (this.$container.transform({
-                to: trfsMap[4 > count ? count - 1 : 2].containerTrf,
-                from: "0 50",
-                dur: .355,
-                calcMode: "linear"
-            }), this.$back.animate({
-                attributeName: "height",
-                to: trfsMap[4 > count ? count - 1 : 2].backHeight,
-                dur: .355
-            }), this.$cards.find("g").each(function(el, i) {
-                3 > i && $(el).transform({
-                    to: trfsMap[i].cardTrf,
-                    from: "0 20",
-                    dur: .6,
-                    calcmode: "linear"
-                });
-            }), this.shown = !0);
-        },
-        hide: function() {
-            var count = this.cards.length - 1;
-            count > 0 && (this.$container.transform({
-                to: "0 50",
-                from: trfsMap[4 > count ? count - 1 : 2].containerTrf,
-                dur: .5,
-                calcMode: "linear"
-            }), this.$back.animate({
-                attributeName: "height",
-                to: 0,
-                dur: .5
-            }), this.$cards.find("g").each(function(el, i) {
-                3 > i && $(el).transform({
-                    to: defCardTrf,
-                    from: trfsMap[4 > count ? count - 1 : 2].cardTrf,
-                    dur: .6,
-                    calcmode: "linear"
-                });
-            }), this.shown = !1);
-        },
-        render: function() {
-            var history = this.cards.slice(0, this.cards.length - 1);
-            this.$cards.empty(), this.shown && this.hide(), history.reverse().forEach(function(card) {
-                card = card.clone(), card.template(scope.CARD_SMALL_SOURCE), card.$el.attr("transform", "translate(" + defCardTrf + ")"), 
-                this.$cards.append(card.$el[0]);
-            }, this);
-        },
-        clear: function() {
-            this.cards.forEach(function(card) {
-                card.$el.remove();
-            }), this.cards = [], this.render();
-        }
-    }), scope.Hand = Hand;
-}), 
+    var playersPositions = 
+        [
+          [ "Me", "Right", "Center", "Left" ],
+          [ "Left", "Me", "Right", "Center" ],
+          [ "Center", "Left", "Me", "Right" ],
+          [ "Right", "Center", "Left", "Me" ]
+         ];
 
-Core(function(scope) {
-    function Card(options) {
-        options = options || {}, this.value = options.value, this.color = options.color, 
-        this.selected = !1, this.pos = {}, this.elements = {
-            $circle: "circle",
-            $text: "text",
-            $overlay: ".overlay"
-        }, this.proxies = [ "toggle", "selectGroup", "dragGroup", "clearGroup", "revertGroup" ], 
-        this.template(scope.CARD_SOURCE), this.$el.on("mousedown", this.toggle), this.$el.on("revert", this.revertGroup), 
-        this.$el.on("dragstop", this.clearGroup), this.$overlay.on("mousedown", this.selectGroup);
-    }
-    var selStart = !1;
-    $(window).on("keydown", function(e) {
-        e.metaKey && (selStart = !0);
-    }), $(window).on("keyup", function() {
-        selStart = !1;
-    }), Card.selected = [], Card.uncheckAll = function() {
-        for (var i = Card.selected.length; i--; ) Card.selected[i].uncheck();
-    }, $("body").on("mousedown", Card.uncheckAll), $.inherit(Card, scope.Controller), 
-    $.extend(Card.prototype, {
-        template: function(source) {
-            $.load(source, this.proxy(this.load));
-        },
-        load: function(result) {
-            this.$el = (this.$el || $("<g/>")).attr({
-                "class": "card"
-            }).css({
-                cursor: "default"
-            }).html(result), this.__super__.constructor.call(this), this.render();
-        },
-        render: function() {
-            null == this.value && null == this.color ? (this.$circle.hide(), this.$text.hide()) : 0 == this.value ? (this.$circle.hide(), 
-            this.$text.show().attr({
-                fill: this.color,
-                y: 36
-            }).text("*")) : (this.$circle.show().attr("fill", this.color), this.$text.show().attr("fill", this.color).text(this.value));
-        },
-        drag: function() {
-            this.dragHandler = new scope.Draggable(this.$el), this.dragHandler.owner = this;
-        },
-        centerX: function() {
-            var pos = this.$el.position(), width = this.$el.width();
-            return Math.round(pos.left + width / 2);
-        },
-        toggle: function(e) {
-            e.stopPropagation(), selStart ? this.nearSelectGroup() ? this.selected && !this.betweenSelected() ? this.uncheck() : this.check() : (Card.uncheckAll(), 
-            this.check()) : ~Card.selected.indexOf(this) || Card.uncheckAll();
-        },
-        check: function() {
-            this.$overlay.css("display", ""), this.selected = !0, deck.cards[this.pos.y][this.pos.x] = null, 
-            Card.selected.push(this);
-        },
-        uncheck: function() {
-            this.$overlay.css("display", "none"), this.selected = !1, deck.cards[this.pos.y][this.pos.x] = this;
-            var i;
-            ~(i = Card.selected.indexOf(this)) && Card.selected.splice(i, 1);
-        },
-        selectGroup: function(e) {
-            if (!selStart) {
-                for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
-                card != this && card.dragHandler.onDown(e, !0);
-                this.$el.on("dragmove", this.dragGroup);
-            }
-        },
-        dragGroup: function(e) {
-            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
-            card != this && card.dragHandler.onMove(e.detail.event, !0);
-        },
-        clearGroup: function() {
-            this.$el.off("dragmove", this.dragGroup), selStart || Card.uncheckAll();
-        },
-        nearSelectGroup: function() {
-            return Card.selected.some(function(card) {
-                return Math.abs(card.pos.x - this.pos.x) <= 1 && card.pos.y == this.pos.y;
-            }, this);
-        },
-        betweenSelected: function() {
-            Card.selected.sort(function(a, b) {
-                return (a.pos.x < b.pos.x) - (b.pos.x < a.pos.x);
-            });
-            var idx = Card.selected.indexOf(this);
-            return -1 != idx && 0 != idx && idx != Card.selected.length - 1;
-        },
-        revertGroup: function() {
-            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
-            card != this && card.$el.transform({
-                from: [ card.dragHandler.dx, card.dragHandler.dy ].join(" "),
-                to: card.dragHandler.initTrf.join(" ")
-            }), scope.deck.cards[card.pos.y][card.pos.x] = card;
-        },
-        clone: function() {
-            return new Card({
-                color: this.color,
-                value: this.value
-            });
-        },
-        log: function() {}
-    }), scope.Card = Card;
-}), 
+    playersMap = {};
+    playersRightHandsMap = {};
+    playersLeftHandsMap = {};
 
-Core(function(scope) {
-    function Deck(root, options) {
-        options = options || {}, this.$el = $(root), this.elements = {
-            $dropPlace: "#deck"
-        }, this.proxies = [ "select", "track", "place" ], this.cards = [ [], [] ], this.trfs = [ [], [] ], 
-        this.__super__.constructor.call(this), this.$dropPlace.droppable({
-            accept: this.place
-        });
-    }
-    var padding = {
-        top: 5,
-        left: 5
-    };
-    $.inherit(Deck, scope.Controller);
-    var prevX, prevY, selected;
-    $.extend(Deck.prototype, {
-        each: function(callback) {
-            for (var i = 0; 15 > i; i++) for (var j = 0; 2 > j; j++) if (callback.call(this, this.cards[j][i], i, j) === !1) return;
-        },
-        fill: function(tiles) {
-            var count = 0;
-            this.each(function(c, i, j) {
-                if (null != c && (this.cards[j][i] = null, c.$el.remove()), 0 == j && count < tiles.length) {
-                    var tile = tiles[count], card = new scope.Card({
-                        color: scope.CARD_COLORS[tile[1] - 1],
-                        value: tile[2]
-                    });
-                    card.pos = {
-                        x: i,
-                        y: j
-                    }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
-                    count++;
-                }
-                this.trfs[j][i] = {
-                    x: 42 * i + padding.left,
-                    y: 71 * j + padding.top
-                };
-            });
-        },
-        render: function() {
-            this.each(function(card, i, j) {
-                null != card && (card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
-                card.drag(), this.$el.append(card.$el[0]));
-            });
-        },
-        track: function(e) {
-            this.each(function(card, i, j) {
-                if (card && card.$el[0] != e.target && card.intersect(e.detail.x, e.detail.y) && !card.$el.attr("animated") && scope.Card.selected.length < 2) {
-                    var shift = e.detail.x > card.centerX() ? i + 1 : i - 1;
-                    return shift = shift > 14 ? shift - 2 : shift, shift = 0 > shift ? shift + 2 : shift, 
-                    prevX = i, prevY = j, this.move({
-                        i: i,
-                        j: j
-                    }, {
-                        i: shift,
-                        j: j
-                    }), !1;
-                }
-            });
-        },
-        move: function(fst, snd) {
-            var card, trfs = this.trfs, i = snd.i, cond = function(i) {
-                return fst.i < snd.i ? 14 >= i : i >= 0;
-            }, _cond = function(j, i) {
-                return fst.i < snd.i ? i > j : j > i;
-            }, op = function() {
-                fst.i < snd.i ? i++ : i--;
-            }, _op = function() {
-                fst.i < snd.i ? j++ : j--;
-            }, direction = function(j) {
-                return fst.i < snd.i ? j + (scope.Card.selected.length || 1) : j - (scope.Card.selected.length || 1);
-            }, _direction = function(j) {
-                return fst.i < snd.i ? j - 1 : j + 1;
-            };
-            if (scope.Card.selected.length < 2) for (;cond(i); op()) if (null == this.cards[snd.j][i] || this.cards[snd.j][i] == selected) {
-                for (var j = _direction(i); _cond(j, i); _op()) card = this.cards[fst.j][j], card != selected && (card.$el.transform({
-                    from: [ trfs[fst.j][j].x, trfs[fst.j][j].y ].join(" "),
-                    to: [ trfs[fst.j][direction(j)].x, trfs[fst.j][direction(j)].y ].join(" ")
-                }), selected && (selected.dragHandler.initTrf = [ trfs[fst.j][j].x, trfs[fst.j][j].y ]), 
-                ((this.cards[fst.j][j] = this.cards[fst.j][direction(j)]) || {}).pos = {
-                    x: j,
-                    y: fst.j
-                }, (this.cards[fst.j][direction(j)] = card).pos = {
-                    x: direction(j),
-                    y: fst.j
-                });
+    apiProvider.on("okey_game_info", function(e) {
+        console.log(JSON.stringify(e));
+        console.log("Scope.User");
+        scope.user = document.user;
+        if (!scope.started) {
+            for (var playerInfo, players = e.detail.players, i = 0; i < players.length; i++) 
+                if (playerInfo = players[i].PlayerInfo, playerInfo[0] == scope.user)
+            {
+                playersPositions = playersPositions[i];
                 break;
             }
-        },
-        select: function(e) {
-            selected = null, this.each(function(card) {
-                return card && card.$el[0] == e.target ? (selected = card, !1) : void 0;
-            });
-        },
-        place: function(target, x, y) {
-            var trfs = this.trfs, pos = this.$dropPlace.position(), width = this.$dropPlace.width(), height = this.$dropPlace.height(), placeWidth = Math.round(width / 15), placeHeight = Math.round(height / 2), truePosX = Math.floor((x - pos.left) / placeWidth), posY = Math.floor((y - pos.top) / placeHeight);
-            scope.Card.selected.sort(function(a, b) {
-                return (a.pos.x > b.pos.x) - (b.pos.x > a.pos.x);
-            });
-            var dropResult, idx = scope.Card.selected.indexOf(target.owner), cards = scope.Card.selected.length ? scope.Card.selected.concat() : [ target.owner ];
-            if (cards.every(function(card, i) {
-                return posX = truePosX + (i - idx) * (card != target.owner), null == this.cards[posY][posX] || this.cards[posY][posX] == card;
-            }, this)) for (var card, i = 0, l = cards.length; l > i; i++) card = cards[i], posX = truePosX + (i - idx) * (card != target.owner), 
-            (dropResult = null == this.cards[posY][posX] || this.cards[posY][posX] == selected) && (this.cards[posY][posX] != card && (null != card.pos.x && null != card.pos.y ? this.cards[card.pos.y][card.pos.x] = this.cards[card.pos.y][card.pos.x] == card ? null : this.cards[card.pos.y][card.pos.x] : (this.$el.trigger("take", {
-                detail: {
-                    card: card
-                }
-            }), this.justTaken = !0), (this.cards[posY][posX] = card).pos = {
-                x: posX,
-                y: posY
-            }), function(card) {
-                card.$el.transform({
-                    from: card.$el.attr("transform").slice(10, -1),
-                    to: [ trfs[posY][posX].x, trfs[posY][posX].y ].join(" ")
-                }).then(function() {
-                    card.dragHandler.storeTrf();
+            for (var playerInfo, i = 0, l = players.length; l > i; i++) {
+                
+                playerInfo = players[i].PlayerInfo, playersMap[playerInfo[0]] = playersMap[playerInfo[0]] || new scope.Player({
+                    position: playersPositions[i],
+                    name: [ playerInfo[2], playerInfo[3] ].join(" ")
                 });
-            }(card));
-            return dropResult;
-        },
-        remove: function(tile) {
-            return selected && selected.color == scope.CARD_COLORS[tile[1] - 1] && selected.value == tile[2] ? (this.cards[selected.pos.y][selected.pos.x] = null, 
-            selected.$el.remove(), selected.off("dragmove", this.track), !1) : void this.each(function(card, i, j) {
-                return card && card.color == scope.CARD_COLORS[tile[1] - 1] && card.value == tile[2] ? (this.cards[j][i] = null, 
-                card.$el.remove(), card.off("dragmove", this.track), !1) : void 0;
-            });
-        },
-        insert: function(tile) {
-            this.justTaken ? this.justTaken = !1 : this.each(function(card, i, j) {
-                return card ? void 0 : (card = new scope.Card({
-                    color: scope.CARD_COLORS[tile[1] - 1],
-                    value: tile[2]
-                }), card.pos = {
-                    x: i,
-                    y: j
-                }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
-                card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
-                card.drag(), this.$el.append(card.$el[0]), !1);
-            });
-        },
-        length: function() {
-            var count = 0;
-            return this.each(function(card) {
-                null != card && (count += 1);
-            }), count;
-        },
-        hand: function(discarded) {
-            return result = [ [], [] ], this.each(function(card, i, j) {
-                card && card != discarded && result[j].push(tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value));
-            }), result;
-        },
-        dir: function() {
-            for (var i = 0; 15 > i; i++) this.cards[0][i] && this.cards[0][i].log();
-            for (var i = 0; 15 > i; i++) this.cards[1][i] && this.cards[1][i].log();
-        }
-    }), scope.deck = new Deck("#deck-root");
-}), 
-
-Core(function(scope) {
-    $.load(scope.CARD_SOURCE, function() {
-        function fadeOut() {
-            $(this).animate({
-                attributeName: "opacity",
-                from: 1,
-                to: 0,
-                dur: .3
-            });
-        }
-        function fadeIn() {
-            $(this).animate({
-                attributeName: "opacity",
-                from: 0,
-                to: 1,
-                dur: .3
-            });
-        }
-        function addFadeOut() {
-            $(this).on(document.createTouch ? "touchend" : "mouseup", fadeOut);
-        }
-        function removeFadeOut() {
-            $(this).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
-        }
-        function createCentralCard() {
-            centralCard = new scope.Card(), centralCard.$el.attr({
-                opacity: 0,
-                transform: "translate(298 -115)"
-            }).on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
-            centralCard.drag(), centralCard.dragHandler.enable(), centralCard.on("dragstart", deck.select).on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("dragmove", deck.track).on("revert", fadeOut), 
-            deck.$el.append(centralCard.$el[0]);
-        }
-        function init(e) {
-            if (ended = !1, scope.deck.fill(e.detail.tiles), scope.deck.render(), centralCard.dragHandler.disable(), 
-            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut), 
-            e.detail.gosterge && "null" != e.detail.gosterge) {
-                var gosterge = new scope.Card({
-                    color: scope.CARD_COLORS[e.detail.gosterge[1] - 1],
-                    value: e.detail.gosterge[2]
+                var prevPlayer = i == players.length - 1 ? players[0] : players[i + 1];
+                for (var prop in playersLeftHandsMap) playersLeftHandsMap[prop].clear();
+                playersLeftHandsMap[prevPlayer.PlayerInfo[0]] = playersRightHandsMap[playerInfo[0]] = new scope.Hand("#" + [ "Player", playersPositions[i], "Hand" ].join("-")), 
+                "Me" == playersPositions[i] && playersRightHandsMap[playerInfo[0]].$el.droppable({
+                    accept: function() {
+                        return playerTurn && deck.length() > 14;
+                    },
+                    drop: function(target) {
+                        apiProvider.actionDiscard(target.owner);
+                    }
                 });
-                gosterge.$el.attr("transform", "translate(16 0)"), $gosterge.append(gosterge.$el);
-            }
-            var piles = e.detail.piles;
-            if (piles && "null" != piles) for (var i = 0; i < piles.length, pile; i++) {
-                pile = piles[i];
-                for (var name in pile) for (var playerPile = pile[name], hand = playersLeftHandsMap[name], j = playerPile.length; j--; ) hand.discard(playerPile[j]);
             }
-            e.detail.whos_move && "null" != e.detail.whos_move && (e.detail.next_turn_in && "null" != e.detail.next_turn_in && playersMap[e.detail.whos_move].timer.from(e.detail.next_turn_in), 
-            e.detail.paused && (playersMap[e.detail.whos_move].timer.pause(), $overlay.show()), 
-            playersMap[e.detail.whos_move].select());
+
+            scope.started = !0;
         }
-        window.deck = scope.deck;
-        var centralCard, apiProvider = new scope.ApiProvider({
-            url: scope.apiUrl,
-            gameId: scope.gameId,
-            sessionId: scope.defaultSessionId
-        });
-        createCentralCard(), deck.on("take", function(e) {
-            e.detail.card.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut), 
-            centralCard.off("dragmove", removeFadeOut).off("dragstop", addFadeOut).off("revert", fadeOut), 
-            ~playersLeftHandsMap[scope.user].cards.indexOf(e.detail.card) && playersLeftHandsMap[scope.user].pop(), 
-            apiProvider.actionTake(e.detail.card);
-        });
-        var $gosterge = $("#gosterge"), ended = !0;
-        apiProvider.on("okey_game_started", init), apiProvider.on("okey_game_player_state", init);
-        var playersPositions = [ [ "me", "right", "center", "left" ], [ "left", "me", "right", "center" ], [ "center", "left", "me", "right" ], [ "right", "center", "left", "me" ] ], playersMap = {}, playersRightHandsMap = {}, playersLeftHandsMap = {};
-        apiProvider.on("okey_game_info", function(e) {
-            if (!scope.started) {
-                for (var playerInfo, players = e.detail.players, i = 0; i < players.length; i++) if (playerInfo = players[i].PlayerInfo, 
-                playerInfo[0] == scope.user) {
-                    playersPositions = playersPositions[i];
-                    break;
-                }
-                for (var playerInfo, i = 0, l = players.length; l > i; i++) {
-                    playerInfo = players[i].PlayerInfo, playersMap[playerInfo[0]] = playersMap[playerInfo[0]] || new scope.Player({
-                        position: playersPositions[i],
-                        name: [ playerInfo[2], playerInfo[3] ].join(" ")
-                    });
-                    var prevPlayer = i == players.length - 1 ? players[0] : players[i + 1];
-                    for (var prop in playersLeftHandsMap) playersLeftHandsMap[prop].clear();
-                    playersLeftHandsMap[prevPlayer.PlayerInfo[0]] = playersRightHandsMap[playerInfo[0]] = new scope.Hand("#" + [ "player", playersPositions[i], "hand" ].join("-")), 
-                    "me" == playersPositions[i] && playersRightHandsMap[playerInfo[0]].$el.droppable({
-                        accept: function() {
-                            return playerTurn && deck.length() > 14;
-                        },
-                        drop: function(target) {
-                            apiProvider.actionDiscard(target.owner);
-                        }
-                    });
-                }
-                scope.started = !0;
+    }),
+
+    window.playersRightHandsMap = playersRightHandsMap;
+    window.playersLeftHandsMap = playersLeftHandsMap;
+
+    var playerTurn = !1;
+
+    apiProvider.on("online_number", function (e) {
+        console.log("Online Number");
+    });
+
+    apiProvider.on("okey_next_turn", function(e) {
+        for (var playerName in playersMap) playersMap[playerName].unselect();
+        if (playersMap[e.detail.player].select(), e.detail.player == scope.user)
+        {
+            playerTurn = !0;
+            var cards = playersLeftHandsMap[e.detail.player].cards;
+            if (cards.length)
+            {
+                var card = cards[cards.length - 1];
+                deck.$el.append(card.$el[0]), card.$el.attr({
+                    transform: "translate(16 -65)"
+                }), card.dragHandler.enable(), card.on("dragstart", deck.select), card.on("dragmove", deck.track);
             }
-        }), window.playersRightHandsMap = playersRightHandsMap, window.playersLeftHandsMap = playersLeftHandsMap;
-        var playerTurn = !1;
-        apiProvider.on("okey_next_turn", function(e) {
-            for (var playerName in playersMap) playersMap[playerName].unselect();
-            if (playersMap[e.detail.player].select(), e.detail.player == scope.user) {
-                playerTurn = !0;
-                var cards = playersLeftHandsMap[e.detail.player].cards;
-                if (cards.length) {
-                    var card = cards[cards.length - 1];
-                    deck.$el.append(card.$el[0]), card.$el.attr({
-                        transform: "translate(16 -65)"
-                    }), card.dragHandler.enable(), card.on("dragstart", deck.select), card.on("dragmove", deck.track);
-                }
-                deck.length() < 15 ? (centralCard.dragHandler.enable(), centralCard.$el.on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
-                centralCard.on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("revert", fadeOut)) : (centralCard.dragHandler.disable(), 
-                centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut));
-            } else playerTurn = !1, centralCard.dragHandler.disable(), centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
-        }), apiProvider.on("okey_tile_discarded", function(e) {
+            deck.length() < 15 ? (centralCard.dragHandler.enable(), centralCard.$el.on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
+            centralCard.on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("revert", fadeOut)) : (centralCard.dragHandler.disable(), 
+            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut));
+        } else {
+            playerTurn = !1,
+            centralCard.dragHandler.disable(),
+            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+        }
+    });
+
+    apiProvider.on("okey_tile_discarded", function(e) {
             if ("object" == typeof e.detail.tile) {
                 var c = new scope.Card({
                     color: scope.CARD_COLORS[e.detail.tile[1] - 1],
@@ -1036,102 +124,168 @@ Core(function(scope) {
             }
             e.detail.player == scope.user && deck.remove(e.detail.tile), playersRightHandsMap[e.detail.player].discard(e.detail.tile);
         });
-        var $pile = $("#pile"), $fullPile = $pile.find("g").clone(), $wholeCards = $("#whole-cards"), $fullWholeCards = $("#whole-cards > g").clone();
-        apiProvider.on("okey_tile_taken", function(e) {
-            if ("object" == typeof e.detail.revealed) {
-                var c = new scope.Card({
-                    color: scope.CARD_COLORS[e.detail.revealed[1] - 1],
-                    value: e.detail.revealed[2]
-                });
-                c.log();
-            }
-            if (e.detail.pile && !deck.justTaken && playersLeftHandsMap[e.detail.player].take(), 
+
+    var $pile = $("#Center-Cards"),
+        $fullPile = $pile.find("g").clone(),
+        $wholeCards = $("#Stupid-Cards"),
+        $fullWholeCards = $("#Stupid-Cards > g").clone();
+
+    apiProvider.on("okey_tile_taken", function(e) {
+        if ("object" == typeof e.detail.revealed) {
+            var c = new scope.Card({
+                color: scope.CARD_COLORS[e.detail.revealed[1] - 1],
+                value: e.detail.revealed[2]
+            });
+            c.log();
+        }
+        if (e.detail.pile && !deck.justTaken && playersLeftHandsMap[e.detail.player].take(), 
             0 === e.detail.pile && e.detail.player == scope.user && (centralCard.color = scope.CARD_COLORS[e.detail.revealed[1] - 1], 
             centralCard.value = e.detail.revealed[2], centralCard.render(), createCentralCard()), 
-            0 === e.detail.pile) {
-                var $topCard = $pile.find("g");
-                if ($topCard.length > 1) $topCard.last().remove(); else {
-                    $topCard.last().remove(), $pile.append($fullPile);
-                    var $miniPile = $wholeCards.find("g");
-                    $miniPile.length ? $miniPile.first().remove() : $wholeCards.append($fullWholeCards);
-                }
+            0 === e.detail.pile)
+        {
+            var $topCard = $pile.find("g");
+            if ($topCard.length > 1) $topCard.last().remove(); else {
+                $topCard.last().remove(), $pile.append($fullPile);
+                var $miniPile = $wholeCards.find("g");
+                $miniPile.length ? $miniPile.first().remove() : $wholeCards.append($fullWholeCards);
             }
-            e.detail.player == scope.user && deck.insert(e.detail.revealed), centralCard.dragHandler.disable(), 
-            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
-            var cards = playersLeftHandsMap[scope.user].cards;
-            if (cards.length) {
-                var card = cards[cards.length - 1];
-                card.dragHandler.disable();
-            }
-        }), apiProvider.on("okey_revealed", function(e) {
-            ended = !0, alert(e.detail.player), deck.fill([]);
-            for (var hand in playersLeftHandsMap) playersLeftHandsMap[hand].clear();
-            for (var playerName in playersMap) playersMap[playerName].unselect();
-            $gosterge.remove();
-        }), apiProvider.on("player_left", function(e) {
-            var playerInfo = e.detail.replacement.PlayerInfo;
-            playersMap[playerInfo[0]] = new scope.Player({
-                position: playersMap[e.detail.player].position,
-                name: [ playerInfo[2], playerInfo[3] ].join(" "),
-                noSkin: !0
-            }), delete playersMap[e.detail.player], playersRightHandsMap[playerInfo[0]] = playersRightHandsMap[e.detail.player], 
-            delete playersRightHandsMap[e.detail.player], playersLeftHandsMap[playerInfo[0]] = playersLeftHandsMap[e.detail.player], 
-            delete playersLeftHandsMap[e.detail.player];
-        }), $("#pause").on("click", function() {
-            apiProvider.pause();
-        });
-        var whoPausedGame, $overlay = $("#overlay");
-        $overlay.on("click", function() {
-            whoPausedGame == scope.user && apiProvider.pause(!0);
-        }), apiProvider.on("game_paused", function(e) {
-            if (whoPausedGame = e.detail[3], "pause" == e.detail[2]) {
-                $overlay.show();
-                for (var player in playersMap) playersMap[player].timer.pause();
-                var player = playersMap[e.detail[3]];
-                $overlay.find("text").text(player.name + " paused the game");
-            } else {
-                $overlay.hide();
-                for (var player in playersMap) playersMap[player].timer.resume();
-            }
-        }), $("#table-ellipse").droppable({
-            accept: function(target) {
-                return 1 === apiProvider.socket.readyState && deck.length() > 14 && target.owner != centralCard && !ended && scope.Card.selected.length <= 1;
-            },
-            drop: function(target) {
-                apiProvider.reveal(target.owner, deck.hand(target.owner));
-            }
-        });
+        }
+        e.detail.player == scope.user && deck.insert(e.detail.revealed), centralCard.dragHandler.disable(), 
+        centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+        var cards = playersLeftHandsMap[scope.user].cards;
+
+        if (cards.length) {
+            var card = cards[cards.length - 1];
+            card.dragHandler.disable();
+        }
     });
-    var leftFlag = !1;
+
+    apiProvider.on("okey_revealed", function(e) {
+        ended = !0, alert(e.detail.player), deck.fill([]);
+        for (var hand in playersLeftHandsMap) playersLeftHandsMap[hand].clear();
+        for (var playerName in playersMap) playersMap[playerName].unselect();
+        $gosterme.remove();
+    });
+
+    apiProvider.on("player_left", function(e) {
+        var playerInfo = e.detail.replacement.PlayerInfo;
+        playersMap[playerInfo[0]] = new scope.Player({
+            position: playersMap[e.detail.player].position,
+            name: [ playerInfo[2], playerInfo[3] ].join(" "),
+            noSkin: !0
+        }),
+        delete playersMap[e.detail.player], playersRightHandsMap[playerInfo[0]] = playersRightHandsMap[e.detail.player], 
+        delete playersRightHandsMap[e.detail.player], playersLeftHandsMap[playerInfo[0]] = playersLeftHandsMap[e.detail.player], 
+        delete playersLeftHandsMap[e.detail.player];
+    });
+
+    $("#Pause").on("click", function() { apiProvider.pause(); });
+
+    var whoPausedGame,
+        $overlay = $("#overlay");
+        $overlay.on("click", function() { whoPausedGame == scope.user && apiProvider.pause(!0); });
+
+    apiProvider.on("game_paused", function(e) {
+        if (whoPausedGame = e.detail[3], "pause" == e.detail[2]) {
+            $overlay.show();
+            for (var player in playersMap) playersMap[player].timer.pause();
+            var player = playersMap[e.detail[3]];
+            $overlay.find("text").text(player.name + " paused the game");
+        } else {
+            $overlay.hide();
+            for (var player in playersMap) playersMap[player].timer.resume();
+        }
+    });
+
+    $("#Table-Oval").droppable({
+        accept: function(target) {
+            return 1 === apiProvider.socket.readyState && deck.length() > 14 && 
+                target.owner != centralCard && !ended && scope.Card.selected.length <= 1;
+        },
+        drop: function(target) {
+            apiProvider.reveal(target.owner, deck.hand(target.owner));
+        }
+    });
+
+}
+
+function createCentralCard() {
+    centralCard = new scope.Card();
+    centralCard.$el.attr({opacity: 0, transform: "translate(298 -115)" })
+        .on(document.createTouch ? "touchstart" : "mousedown", fadeIn)
+        .on(document.createTouch ? "touchend" : "mouseup", fadeOut);
+
+    centralCard.drag();
+    centralCard.dragHandler.enable();
+    centralCard.on("dragstart", deck.select).on("dragmove", removeFadeOut)
+                                            .on("dragstop", addFadeOut)
+                                            .on("dragmove", deck.track)
+                                            .on("revert",   fadeOut);
+    deck.$el.append(centralCard.$el[0]);
+}
+
+function initOkeyScene(e)
+{
+    console.log("INIT BOARD");
+    console.log(e.detail.tiles);
+    console.log(deck);
+        deck.fill(e.detail.tiles),
+        deck.render();
+
+    if (ended = !1, 
+        deck.fill(e.detail.tiles),
+        deck.render(),
+        centralCard.dragHandler.disable(), 
+        centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn)
+                       .off(document.createTouch ? "touchend"   : "mouseup",   fadeOut), 
+        e.detail.gosterme && "null" != e.detail.gosterme)
+    {
+        var gosterme = new scope.Card({
+            color: scope.CARD_COLORS[e.detail.gosterme[1] - 1],
+            value: e.detail.gosterme[2]
+        });
+        gosterme.$el.attr("transform", "translate(16 0)"),
+        $gosterme.append(gosterme.$el);
+    }
+
+    var piles = e.detail.piles;
+
+    if (piles && "null" != piles) for (var i = 0; i < piles.length, pile; i++)
+    {
+        pile = piles[i];
+        for (var name in pile) 
+            for (var playerPile = pile[name],
+                     hand = playersLeftHandsMap[name],
+                     j = playerPile.length; j--; ) hand.discard(playerPile[j]);
+    }
+    
+    e.detail.whos_move && "null" != e.detail.whos_move && 
+        (e.detail.next_turn_in && "null" != e.detail.next_turn_in && playersMap[e.detail.whos_move].timer.from(e.detail.next_turn_in), 
+         e.detail.paused && (playersMap[e.detail.whos_move].timer.pause(), $overlay.show()), 
+         playersMap[e.detail.whos_move].select());
+}
+
+
+function SetupLeftMenu() 
+{
     $("#Left-Menu").css("cursor", "pointer").on("click", function() {
-        leftFlag ? ($("#Tournaments").transform({
-            to: "10 575",
-            from: "44 465"
-        }), $("#Promos").transform({
-            to: "10 575",
-            from: "122 538"
-        }), leftFlag = !1) : ($("#Tournaments").transform({
-            from: "10 575",
-            to: "44 465"
-        }), $("#Promos").transform({
-            from: "10 575",
-            to: "122 538"
-        }), leftFlag = !0);
+        leftFlag ? (    $("#Tournaments").transform({ to: "10 575", from: "44 465" }),
+                        $("#Promos").transform({ to: "10 575", from: "122 538" }),
+                        leftFlag = !1
+                ) : (   $("#Tournaments").transform({ from: "10 575", to: "44 465" }),
+                        $("#Promos").transform({ from: "10 575", to: "122 538" }),
+                        leftFlag = !0 );
     });
-    var rightFlag = !1;
+}
+
+function SetupRightMenu() 
+{
     $("#Right-Menu").css("cursor", "pointer").on("click", function() {
-        rightFlag ? ($("#Play").transform({
-            to: "975 575",
-            from: "946, 461"
-        }), $("#Create").transform({
-            to: "975 575",
-            from: "864 526"
-        }), rightFlag = !1) : ($("#Play").transform({
-            from: "975 575",
-            to: "946, 461"
-        }), $("#Create").transform({
-            from: "975 575",
-            to: "864 526"
-        }), rightFlag = !0);
+        rightFlag ? (   $("#Play").transform({to: "975 575", from: "946, 461"}),
+                        $("#Create").transform({to: "975 575",from: "864 526"}),
+                        rightFlag = !1
+                ) : (   $("#Play").transform({from: "975 575",to: "946, 461"}),
+                        $("#Create").transform({from: "975 575",to: "864 526"}),
+                        rightFlag = !0 );
     });
-});
+}

+ 147 - 147
apps/web/priv/static/dart/js/bert.js

@@ -1,147 +1,147 @@
-// Micro BERT encoder/decoder
-// Copyright (c) Maxim Sokhatsky (@5HT)
-
-function atom(o) { return { type: "Atom", value: o, toString: function() { return this.value; } }; };
-function bin(o) { return { type: "Binary", value: o, toString: function() { return "<<\'"+this.value+"'>>"; } }; };
-function tuple() {
-    return { type: "Tuple", value: arguments, toString: function() { var s = ""; 
-        for (var i=0;i<this.value.length;i++) { if (s!=="") s+=","; s+=this.value[i]; }
-        return "{" + s + "}"; } }; };
-function dec(S) { return decode(ltoa(new Uint8Array(S))); };
-function enc(s) {
-    var ori = encode(s), buf = new Uint8Array(new ArrayBuffer(ori.length)), s = "";
-    for (var i=0; i < buf.length; i++) { buf[i] = ori.charCodeAt(i); s+=","+buf[i]; }
-    return new Blob([buf.buffer]); };
-
-BERT = itoa(131);
-SATOM = itoa(115);
-ATOM = itoa(100);
-BINARY = itoa(109);
-SINT = itoa(97);
-INT = itoa(98);
-FLOAT = itoa(99);
-STR = itoa(107);
-LIST = itoa(108);
-TUPLE = itoa(104);
-LTUPLE = itoa(105);
-NIL = itoa(106);
-ZERO = itoa(0);
-
-function itoa(x) { return String.fromCharCode(x); }
-function ltoa(a) { for (var i = 0,s=""; i < a.length; i++) s += itoa(a[i]); return s; };
-function itol(Int, Length) {
-    var isNegative, OriginalInt, i, Rem, s = "";
-    isNegative = (Int < 0);
-    if (isNegative) { Int = Int * (0 - 1); }
-    OriginalInt = Int;
-    for (i = 0; i < Length; i++) { 
-        Rem = Int % 256;
-        if (isNegative) { Rem = 255 - Rem; }
-        s = String.fromCharCode(Rem) + s;
-        Int = Math.floor(Int / 256);
-    }
-    if (Int > 0) { throw ("BERT: Range: " + OriginalInt); }
-    return s; };
-function ltoi(S, Length) {
-    var isNegative, i, n, Num = 0;
-    isNegative = (S.charCodeAt(0) > 128);
-    for (i = 0; i < Length; i++) {
-        n = S.charCodeAt(i);
-        if (isNegative) { n = 255 - n; }
-        if (Num === 0) { Num = n; }
-        else { Num = Num * 256 + n; }
-    }
-    if (isNegative) { Num = Num * (0 - 1); }
-    return Num; };
-
-function encode(o) { return BERT + en_inner(o); };
-function en_inner(Obj) { if(Obj === undefined) return NIL; var func = 'en_' + typeof(Obj); return eval(func)(Obj); };
-function en_string(Obj) { return STR + itol(Obj.length, 2) + Obj; };
-function en_boolean(Obj) { if (Obj) return en_inner(atom("true")); else return en_inner(atom("false")); };
-function en_number(Obj) { var s, isi = (Obj % 1 === 0); if (!isi) { return en_float(Obj); }
-    if (isi && Obj >= 0 && Obj < 256) { return SINT + itol(Obj, 1); }
-    return INT + itol(Obj, 4); };
-function en_float(Obj) { var s = Obj.toExponential(); while (s.length < 31) { s += ZERO; } return FLOAT + s; };
-function en_object(Obj) {
-    if (Obj.type === "Atom") return en_atom(Obj);
-    if (Obj.type === "Binary") return en_bin(Obj);
-    if (Obj.type === "Tuple") return en_tuple(Obj);
-    if (Obj.constructor.toString().indexOf("Array") !== -1) return en_array(Obj);
-    return en_associative_array(Obj); };
-function en_atom(Obj) { return ATOM + itol(Obj.value.length, 2) + Obj.value; };
-function en_bin(Obj) { return BINARY + itol(Obj.value.length, 4) + Obj.value; };
-function en_tuple(Obj) {
-    var i, s = "";
-    if (Obj.value.length < 256) { s += TUPLE + itol(Obj.value.length, 1); }
-    else { s += LTUPLE + itol(Obj.value.length, 4); }
-    for (i = 0; i < Obj.value.length; i++) { s += en_inner(Obj.value[i]); }
-    return s; };
-function en_array(Obj) {
-    var i, s = LIST + itol(Obj.length, 4);
-    for (i = 0; i < Obj.length; i++) { s += en_inner(Obj[i]); }
-    s += NIL;
-    return s; };
-function en_associative_array(Obj) {
-    var key, Arr = [];
-    for (key in Obj) { if (Obj.hasOwnProperty(key)) { Arr.push(tuple(atom(key), Obj[key])); } }
-    return en_array(Arr); };
-
-function decode(S) {
-    if (S[0] !== BERT) { throw ("Not a valid BERT."); }
-    var Obj = de_inner(S.substring(1));
-    if (Obj.rest !== "") { throw ("Invalid BERT."); }
-    return Obj.value; };
-function de_inner(S) {
-    var Type = S[0];
-    S = S.substring(1);
-    switch (Type) {
-        case SATOM: de_atom(S, 1);
-        case ATOM: return de_atom(S, 2);
-        case BINARY: return de_bin(S);
-        case SINT: return de_integer(S, 1);
-        case INT: return de_integer(S, 4);
-        case FLOAT: return de_float(S);
-        case STR: return de_string(S);
-        case LIST: return de_list(S);
-        case TUPLE: return de_tuple(S, 1);
-        case NIL: return de_nil(S);
-        default: throw ("BERT: " + S.charCodeAt(0)); } };
-function de_atom(S, Count) {
-    var Size, Value;
-    Size = ltoi(S, Count);
-    S = S.substring(Count);
-    Value = S.substring(0, Size);
-    if (Value === "true") { Value = true; }
-    else if (Value === "false") { Value = false; }
-    return { value: atom(Value), rest:  S.substring(Size) }; };
-function de_bin(S) {
-    var Size = ltoi(S, 4);
-    S = S.substring(4);
-    return { value: bin(S.substring(0, Size)), rest: S.substring(Size) }; };
-function de_integer(S, Count) {
-    var Value = ltoi(S, Count);
-    S = S.substring(Count);
-    return { value: Value, rest: S }; };
-function de_float(S) {
-    var Size = 31;
-    return { value: parseFloat(S.substring(0, Size)), rest: S.substring(Size) }; };
-function de_string(S) {
-    var Size = ltoi(S, 2);
-    S = S.substring(2);
-    return { value: S.substring(0, Size), rest:  S.substring(Size) }; };
-function de_list(S) {
-    var Size, i, El, LastChar, Arr = [];
-    Size = ltoi(S, 4);
-    S = S.substring(4);
-    for (i = 0; i < Size; i++) { El = de_inner(S); Arr.push(El.value); S = El.rest; }
-    LastChar = S[0];
-    if (LastChar !== NIL) { throw ("BERT: Wrong NIL."); }
-    S = S.substring(1);
-    return { value: Arr, rest: S }; };
-function de_tuple(S, Count) {
-    var Size, i, El, Arr = [];
-    Size = ltoi(S, Count);
-    S = S.substring(Count);
-    for (i = 0; i < Size; i++) { El = de_inner(S); Arr.push(El.value); S = El.rest; }
-    return { value: tuple(Arr), rest: S }; };
-function de_nil(S) { return { value: [], rest: S }; };
+// Micro BERT encoder/decoder
+// Copyright (c) Maxim Sokhatsky (@5HT)
+
+function atom(o) { return { type: "Atom", value: o, toString: function() { return this.value; } }; };
+function bin(o) { return { type: "Binary", value: o, toString: function() { return "<<\'"+this.value+"'>>"; } }; };
+function tuple() {
+    return { type: "Tuple", value: arguments, toString: function() { var s = ""; 
+        for (var i=0;i<this.value.length;i++) { if (s!=="") s+=","; s+=this.value[i]; }
+        return "{" + s + "}"; } }; };
+function dec(S) { return decode(ltoa(new Uint8Array(S))); };
+function enc(s) {
+    var ori = encode(s), buf = new Uint8Array(new ArrayBuffer(ori.length)), s = "";
+    for (var i=0; i < buf.length; i++) { buf[i] = ori.charCodeAt(i); s+=","+buf[i]; }
+    return new Blob([buf.buffer]); };
+
+BERT = itoa(131);
+SATOM = itoa(115);
+ATOM = itoa(100);
+BINARY = itoa(109);
+SINT = itoa(97);
+INT = itoa(98);
+FLOAT = itoa(99);
+STR = itoa(107);
+LIST = itoa(108);
+TUPLE = itoa(104);
+LTUPLE = itoa(105);
+NIL = itoa(106);
+ZERO = itoa(0);
+
+function itoa(x) { return String.fromCharCode(x); }
+function ltoa(a) { for (var i = 0,s=""; i < a.length; i++) s += itoa(a[i]); return s; };
+function itol(Int, Length) {
+    var isNegative, OriginalInt, i, Rem, s = "";
+    isNegative = (Int < 0);
+    if (isNegative) { Int = Int * (0 - 1); }
+    OriginalInt = Int;
+    for (i = 0; i < Length; i++) { 
+        Rem = Int % 256;
+        if (isNegative) { Rem = 255 - Rem; }
+        s = String.fromCharCode(Rem) + s;
+        Int = Math.floor(Int / 256);
+    }
+    if (Int > 0) { throw ("BERT: Range: " + OriginalInt); }
+    return s; };
+function ltoi(S, Length) {
+    var isNegative, i, n, Num = 0;
+    isNegative = (S.charCodeAt(0) > 128);
+    for (i = 0; i < Length; i++) {
+        n = S.charCodeAt(i);
+        if (isNegative) { n = 255 - n; }
+        if (Num === 0) { Num = n; }
+        else { Num = Num * 256 + n; }
+    }
+    if (isNegative) { Num = Num * (0 - 1); }
+    return Num; };
+
+function encode(o) { return BERT + en_inner(o); };
+function en_inner(Obj) { if(Obj === undefined) return NIL; var func = 'en_' + typeof(Obj); return eval(func)(Obj); };
+function en_string(Obj) { return STR + itol(Obj.length, 2) + Obj; };
+function en_boolean(Obj) { if (Obj) return en_inner(atom("true")); else return en_inner(atom("false")); };
+function en_number(Obj) { var s, isi = (Obj % 1 === 0); if (!isi) { return en_float(Obj); }
+    if (isi && Obj >= 0 && Obj < 256) { return SINT + itol(Obj, 1); }
+    return INT + itol(Obj, 4); };
+function en_float(Obj) { var s = Obj.toExponential(); while (s.length < 31) { s += ZERO; } return FLOAT + s; };
+function en_object(Obj) {
+    if (Obj.type === "Atom") return en_atom(Obj);
+    if (Obj.type === "Binary") return en_bin(Obj);
+    if (Obj.type === "Tuple") return en_tuple(Obj);
+    if (Obj.constructor.toString().indexOf("Array") !== -1) return en_array(Obj);
+    return en_associative_array(Obj); };
+function en_atom(Obj) { return ATOM + itol(Obj.value.length, 2) + Obj.value; };
+function en_bin(Obj) { return BINARY + itol(Obj.value.length, 4) + Obj.value; };
+function en_tuple(Obj) {
+    var i, s = "";
+    if (Obj.value.length < 256) { s += TUPLE + itol(Obj.value.length, 1); }
+    else { s += LTUPLE + itol(Obj.value.length, 4); }
+    for (i = 0; i < Obj.value.length; i++) { s += en_inner(Obj.value[i]); }
+    return s; };
+function en_array(Obj) {
+    var i, s = LIST + itol(Obj.length, 4);
+    for (i = 0; i < Obj.length; i++) { s += en_inner(Obj[i]); }
+    s += NIL;
+    return s; };
+function en_associative_array(Obj) {
+    var key, Arr = [];
+    for (key in Obj) { if (Obj.hasOwnProperty(key)) { Arr.push(tuple(atom(key), Obj[key])); } }
+    return en_array(Arr); };
+
+function decode(S) {
+    if (S[0] !== BERT) { throw ("Not a valid BERT."); }
+    var Obj = de_inner(S.substring(1));
+    if (Obj.rest !== "") { throw ("Invalid BERT."); }
+    return Obj.value; };
+function de_inner(S) {
+    var Type = S[0];
+    S = S.substring(1);
+    switch (Type) {
+        case SATOM: de_atom(S, 1);
+        case ATOM: return de_atom(S, 2);
+        case BINARY: return de_bin(S);
+        case SINT: return de_integer(S, 1);
+        case INT: return de_integer(S, 4);
+        case FLOAT: return de_float(S);
+        case STR: return de_string(S);
+        case LIST: return de_list(S);
+        case TUPLE: return de_tuple(S, 1);
+        case NIL: return de_nil(S);
+        default: throw ("BERT: " + S.charCodeAt(0)); } };
+function de_atom(S, Count) {
+    var Size, Value;
+    Size = ltoi(S, Count);
+    S = S.substring(Count);
+    Value = S.substring(0, Size);
+    if (Value === "true") { Value = true; }
+    else if (Value === "false") { Value = false; }
+    return { value: atom(Value), rest:  S.substring(Size) }; };
+function de_bin(S) {
+    var Size = ltoi(S, 4);
+    S = S.substring(4);
+    return { value: bin(S.substring(0, Size)), rest: S.substring(Size) }; };
+function de_integer(S, Count) {
+    var Value = ltoi(S, Count);
+    S = S.substring(Count);
+    return { value: Value, rest: S }; };
+function de_float(S) {
+    var Size = 31;
+    return { value: parseFloat(S.substring(0, Size)), rest: S.substring(Size) }; };
+function de_string(S) {
+    var Size = ltoi(S, 2);
+    S = S.substring(2);
+    return { value: S.substring(0, Size), rest:  S.substring(Size) }; };
+function de_list(S) {
+    var Size, i, El, LastChar, Arr = [];
+    Size = ltoi(S, 4);
+    S = S.substring(4);
+    for (i = 0; i < Size; i++) { El = de_inner(S); Arr.push(El.value); S = El.rest; }
+    LastChar = S[0];
+    if (LastChar !== NIL) { throw ("BERT: Wrong NIL."); }
+    S = S.substring(1);
+    return { value: Arr, rest: S }; };
+function de_tuple(S, Count) {
+    var Size, i, El, Arr = [];
+    Size = ltoi(S, Count);
+    S = S.substring(Count);
+    for (i = 0; i < Size; i++) { El = de_inner(S); Arr.push(El.value); S = El.rest; }
+    return { value: tuple(Arr), rest: S }; };
+function de_nil(S) { return { value: [], rest: S }; };

+ 130 - 0
apps/web/priv/static/dart/js/bootloader.js

@@ -0,0 +1,130 @@
+
+var svgNS = "http://www.w3.org/2000/svg";
+var color = ['#DE3F26','#606060','#48AF5E','#FFC800'];
+var slotName = slotNameDef;
+
+function svg(html) { return new DOMParser().parseFromString(html, "text/xml").firstChild; }
+function removeChilds(e) { var last; while (last = e.lastChild) e.removeChild(last); };
+function slotNameDef(x,y) { return "Slot-"+y+","+x; }
+function loadAnimationForButton(a, b) { return loadAppend('svg/ButtonAnimation.svg', a, b); }
+
+function setPlayerName(e, playerName) {
+    var dx = 15; //(document.getElementById(e+"-Name").attributes['fill'].value == "#FFFFFF") ? 65 : 20;
+    document.getElementById(e+"-Name").setAttribute("y",27);
+    document.getElementById(e+"-Name").setAttribute("x",dx);
+    document.getElementById(e+"-Name").textContent = playerName;
+    document.getElementById(e+"-Pad").setAttribute('width', document.getElementById(e).getBBox().width + 15); }
+
+function template_engine(html, data) {
+    var re = /{([^}]+)?}/g, code = 'var r=[];', cursor = 0;
+    var add = function(line,js) {
+        js? (code += 'r.push(' + line + ');') :
+            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");' : ''); // "
+        return add; }
+    while(match = re.exec(html)) {
+        add(html.slice(cursor, match.index))(match[1],true);
+        cursor = match.index + match[0].length; }
+    add(html.substr(cursor, html.length - cursor));
+    code += 'return r.join("");';
+    return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); }
+
+function loadAppend(file, animation, name) { 
+    loadFile(file, function() {
+        var slot = document.getElementById(name);
+        var r = template_engine(localStorage.getItem(file),{'name': animation});
+        document.getElementById(name).appendChild(svg(r)); }); }
+
+function card(line,pos,col,v) {
+    return template_engine(
+        localStorage.getItem("svg/Card.svg"),
+            {   name: slotName(pos,line),
+                suit: color[col-1],
+                value: v,
+                y: (line-1)*69,
+                x: (pos-1)*42 }); }
+
+function reload(file, name2) { var name = name2==null?file:name2;
+    var slot = document.getElementById(name);
+    if (slot == null) return;
+    slot.parentNode.replaceChild(svg(localStorage.getItem(file)),slot);}
+
+function reload_cont(cont,name,element) { reload(name,element); if (null != cont) (cont)();   }
+
+function loadFile(name,cont,element) {
+    if (localStorage.getItem(name) == null) {
+        var client = new XMLHttpRequest();
+        client.open('GET', name, true);
+        client.onload = function() {
+            localStorage.setItem(name,client.responseText); 
+            reload_cont(cont,name,element);
+        }
+        client.send(); }
+    else reload_cont(cont,name,element); }
+
+function PatchSVG()
+{
+//    document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
+
+        // Setup Clipping ViewPorts
+
+    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>');
+    var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>');
+    var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>');
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath1);
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath2);
+    document.getElementsByTagName('defs').item(0).appendChild(clipPath3);
+
+//     document.getElementById("Online-List").setAttribute("clip-path","url(#myClip1)");
+//     document.getElementById("Chat").setAttribute("clip-path","url(#myClip2)");
+//     document.getElementById("Online-Chat").setAttribute("clip-path","url(#myClip1)");
+
+    document.getElementById("Clip-Path-Left").setAttribute("transform", "translate(0,0)");
+    document.getElementById("Clip-Path-Right").setAttribute("transform", "translate(0,0)");
+    document.getElementById("Clip-Path-Left-Chat").setAttribute("transform", "translate(0,0)");
+
+//  document.getElementById('Player-Statistics').style.display = 'none';
+    document.getElementById("Right-Bar").setAttribute("fill","skyblue");
+    document.getElementById("Right-Bar").setAttribute("xmlns:data","Right-Bar");
+
+    document.getElementById("Right-Bar").onmouseover = barHover;
+    document.getElementById("Right-Bar").onmouseout = barHoverOut;
+    document.getElementById("Left-Bar").onmouseover = onlineHover;
+    document.getElementById("Left-Bar").onmouseout = onlineHoverOut;
+    
+    document.getElementById("Player-Left").style.display = 'block';
+
+    // HTML editors
+
+/*
+    document.getElementById('onlineChatEdit').setAttribute("contentEditable","true");
+    document.getElementById('onlineChatEdit').onkeydown = chatEditor;
+    document.getElementById("onlineChatEdit").style.display = 'none';
+
+    document.getElementById('edit').setAttribute("contentEditable","true");
+    document.getElementById('edit').onkeydown = chatEditor;
+    document.getElementById('edit').setAttribute("xmlns:data","Chat");
+    document.getElementById("edit").style.display = '';
+*/
+    // showOnlineList ctor
+
+    var onlineListOnClick = [
+        "Online-Users",
+        "Online-Users-Pad",
+        "Online-Logo",
+        "Users-Online-Message",
+        "Users-Online-Number" ];
+
+//       onlineListOnClick.map(function(x) { 
+//           console.log(x);
+//            document.getElementById(x).onclick = showOnlineList; });
+}
+
+function onPlayerInfo(evt) {
+    ws.send(enc(tuple(atom('client'),
+        tuple(atom('stats_action'),bin(document.user),atom('game_okey'))))); }
+
+function onPlayerInfoClose(evt) { document.getElementById('Player-Statistics').style.display = 'none'; }
+
+// Run
+
+loadFile('Kakaranet-Scene.svg', function() { PatchSVG(), StartApp();}, "Refined");

+ 138 - 0
apps/web/priv/static/dart/js/chat.js

@@ -0,0 +1,138 @@
+
+// Online User Chat and In-Game Chat
+
+var scrollSensitivity = 0.2;
+var scroll_left = 5;
+var scroll_left_chat = 5;
+var scroll_right = -10000;
+var currentChat = null;
+
+function barHover(evt) { document.getElementById("Right-Bar").setAttribute("fill","skyblue"); }
+function barHoverOut(evt) { document.getElementById("Right-Bar").setAttribute("fill","lightblue"); }
+function onlineHover(evt) { document.getElementById("Left-Bar").setAttribute("fill","skyblue"); }
+function onlineHoverOut(evt) { document.getElementById("Left-Bar").setAttribute("fill","lightblue"); }
+function onlineHoverColor(evt) {
+    onlineHover(evt);
+    var name = evt.target.getAttribute("xmlns:data");
+    if (null != name) document.getElementById(name).setAttribute("fill","#FFF687");
+}
+function onlineHoverOutColor(evt) { 
+    onlineHoverOut(evt);
+    var name = evt.target.getAttribute("xmlns:data");
+    if (null != name) document.getElementById(name).setAttribute("fill","#DBEBED");
+}
+
+function chatEditor(evt) {
+    var chatContainer = evt.target.getAttribute("xmlns:data");
+    if (evt.keyCode == 13 && evt.metaKey == false) {
+        var e = evt.target; //document.getElementById('edit');
+        console.log(e);
+        if (e.innerText.trim() != ""){
+            var text = e.innerText.trim().encodeHTML();
+            chatMessage(chatContainer,"100","Maxim",text);
+//            if (null != currentChat)
+                ws.send(enc(tuple(atom('client'),
+                    tuple(atom('message'),bin(document.user),bin(chatContainer.substr(5)),bin(text)))));
+            e.innerHTML = '';
+        }
+    } else if (evt.keyCode == 13 && evt.metaKey == true) {
+        document.execCommand('insertText',false, '\n');
+    }
+    var scroll = -1000000;
+    if (null != currentChat) left_scroll = scroll;
+    mouseWheelHandler({'detail':scroll,'wheelDelta':scroll});
+}
+
+function mouseWheelHandler(e) {
+
+    var leftBar = document.getElementById("Left-Bar");
+    var rightBar = document.getElementById("Right-Bar");
+    var leftFill = leftBar.getAttribute("fill");
+    var rightFill = rightBar.getAttribute("fill");
+    var leftActive = leftFill == "skyblue";
+    var rightActive = rightFill == "skyblue";
+    if (!leftActive && !rightActive) return;
+//    console.log(leftActive);
+
+    var evt = e;
+    var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
+    var ori = leftActive ? (currentChat == null ? scroll_left : scroll_left ) : scroll_right;
+    var scroll = parseFloat(scroll_dy) + parseFloat(ori);
+    var selectedBar = leftActive ? (currentChat == null ? "Online-List" : currentChat) : "Chat";
+    var selectedClip = leftActive ? (currentChat == null ? "Clip-Path-Left" : "Clip-Path-Left-Chat") : "Clip-Path-Right";
+    var selectedBarShift = leftActive ? 2 : 857;
+    var limit = parseFloat(document.getElementById(selectedBar).getBBox().height) - 400;
+    if (scroll > 5) scroll = 5;
+    if (scroll < -limit) scroll = -limit;
+    document.getElementById(selectedClip).setAttribute("transform", "translate(0,"+parseFloat(-scroll)+")");
+    document.getElementById(selectedBar).setAttribute("transform", "translate("+selectedBarShift+","+(parseFloat(95+scroll))+")");
+    if (leftActive) scroll_left = scroll; else scroll_right = scroll;
+    return true; 
+}
+
+
+function chatMessage(chatName, id, me, string) {
+    var i=0;
+    var colors=['#FDFDFD','#DFF1F4'];
+    var x1 = 7;
+    var y1 = 0;
+    var container = chatName == "Chat" ? "Right-Bar" : "Left-Bar";
+    var hover = chatName == "Chat" ? "barHover" : "onlineHover";
+    var translate_y = parseFloat(document.getElementById(chatName).getBBox().height);
+    var x2 = 205;
+    var textElement = chatText(container,id,me,string);
+    var dy = translate_y == 0 ? 0 : translate_y + 10;
+    var html = "<g xmlns='http://www.w3.org/2000/svg' " + 
+        "id='Message-"+id+"' transform='translate(0,"+dy+")'></g>";
+    var messageElement = svg(html);
+    messageElement.appendChild(textElement);
+    document.getElementById(chatName).appendChild(messageElement);
+    create_multiline(textElement);
+    var y2 = textElement.getBBox().height + 5;
+    var box = "<path xmlns:data='"+container+"' xmlns='http://www.w3.org/2000/svg' d='M"+x1+","+y1+
+                " L"+x2+","+y1+
+            ((me == "Maxim") ?
+                (" L"+x2+","+parseFloat(y2-7)+
+                " L"+parseFloat(x2+7)+","+y2+
+                " L"+x1+","+y2)
+            :
+                (" L"+x2+","+y2+
+                " L"+0+","+y2+
+                " L"+x1+","+parseFloat(y2-7)))
+        + " L"+x1+","+y1+"' fill='"+colors[me=="Maxim"?1:0]+"'></path>";
+    var boxElement = svg(box);
+    textElement.setAttribute("xmlns:data",container)
+    messageElement.insertBefore(boxElement,textElement);
+    boxElement.setAttribute("mouseover",hover+"(evt);");
+    boxElement.setAttribute("mouseout",hover+"Out(evt);");
+    textElement.setAttribute("mouseover",hover+"(evt);");
+    textElement.setAttribute("mouseout",hover+"Out(evt);");
+    messageElement.setAttribute("onmouseover",hover+"(evt);");
+    messageElement.setAttribute("onmouseout",hover+"Out(evt);");
+//    console.log(messageElement);
+}
+
+function chatText(container, id, me, string) {
+    var i = 0;
+    var colors=['#3B5998'];
+    var html = "<text xmlns:data='"+container+"' id='ChatText-"+id+"' width='180' " +
+        " xmlns='http://www.w3.org/2000/svg' "+
+        " font-family='Exo 2' font-size='16' font-weight='normal' fill='"+colors[i]+"'>" +
+            string + "</text>";
+//    console.log(html);
+    return svg(html);
+}
+
+function showOnlineList(evt)
+{
+    document.getElementById("onlineChatEdit").style.display = 'none';
+    if (null != currentChat) { document.getElementById(currentChat).style.display = 'none'; }
+    document.getElementById("Online-List").style.display = '';
+    currentChat = null;
+
+    scroll_left = 0;
+    onlineHover();
+    mouseWheelHandler({'detail':scroll_left,'wheelDelta':scroll_left});
+    onlineHoverOut();
+}
+

+ 46 - 0
apps/web/priv/static/dart/js/controller.js

@@ -0,0 +1,46 @@
+Core(function(scope) {
+
+    function Controller() {
+        this.proxyAll();
+        this.refreshElements();
+    }
+
+    var isIE = window.navigator.msPointerEnabled;
+
+    $.extend(Controller.prototype, {
+        proxy: function(func) {
+            return func.bind(this);
+        },
+        proxyAll: function() {
+            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
+            this[method] = this.proxy(this[method]);
+        },
+        withDelay: function(func, timeout) {
+            return setTimeout(this.proxy(func), timeout || 0);
+        },
+        $: function(selector) {
+            return this.$el.find(selector);
+        },
+        refreshElements: function() {
+            if (this.elements) for (var element in this.elements) this[element] = this.$(this.elements[element]);
+        },
+        on: function(eventType, handler) {
+            return this.$el.on(eventType, handler), this;
+        },
+        off: function(eventType, handler) {
+            return this.$el.off(eventType, handler), this;
+        },
+        clientX: function(e) {
+            return isIE ? e.pageX : document.createTouch ? e.changedTouches[0].clientX : e.clientX;
+        },
+        clientY: function(e) {
+            return isIE ? e.pageY : document.createTouch ? e.changedTouches[0].clientY : e.clientY;
+        },
+        intersect: function(x, y) {
+            var pos = this.$el.position();
+            return pos.top < y && pos.bottom > y && pos.left < x && pos.right > x;
+        }
+    }),
+
+    scope.Controller = Controller;
+});

+ 1137 - 0
apps/web/priv/static/dart/js/dart.js

@@ -0,0 +1,1137 @@
+var $ = function(_undefind) {
+    function Selector(elements) {
+        this.length = elements.length;
+        for (var i = 0, l = this.length; l > i; i++) this[i] = elements[i];
+    }
+    function $(selector) {
+        return tag.test(selector) ? new Selector([ document.createElementNS("http://www.w3.org/2000/svg", tag.exec(selector)[1]) ]) : "string" == typeof selector ? new Selector(document.querySelectorAll(selector)) : selector instanceof NodeList ? new Selector(selector) : selector instanceof Element ? new Selector([ selector ]) : selector.addEventListener ? new Selector([ selector ]) : selector instanceof Selector ? selector : new Selector([]);
+    }
+    var fn = Selector.prototype;
+    fn.each = function(callback) {
+        for (var i = 0, l = this.length; l > i; i++) callback(this[i], i);
+        return this;
+    }, fn.on = function(eventName, eventHandler) {
+        return this.each(function(el) {
+            el.addEventListener(eventName, eventHandler);
+        });
+    }, fn.off = function(eventName, eventHandler) {
+        return this.each(function(el) {
+            el.removeEventListener(eventName, eventHandler);
+        });
+    }, fn.trigger = function(eventName, data) {
+        return this.each(function(el) {
+            event = new CustomEvent(eventName, data), el.dispatchEvent(event);
+        });
+    }, fn.css = function(name, value) {
+        if (Object(name) === name) {
+            for (var prop in name) this.css(prop, name[prop]);
+            return this;
+        }
+        return null != value ? this.each(function(el) {
+            el.style[name] = value;
+        }) : this.length ? getComputedStyle(this[0]).getPropertyValue(name) : _undefind;
+    }, fn.show = function() {
+        return this.css("display", "block");
+    }, fn.hide = function() {
+        return this.css("display", "none");
+    }, fn.text = function(text) {
+        return null != text ? this.each(function(el) {
+            el.textContent = text;
+        }) : this.length ? this[0].textContent : _undefind;
+    }, fn.html = function(html) {
+        return null != html ? this.each(function(el) {
+            for (;el.firstChild; ) el.removeChild(el.firstChild);
+            var fragment = document.createElement("div");
+            fragment.innerHTML = "<svg>" + html + "</svg>";
+            for (var svg = fragment.firstChild, node = svg.firstChild; node; ) el.appendChild(node.cloneNode(!0)), 
+            node = node.nextSibling;
+        }) : this.length ? this[0].innerHTML : _undefind;
+    }, fn.remove = function() {
+        return this.each(function(el) {
+            el.parentNode && el.parentNode.removeChild(el);
+        });
+    }, fn.attr = function(name, value) {
+        if (Object(name) === name) {
+            for (var prop in name) this.attr(prop, name[prop]);
+            return this;
+        }
+        return null != value ? this.each(function(el) {
+            el.setAttribute(name, value);
+        }) : this.length ? this[0].getAttribute(name) : _undefind;
+    }, fn.removeAttr = function(name) {
+        return this.each(function(el) {
+            el.removeAttribute(name);
+        });
+    }, fn.append = function(target) {
+        return this.each(function(el) {
+            target instanceof Selector ? target.each(function(child) {
+                el.appendChild(child);
+            }) : el.appendChild(target);
+        });
+    }, fn.empty = function() {
+        return this.each(function(el) {
+            for (;el.firstChild; ) el.removeChild(el.firstChild);
+        });
+    }, fn.eq = function(idx) {
+        return new Selector(idx >= this.length ? [] : [ this[idx] ]);
+    }, fn.find = function(selector) {
+        var result = [];
+        return this.each(function(el) {
+            Array.prototype.push.apply(result, el.querySelectorAll(selector));
+        }), new Selector(result);
+    }, fn.parent = function() {
+        var result = [];
+        return this.each(function(el) {
+            result.push(el.parentNode);
+        }), new Selector(result);
+    }, fn.first = function() {
+        return new Selector(this.length ? [ this[0] ] : []);
+    }, fn.last = function() {
+        return new Selector(this.length ? [ this[this.length - 1] ] : []);
+    }, fn.clone = function() {
+        var result = [];
+        return this.each(function(el) {
+            result.push(el.cloneNode(!0));
+        }), new Selector(result);
+    }, fn.width = function() {
+        return this.length ? this[0].getBoundingClientRect().width : _undefind;
+    }, fn.height = function() {
+        return this.length ? this[0].getBoundingClientRect().height : _undefind;
+    }, fn.position = function() {
+        if (this.length) {
+            var clientRect = this[0].getBoundingClientRect();
+            return {
+                top: clientRect.top,
+                right: clientRect.right,
+                bottom: clientRect.bottom,
+                left: clientRect.left
+            };
+        }
+        return _undefind;
+    };
+    var defaultAnim = {
+        "class": "anim",
+        begin: "indefinite"
+    }, anim = function(anim) {
+        return $("<animate/>").attr(anim);
+    };
+    fn.animate = function(anims) {
+        var callbacks = [], thenable = {
+            then: function(complete) {
+                return callbacks.push(complete), thenable;
+            }
+        };
+        return anims = $.extend({}, defaultAnim, anims), this.each(function(el) {
+            var $el = $(el), $anim = $el.find(".anim");
+            $anim.length ? $anim.attr(anims) : ($el.append(anim(anims)[0]), $anim = $el.find(".anim")), 
+            el.timerId = setTimeout(function() {
+                $el.attr(anims.attributeName, anims.to), $el.removeAttr("animated"), callbacks.forEach(function(c) {
+                    c();
+                }), callbacks = [];
+            }, 1e3 * parseFloat(anims.dur)), $el.attr("animated", !0), $anim[0].beginElement();
+        }), thenable;
+    };
+    var animDelay = 62.5;
+    fn.move = function(anims) {
+        return this.each(function(el) {
+            function tick() {
+                if (!el.paused) {
+                    var cur = from + step;
+                    (to > from ? to >= cur : cur >= to) ? ($el.attr(property, cur), from = cur) : clearInterval(timer);
+                }
+            }
+            var property = anims.attributeName, dur = anims.dur, to = parseInt(anims.to), $el = $(el), from = parseInt($el.attr(property)), step = (to - from) / (1e3 * dur / animDelay);
+            el.timer = setInterval(tick, animDelay);
+        });
+    };
+    var defaultTrf = {
+        "class": "trf",
+        type: "translate",
+        dur: "0.3",
+        calcMode: "spline",
+        keySplines: "0.215 0.61 0.355 1",
+        additive: "replace",
+        attributeName: "transform",
+        begin: "indefinite",
+        keyTimes: "0; 1"
+    }, trf = function(trf) {
+        return $("<animateTransform/>").attr(trf);
+    };
+    fn.transform = function(trfs) {
+        var callbacks = [], thenable = {
+            then: function(complete) {
+                return callbacks.push(complete), thenable;
+            }
+        };
+        return trfs = $.extend({}, defaultTrf, trfs), this.each(function(el) {
+            var $el = $(el), $anim = $el.find(".trf");
+            $anim.length ? $anim.attr(trfs) : ($el.append(trf(trfs)[0]), $anim = $el.find(".trf")), 
+            el.timerId = setTimeout(function() {
+                $el.attr("transform", trfs.type + "(" + trfs.to + ")"), $el.removeAttr("animated"), 
+                callbacks.forEach(function(c) {
+                    c();
+                }), callbacks = [];
+            }, 1e3 * parseFloat(trfs.dur) - 20), $el.attr("animated", !0), $anim[0].beginElement();
+        }), thenable;
+    }, fn.stop = function() {
+        return this.each(function(el) {
+            $(el).find(".anim, .trf").each(function(anim) {
+                anim.endElement();
+            }), clearTimeout(el.timerId), clearInterval(el.timer);
+        });
+    }, fn.pause = function() {
+        return $("svg")[0].pauseAnimations(), this.each(function(el) {
+            el.paused = !0;
+        });
+    }, fn.resume = function() {
+        return $("svg")[0].unpauseAnimations(), this.each(function(el) {
+            el.paused = !1;
+        });
+    };
+    var tag = /^<(.+)\/>$/;
+    return $.extend = function(target) {
+        for (var obj, properties, i = 1, l = arguments.length; l > i; i++) {
+            obj = arguments[i], properties = Object.keys(obj);
+            for (var property, j = properties.length; j--; ) property = properties[j], target[property] = obj[property];
+        }
+        return target;
+    }, $.inherit = function(child, parent) {
+        function ctor() {
+            this.constructor = child, this.__super__ = parent.prototype;
+        }
+        return ctor.prototype = parent.prototype, child.prototype = new ctor(), child;
+    }, $.mixin = function(plagin) {
+        $.extend(fn, plagin);
+    }, $.timestamp = 1400668550599, $.load = function(url, complete) {
+        url = url + "?q=" + $.timestamp;
+        var result = localStorage.getItem(url);
+        if (null == result) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, !0), xhr.onload = function() {
+                localStorage.setItem(url, xhr.responseText), complete(xhr.responseText);
+            }, xhr.send();
+        } else complete(result);
+    }, $.rand = function(min, max) {
+        return min + Math.floor(Math.random() * (max - min + 1));
+    }, $;
+}(), 
+
+Core = function() {
+    var scope = {
+        apiUrl: "ws://srv5.kakaranet.com:8080/ws/",
+        gameId: 1000001,
+        defaultSessionId: "7hc6Vl0CpxvngjiQQWDspxUtKmhF1zCbT155+M73XhFcKw9e6jkNWLSLM8up4ZQbSUGJXKOphb0YNu4yDRKZkbkiyY1yZukqXFj4nAfvSUNuWx0352VWfLlKZWldHb1na7d7sA==",
+        CARD_SOURCE: "svg/card.svg",
+        CARD_SMALL_SOURCE: "svg/card-small.svg",
+        CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
+        SKIN_NAMES: [ "alina", "gabrielo", "mustafa" ]
+    };
+    return function(module) {
+        module(scope);
+    };
+}();
+
+Core(function(scope) {
+    function Controller() {
+        this.proxyAll(), this.refreshElements();
+    }
+    var isIE = window.navigator.msPointerEnabled;
+    $.extend(Controller.prototype, {
+        proxy: function(func) {
+            return func.bind(this);
+        },
+        proxyAll: function() {
+            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
+            this[method] = this.proxy(this[method]);
+        },
+        withDelay: function(func, timeout) {
+            return setTimeout(this.proxy(func), timeout || 0);
+        },
+        $: function(selector) {
+            return this.$el.find(selector);
+        },
+        refreshElements: function() {
+            if (this.elements) for (var element in this.elements) this[element] = this.$(this.elements[element]);
+        },
+        on: function(eventType, handler) {
+            return this.$el.on(eventType, handler), this;
+        },
+        off: function(eventType, handler) {
+            return this.$el.off(eventType, handler), this;
+        },
+        clientX: function(e) {
+            return isIE ? e.pageX : document.createTouch ? e.changedTouches[0].clientX : e.clientX;
+        },
+        clientY: function(e) {
+            return isIE ? e.pageY : document.createTouch ? e.changedTouches[0].clientY : e.clientY;
+        },
+        intersect: function(x, y) {
+            var pos = this.$el.position();
+            return pos.top < y && pos.bottom > y && pos.left < x && pos.right > x;
+        }
+    }), scope.Controller = Controller;
+}), 
+
+Core(function(scope) {
+    function ApiProvider(options) {
+        options = options || {}, this.url = options.url, this.sessionId = options.sessionId, 
+        this.gameId = options.gameId, this.proxies = [ "init", "handleMessage", "actionTake" ], 
+        this.proxyAll(), this.socket = new WebSocket(this.url), this.$socket = $(this.socket), 
+        this.$socket.on("open", this.init), this.$socket.on("message", this.handleMessage);
+    }
+    var eventMap = [ "okey_game_info", "okey_game_started", "okey_game_player_state", "okey_next_turn", "okey_tile_discarded", "okey_tile_taken", "okey_revealed", "player_left", "game_paused" ], 
+    session = /\('session_attach'\),'([^)]+)'\)/, 
+    userName = /document.user\s?=\s?'([^']+)'/;
+    $.extend(ApiProvider.prototype, {
+        proxy: function(func) {
+            return func.bind(this);
+        },
+        proxyAll: function() {
+            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
+            this[method] = this.proxy(this[method]);
+        },
+        on: function(eventType, handler) {
+            this.$socket.on(eventType, handler);
+        },
+        off: function(eventType, handler) {
+            this.$socket.off(eventType, handler);
+        },
+        init: function() {
+            this.socket.send([ "N2O", "" ]), setInterval(this.proxy(function() {
+                this.socket.send("PING");
+            }), 4e3);
+        },
+        handleMessage: function(e) {
+            var msg = JSON.parse(e.data);
+            if (msg.eval) {
+                var curSession, user;
+                (curSession = session.exec(msg.eval)) && (this.sessionId = curSession[1]), (user = userName.exec(msg.eval)) && (scope.user = user[1]);
+            }
+            msg.data ? (msg = dec(msg.data), this.emitEvent(this.beutify(this.parse(msg)))) : msg.eval && (this.socket.send(enc(tuple(atom("client"), tuple(atom("session_attach"), this.sessionId)))), 
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("join_game"), this.gameId)))));
+        },
+        parse: function(msg) {
+            if (Array.isArray(msg)) {
+                if (msg.every(function(el, i) {
+                    return i % 2 == 0 || Object(el.value) === el.value;
+                }) || msg.length % 2 != 0) {
+                    for (var result = [], i = 0, l = msg.length; l > i; i++) result.push(this.parse(msg[i]));
+                    return result;
+                }
+                if (msg.length > 2 && msg.every(function(el) {
+                    return null != el && "object" != typeof el || null != el.value && "object" != typeof el.value;
+                })) {
+                    var result = {};
+                    return result[this.parse(msg[0])] = this.parse(msg.slice(1)), result;
+                }
+                for (var result = {}, i = 0, l = msg.length; l > i; i += 2) {
+                    {
+                        this.parse(msg[i]);
+                    }
+                    result[this.parse(msg[i])] = this.parse(msg[i + 1]);
+                }
+                return result;
+            }
+            return msg.value && Object(msg.value) === msg.value && msg.value[0] && msg.value.length ? this.parse(msg.value[0]) : null != msg.value ? msg.value : msg;
+        },
+        beutify: function(msg) {
+            var result = {};
+            for (var prop in msg) {
+                var tempObj = msg[prop];
+                if (Array.isArray(tempObj)) {
+                    for (var obj, i = tempObj.length; i--; ) if (obj = tempObj[i], Array.isArray(obj)) result[obj[0]] = obj[1]; else if (Object(obj) === obj) for (var p in obj) result[p] = obj[p]; else result[i] = obj;
+                    msg[prop] = result;
+                }
+            }
+            return msg;
+        },
+        emitEvent: function(msg) {
+            for (var event, i = eventMap.length; i--; ) event = eventMap[i], msg[event] && this.$socket.trigger(event, {
+                detail: msg[event]
+            });
+        },
+        actionTake: function(card) {
+            var from = null != card.value ? 1 : 0;
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_take"), {
+                pile: from
+            }))));
+        },
+        actionDiscard: function(card) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_discard"), {
+                tile: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value)
+            }))));
+        },
+        reveal: function(card, hand) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_reveal"), {
+                discarded: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value),
+                hand: hand
+            }))));
+        },
+        pause: function(resume) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("pause_game"), atom("undefined"), this.gameId, atom(resume ? "resume" : "pause")))));
+        }
+    }), scope.ApiProvider = ApiProvider;
+}), 
+
+Core(function(scope) {
+    function culcShift() {
+        sizeX = $svg[0].viewBox.baseVal.width / innerWidth, sizeY = $svg[0].viewBox.baseVal.height / innerHeight, 
+        size = Math.max(sizeX, sizeY) || 1;
+    }
+    function Draggable(root, options) {
+        options = options || {}, this.$el = $(root), this.revert = options.revert, this.elements = {}, 
+        this.proxies = [ "onDown", "onMove", "onUp" ], this.__super__.constructor.call(this), 
+        this.enable();
+    }
+    var sizeX, sizeY, size, moved, $svg = $("svg");
+    culcShift(), $(window).on("resize", culcShift), $(window).on("orientationchange", culcShift), 
+    $.inherit(Draggable, scope.Controller), $.extend(Draggable.prototype, {
+        storeTrf: function() {
+            var trf = this.$el.attr("transform");
+            this.initTrf = trf ? trf.slice(10, -1).split(/\s+/) : [ 0, 0 ];
+        },
+        disable: function() {
+            this.$el.off(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.css({
+                cursor: "default"
+            });
+        },
+        enable: function() {
+            this.$el.on(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;");
+        },
+        onDown: function(e, silent) {
+            e.preventDefault(), moved || (moved = !1, this.$el.attr("style", "cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"), 
+            this.$el[0].parentNode.appendChild(this.$el[0]), this.x = this.clientX(e), this.y = this.clientY(e), 
+            this.trf = this.$el.attr("transform"), this.trf && (this.trf = this.trf.slice(10, -1).split(/\s+/)), 
+            this.storeTrf(), silent || (document.createTouch ? (this.$el.on("touchmove", this.onMove), 
+            this.$el.on("touchend", this.onUp)) : ($("body").on("mousemove", this.onMove), $("body").on("mouseup", this.onUp)), 
+            this.$el.trigger("dragstart")));
+        },
+        onMove: function(e, silent) {
+            e.preventDefault(), moved = !0, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
+            this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0], 
+            this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"), 
+            silent || this.$el.trigger("dragmove", {
+                detail: {
+                    x: this.curX,
+                    y: this.curY,
+                    event: e
+                }
+            });
+        },
+        onUp: function(e, silent) {
+            if (e.preventDefault(), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"), 
+            moved) {
+                for (var droped, item, dropList = scope.Droppable.list, i = 0, l = dropList.length; l > i; i++) if (item = dropList[i], 
+                item.intersect(this.curX, this.curY)) {
+                    droped = item.drop(this, this.curX, this.curY);
+                    break;
+                }
+                droped || (this.$el.transform({
+                    from: [ this.dx, this.dy ].join(" "),
+                    to: this.initTrf.join(" ")
+                }), silent || this.$el.trigger("revert")), silent || this.$el.trigger("dragstop", {
+                    detail: {
+                        x: this.curX,
+                        y: this.curY,
+                        event: e
+                    }
+                }), moved = !1;
+            }
+            document.createTouch ? (this.$el.off("touchmove", this.onMove), this.$el.off("touchend", this.onUp)) : ($("body").off("mousemove", this.onMove), 
+            $("body").off("mouseup", this.onUp));
+        }
+    }), 
+	scope.Draggable = Draggable, 
+	$.mixin({
+        draggable: function() {
+            return this.each(function(el) {
+                new Draggable(el);
+            });
+        }
+    });
+}), 
+
+Core(function(scope) {
+    function Droppable(root, options) {
+        options = options || {}, this.$el = $(root), this.accept = options.accept || function() {
+            return !0;
+        }, this.onDrop = options.drop || function() {}, this.elements = {}, this.proxies = [], 
+        this.__super__.constructor.call(this), this.activate();
+    }
+    Droppable.list = [], $.inherit(Droppable, scope.Controller), $.extend(Droppable.prototype, {
+        drop: function(target, x, y) {
+            return this.accept(target, x, y) ? (this.onDrop(target, x, y), !0) : !1;
+        },
+        activate: function() {
+            Droppable.list.push(this);
+        },
+        release: function() {
+            var i;
+            ~(i = Droppable.list.indexOf(this)) && Droppable.list.splice(i, 1);
+        }
+    }), 
+    scope.Droppable = Droppable, 
+    $.mixin({
+        droppable: function(options) {
+            return this.each(function(el) {
+                new Droppable(el, options);
+            });
+        }
+    });
+}), 
+
+Core(function(scope) {
+    function Timer(root, options) {
+        options = options || {}, this.duration = options.duration, this.curTime = this.duration, 
+        this.$el = $(root), this.elements = {
+            $value: "#value",
+            $progress: "#progress"
+        }, this.proxies = [ "tick" ], this.__super__.constructor.call(this), this.$value.text(this.duration), 
+        defHeight = this.$progress.attr("height");
+    }
+    var defHeight;
+    $.inherit(Timer, scope.Controller), $.extend(Timer.prototype, {
+        from: function(time) {
+            this.$value.text(this.curTime = Math.round(time / 1e3));
+        },
+        start: function() {
+            this.$progress.move({
+                attributeName: "height",
+                to: "0",
+                dur: this.curTime
+            }), this.timerId = this.withDelay(this.tick, 1e3);
+        },
+        tick: function() {
+            return this.paused ? void (this.timerId = this.withDelay(this.tick, 1e3)) : void (this.curTime-- > 0 && (this.$value.text(this.curTime), 
+            this.timerId = this.withDelay(this.tick, 1e3)));
+        },
+        reset: function() {
+            this.$progress.stop().attr({
+                height: defHeight
+            }), this.$value.text(this.curTime = this.duration), clearTimeout(this.timerId);
+        },
+        pause: function() {
+            this.paused = !0, this.$progress.pause();
+        },
+        resume: function() {
+            this.paused = !1, this.$progress.resume();
+        }
+    }), 
+	scope.Timer = Timer;
+}), 
+
+Core(function(scope) {
+    function Player(options) {
+        options = options || {}, this.name = options.name, this.position = options.position, 
+        this.noSkin = options.noSkin, this.skin = options.skin || scope.SKIN_NAMES[$.rand(0, scope.SKIN_NAMES.length - 1)], 
+        this.$el = $("#player-" + this.position), this.elements = {
+            $timer: "#timer",
+            $name: "#name",
+            $nameWrapper: "#name rect",
+            $nameText: "#name text"
+        }, this.proxies = [ "loadSkin" ], this.__super__.constructor.call(this), this.$el.show(), 
+        this.$timer.hide(), this.$name.show(), this.$nameText.text(this.name);
+        var nameWrapperWidth = this.$nameText.width() / $("#Page-1").width() * 100 + 2 * (this.$nameText.position().left - this.$nameWrapper.position().left) / $("#Page-1").width() * 100;
+        this.$nameWrapper.attr({
+            width: nameWrapperWidth + "%"
+        }), this.initTimer(), "me" == this.position || this.noSkin || $.load("svg/" + [ "person", this.position, this.skin ].join("-") + ".svg", this.loadSkin);
+    }
+    $.inherit(Player, scope.Controller), $.extend(Player.prototype, {
+        loadSkin: function(result) {
+            var $result = $("<g/>").html(result);
+            this.$el.append($result[0].firstChild), this.unselect();
+        },
+        initTimer: function() {
+            this.timer = new scope.Timer(this.$timer, {
+                duration: 30
+            });
+        },
+        select: function() {
+            this.$nameWrapper.attr({
+                fill: "#517ECE"
+            }), this.$nameText.attr({
+                fill: "#FFFFFF"
+            }), this.$timer.show(), this.$("#Selection").show(), this.timer.start();
+        },
+        unselect: function() {
+            this.$nameWrapper.attr({
+                fill: "#FFFFFF"
+            }), this.$nameText.attr({
+                fill: "#48AF5E"
+            }), this.$timer.hide(), this.$("#Selection").hide(), this.timer.reset();
+        }
+    }), scope.Player = Player;
+}), 
+
+Core(function(scope) {
+    function Hand(root, options) {
+        options = options || {}, this.$el = $(root), this.elements = {
+            $topCard: "#top-card",
+            $rollUp: "#roll-up",
+            $rollDown: "#roll-down",
+            $container: "#container",
+            $back: "#back",
+            $cards: "#cards"
+        }, this.proxies = [ "show", "hide" ], this.__super__.constructor.call(this), this.$rollUp.on("click", this.show), 
+        this.$rollDown.on("click", this.hide), this.cards = [];
+    }
+    var trfsMap = [ {
+        backHeight: 74,
+        containerTrf: "0 -44",
+        cardTrf: "0 -38"
+    }, {
+        backHeight: 124,
+        containerTrf: "0 -94",
+        cardTrf: "0 -89"
+    }, {
+        backHeight: 174,
+        containerTrf: "0 -144",
+        cardTrf: "0 -139"
+    } ], 
+    defCardTrf = "0 20";
+    $.inherit(Hand, scope.Controller), $.extend(Hand.prototype, {
+        take: function() {
+            var card = this.cards.pop();
+            return this.render(), card && card.$el.remove(), card;
+        },
+        discard: function(tile) {
+            var card = new scope.Card({
+                color: scope.CARD_COLORS[tile[1] - 1],
+                value: tile[2]
+            });
+            this.cards.push(card), this.render(), card.drag(), card.dragHandler.disable(), this.$topCard.append(card.$el[0]);
+        },
+        pop: function() {
+            this.cards.pop(), this.render();
+        },
+        show: function() {
+            var count = this.cards.length - 1;
+            count > 0 && (this.$container.transform({
+                to: trfsMap[4 > count ? count - 1 : 2].containerTrf,
+                from: "0 50",
+                dur: .355,
+                calcMode: "linear"
+            }), this.$back.animate({
+                attributeName: "height",
+                to: trfsMap[4 > count ? count - 1 : 2].backHeight,
+                dur: .355
+            }), this.$cards.find("g").each(function(el, i) {
+                3 > i && $(el).transform({
+                    to: trfsMap[i].cardTrf,
+                    from: "0 20",
+                    dur: .6,
+                    calcmode: "linear"
+                });
+            }), this.shown = !0);
+        },
+        hide: function() {
+            var count = this.cards.length - 1;
+            count > 0 && (this.$container.transform({
+                to: "0 50",
+                from: trfsMap[4 > count ? count - 1 : 2].containerTrf,
+                dur: .5,
+                calcMode: "linear"
+            }), this.$back.animate({
+                attributeName: "height",
+                to: 0,
+                dur: .5
+            }), this.$cards.find("g").each(function(el, i) {
+                3 > i && $(el).transform({
+                    to: defCardTrf,
+                    from: trfsMap[4 > count ? count - 1 : 2].cardTrf,
+                    dur: .6,
+                    calcmode: "linear"
+                });
+            }), this.shown = !1);
+        },
+        render: function() {
+            var history = this.cards.slice(0, this.cards.length - 1);
+            this.$cards.empty(), this.shown && this.hide(), history.reverse().forEach(function(card) {
+                card = card.clone(), card.template(scope.CARD_SMALL_SOURCE), card.$el.attr("transform", "translate(" + defCardTrf + ")"), 
+                this.$cards.append(card.$el[0]);
+            }, this);
+        },
+        clear: function() {
+            this.cards.forEach(function(card) {
+                card.$el.remove();
+            }), this.cards = [], this.render();
+        }
+    }), scope.Hand = Hand;
+}), 
+
+Core(function(scope) {
+    function Card(options) {
+        options = options || {}, this.value = options.value, this.color = options.color, 
+        this.selected = !1, this.pos = {}, this.elements = {
+            $circle: "circle",
+            $text: "text",
+            $overlay: ".overlay"
+        }, this.proxies = [ "toggle", "selectGroup", "dragGroup", "clearGroup", "revertGroup" ], 
+        this.template(scope.CARD_SOURCE), this.$el.on("mousedown", this.toggle), this.$el.on("revert", this.revertGroup), 
+        this.$el.on("dragstop", this.clearGroup), this.$overlay.on("mousedown", this.selectGroup);
+    }
+    var selStart = !1;
+    $(window).on("keydown", function(e) {
+        e.ctrlKey && (selStart = !0);
+    }), $(window).on("keyup", function() {
+        selStart = !1;
+    }), Card.selected = [], Card.uncheckAll = function() {
+        for (var i = Card.selected.length; i--; ) Card.selected[i].uncheck();
+    }, $("body").on("mousedown", Card.uncheckAll), $.inherit(Card, scope.Controller), 
+    $.extend(Card.prototype, {
+        template: function(source) {
+            $.load(source, this.proxy(this.load));
+        },
+        load: function(result) {
+            this.$el = (this.$el || $("<g/>")).attr({
+                "class": "card"
+            }).css({
+                cursor: "default"
+            }).html(result), this.__super__.constructor.call(this), this.render();
+        },
+        render: function() {
+            null == this.value && null == this.color ? (this.$circle.hide(), this.$text.hide()) : 0 == this.value ? (this.$circle.hide(), 
+            this.$text.show().attr({
+                fill: this.color,
+                y: 36
+            }).text("*")) : (this.$circle.show().attr("fill", this.color), this.$text.show().attr("fill", this.color).text(this.value));
+        },
+        drag: function() {
+            this.dragHandler = new scope.Draggable(this.$el), this.dragHandler.owner = this;
+        },
+        centerX: function() {
+            var pos = this.$el.position(), width = this.$el.width();
+            return Math.round(pos.left + width / 2);
+        },
+        toggle: function(e) {
+            e.stopPropagation(), selStart ? this.nearSelectGroup() ? this.selected && !this.betweenSelected() ? this.uncheck() : this.check() : (Card.uncheckAll(), 
+            this.check()) : ~Card.selected.indexOf(this) || Card.uncheckAll();
+        },
+        check: function() {
+            this.$overlay.css("display", ""), this.selected = !0, deck.cards[this.pos.y][this.pos.x] = null, 
+            Card.selected.push(this);
+        },
+        uncheck: function() {
+            this.$overlay.css("display", "none"), this.selected = !1, deck.cards[this.pos.y][this.pos.x] = this;
+            var i;
+            ~(i = Card.selected.indexOf(this)) && Card.selected.splice(i, 1);
+        },
+        selectGroup: function(e) {
+            if (!selStart) {
+                for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+                card != this && card.dragHandler.onDown(e, !0);
+                this.$el.on("dragmove", this.dragGroup);
+            }
+        },
+        dragGroup: function(e) {
+            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+            card != this && card.dragHandler.onMove(e.detail.event, !0);
+        },
+        clearGroup: function() {
+            this.$el.off("dragmove", this.dragGroup), selStart || Card.uncheckAll();
+        },
+        nearSelectGroup: function() {
+            return Card.selected.some(function(card) {
+                return Math.abs(card.pos.x - this.pos.x) <= 1 && card.pos.y == this.pos.y;
+            }, this);
+        },
+        betweenSelected: function() {
+            Card.selected.sort(function(a, b) {
+                return (a.pos.x < b.pos.x) - (b.pos.x < a.pos.x);
+            });
+            var idx = Card.selected.indexOf(this);
+            return -1 != idx && 0 != idx && idx != Card.selected.length - 1;
+        },
+        revertGroup: function() {
+            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+            card != this && card.$el.transform({
+                from: [ card.dragHandler.dx, card.dragHandler.dy ].join(" "),
+                to: card.dragHandler.initTrf.join(" ")
+            }), scope.deck.cards[card.pos.y][card.pos.x] = card;
+        },
+        clone: function() {
+            return new Card({
+                color: this.color,
+                value: this.value
+            });
+        },
+        log: function() {}
+    }), scope.Card = Card;
+}), 
+
+Core(function(scope) {
+    function Deck(root, options) {
+        options = options || {}, this.$el = $(root), this.elements = {
+            $dropPlace: "#deck"
+        }, this.proxies = [ "select", "track", "place" ], this.cards = [ [], [] ], this.trfs = [ [], [] ], 
+        this.__super__.constructor.call(this), this.$dropPlace.droppable({
+            accept: this.place
+        });
+    }
+    var padding = {
+        top: 5,
+        left: 5
+    };
+    $.inherit(Deck, scope.Controller);
+    var prevX, prevY, selected;
+    $.extend(Deck.prototype, {
+        each: function(callback) {
+            for (var i = 0; 15 > i; i++) for (var j = 0; 2 > j; j++) if (callback.call(this, this.cards[j][i], i, j) === !1) return;
+        },
+        fill: function(tiles) {
+            var count = 0;
+            this.each(function(c, i, j) {
+                if (null != c && (this.cards[j][i] = null, c.$el.remove()), 0 == j && count < tiles.length) {
+                    var tile = tiles[count], card = new scope.Card({
+                        color: scope.CARD_COLORS[tile[1] - 1],
+                        value: tile[2]
+                    });
+                    card.pos = {
+                        x: i,
+                        y: j
+                    }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
+                    count++;
+                }
+                this.trfs[j][i] = {
+                    x: 42 * i + padding.left,
+                    y: 71 * j + padding.top
+                };
+            });
+        },
+        render: function() {
+            this.each(function(card, i, j) {
+                null != card && (card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
+                card.drag(), this.$el.append(card.$el[0]));
+            });
+        },
+        track: function(e) {
+            this.each(function(card, i, j) {
+                if (card && card.$el[0] != e.target && card.intersect(e.detail.x, e.detail.y) && !card.$el.attr("animated") && scope.Card.selected.length < 2) {
+                    var shift = e.detail.x > card.centerX() ? i + 1 : i - 1;
+                    return shift = shift > 14 ? shift - 2 : shift, shift = 0 > shift ? shift + 2 : shift, 
+                    prevX = i, prevY = j, this.move({
+                        i: i,
+                        j: j
+                    }, {
+                        i: shift,
+                        j: j
+                    }), !1;
+                }
+            });
+        },
+        move: function(fst, snd) {
+            var card, trfs = this.trfs, i = snd.i, cond = function(i) {
+                return fst.i < snd.i ? 14 >= i : i >= 0;
+            }, _cond = function(j, i) {
+                return fst.i < snd.i ? i > j : j > i;
+            }, op = function() {
+                fst.i < snd.i ? i++ : i--;
+            }, _op = function() {
+                fst.i < snd.i ? j++ : j--;
+            }, direction = function(j) {
+                return fst.i < snd.i ? j + (scope.Card.selected.length || 1) : j - (scope.Card.selected.length || 1);
+            }, _direction = function(j) {
+                return fst.i < snd.i ? j - 1 : j + 1;
+            };
+            if (scope.Card.selected.length < 2) for (;cond(i); op()) if (null == this.cards[snd.j][i] || this.cards[snd.j][i] == selected) {
+                for (var j = _direction(i); _cond(j, i); _op()) card = this.cards[fst.j][j], card != selected && (card.$el.transform({
+                    from: [ trfs[fst.j][j].x, trfs[fst.j][j].y ].join(" "),
+                    to: [ trfs[fst.j][direction(j)].x, trfs[fst.j][direction(j)].y ].join(" ")
+                }), selected && (selected.dragHandler.initTrf = [ trfs[fst.j][j].x, trfs[fst.j][j].y ]), 
+                ((this.cards[fst.j][j] = this.cards[fst.j][direction(j)]) || {}).pos = {
+                    x: j,
+                    y: fst.j
+                }, (this.cards[fst.j][direction(j)] = card).pos = {
+                    x: direction(j),
+                    y: fst.j
+                });
+                break;
+            }
+        },
+        select: function(e) {
+            selected = null, this.each(function(card) {
+                return card && card.$el[0] == e.target ? (selected = card, !1) : void 0;
+            });
+        },
+        place: function(target, x, y) {
+            var trfs = this.trfs, pos = this.$dropPlace.position(), width = this.$dropPlace.width(), height = this.$dropPlace.height(), placeWidth = Math.round(width / 15), placeHeight = Math.round(height / 2), truePosX = Math.floor((x - pos.left) / placeWidth), posY = Math.floor((y - pos.top) / placeHeight);
+            scope.Card.selected.sort(function(a, b) {
+                return (a.pos.x > b.pos.x) - (b.pos.x > a.pos.x);
+            });
+            var dropResult, idx = scope.Card.selected.indexOf(target.owner), cards = scope.Card.selected.length ? scope.Card.selected.concat() : [ target.owner ];
+            if (cards.every(function(card, i) {
+                return posX = truePosX + (i - idx) * (card != target.owner), null == this.cards[posY][posX] || this.cards[posY][posX] == card;
+            }, this)) for (var card, i = 0, l = cards.length; l > i; i++) card = cards[i], posX = truePosX + (i - idx) * (card != target.owner), 
+            (dropResult = null == this.cards[posY][posX] || this.cards[posY][posX] == selected) && (this.cards[posY][posX] != card && (null != card.pos.x && null != card.pos.y ? this.cards[card.pos.y][card.pos.x] = this.cards[card.pos.y][card.pos.x] == card ? null : this.cards[card.pos.y][card.pos.x] : (this.$el.trigger("take", {
+                detail: {
+                    card: card
+                }
+            }), this.justTaken = !0), (this.cards[posY][posX] = card).pos = {
+                x: posX,
+                y: posY
+            }), function(card) {
+                card.$el.transform({
+                    from: card.$el.attr("transform").slice(10, -1),
+                    to: [ trfs[posY][posX].x, trfs[posY][posX].y ].join(" ")
+                }).then(function() {
+                    card.dragHandler.storeTrf();
+                });
+            }(card));
+            return dropResult;
+        },
+        remove: function(tile) {
+            return selected && selected.color == scope.CARD_COLORS[tile[1] - 1] && selected.value == tile[2] ? (this.cards[selected.pos.y][selected.pos.x] = null, 
+            selected.$el.remove(), selected.off("dragmove", this.track), !1) : void this.each(function(card, i, j) {
+                return card && card.color == scope.CARD_COLORS[tile[1] - 1] && card.value == tile[2] ? (this.cards[j][i] = null, 
+                card.$el.remove(), card.off("dragmove", this.track), !1) : void 0;
+            });
+        },
+        insert: function(tile) {
+            this.justTaken ? this.justTaken = !1 : this.each(function(card, i, j) {
+                return card ? void 0 : (card = new scope.Card({
+                    color: scope.CARD_COLORS[tile[1] - 1],
+                    value: tile[2]
+                }), card.pos = {
+                    x: i,
+                    y: j
+                }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
+                card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
+                card.drag(), this.$el.append(card.$el[0]), !1);
+            });
+        },
+        length: function() {
+            var count = 0;
+            return this.each(function(card) {
+                null != card && (count += 1);
+            }), count;
+        },
+        hand: function(discarded) {
+            return result = [ [], [] ], this.each(function(card, i, j) {
+                card && card != discarded && result[j].push(tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value));
+            }), result;
+        },
+        dir: function() {
+            for (var i = 0; 15 > i; i++) this.cards[0][i] && this.cards[0][i].log();
+            for (var i = 0; 15 > i; i++) this.cards[1][i] && this.cards[1][i].log();
+        }
+    }), scope.deck = new Deck("#deck-root");
+}), 
+
+Core(function(scope) {
+    $.load(scope.CARD_SOURCE, function() {
+        function fadeOut() {
+            $(this).animate({
+                attributeName: "opacity",
+                from: 1,
+                to: 0,
+                dur: .3
+            });
+        }
+        function fadeIn() {
+            $(this).animate({
+                attributeName: "opacity",
+                from: 0,
+                to: 1,
+                dur: .3
+            });
+        }
+        function addFadeOut() {
+            $(this).on(document.createTouch ? "touchend" : "mouseup", fadeOut);
+        }
+        function removeFadeOut() {
+            $(this).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+        }
+        function createCentralCard() {
+            centralCard = new scope.Card(), centralCard.$el.attr({
+                opacity: 0,
+                transform: "translate(298 -115)"
+            }).on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
+            centralCard.drag(), centralCard.dragHandler.enable(), centralCard.on("dragstart", deck.select).on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("dragmove", deck.track).on("revert", fadeOut), 
+            deck.$el.append(centralCard.$el[0]);
+        }
+        function init(e) {
+            if (ended = !1, scope.deck.fill(e.detail.tiles), scope.deck.render(), centralCard.dragHandler.disable(), 
+            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut), 
+            e.detail.gosterge && "null" != e.detail.gosterge) {
+                var gosterge = new scope.Card({
+                    color: scope.CARD_COLORS[e.detail.gosterge[1] - 1],
+                    value: e.detail.gosterge[2]
+                });
+                gosterge.$el.attr("transform", "translate(16 0)"), $gosterge.append(gosterge.$el);
+            }
+            var piles = e.detail.piles;
+            if (piles && "null" != piles) for (var i = 0; i < piles.length, pile; i++) {
+                pile = piles[i];
+                for (var name in pile) for (var playerPile = pile[name], hand = playersLeftHandsMap[name], j = playerPile.length; j--; ) hand.discard(playerPile[j]);
+            }
+            e.detail.whos_move && "null" != e.detail.whos_move && (e.detail.next_turn_in && "null" != e.detail.next_turn_in && playersMap[e.detail.whos_move].timer.from(e.detail.next_turn_in), 
+            e.detail.paused && (playersMap[e.detail.whos_move].timer.pause(), $overlay.show()), 
+            playersMap[e.detail.whos_move].select());
+        }
+        window.deck = scope.deck;
+        var centralCard, apiProvider = new scope.ApiProvider({
+            url: scope.apiUrl,
+            gameId: scope.gameId,
+            sessionId: scope.defaultSessionId
+        });
+        createCentralCard(), deck.on("take", function(e) {
+            e.detail.card.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut), 
+            centralCard.off("dragmove", removeFadeOut).off("dragstop", addFadeOut).off("revert", fadeOut), 
+            ~playersLeftHandsMap[scope.user].cards.indexOf(e.detail.card) && playersLeftHandsMap[scope.user].pop(), 
+            apiProvider.actionTake(e.detail.card);
+        });
+        var $gosterge = $("#gosterge"), ended = !0;
+        apiProvider.on("okey_game_started", init), apiProvider.on("okey_game_player_state", init);
+        var playersPositions = [ [ "me", "right", "center", "left" ], [ "left", "me", "right", "center" ], [ "center", "left", "me", "right" ], [ "right", "center", "left", "me" ] ], playersMap = {}, playersRightHandsMap = {}, playersLeftHandsMap = {};
+        apiProvider.on("okey_game_info", function(e) {
+            if (!scope.started) {
+                for (var playerInfo, players = e.detail.players, i = 0; i < players.length; i++) if (playerInfo = players[i].PlayerInfo, 
+                playerInfo[0] == scope.user) {
+                    playersPositions = playersPositions[i];
+                    break;
+                }
+                for (var playerInfo, i = 0, l = players.length; l > i; i++) {
+                    playerInfo = players[i].PlayerInfo, playersMap[playerInfo[0]] = playersMap[playerInfo[0]] || new scope.Player({
+                        position: playersPositions[i],
+                        name: [ playerInfo[2], playerInfo[3] ].join(" ")
+                    });
+                    var prevPlayer = i == players.length - 1 ? players[0] : players[i + 1];
+                    for (var prop in playersLeftHandsMap) playersLeftHandsMap[prop].clear();
+                    playersLeftHandsMap[prevPlayer.PlayerInfo[0]] = playersRightHandsMap[playerInfo[0]] = new scope.Hand("#" + [ "player", playersPositions[i], "hand" ].join("-")), 
+                    "me" == playersPositions[i] && playersRightHandsMap[playerInfo[0]].$el.droppable({
+                        accept: function() {
+                            return playerTurn && deck.length() > 14;
+                        },
+                        drop: function(target) {
+                            apiProvider.actionDiscard(target.owner);
+                        }
+                    });
+                }
+                scope.started = !0;
+            }
+        }), window.playersRightHandsMap = playersRightHandsMap, window.playersLeftHandsMap = playersLeftHandsMap;
+        var playerTurn = !1;
+        apiProvider.on("okey_next_turn", function(e) {
+            for (var playerName in playersMap) playersMap[playerName].unselect();
+            if (playersMap[e.detail.player].select(), e.detail.player == scope.user) {
+                playerTurn = !0;
+                var cards = playersLeftHandsMap[e.detail.player].cards;
+                if (cards.length) {
+                    var card = cards[cards.length - 1];
+                    deck.$el.append(card.$el[0]), card.$el.attr({
+                        transform: "translate(16 -65)"
+                    }), card.dragHandler.enable(), card.on("dragstart", deck.select), card.on("dragmove", deck.track);
+                }
+                deck.length() < 15 ? (centralCard.dragHandler.enable(), centralCard.$el.on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
+                centralCard.on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("revert", fadeOut)) : (centralCard.dragHandler.disable(), 
+                centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut));
+            } else playerTurn = !1, centralCard.dragHandler.disable(), centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+        }), apiProvider.on("okey_tile_discarded", function(e) {
+            if ("object" == typeof e.detail.tile) {
+                var c = new scope.Card({
+                    color: scope.CARD_COLORS[e.detail.tile[1] - 1],
+                    value: e.detail.tile[2]
+                });
+                c.log();
+            }
+            e.detail.player == scope.user && deck.remove(e.detail.tile), playersRightHandsMap[e.detail.player].discard(e.detail.tile);
+        });
+        var $pile = $("#pile"), $fullPile = $pile.find("g").clone(), $wholeCards = $("#whole-cards"), $fullWholeCards = $("#whole-cards > g").clone();
+        apiProvider.on("okey_tile_taken", function(e) {
+            if ("object" == typeof e.detail.revealed) {
+                var c = new scope.Card({
+                    color: scope.CARD_COLORS[e.detail.revealed[1] - 1],
+                    value: e.detail.revealed[2]
+                });
+                c.log();
+            }
+            if (e.detail.pile && !deck.justTaken && playersLeftHandsMap[e.detail.player].take(), 
+            0 === e.detail.pile && e.detail.player == scope.user && (centralCard.color = scope.CARD_COLORS[e.detail.revealed[1] - 1], 
+            centralCard.value = e.detail.revealed[2], centralCard.render(), createCentralCard()), 
+            0 === e.detail.pile) {
+                var $topCard = $pile.find("g");
+                if ($topCard.length > 1) $topCard.last().remove(); else {
+                    $topCard.last().remove(), $pile.append($fullPile);
+                    var $miniPile = $wholeCards.find("g");
+                    $miniPile.length ? $miniPile.first().remove() : $wholeCards.append($fullWholeCards);
+                }
+            }
+            e.detail.player == scope.user && deck.insert(e.detail.revealed), centralCard.dragHandler.disable(), 
+            centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
+            var cards = playersLeftHandsMap[scope.user].cards;
+            if (cards.length) {
+                var card = cards[cards.length - 1];
+                card.dragHandler.disable();
+            }
+        }), apiProvider.on("okey_revealed", function(e) {
+            ended = !0, alert(e.detail.player), deck.fill([]);
+            for (var hand in playersLeftHandsMap) playersLeftHandsMap[hand].clear();
+            for (var playerName in playersMap) playersMap[playerName].unselect();
+            $gosterge.remove();
+        }), apiProvider.on("player_left", function(e) {
+            var playerInfo = e.detail.replacement.PlayerInfo;
+            playersMap[playerInfo[0]] = new scope.Player({
+                position: playersMap[e.detail.player].position,
+                name: [ playerInfo[2], playerInfo[3] ].join(" "),
+                noSkin: !0
+            }), delete playersMap[e.detail.player], playersRightHandsMap[playerInfo[0]] = playersRightHandsMap[e.detail.player], 
+            delete playersRightHandsMap[e.detail.player], playersLeftHandsMap[playerInfo[0]] = playersLeftHandsMap[e.detail.player], 
+            delete playersLeftHandsMap[e.detail.player];
+        }), $("#pause").on("click", function() {
+            apiProvider.pause();
+        });
+        var whoPausedGame, $overlay = $("#overlay");
+        $overlay.on("click", function() {
+            whoPausedGame == scope.user && apiProvider.pause(!0);
+        }), apiProvider.on("game_paused", function(e) {
+            if (whoPausedGame = e.detail[3], "pause" == e.detail[2]) {
+                $overlay.show();
+                for (var player in playersMap) playersMap[player].timer.pause();
+                var player = playersMap[e.detail[3]];
+                $overlay.find("text").text(player.name + " paused the game");
+            } else {
+                $overlay.hide();
+                for (var player in playersMap) playersMap[player].timer.resume();
+            }
+        }), $("#table-ellipse").droppable({
+            accept: function(target) {
+                return 1 === apiProvider.socket.readyState && deck.length() > 14 && target.owner != centralCard && !ended && scope.Card.selected.length <= 1;
+            },
+            drop: function(target) {
+                apiProvider.reveal(target.owner, deck.hand(target.owner));
+            }
+        });
+    });
+    var leftFlag = !1;
+    $("#Left-Menu").css("cursor", "pointer").on("click", function() {
+        leftFlag ? ($("#Tournaments").transform({
+            to: "10 575",
+            from: "44 465"
+        }), $("#Promos").transform({
+            to: "10 575",
+            from: "122 538"
+        }), leftFlag = !1) : ($("#Tournaments").transform({
+            from: "10 575",
+            to: "44 465"
+        }), $("#Promos").transform({
+            from: "10 575",
+            to: "122 538"
+        }), leftFlag = !0);
+    });
+    var rightFlag = !1;
+    $("#Right-Menu").css("cursor", "pointer").on("click", function() {
+        rightFlag ? ($("#Play").transform({
+            to: "975 575",
+            from: "946, 461"
+        }), $("#Create").transform({
+            to: "975 575",
+            from: "864 526"
+        }), rightFlag = !1) : ($("#Play").transform({
+            from: "975 575",
+            to: "946, 461"
+        }), $("#Create").transform({
+            from: "975 575",
+            to: "864 526"
+        }), rightFlag = !0);
+    });
+});

+ 120 - 0
apps/web/priv/static/dart/js/okey/apiprovider.js

@@ -0,0 +1,120 @@
+
+Core(function(scope) {
+
+    function ApiProvider(options)
+    {
+        options = options || {};
+        this.url = options.url;
+        this.proxies = [ "init", "handleMessage", "actionTake" ], 
+        this.proxyAll();
+        this.socket = new WebSocket(this.url);
+        ws = this.socket;
+        this.$socket = $(this.socket);
+        this.$socket.on("open", this.init);
+        this.$socket.on("message", this.handleMessage);
+    }
+
+    var eventMap = [
+        "online_number",
+        "okey_game_info",
+        "okey_game_started",
+        "okey_game_player_state",
+        "okey_next_turn",
+        "okey_tile_discarded",
+        "okey_tile_taken",
+        "okey_revealed",
+        "player_left",
+        "game_paused" ];
+
+    $.extend(ApiProvider.prototype, {
+        proxy: function(func) {
+            return func.bind(this);
+        },
+        proxyAll: function() {
+            if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i], 
+            this[method] = this.proxy(this[method]);
+        },
+        on: function(eventType, handler) {
+            this.$socket.on(eventType, handler);
+        },
+        off: function(eventType, handler) {
+            this.$socket.off(eventType, handler);
+        },
+        init: function() {
+            this.socket.send([ "N2O", "" ]);
+            setInterval(this.proxy(function() { this.socket.send("PING"); }), 4e3);
+        },
+        handleMessage: function(e) {
+
+            var msg = JSON.parse(e.data);
+
+            if (msg.eval) { try{eval(msg.eval)}catch(e){console.log(e);} }
+            if (msg.data) { this.emitEvent(this.beutify(this.parse(dec(msg.data)))); }
+
+        },
+        parse: function(msg) {
+            if (Array.isArray(msg)) {
+                if (msg.every(function(el, i) {
+                    return i % 2 == 0 || Object(el.value) === el.value;
+                }) || msg.length % 2 != 0) {
+                    for (var result = [], i = 0, l = msg.length; l > i; i++) result.push(this.parse(msg[i]));
+                    return result;
+                }
+                if (msg.length > 2 && msg.every(function(el) {
+                    return null != el && "object" != typeof el || null != el.value && "object" != typeof el.value;
+                })) {
+                    var result = {};
+                    return result[this.parse(msg[0])] = this.parse(msg.slice(1)), result;
+                }
+                for (var result = {}, i = 0, l = msg.length; l > i; i += 2) {
+                    {
+                        this.parse(msg[i]);
+                    }
+                    result[this.parse(msg[i])] = this.parse(msg[i + 1]);
+                }
+                return result;
+            }
+            return msg.value && Object(msg.value) === msg.value && msg.value[0] && msg.value.length ? this.parse(msg.value[0]) : null != msg.value ? msg.value : msg;
+        },
+        beutify: function(msg) {
+            var result = {};
+            for (var prop in msg) {
+                var tempObj = msg[prop];
+                if (Array.isArray(tempObj)) {
+                    for (var obj, i = tempObj.length; i--; ) if (obj = tempObj[i], Array.isArray(obj)) result[obj[0]] = obj[1]; else if (Object(obj) === obj) for (var p in obj) result[p] = obj[p]; else result[i] = obj;
+                    msg[prop] = result;
+                }
+            }
+            return msg;
+        },
+        emitEvent: function(msg) {
+            console.log(JSON.stringify(msg));
+            for (var event, i = eventMap.length; i--; ) event = eventMap[i], msg[event] && this.$socket.trigger(event, {
+                detail: msg[event]
+            });
+        },
+        actionTake: function(card) {
+            var from = null != card.value ? 1 : 0;
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_take"), {
+                pile: from
+            }))));
+        },
+        actionDiscard: function(card) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_discard"), {
+                tile: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value)
+            }))));
+        },
+        reveal: function(card, hand) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_reveal"), {
+                discarded: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value),
+                hand: hand
+            }))));
+        },
+        pause: function(resume) {
+            this.socket.send(enc(tuple(atom("client"), tuple(atom("pause_game"), atom("undefined"), this.gameId, atom(resume ? "resume" : "pause")))));
+        }
+    }),
+
+    scope.ApiProvider = ApiProvider;
+});
+

+ 109 - 0
apps/web/priv/static/dart/js/okey/card.js

@@ -0,0 +1,109 @@
+Core(function(scope) {
+
+    function Card(options) {
+        options = options || {}, this.value = options.value, this.color = options.color, 
+        this.selected = !1, this.pos = {}, this.elements = {
+            $circle: "circle",
+            $text: "text",
+            $overlay: ".overlay"
+        }, this.proxies = [ "toggle", "selectGroup", "dragGroup", "clearGroup", "revertGroup" ], 
+        this.template(scope.CARD_SOURCE), this.$el.on("mousedown", this.toggle), this.$el.on("revert", this.revertGroup), 
+        this.$el.on("dragstop", this.clearGroup), this.$overlay.on("mousedown", this.selectGroup);
+    }
+
+    var selStart = !1;
+
+    $(window).on("keydown", function(e) { e.metaKey && (selStart = !0); });
+    $(window).on("keyup", function() { selStart = !1; });
+
+    Card.selected = [];
+    Card.uncheckAll = function() { for (var i = Card.selected.length; i--; ) Card.selected[i].uncheck(); };
+
+    $("body").on("mousedown", Card.uncheckAll);
+
+    $.inherit(Card, scope.Controller);
+
+    $.extend(Card.prototype, {
+        template: function(source) {
+            $.load(source, this.proxy(this.load));
+        },
+        load: function(result) {
+            this.$el = (this.$el || $("<g/>")).attr({
+                "class": "card"
+            }).css({
+                cursor: "default"
+            }).html(result), this.__super__.constructor.call(this), this.render();
+        },
+        render: function() {
+            null == this.value && null == this.color ? (this.$circle.hide(), this.$text.hide()) : 0 == this.value ? (this.$circle.hide(), 
+            this.$text.show().attr({
+                fill: this.color,
+                y: 36
+            }).text("*")) : (this.$circle.show().attr("fill", this.color), this.$text.show().attr("fill", this.color).text(this.value));
+        },
+        drag: function() {
+            this.dragHandler = new scope.Draggable(this.$el), this.dragHandler.owner = this;
+        },
+        centerX: function() {
+            var pos = this.$el.position(), width = this.$el.width();
+            return Math.round(pos.left + width / 2);
+        },
+        toggle: function(e) {
+            e.stopPropagation(), selStart ? this.nearSelectGroup() ? this.selected && !this.betweenSelected() ? this.uncheck() : this.check() : (Card.uncheckAll(), 
+            this.check()) : ~Card.selected.indexOf(this) || Card.uncheckAll();
+        },
+        check: function() {
+            this.$overlay.css("display", ""), this.selected = !0, deck.cards[this.pos.y][this.pos.x] = null, 
+            Card.selected.push(this);
+        },
+        uncheck: function() {
+            this.$overlay.css("display", "none"), this.selected = !1, deck.cards[this.pos.y][this.pos.x] = this;
+            var i;
+            ~(i = Card.selected.indexOf(this)) && Card.selected.splice(i, 1);
+        },
+        selectGroup: function(e) {
+            if (!selStart) {
+                for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+                card != this && card.dragHandler.onDown(e, !0);
+                this.$el.on("dragmove", this.dragGroup);
+            }
+        },
+        dragGroup: function(e) {
+            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+            card != this && card.dragHandler.onMove(e.detail.event, !0);
+        },
+        clearGroup: function() {
+            this.$el.off("dragmove", this.dragGroup), selStart || Card.uncheckAll();
+        },
+        nearSelectGroup: function() {
+            return Card.selected.some(function(card) {
+                return Math.abs(card.pos.x - this.pos.x) <= 1 && card.pos.y == this.pos.y;
+            }, this);
+        },
+        betweenSelected: function() {
+            Card.selected.sort(function(a, b) {
+                return (a.pos.x < b.pos.x) - (b.pos.x < a.pos.x);
+            });
+            var idx = Card.selected.indexOf(this);
+            return -1 != idx && 0 != idx && idx != Card.selected.length - 1;
+        },
+        revertGroup: function() {
+            for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i], 
+            card != this && card.$el.transform({
+                from: [ card.dragHandler.dx, card.dragHandler.dy ].join(" "),
+                to: card.dragHandler.initTrf.join(" ")
+            }), scope.deck.cards[card.pos.y][card.pos.x] = card;
+        },
+        clone: function() {
+            return new Card({
+                color: this.color,
+                value: this.value
+            });
+        },
+        log: function() {}
+    });
+
+    scope.Card = Card;
+});
+
+

+ 186 - 0
apps/web/priv/static/dart/js/okey/deck.js

@@ -0,0 +1,186 @@
+Core(function(scope) {
+
+    function Deck(root, options) {
+        options = options || {};
+        this.$el = $(root);
+        this.elements = { $dropPlace: "#Deck" };
+        this.proxies = [ "select", "track", "place" ];
+        this.cards = [ [], [] ];
+        this.trfs = [ [], [] ];
+        this.__super__.constructor.call(this),
+        this.$dropPlace.droppable({ accept: this.place });
+    }
+
+    var padding = {
+        top: 5,
+        left: 5
+    };
+
+    $.inherit(Deck, scope.Controller);
+
+    var prevX, prevY, selected;
+
+    $.extend(Deck.prototype, {
+
+        each: function(callback) {
+            for (var i = 0; 15 > i; i++) for (var j = 0; 2 > j; j++) if (callback.call(this, this.cards[j][i], i, j) === !1) return;
+        },
+
+        fill: function(tiles) {
+            var count = 0;
+            this.each(function(c, i, j) {
+                if (null != c && (this.cards[j][i] = null, c.$el.remove()), 0 == j && count < tiles.length) {
+                    var tile = tiles[count], card = new scope.Card({
+                        color: scope.CARD_COLORS[tile[1] - 1],
+                        value: tile[2]
+                    });
+                    card.pos = {
+                        x: i,
+                        y: j
+                    }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
+                    count++;
+                }
+                this.trfs[j][i] = {
+                    x: 42 * i + padding.left,
+                    y: 71 * j + padding.top
+                };
+            });
+        },
+
+        render: function() {
+            this.each(function(card, i, j) {
+                null != card && (card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
+                card.drag(), this.$el.append(card.$el[0]));
+            });
+        },
+
+        track: function(e) {
+            this.each(function(card, i, j) {
+                if (card && card.$el[0] != e.target && card.intersect(e.detail.x, e.detail.y) && !card.$el.attr("animated") && scope.Card.selected.length < 2) {
+                    var shift = e.detail.x > card.centerX() ? i + 1 : i - 1;
+                    return shift = shift > 14 ? shift - 2 : shift, shift = 0 > shift ? shift + 2 : shift, 
+                    prevX = i, prevY = j, this.move({
+                        i: i,
+                        j: j
+                    }, {
+                        i: shift,
+                        j: j
+                    }), !1;
+                }
+            });
+        },
+
+        move: function(fst, snd) {
+            var card, trfs = this.trfs, i = snd.i, cond = function(i) {
+                return fst.i < snd.i ? 14 >= i : i >= 0;
+            }, _cond = function(j, i) {
+                return fst.i < snd.i ? i > j : j > i;
+            }, op = function() {
+                fst.i < snd.i ? i++ : i--;
+            }, _op = function() {
+                fst.i < snd.i ? j++ : j--;
+            }, direction = function(j) {
+                return fst.i < snd.i ? j + (scope.Card.selected.length || 1) : j - (scope.Card.selected.length || 1);
+            }, _direction = function(j) {
+                return fst.i < snd.i ? j - 1 : j + 1;
+            };
+
+            if (scope.Card.selected.length < 2)
+                for (;cond(i); op())
+                    if (null == this.cards[snd.j][i] || this.cards[snd.j][i] == selected)
+            {
+                for (var j = _direction(i); _cond(j, i); _op()) card = this.cards[fst.j][j],
+                card != selected && (
+
+                    card.$el.transform({
+                        from: [ trfs[fst.j][j].x, trfs[fst.j][j].y ].join(" "),
+                        to: [ trfs[fst.j][direction(j)].x, trfs[fst.j][direction(j)].y ].join(" ")
+                    }),
+                
+                    selected && (selected.dragHandler.initTrf = [ trfs[fst.j][j].x, trfs[fst.j][j].y ]), 
+                
+                    ((this.cards[fst.j][j] = this.cards[fst.j][direction(j)]) || {}).pos = { x: j, y: fst.j },
+                    (this.cards[fst.j][direction(j)] = card).pos = { x: direction(j), y: fst.j }
+                );
+
+                break;
+            }
+        },
+
+        select: function(e) {
+            selected = null, this.each(function(card) {
+                return card && card.$el[0] == e.target ? (selected = card, !1) : void 0;
+            });
+        },
+
+        place: function(target, x, y) {
+            var trfs = this.trfs, pos = this.$dropPlace.position(), width = this.$dropPlace.width(), height = this.$dropPlace.height(), placeWidth = Math.round(width / 15), placeHeight = Math.round(height / 2), truePosX = Math.floor((x - pos.left) / placeWidth), posY = Math.floor((y - pos.top) / placeHeight);
+            scope.Card.selected.sort(function(a, b) {
+                return (a.pos.x > b.pos.x) - (b.pos.x > a.pos.x);
+            });
+            var dropResult, idx = scope.Card.selected.indexOf(target.owner), cards = scope.Card.selected.length ? scope.Card.selected.concat() : [ target.owner ];
+            if (cards.every(function(card, i) {
+                return posX = truePosX + (i - idx) * (card != target.owner), null == this.cards[posY][posX] || this.cards[posY][posX] == card;
+            }, this)) for (var card, i = 0, l = cards.length; l > i; i++) card = cards[i], posX = truePosX + (i - idx) * (card != target.owner), 
+            (dropResult = null == this.cards[posY][posX] || this.cards[posY][posX] == selected) && (this.cards[posY][posX] != card && (null != card.pos.x && null != card.pos.y ? this.cards[card.pos.y][card.pos.x] = this.cards[card.pos.y][card.pos.x] == card ? null : this.cards[card.pos.y][card.pos.x] : (this.$el.trigger("take", {
+                detail: {
+                    card: card
+                }
+            }), this.justTaken = !0), (this.cards[posY][posX] = card).pos = {
+                x: posX,
+                y: posY
+            }), function(card) {
+                card.$el.transform({
+                    from: card.$el.attr("transform").slice(10, -1),
+                    to: [ trfs[posY][posX].x, trfs[posY][posX].y ].join(" ")
+                }).then(function() {
+                    card.dragHandler.storeTrf();
+                });
+            }(card));
+            return dropResult;
+        },
+
+        remove: function(tile) {
+            return selected && selected.color == scope.CARD_COLORS[tile[1] - 1] && selected.value == tile[2] ? (this.cards[selected.pos.y][selected.pos.x] = null, 
+            selected.$el.remove(), selected.off("dragmove", this.track), !1) : void this.each(function(card, i, j) {
+                return card && card.color == scope.CARD_COLORS[tile[1] - 1] && card.value == tile[2] ? (this.cards[j][i] = null, 
+                card.$el.remove(), card.off("dragmove", this.track), !1) : void 0;
+            });
+        },
+
+        insert: function(tile) {
+            this.justTaken ? this.justTaken = !1 : this.each(function(card, i, j) {
+                return card ? void 0 : (card = new scope.Card({
+                    color: scope.CARD_COLORS[tile[1] - 1],
+                    value: tile[2]
+                }), card.pos = {
+                    x: i,
+                    y: j
+                }, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card, 
+                card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"), 
+                card.drag(), this.$el.append(card.$el[0]), !1);
+            });
+        },
+
+        length: function() {
+            var count = 0;
+            return this.each(function(card) {
+                null != card && (count += 1);
+            }), count;
+        },
+
+        hand: function(discarded) {
+            return result = [ [], [] ], this.each(function(card, i, j) {
+                card && card != discarded && result[j].push(tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value));
+            }), result;
+        },
+
+        dir: function() {
+            for (var i = 0; 15 > i; i++) this.cards[0][i] && this.cards[0][i].log();
+            for (var i = 0; 15 > i; i++) this.cards[1][i] && this.cards[1][i].log();
+        }
+    }),
+
+    scope.deck = new Deck("#Deck-Root");
+
+});

+ 134 - 0
apps/web/priv/static/dart/js/okey/dragndrop.js

@@ -0,0 +1,134 @@
+Core(function(scope) {
+
+    function calcShift()
+    {
+        sizeX = $svg[0].viewBox.baseVal.width / innerWidth;
+        sizeY = $svg[0].viewBox.baseVal.height / innerHeight;
+        size = Math.max(sizeX, sizeY) || 1;
+    }
+
+    function Draggable(root, options)
+    {
+        options = options || {}, this.$el = $(root), this.revert = options.revert, this.elements = {}, 
+        this.proxies = [ "onDown", "onMove", "onUp" ], this.__super__.constructor.call(this), 
+        this.enable();
+    }
+
+    var sizeX,
+        sizeY,
+        size,
+        moved,
+        $svg = $("svg");
+
+    calcShift();
+
+    $(window).on("resize", calcShift);
+    $(window).on("orientationchange", calcShift);
+
+    $.inherit(Draggable, scope.Controller);
+
+    $.extend(Draggable.prototype, {
+
+        storeTrf: function() {
+            var trf = this.$el.attr("transform");
+            this.initTrf = trf ? trf.slice(10, -1).split(/\s+/) : [ 0, 0 ];
+        },
+
+        disable: function() {
+            this.$el.off(document.createTouch ? "touchstart" : "mousedown", this.onDown),
+            this.$el.css({cursor: "default"});
+        },
+
+        enable: function() {
+            this.$el.on(document.createTouch ? "touchstart" : "mousedown", this.onDown),
+            this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;");
+        },
+
+        onDown: function(e, silent) {
+            e.preventDefault(), moved || (moved = !1, this.$el.attr("style", "cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"), 
+            this.$el[0].parentNode.appendChild(this.$el[0]), this.x = this.clientX(e), this.y = this.clientY(e), 
+            this.trf = this.$el.attr("transform"), this.trf && (this.trf = this.trf.slice(10, -1).split(/\s+/)), 
+            this.storeTrf(), silent || (document.createTouch ? (this.$el.on("touchmove", this.onMove), 
+            this.$el.on("touchend", this.onUp)) : ($("body").on("mousemove", this.onMove), $("body").on("mouseup", this.onUp)), 
+            this.$el.trigger("dragstart")));
+        },
+
+        onMove: function(e, silent) {
+            e.preventDefault(), moved = !0, this.dx = ((this.curX = this.clientX(e)) - this.x) * size, 
+            this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0], 
+            this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"), 
+            silent || this.$el.trigger("dragmove", {
+                detail: {
+                    x: this.curX,
+                    y: this.curY,
+                    event: e
+                }
+            });
+        },
+
+        onUp: function(e, silent) {
+            if (e.preventDefault(), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"), 
+            moved) {
+                for (var droped, item, dropList = scope.Droppable.list, i = 0, l = dropList.length; l > i; i++) if (item = dropList[i], 
+                item.intersect(this.curX, this.curY)) {
+                    droped = item.drop(this, this.curX, this.curY);
+                    break;
+                }
+                droped || (this.$el.transform({
+                    from: [ this.dx, this.dy ].join(" "),
+                    to: this.initTrf.join(" ")
+                }), silent || this.$el.trigger("revert")), silent || this.$el.trigger("dragstop", {
+                    detail: {
+                        x: this.curX,
+                        y: this.curY,
+                        event: e
+                    }
+                }), moved = !1;
+            }
+            document.createTouch ? (this.$el.off("touchmove", this.onMove), this.$el.off("touchend", this.onUp)) : ($("body").off("mousemove", this.onMove), 
+            $("body").off("mouseup", this.onUp));
+        }
+    });
+
+    scope.Draggable = Draggable;
+
+    $.mixin({ draggable: function() { return this.each(function(el) { new Draggable(el); }); } });
+
+});
+
+Core(function(scope) {
+
+    function Droppable(root, options)
+    {
+        options = options || {}, this.$el = $(root), this.accept = options.accept || function() {
+            return !0;
+        }, this.onDrop = options.drop || function() {}, this.elements = {}, this.proxies = [], 
+        this.__super__.constructor.call(this); this.activate();
+    }
+
+    Droppable.list = [];
+
+    $.inherit(Droppable, scope.Controller), $.extend(Droppable.prototype, {
+        drop: function(target, x, y) {
+            return this.accept(target, x, y) ? (this.onDrop(target, x, y), !0) : !1;
+        },
+        activate: function() {
+            Droppable.list.push(this);
+        },
+        release: function() {
+            var i;
+            ~(i = Droppable.list.indexOf(this)) && Droppable.list.splice(i, 1);
+        }
+    });
+
+    scope.Droppable = Droppable, 
+
+    $.mixin({
+        droppable: function(options) {
+            return this.each(function(el) {
+                new Droppable(el, options);
+            });
+        }
+    });
+
+});

+ 100 - 0
apps/web/priv/static/dart/js/okey/hand.js

@@ -0,0 +1,100 @@
+Core(function(scope) {
+
+    function Hand(root, options)
+    {
+        options = options || {};
+        this.$el = $(root);
+        this.elements = {
+            $topCard: "#top-card",
+            $rollUp: "#roll-up",
+            $rollDown: "#roll-down",
+            $container: "#container",
+            $back: "#back",
+            $cards: "#cards"
+        };
+        this.proxies = [ "show", "hide" ];
+        this.__super__.constructor.call(this);
+        this.$rollUp.on("click", this.show);
+        this.$rollDown.on("click", this.hide);
+        this.cards = [];
+    }
+
+    var trfsMap = [ { backHeight: 74,  containerTrf: "0 -44",  cardTrf: "0 -38"  },
+                    { backHeight: 124, containerTrf: "0 -94",  cardTrf: "0 -89"  },
+                    { backHeight: 174, containerTrf: "0 -144", cardTrf: "0 -139" } ];
+
+    defCardTrf = "0 20";
+
+    $.inherit(Hand, scope.Controller);
+
+    $.extend(Hand.prototype, {
+
+        take: function() {
+            var card = this.cards.pop();
+            return this.render(), card && card.$el.remove(), card; },
+
+        discard: function(tile) {
+            var card = new scope.Card({
+                color: scope.CARD_COLORS[tile[1] - 1],
+                value: tile[2]
+            });
+            this.cards.push(card), this.render(), card.drag(), card.dragHandler.disable(), this.$topCard.append(card.$el[0]); },
+
+        pop: function() { this.cards.pop(), this.render();},
+
+        show: function() {
+            var count = this.cards.length - 1;
+            count > 0 && (this.$container.transform({
+                to: trfsMap[4 > count ? count - 1 : 2].containerTrf,
+                from: "0 50",
+                dur: .355,
+                calcMode: "linear"
+            }), this.$back.animate({
+                attributeName: "height",
+                to: trfsMap[4 > count ? count - 1 : 2].backHeight,
+                dur: .355
+            }), this.$cards.find("g").each(function(el, i) {
+                3 > i && $(el).transform({
+                    to: trfsMap[i].cardTrf,
+                    from: "0 20",
+                    dur: .6,
+                    calcmode: "linear"
+                });
+            }), this.shown = !0); },
+
+        hide: function() {
+            var count = this.cards.length - 1;
+            count > 0 && (this.$container.transform({
+                to: "0 50",
+                from: trfsMap[4 > count ? count - 1 : 2].containerTrf,
+                dur: .5,
+                calcMode: "linear"
+            }), this.$back.animate({
+                attributeName: "height",
+                to: 0,
+                dur: .5
+            }), this.$cards.find("g").each(function(el, i) {
+                3 > i && $(el).transform({
+                    to: defCardTrf,
+                    from: trfsMap[4 > count ? count - 1 : 2].cardTrf,
+                    dur: .6,
+                    calcmode: "linear"
+                });
+            }), this.shown = !1); },
+
+        render: function() {
+            var history = this.cards.slice(0, this.cards.length - 1);
+            this.$cards.empty(), this.shown && this.hide(), history.reverse().forEach(function(card) {
+                card = card.clone(), card.template(scope.CARD_SMALL_SOURCE), card.$el.attr("transform", "translate(" + defCardTrf + ")"), 
+                this.$cards.append(card.$el[0]);
+            }, this); },
+
+        clear: function() {
+            this.cards.forEach(function(card) {
+                card.$el.remove();
+            }), this.cards = [], this.render(); }
+
+    });
+
+    scope.Hand = Hand;
+});

+ 59 - 0
apps/web/priv/static/dart/js/player.js

@@ -0,0 +1,59 @@
+Core(function(scope) {
+
+    function Player(options)
+    {
+        options = options || {},
+        this.name = options.name,
+        this.position = options.position, 
+        this.noSkin = options.noSkin,
+        this.skin = options.skin || scope.SKIN_NAMES[$.rand(0, scope.SKIN_NAMES.length - 1)], 
+        console.log(this.position);
+        this.$el = $("#Player-" + this.position),
+        this.$page = $("#Kakaranet-12-maxim"),
+        this.elements = {
+            $timer: "#Timer",
+            $name: "#Name",
+            $nameWrapper: "#Name rect",
+            $nameText: "#Name text" },
+        this.proxies = [ "loadSkin" ],
+        this.__super__.constructor.call(this),
+        this.$el.show(), 
+        this.$timer.hide(),
+        this.$name.show(),
+
+        setPlayerName("Player-" + this.position, this.name);
+
+        this.initTimer(),
+        "Me" == this.position || this.noSkin || $.load("svg/" + [ "Person", this.position, this.skin ].join("-") + ".svg", this.loadSkin);
+    }
+
+    $.inherit(Player, scope.Controller);
+
+    $.extend(Player.prototype, {
+
+        loadSkin: function(result) {
+            var $result = $("<g/>").html(result);
+            this.$page.append($result[0].firstChild),
+            this.unselect(); },
+
+        initTimer: function() {
+            this.timer = new scope.Timer(this.$timer, { duration: 30 }); },
+
+        select: function() {
+            this.$nameWrapper.attr({ fill: "#517ECE" }),
+            this.$nameText.attr({ fill: "#FFFFFF" }),
+            this.$timer.show(),
+            this.$("#Selection").show(),
+            this.timer.start(); },
+
+        unselect: function() {
+            this.$nameWrapper.attr({ fill: "#FFFFFF" }),
+            this.$nameText.attr({ fill: "#48AF5E" }),
+            this.$timer.hide(),
+            this.$("#Selection").hide(),
+            this.timer.reset(); }
+    });
+
+    scope.Player = Player;
+});
+

+ 236 - 0
apps/web/priv/static/dart/js/selector.js

@@ -0,0 +1,236 @@
+var scope = {
+    apiUrl: "ws://localhost:8080/ws/",
+    CARD_SOURCE: "svg/Card.svg",
+    CARD_SMALL_SOURCE: "svg/Card-Small.svg",
+    CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
+    SKIN_NAMES: [ "Alina", "Gabrielo", "Mustafa" ]
+};
+
+var $ = function(_undefind)
+{
+    function Selector(elements) {
+        this.length = elements.length;
+        for (var i = 0, l = this.length; l > i; i++) this[i] = elements[i];
+    }
+
+    function $(selector) {
+        return tag.test(selector)
+            ? new Selector([ document.createElementNS("http://www.w3.org/2000/svg", tag.exec(selector)[1]) ])
+            : "string" == typeof selector 
+                ? new Selector(document.querySelectorAll(selector)) 
+                : selector instanceof NodeList 
+                    ? new Selector(selector) 
+                    : selector instanceof Element 
+                        ? new Selector([ selector ]) 
+                        : selector.addEventListener 
+                            ? new Selector([ selector ]) 
+                            : selector instanceof Selector ? selector : new Selector([]); }
+
+    var fn = Selector.prototype;
+
+    fn.each = function(callback) { for (var i = 0, l = this.length; l > i; i++) callback(this[i], i); return this; },
+    fn.on = function(eventName, eventHandler) { return this.each(function(el) { el.addEventListener(eventName, eventHandler); }); },
+    fn.off = function(eventName, eventHandler) { return this.each(function(el) { el.removeEventListener(eventName, eventHandler); }); },
+    fn.trigger = function(eventName, data) { return this.each(function(el) { event = new CustomEvent(eventName, data), el.dispatchEvent(event); }); },
+    fn.show = function() { return this.css("display", "block"); },
+    fn.hide = function() { return this.css("display", "none"); },
+    fn.text = function(text) { return null != text ? this.each(function(el) { el.textContent = text; }) : this.length ? this[0].textContent : _undefind; },
+    fn.remove = function() { return this.each(function(el) { el.parentNode && el.parentNode.removeChild(el); }); },
+
+    fn.css = function(name, value) {
+        if (Object(name) === name) {
+            for (var prop in name) this.css(prop, name[prop]);
+            return this;
+        }
+        return null != value ? this.each(function(el) {
+            el.style[name] = value;
+        }) : this.length ? getComputedStyle(this[0]).getPropertyValue(name) : _undefind;
+    },
+
+    fn.html = function(html) {
+        return null != html ? this.each(function(el) {
+            for (;el.firstChild; ) el.removeChild(el.firstChild);
+            var fragment = document.createElement("div");
+            fragment.innerHTML = "<svg>" + html + "</svg>";
+            for (var svg = fragment.firstChild, node = svg.firstChild; node; ) el.appendChild(node.cloneNode(!0)), 
+            node = node.nextSibling;
+        }) : this.length ? this[0].innerHTML : _undefind;
+    },
+    
+
+    fn.attr = function(name, value) {
+        if (Object(name) === name) {
+            for (var prop in name) this.attr(prop, name[prop]);
+            return this;
+        }
+        return null != value ? this.each(function(el) {
+            el.setAttribute(name, value);
+        }) : this.length ? this[0].getAttribute(name) : _undefind;
+    },
+    
+    fn.removeAttr = function(name) { return this.each(function(el) { el.removeAttribute(name); }); },
+
+    fn.append = function(target) {
+        return this.each(function(el) {
+            target instanceof Selector ? target.each(function(child) {
+                el.appendChild(child);
+            }) : el.appendChild(target);
+        });
+    },
+
+    fn.empty = function() {
+        return this.each(function(el) {
+            for (;el.firstChild; ) el.removeChild(el.firstChild);
+        });
+    },
+    
+    fn.eq = function(idx) { return new Selector(idx >= this.length ? [] : [ this[idx] ]); },
+    fn.find = function(selector) {
+        var result = [];
+        return this.each(function(el) {
+            Array.prototype.push.apply(result, el.querySelectorAll(selector));
+        }), new Selector(result);
+    },
+    fn.parent = function() {
+        var result = [];
+        return this.each(function(el) {
+            result.push(el.parentNode);
+        }), new Selector(result);
+    },
+    fn.first = function() {
+        return new Selector(this.length ? [ this[0] ] : []);
+    },
+    
+    fn.last = function() { return new Selector(this.length ? [ this[this.length - 1] ] : []); },
+    fn.clone = function() { var result = []; return this.each(function(el) { result.push(el.cloneNode(!0)); }), new Selector(result); },
+    fn.width = function() { return this.length ? this[0].getBoundingClientRect().width : _undefind; },
+    fn.height = function() { return this.length ? this[0].getBoundingClientRect().height : _undefind; },
+    fn.position = function() {
+        if (this.length) {
+            var clientRect = this[0].getBoundingClientRect();
+            return {
+                top: clientRect.top,
+                right: clientRect.right,
+                bottom: clientRect.bottom,
+                left: clientRect.left
+            };
+        }
+        return _undefind;
+    };
+
+    var defaultAnim = {
+        "class": "anim",
+        begin: "indefinite"
+    }, anim = function(anim) {
+        return $("<animate/>").attr(anim);
+    };
+
+    fn.animate = function(anims) {
+        var callbacks = [], thenable = {
+            then: function(complete) {
+                return callbacks.push(complete), thenable;
+            }
+        };
+        return anims = $.extend({}, defaultAnim, anims), this.each(function(el) {
+            var $el = $(el), $anim = $el.find(".anim");
+            $anim.length ? $anim.attr(anims) : ($el.append(anim(anims)[0]), $anim = $el.find(".anim")), 
+            el.timerId = setTimeout(function() {
+                $el.attr(anims.attributeName, anims.to), $el.removeAttr("animated"), callbacks.forEach(function(c) {
+                    c();
+                }), callbacks = [];
+            }, 1e3 * parseFloat(anims.dur)), $el.attr("animated", !0), $anim[0].beginElement();
+        }), thenable;
+    };
+
+    var animDelay = 62.5;
+
+    fn.move = function(anims) {
+        return this.each(function(el) {
+            function tick() {
+                if (!el.paused) {
+                    var cur = from + step;
+                    (to > from ? to >= cur : cur >= to) ? ($el.attr(property, cur), from = cur) : clearInterval(timer);
+                }
+            }
+            var property = anims.attributeName, dur = anims.dur, to = parseInt(anims.to), $el = $(el), from = parseInt($el.attr(property)), step = (to - from) / (1e3 * dur / animDelay);
+            el.timer = setInterval(tick, animDelay);
+        });
+    };
+
+    var defaultTrf = {
+        "class": "trf",
+        type: "translate",
+        dur: "0.3",
+        calcMode: "spline",
+        keySplines: "0.215 0.61 0.355 1",
+        additive: "replace",
+        attributeName: "transform",
+        begin: "indefinite",
+        keyTimes: "0; 1" },
+        trf = function(trf) { return $("<animateTransform/>").attr(trf); };
+
+    fn.transform = function(trfs) {
+        var callbacks = [], thenable = {
+            then: function(complete) {
+                return callbacks.push(complete), thenable;
+            }
+        };
+        return trfs = $.extend({}, defaultTrf, trfs), this.each(function(el) {
+            var $el = $(el), $anim = $el.find(".trf");
+            $anim.length ? $anim.attr(trfs) : ($el.append(trf(trfs)[0]), $anim = $el.find(".trf")), 
+            el.timerId = setTimeout(function() {
+                $el.attr("transform", trfs.type + "(" + trfs.to + ")"), $el.removeAttr("animated"), 
+                callbacks.forEach(function(c) {
+                    c();
+                }), callbacks = [];
+            }, 1e3 * parseFloat(trfs.dur) - 20), $el.attr("animated", !0), $anim[0].beginElement();
+        }), thenable;
+    }, fn.stop = function() {
+        return this.each(function(el) {
+            $(el).find(".anim, .trf").each(function(anim) {
+                anim.endElement();
+            }), clearTimeout(el.timerId), clearInterval(el.timer);
+        });
+    }, fn.pause = function() {
+        return $("svg")[0].pauseAnimations(), this.each(function(el) {
+            el.paused = !0;
+        });
+    }, fn.resume = function() {
+        return $("svg")[0].unpauseAnimations(), this.each(function(el) {
+            el.paused = !1;
+        });
+    };
+    var tag = /^<(.+)\/>$/;
+    return $.extend = function(target) {
+        for (var obj, properties, i = 1, l = arguments.length; l > i; i++) {
+            obj = arguments[i], properties = Object.keys(obj);
+            for (var property, j = properties.length; j--; ) property = properties[j], target[property] = obj[property];
+        }
+        return target;
+    }, $.inherit = function(child, parent) {
+        function ctor() {
+            this.constructor = child, this.__super__ = parent.prototype;
+        }
+        return ctor.prototype = parent.prototype, child.prototype = new ctor(), child;
+    }, $.mixin = function(plagin) {
+        $.extend(fn, plagin);
+    }, $.timestamp = 1400668550599, $.load = function(url, complete) {
+        url = url + "?q=" + $.timestamp;
+        var result = localStorage.getItem(url);
+        if (null == result) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, !0), xhr.onload = function() {
+                localStorage.setItem(url, xhr.responseText),
+                complete(xhr.responseText);
+            }, xhr.send();
+        } else complete(result);
+    }, $.rand = function(min, max) {
+        return min + Math.floor(Math.random() * (max - min + 1));
+    }, $;
+}();
+
+Core = function() {
+    return function(module) {
+        module(scope);
+    };
+}();

+ 62 - 0
apps/web/priv/static/dart/js/timer.js

@@ -0,0 +1,62 @@
+
+Core(function(scope) {
+
+    function Timer(root, options)
+    {
+        options = options || {};
+        this.duration = options.duration;
+        this.curTime = this.duration;
+        this.$el = $(root);
+        this.elements = {
+            $value: "#value",
+            $progress: "#progress"
+        };
+        this.proxies = [ "tick" ];
+        this.__super__.constructor.call(this);
+        this.$value.attr({x:7,y:26});
+        this.$value.text(this.duration);
+        defHeight = this.$progress.attr("height");
+    }
+
+    var defHeight;
+
+    $.inherit(Timer, scope.Controller);
+
+    $.extend(Timer.prototype, {
+        from: function(time) {
+            this.$value.text(this.curTime = Math.round(time / 1e3));
+        },
+        start: function() {
+            this.$progress.move({
+                attributeName: "height",
+                to: "0",
+                dur: this.curTime
+            }),
+            this.timerId = this.withDelay(this.tick, 1e3);
+        },
+        tick: function() {
+            return this.paused 
+                ? void (this.timerId = this.withDelay(this.tick, 1e3))
+                : void (this.curTime-- > 0 && (this.$value.text(this.curTime),
+                        this.timerId = this.withDelay(this.tick, 1e3))
+                    );
+        },
+        reset: function() {
+            this.$progress.stop().attr({
+                height: defHeight
+            }),
+            this.$value.text(this.curTime = this.duration),
+            
+            clearTimeout(this.timerId);
+        },
+        pause: function() {
+            this.paused = !0, this.$progress.pause();
+        },
+        resume: function() {
+            this.paused = !1, this.$progress.resume();
+        }
+    });
+
+    scope.Timer = Timer;
+});
+

+ 11 - 30
apps/web/priv/static/dart/style/main.css

@@ -1,20 +1,13 @@
 
 :focus {-moz-outline-style:none;}
-
 html, body {margin: 0; padding:0;}
-
-html {
-    overflow: auto;
-    height: 100%;
-}
+html { overflow: auto; height: 100%; }
 
 body {
     height: 100%;
     font-family: 'Exo 2', Arial, sans-serif;
     font-weight: bold;
     text-align: center;
-    /*min-width: 746px;
-    min-height: 746px;*/
     font-size: 16px;
     color: #fff;
     overflow: hidden;
@@ -25,26 +18,14 @@ body {
     user-select: none;          
 }
 
-.svg {
-     width: auto; 
-     height: 100%; 
-}
+.svg { width: auto; height: 100%; }
+text { cursor: default; }
+.card text { cursor: inherit; }
+@media all and (max-width: 1311px) { .svg { width: 100%; height: auto; } }
+@media all and (max-height: 746px) { .svg { width: auto; height: 100%; } }
 
-text {
-    cursor: default;
-}
-.card text {
-    cursor: inherit;
-}
-@media all and (max-width: 1311px) {
-    .svg {
-         width: 100%; 
-         height: auto; 
-    }
-}
-@media all and (max-height: 746px) {
-    .svg {
-         width: auto; 
-         height: 100%; 
-    }
-}
+.controls { display: none; visibility:hidden; }
+button { display: none; visibility:hidden;}
+label  { display: none; visibility:hidden;}
+input  { display: none; visibility:hidden;}
+select { display: none; visibility:hidden;}

+ 6 - 0
apps/web/priv/static/dart/svg/ButtonAnimation.svg

@@ -0,0 +1,6 @@
+
+ <animateMotion id="{this.name}-Motion" xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg" dur="0.2s" repeatCount="1" begin="indefinite" fill="freeze">
+           <mpath xlink:href="#{this.name}"/>
+        </animateMotion>
+

+ 2 - 2
apps/web/priv/static/dart/svg/person-center-alina.svg

@@ -1,5 +1,5 @@
-<g id="person-center-alina" transform="translate(466.000000, 151.000000)" sketch:type="MSShapeGroup">
-    <path id="selection"  d="M144.949,117.677 C144.949,116.661 144.652,115.648 144.041,114.788 C131.621,97.249 122.291,85.28 107.691,80.44 C107.336,80.233 106.953,80.069 106.543,79.952 C106.121,79.833 105.695,79.72 105.266,79.61 C120.315,52.692 115.133,34.587 110.397,25.88 C105.942,17.692 98.573,11.757 91.903,10.767 C86.764,5.14 81.159,1.747 75.215,0.675 C75.053,0.644 74.86,0.609 74.668,0.577 C74.348,0.526 74.053,0.487 73.762,0.454 C73.336,0.403 72.916,0.366 72.497,0.341 C72.382,0.331 72.274,0.323 72.167,0.32 C71.829,0.304 71.491,0.297 71.157,0.297 C68.795,0.297 66.439,0.678 64.138,1.43 C63.548,1.379 62.95,1.354 62.352,1.354 C54.942,1.354 47.609,5.084 42.234,11.592 C33.56,22.094 30.864,38.69 34.642,58.319 C35.652,63.436 36.718,67.594 37.577,70.934 C38.44,74.297 39.118,76.936 39.357,79.016 C38.91,79.116 38.468,79.219 38.033,79.329 C37.685,79.417 37.353,79.54 37.042,79.694 C18.992,84.999 9.051,100.942 0.264,115.034 C-0.24,115.841 -0.486,116.759 -0.486,117.679 L144.949,117.679 L144.949,117.677 L144.949,117.677 Z" fill="#557EBE"></path>
+<g id="Person-Center-Alina" transform="translate(466.000000, 151.000000)" sketch:type="MSShapeGroup">
+    <path id="Selection" style="display: none" d="M144.949,117.677 C144.949,116.661 144.652,115.648 144.041,114.788 C131.621,97.249 122.291,85.28 107.691,80.44 C107.336,80.233 106.953,80.069 106.543,79.952 C106.121,79.833 105.695,79.72 105.266,79.61 C120.315,52.692 115.133,34.587 110.397,25.88 C105.942,17.692 98.573,11.757 91.903,10.767 C86.764,5.14 81.159,1.747 75.215,0.675 C75.053,0.644 74.86,0.609 74.668,0.577 C74.348,0.526 74.053,0.487 73.762,0.454 C73.336,0.403 72.916,0.366 72.497,0.341 C72.382,0.331 72.274,0.323 72.167,0.32 C71.829,0.304 71.491,0.297 71.157,0.297 C68.795,0.297 66.439,0.678 64.138,1.43 C63.548,1.379 62.95,1.354 62.352,1.354 C54.942,1.354 47.609,5.084 42.234,11.592 C33.56,22.094 30.864,38.69 34.642,58.319 C35.652,63.436 36.718,67.594 37.577,70.934 C38.44,74.297 39.118,76.936 39.357,79.016 C38.91,79.116 38.468,79.219 38.033,79.329 C37.685,79.417 37.353,79.54 37.042,79.694 C18.992,84.999 9.051,100.942 0.264,115.034 C-0.24,115.841 -0.486,116.759 -0.486,117.679 L144.949,117.679 L144.949,117.677 L144.949,117.677 Z" fill="#557EBE"></path>
     <path d="M94.516,40.556 C94.516,40.419 94.493,40.285 94.465,40.16 C94.387,39.773 94.215,39.494 93.963,39.303 C93.652,39.016 93.248,38.836 92.789,38.836 L91.48,38.836 C91.462,38.836 91.447,38.84 91.429,38.842 C91.29,39.434 91.099,39.944 90.841,40.33 C85.015,37.139 82.038,31.256 80.542,26.648 C75.321,31.418 67.944,36.259 58.635,37.623 C53.233,38.414 53.223,40.273 51.89,38.846 C51.887,38.844 51.885,38.84 51.882,38.838 C51.879,38.838 51.877,38.836 51.874,38.836 C50.201,38.836 48.844,38.951 48.844,40.625 L48.844,49.221 C48.844,50.895 50.201,52.248 51.874,52.248 C51.909,52.248 51.94,52.24 51.973,52.24 L52.973,58.826 C52.935,64.072 60.435,73.572 67.865,78.787 C68.337,79.693 69.634,80.447 71.29,80.447 C72.859,80.447 74.08,79.883 74.648,79.004 C81.767,73.656 89.183,65.906 90.138,58.826 L91.138,52.215 C91.251,52.225 91.363,52.248 91.48,52.248 C93.154,52.248 94.515,50.894 94.515,49.221 L94.515,40.625 C94.515,40.609 94.509,40.605 94.509,40.594 C94.51,40.579 94.516,40.569 94.516,40.556 L94.516,40.556 L94.516,40.556 Z" id="Alina-Face_2_" fill="#FFE0A5"></path>
     <path d="M66.655,48.239 C65.991,48.239 65.454,47.7 65.454,47.036 C65.454,46.21 64.777,45.532 63.946,45.532 C63.118,45.532 62.443,46.21 62.443,47.036 C62.443,47.7 61.902,48.239 61.241,48.239 C60.575,48.239 60.036,47.7 60.036,47.036 C60.036,44.882 61.79,43.128 63.946,43.128 C66.106,43.128 67.86,44.882 67.86,47.036 C67.86,47.7 67.32,48.239 66.655,48.239 M82.123,48.239 C82.783,48.239 83.326,47.7 83.326,47.036 C83.326,44.882 81.57,43.128 79.412,43.128 C77.262,43.128 75.502,44.882 75.502,47.036 C75.502,47.7 76.043,48.239 76.709,48.239 C77.371,48.239 77.912,47.7 77.912,47.036 C77.912,46.21 78.586,45.532 79.412,45.532 C80.246,45.532 80.92,46.21 80.92,47.036 C80.92,47.7 81.455,48.239 82.123,48.239" id="Alina-Eyes_2_" fill="#40382F"></path>
     <path d="M80.66,62.624 C80.006,63.522 76.084,67.72 71.692,67.72 C67.558,67.72 63.568,65.312 62.483,62.618 C61.712,61.03 62.896,60.759 63.947,61.29 C66.357,62.56 73.164,64.331 79.595,60.952 C80.549,60.45 81.586,61.374 80.66,62.624" id="Alina-Smile_2_" fill="#E5BC7B"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-center-gabrielo.svg

@@ -1,5 +1,5 @@
-<g id="person-center-gabrielo" transform="translate(466.000000, 151.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M144.949,117.675 C144.949,116.659 144.652,115.646 144.041,114.786 C135.115,102.182 128.525,93.745 121.254,87.915 C114.32,82.358 106.887,79.321 97.547,78.302 C96.945,76.116 96.068,74.478 94.879,73.3 C94.297,72.57 93.566,71.976 92.725,71.558 C92.416,71.404 92.106,71.249 91.793,71.099 C93.441,67.814 94.273,64.132 94.273,60.099 L94.273,57.031 C96.316,55.576 97.65,53.187 97.65,50.494 L97.65,41.898 L97.65,41.865 L97.65,41.83 C97.65,41.359 97.597,40.887 97.488,40.389 C97.425,40.094 97.345,39.807 97.25,39.53 C97.299,39.231 97.35,38.93 97.398,38.634 C98.916,29.562 100.224,21.728 98.097,16.046 C97.499,14.446 96.765,13.052 95.902,11.868 C95.906,11.827 95.908,11.784 95.91,11.743 C95.984,10.157 95.301,8.628 94.068,7.626 C93.523,7.185 92.078,6.196 89.922,6.071 C87.41,3.559 83.014,0.405 76.793,0.403 C73.455,0.403 70.05,1.341 66.658,3.188 C66.049,1.725 64.769,0.618 63.191,0.245 C62.808,0.155 62.423,0.11 62.042,0.11 C60.549,0.11 59.109,0.78 58.146,1.975 C58.14,1.983 58.134,1.991 58.126,2 C57.359,1.543 56.478,1.297 55.57,1.297 C55.397,1.297 55.223,1.305 55.049,1.322 C53.873,1.445 52.797,1.978 51.992,2.804 C51.25,2.042 50.264,1.519 49.156,1.353 C48.907,1.316 48.658,1.296 48.412,1.296 C46.443,1.296 44.625,2.462 43.825,4.314 C43.382,5.339 39.635,14.453 42.615,22.695 C42.656,28.468 42.884,33.529 43.295,37.799 C42.447,38.908 41.976,40.313 41.976,41.899 L41.976,50.495 C41.976,53.079 43.204,55.382 45.105,56.85 L45.105,60.1 C45.105,64.082 46.002,67.786 47.78,71.157 C46.747,71.854 46.147,72.364 46.001,72.493 C43.985,73.921 42.735,76.225 42.091,78.544 C20.784,82.122 9.465,100.274 0.263,115.032 C-0.241,115.839 -0.487,116.757 -0.487,117.677 L144.949,117.677 L144.949,117.675 L144.949,117.675 Z" fill="#557EBE"></path>
+<g id="Person-Center-Gabrielo" transform="translate(466.000000, 151.000000)" sketch:type="MSShapeGroup">
+    <path  style="display: none" id="Selection" d="M144.949,117.675 C144.949,116.659 144.652,115.646 144.041,114.786 C135.115,102.182 128.525,93.745 121.254,87.915 C114.32,82.358 106.887,79.321 97.547,78.302 C96.945,76.116 96.068,74.478 94.879,73.3 C94.297,72.57 93.566,71.976 92.725,71.558 C92.416,71.404 92.106,71.249 91.793,71.099 C93.441,67.814 94.273,64.132 94.273,60.099 L94.273,57.031 C96.316,55.576 97.65,53.187 97.65,50.494 L97.65,41.898 L97.65,41.865 L97.65,41.83 C97.65,41.359 97.597,40.887 97.488,40.389 C97.425,40.094 97.345,39.807 97.25,39.53 C97.299,39.231 97.35,38.93 97.398,38.634 C98.916,29.562 100.224,21.728 98.097,16.046 C97.499,14.446 96.765,13.052 95.902,11.868 C95.906,11.827 95.908,11.784 95.91,11.743 C95.984,10.157 95.301,8.628 94.068,7.626 C93.523,7.185 92.078,6.196 89.922,6.071 C87.41,3.559 83.014,0.405 76.793,0.403 C73.455,0.403 70.05,1.341 66.658,3.188 C66.049,1.725 64.769,0.618 63.191,0.245 C62.808,0.155 62.423,0.11 62.042,0.11 C60.549,0.11 59.109,0.78 58.146,1.975 C58.14,1.983 58.134,1.991 58.126,2 C57.359,1.543 56.478,1.297 55.57,1.297 C55.397,1.297 55.223,1.305 55.049,1.322 C53.873,1.445 52.797,1.978 51.992,2.804 C51.25,2.042 50.264,1.519 49.156,1.353 C48.907,1.316 48.658,1.296 48.412,1.296 C46.443,1.296 44.625,2.462 43.825,4.314 C43.382,5.339 39.635,14.453 42.615,22.695 C42.656,28.468 42.884,33.529 43.295,37.799 C42.447,38.908 41.976,40.313 41.976,41.899 L41.976,50.495 C41.976,53.079 43.204,55.382 45.105,56.85 L45.105,60.1 C45.105,64.082 46.002,67.786 47.78,71.157 C46.747,71.854 46.147,72.364 46.001,72.493 C43.985,73.921 42.735,76.225 42.091,78.544 C20.784,82.122 9.465,100.274 0.263,115.032 C-0.241,115.839 -0.487,116.757 -0.487,117.677 L144.949,117.677 L144.949,117.675 L144.949,117.675 Z" fill="#557EBE"></path>
     <path d="M67.614,87.796 L65.793,98.864 C65.723,99.296 65.456,99.669 65.075,99.882 C64.859,100.003 64.619,100.066 64.38,100.066 C64.193,100.066 64.008,100.023 63.829,99.953 C63.223,99.703 48.924,93.676 46.639,83.394 C46.269,81.726 47.043,77.517 49.203,76.38 C49.235,76.339 49.251,76.294 49.295,76.253 C49.42,76.144 50.945,74.857 53.708,73.501 L52.452,78.169 C52.453,78.171 52.454,78.171 52.455,78.173 C54.046,79.866 56.037,81.286 58.02,82.441 L58.012,82.441 C62.289,84.927 66.526,86.168 66.593,86.187 C67.293,86.386 67.731,87.079 67.614,87.796 L67.614,87.796 L67.614,87.796 Z M91.114,76.638 C90.975,76.382 90.766,76.167 90.503,76.036 C88.685,75.122 86.878,74.323 85.087,73.624 L86.509,79.112 C86.509,79.114 86.507,79.114 86.505,79.116 C85.144,80.368 83.579,81.448 82.017,82.366 L82.029,82.366 C77.711,84.901 73.394,86.167 73.324,86.186 C72.63,86.385 72.19,87.079 72.303,87.795 L74.124,98.863 C74.196,99.295 74.458,99.668 74.841,99.881 C75.058,100.002 75.3,100.065 75.544,100.065 C75.728,100.065 75.913,100.022 76.089,99.952 C76.694,99.702 90.989,93.675 93.275,83.393 C93.623,81.833 92.969,78.052 91.114,76.638 L91.114,76.638 L91.114,76.638 Z" id="Gabrielo-Colar_2_" fill="#EFEFEF"></path>
     <path d="M93.336,82.987 C93.32,83.133 93.301,83.272 93.273,83.393 C90.988,93.674 76.693,99.702 76.087,99.952 C75.911,100.022 75.726,100.065 75.542,100.065 C75.298,100.065 75.056,100.002 74.839,99.881 C74.456,99.668 74.194,99.295 74.122,98.863 L72.664,90 C72.609,90.039 72.568,90.066 72.56,90.068 C72.394,90.125 67.648,90.097 67.234,90.093 L65.791,98.863 C65.721,99.295 65.454,99.668 65.073,99.881 C64.857,100.002 64.617,100.065 64.378,100.065 C64.191,100.065 64.006,100.022 63.827,99.952 C63.221,99.702 48.922,93.675 46.637,83.393 C46.613,83.284 46.593,83.163 46.579,83.032 C25.47,84.608 14.735,101.27 4.506,117.675 L139.96,117.675 C123.178,93.976 114.059,83.981 93.336,82.987 L93.336,82.987 L93.336,82.987 Z" id="Gabrielo-Body_5_" fill="#EEC173"></path>
     <path d="M93.416,17.796 C92.451,15.218 91.23,13.858 90.184,13.142 C89.938,12.824 89.799,12.249 90.916,11.505 C90.916,11.505 89.707,10.525 87.977,11.46 C86.819,9.839 79.836,1.105 68.23,8.046 C66.042,9.359 62.667,7.983 62.042,5.108 C61.066,6.321 60.438,7.879 60.346,9.532 C58.188,8.469 56.463,7.372 55.572,6.296 C55.572,6.296 54.002,9.28 54.499,12.468 C51.132,11.105 48.733,9.138 48.418,6.296 C48.418,6.296 44.834,14.589 47.418,21.255 C47.474,21.4 47.547,21.526 47.612,21.661 C47.639,30.276 48.077,36.182 48.597,40.19 C49.012,40.127 49.479,40.11 49.98,40.11 L50.056,44.465 C50.056,44.465 52.45,44.93 52.823,41.471 C53.442,36.537 51.539,23.094 59.142,25.354 C66.747,27.62 71.365,28.805 76.504,26.137 C81.639,23.463 84.463,27.926 85.543,30.91 C86.584,33.787 84.805,43.578 89.328,43.164 C89.353,42.082 89.308,41.223 89.346,40.135 C89.436,40.123 89.522,40.108 89.616,40.108 L90.925,40.108 C91.347,40.108 91.72,40.266 92.019,40.514 C93.555,31.138 95.25,22.7 93.416,17.796 L93.416,17.796 L93.416,17.796 Z" id="Gabrielo-Hair_3_" fill="#5C3B2B"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-center-mustafa.svg

@@ -1,5 +1,5 @@
-<g id="person-center-mustafa" transform="translate(466.000000, 144.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M144.95,124.675 C144.95,123.66 144.651,122.645 144.042,121.786 C135.116,109.182 128.526,100.744 121.255,94.915 C114.37,89.397 106.993,86.364 97.745,85.323 C97.212,83.493 96.296,81.647 94.852,80.266 C94.276,79.551 93.555,78.969 92.725,78.557 C92.414,78.402 92.102,78.247 91.787,78.096 C93.439,74.809 94.273,71.129 94.273,67.097 L94.273,64.03 C96.316,62.573 97.65,60.184 97.65,57.492 L97.65,53.613 C97.748,53.479 97.841,53.341 97.927,53.196 C104.464,42.221 104.896,30.598 99.14,20.469 C91.765,7.489 76.722,0.483 66.311,0.481 L66.307,0.481 C63.17,0.481 60.387,1.079 58.031,2.257 C57.968,2.289 57.903,2.322 57.841,2.358 C55.503,3.657 54.333,6.172 54.93,8.619 C55.118,9.388 55.468,10.085 55.943,10.681 C50.746,12.138 43.605,16.685 39.527,25.14 C36.697,31.007 34.57,40.63 40.513,53.152 C40.981,54.136 41.471,55.064 41.977,55.925 L41.977,57.492 C41.977,60.075 43.205,62.378 45.106,63.846 L45.106,67.097 C45.106,71.08 46.003,74.784 47.782,78.155 C46.735,78.861 46.132,79.376 46.001,79.491 C43.986,80.919 42.736,83.223 42.092,85.541 C20.785,89.12 9.466,107.272 0.264,122.03 C-0.239,122.837 -0.486,123.758 -0.487,124.675 L144.95,124.675 L144.95,124.675 Z" fill="#557EBE"></path>
+<g id="Person-Center-Mustafa" transform="translate(466.000000, 144.000000)" sketch:type="MSShapeGroup">
+    <path  style="display: none" id="Selection" d="M144.95,124.675 C144.95,123.66 144.651,122.645 144.042,121.786 C135.116,109.182 128.526,100.744 121.255,94.915 C114.37,89.397 106.993,86.364 97.745,85.323 C97.212,83.493 96.296,81.647 94.852,80.266 C94.276,79.551 93.555,78.969 92.725,78.557 C92.414,78.402 92.102,78.247 91.787,78.096 C93.439,74.809 94.273,71.129 94.273,67.097 L94.273,64.03 C96.316,62.573 97.65,60.184 97.65,57.492 L97.65,53.613 C97.748,53.479 97.841,53.341 97.927,53.196 C104.464,42.221 104.896,30.598 99.14,20.469 C91.765,7.489 76.722,0.483 66.311,0.481 L66.307,0.481 C63.17,0.481 60.387,1.079 58.031,2.257 C57.968,2.289 57.903,2.322 57.841,2.358 C55.503,3.657 54.333,6.172 54.93,8.619 C55.118,9.388 55.468,10.085 55.943,10.681 C50.746,12.138 43.605,16.685 39.527,25.14 C36.697,31.007 34.57,40.63 40.513,53.152 C40.981,54.136 41.471,55.064 41.977,55.925 L41.977,57.492 C41.977,60.075 43.205,62.378 45.106,63.846 L45.106,67.097 C45.106,71.08 46.003,74.784 47.782,78.155 C46.735,78.861 46.132,79.376 46.001,79.491 C43.986,80.919 42.736,83.223 42.092,85.541 C20.785,89.12 9.466,107.272 0.264,122.03 C-0.239,122.837 -0.486,123.758 -0.487,124.675 L144.95,124.675 L144.95,124.675 Z" fill="#557EBE"></path>
     <path d="M92.652,48.828 C92.652,48.691 92.629,48.557 92.599,48.432 C92.523,48.045 92.351,47.766 92.099,47.575 C91.788,47.288 91.382,47.109 90.925,47.109 L89.616,47.109 C89.522,47.109 89.436,47.125 89.346,47.136 C89.309,48.223 89.354,49.083 89.328,50.165 C84.805,50.578 86.584,40.787 85.543,37.91 C84.463,34.926 81.639,30.464 76.504,33.137 C71.363,35.805 66.746,34.619 59.141,32.355 C51.537,30.095 53.441,43.538 52.822,48.471 C52.449,51.93 50.055,51.466 50.055,51.466 L49.979,47.109 C48.319,47.111 46.977,47.234 46.977,48.897 L46.977,57.493 C46.977,59.167 48.334,60.52 50.008,60.52 C50.043,60.52 50.072,60.511 50.106,60.511 L50.106,67.098 C50.106,76.922 56.93,83.524 65.999,87.058 C66.396,88.586 67.769,89.719 69.425,89.719 C70.995,89.719 72.316,88.692 72.782,87.276 C82.989,83.442 89.274,77.21 89.274,67.098 L89.274,60.487 C89.385,60.497 89.497,60.52 89.616,60.52 C91.29,60.52 92.651,59.166 92.651,57.493 L92.651,48.897 C92.651,48.881 92.643,48.877 92.643,48.867 C92.644,48.853 92.652,48.841 92.652,48.828 L92.652,48.828 L92.652,48.828 Z" id="Mustafa-Face_3_" fill="#FFE0A5"></path>
     <path d="M64.663,56.705 C63.998,56.705 63.46,56.166 63.46,55.501 C63.46,54.674 62.786,53.998 61.954,53.998 C61.124,53.998 60.45,54.674 60.45,55.501 C60.45,56.166 59.91,56.705 59.248,56.705 C58.581,56.705 58.044,56.166 58.044,55.501 C58.044,53.346 59.797,51.592 61.954,51.592 C64.114,51.592 65.868,53.346 65.868,55.501 C65.868,56.166 65.329,56.705 64.663,56.705 L64.663,56.705 L64.663,56.705 Z M81.335,55.501 C81.335,53.346 79.581,51.592 77.423,51.592 C75.271,51.592 73.513,53.346 73.513,55.501 C73.513,56.166 74.052,56.705 74.718,56.705 C75.38,56.705 75.923,56.166 75.923,55.501 C75.923,54.674 76.595,53.998 77.423,53.998 C78.255,53.998 78.929,54.674 78.929,55.501 C78.929,56.166 79.466,56.705 80.134,56.705 C80.792,56.705 81.335,56.166 81.335,55.501 L81.335,55.501 L81.335,55.501 Z" id="Mustafa-Eyes_2_" fill="#3F372E"></path>
     <path d="M60.27,6.729 C59.486,7.165 59.753,7.752 60.275,7.767 C61.488,7.797 62.338,8.017 63.045,9.078 C63.263,9.514 64.668,13.637 57.808,15.363 C49.221,17.363 35.337,30.582 45.032,51.007 C45.639,52.283 46.266,53.409 46.913,54.397 C46.935,54.395 46.957,54.394 46.979,54.392 L46.979,48.897 C46.979,47.234 48.321,47.111 49.981,47.109 L50.057,51.466 C50.057,51.466 52.451,51.93 52.824,48.471 C53.443,43.537 51.54,30.095 59.143,32.355 C66.748,34.62 71.366,35.805 76.506,33.137 C81.641,30.464 84.465,34.926 85.545,37.91 C86.586,40.787 84.807,50.578 89.33,50.165 C89.355,49.083 89.31,48.223 89.348,47.136 C89.438,47.124 89.524,47.109 89.618,47.109 L90.927,47.109 C91.384,47.109 91.79,47.288 92.101,47.575 C92.353,47.766 92.525,48.046 92.601,48.432 C92.63,48.558 92.654,48.692 92.654,48.828 C92.654,48.841 92.646,48.852 92.646,48.866 C92.646,48.877 92.654,48.881 92.654,48.896 L92.654,50.719 C92.98,50.692 93.299,50.664 93.636,50.636 C111.089,21.334 73.722,-0.001 60.27,6.729 L60.27,6.729 L60.27,6.729 Z" id="Mustafa-Hair_3_" fill="#3F372E"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-left-alina.svg

@@ -1,5 +1,5 @@
-<g id="person-left-alina" transform="translate(213.000000, 218.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M0.419,162.564 C2.759,145.785 3.903,134.972 4.823,126.285 C5.639,118.574 6.286,112.483 7.43,105.149 C8.368,99.145 12.28,93.528 18.291,86.437 C18.326,86.391 18.363,86.347 18.4,86.302 L19.005,85.581 C8.968,69.807 10.593,53.138 14.134,41.263 C12.275,29.159 15.116,21.327 17.884,16.845 C21.905,10.339 28.513,6.455 35.562,6.455 C35.642,6.455 35.722,6.456 35.804,6.457 C40.646,2.143 47.259,-0.205 54.71,-0.205 C64.118,-0.205 72.928,3.462 77.155,9.136 C79.641,12.471 81.176,15.947 81.735,19.494 C85.149,23.185 87.868,29.974 84.18,37.765 C84.17,37.786 84.16,37.805 84.151,37.825 C82.911,40.359 81.049,42.903 79.204,44.698 C79.204,44.702 79.202,44.705 79.202,44.709 L79.194,44.919 C79.186,45.077 79.18,45.235 79.169,45.394 C78.837,50.717 78.087,55.814 76.94,60.536 C76.909,60.665 76.872,60.809 76.833,60.953 L76.794,61.098 C75.888,64.702 74.769,67.992 73.448,70.925 C74.622,71.871 75.663,72.946 76.585,74.161 C82.233,81.6 88.952,92.194 96.065,103.411 C98.402,107.094 100.808,110.882 103.249,114.68 L33.112,209.178 C33.09,209.16 33.064,209.145 33.043,209.125 C28.082,204.623 23.522,200.145 13.168,189.789 C4.077,180.697 -0.689,170.52 0.419,162.564 L0.419,162.564 L0.419,162.564 Z"fill="#557EBE"></path>
+<g id="Person-Left-Alina" transform="translate(213.000000, 218.000000)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M0.419,162.564 C2.759,145.785 3.903,134.972 4.823,126.285 C5.639,118.574 6.286,112.483 7.43,105.149 C8.368,99.145 12.28,93.528 18.291,86.437 C18.326,86.391 18.363,86.347 18.4,86.302 L19.005,85.581 C8.968,69.807 10.593,53.138 14.134,41.263 C12.275,29.159 15.116,21.327 17.884,16.845 C21.905,10.339 28.513,6.455 35.562,6.455 C35.642,6.455 35.722,6.456 35.804,6.457 C40.646,2.143 47.259,-0.205 54.71,-0.205 C64.118,-0.205 72.928,3.462 77.155,9.136 C79.641,12.471 81.176,15.947 81.735,19.494 C85.149,23.185 87.868,29.974 84.18,37.765 C84.17,37.786 84.16,37.805 84.151,37.825 C82.911,40.359 81.049,42.903 79.204,44.698 C79.204,44.702 79.202,44.705 79.202,44.709 L79.194,44.919 C79.186,45.077 79.18,45.235 79.169,45.394 C78.837,50.717 78.087,55.814 76.94,60.536 C76.909,60.665 76.872,60.809 76.833,60.953 L76.794,61.098 C75.888,64.702 74.769,67.992 73.448,70.925 C74.622,71.871 75.663,72.946 76.585,74.161 C82.233,81.6 88.952,92.194 96.065,103.411 C98.402,107.094 100.808,110.882 103.249,114.68 L33.112,209.178 C33.09,209.16 33.064,209.145 33.043,209.125 C28.082,204.623 23.522,200.145 13.168,189.789 C4.077,180.697 -0.689,170.52 0.419,162.564 L0.419,162.564 L0.419,162.564 Z"fill="#557EBE"></path>
     <path d="M29.134,82.219 C29.144,82.153 29.536,82.264 29.544,82.196 C32.017,82.132 34.569,81.475 36.612,80.36 C41.956,77.438 45.364,73.184 46.741,67.717 C46.784,67.541 46.815,67.365 46.854,67.188 C49.706,68.973 54.338,71.536 58.32,73.264 C58.256,74.668 58.193,75.803 58.078,76.705 C59.396,77.783 59.564,77.986 62.619,80.17 C62.619,80.17 78.369,92.42 69.869,102.17 C61.369,111.92 36.744,96.795 29.744,90.295 C26.369,88.42 22.228,89.518 22.228,89.518 L25.287,85.877 L29.134,82.219 L29.134,82.219 Z" id="Alina-Neck_1_" fill="#FFD191"></path>
     <path d="M46.531,55.509 C46.52,55.469 46.51,55.433 46.5,55.393 C46.432,55.135 46.362,54.881 46.291,54.641 C46.257,54.528 46.223,54.425 46.189,54.316 C46.139,54.157 46.089,53.995 46.04,53.844 C45.971,53.639 45.901,53.448 45.832,53.261 C45.816,53.219 45.801,53.17 45.784,53.128 C45.521,52.433 45.264,51.878 45.048,51.5 C43.334,42.269 44.694,36.436 46.736,32.805 C47.207,31.967 47.715,31.247 48.228,30.629 C52.099,31.881 56.147,32.555 59.958,32.555 C67.495,32.961 73.226,30.733 73.718,30.299 C73.757,30.503 73.791,30.695 73.826,30.888 C74.065,32.634 74.417,37.721 74.309,42.252 C74.311,42.251 74.313,42.249 74.315,42.248 C73.902,54.881 70.992,67.322 65.454,74.92 C63.192,76.301 52.055,70.442 46.856,67.191 C47.827,62.842 47.327,58.581 46.531,55.509 L46.531,55.509 L46.531,55.509 Z" id="Alina-Face_1_" fill="#FFE0A5"></path>
     <path d="M73.149,42.354 C71.186,42.333 69.573,43.911 69.551,45.874 C69.543,46.478 70.028,46.974 70.633,46.981 C71.238,46.988 71.735,46.504 71.742,45.897 C71.748,45.143 72.369,44.534 73.123,44.543 C73.555,44.549 73.934,44.758 74.182,45.072 C74.233,44.242 74.27,43.408 74.299,42.574 C73.938,42.446 73.555,42.358 73.149,42.354 M59.336,47.147 C58.732,47.139 58.246,46.645 58.254,46.038 C58.275,44.079 59.891,42.499 61.852,42.522 C63.815,42.542 65.397,44.157 65.373,46.118 C65.365,46.723 64.867,47.21 64.262,47.202 C63.66,47.196 63.174,46.698 63.18,46.095 C63.19,45.341 62.582,44.718 61.828,44.71 C61.074,44.702 60.451,45.312 60.443,46.064 C60.438,46.67 59.942,47.153 59.336,47.147" id="Alina-Eyes_1_" fill="#40382F"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-left-gabrielo.svg

@@ -1,5 +1,5 @@
-<g id="person-left-gabrielo" transform="translate(205.000000, 215.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M0.46,183.344 C4.917,151.379 8.392,129.141 10.69,114.425 C12.059,105.678 23.995,90.652 28.833,84.858 C29.437,81.986 30.61,78.066 32.819,75.21 C33.171,69.123 33.01,63.02 32.799,58.807 C32.426,53.123 31.18,47.666 29.973,42.388 C27.596,31.99 25.348,22.151 31.918,15.254 C32.199,14.887 32.541,14.553 32.938,14.265 C32.948,14.256 32.958,14.248 32.967,14.241 C32.99,14.221 33.014,14.2 33.035,14.178 C33.021,12.51 33.844,10.921 35.262,9.977 C36.032,9.463 36.908,9.186 37.795,9.143 C43.766,2.077 54.061,1.683 62.588,1.358 C66.318,1.215 69.843,1.081 72.986,0.519 C73.279,0.466 73.574,0.441 73.867,0.441 C75.258,0.441 76.601,1.022 77.556,2.067 C78.347,2.932 78.798,4.034 78.859,5.172 C83.672,6.881 87.453,9.598 89.777,13.084 C91.252,15.297 90.736,18.277 88.605,19.866 C86.912,21.127 86.775,21.374 87.437,25.926 C88.005,29.822 88.777,35.122 86.894,42.266 L86.871,42.645 C86.846,43.09 86.762,43.525 86.623,43.94 C86.619,44.42 86.615,44.934 86.611,45.477 C86.611,45.511 86.609,45.544 86.609,45.578 C86.582,48.946 86.552,53.443 86.535,58.732 C86.531,59.961 86.527,61.235 86.525,62.545 L86.525,62.646 C86.521,64.229 86.519,65.862 86.519,67.549 C86.558,69.307 86.058,71.051 85.373,72.598 C89.418,75.375 93.646,79.277 96.734,85.228 C99.103,89.788 100.836,93.862 103.031,99.019 C105.073,103.818 107.572,109.685 111.333,117.613 L32.95,223.219 C32.882,223.174 32.812,223.131 32.749,223.078 C26.415,217.713 20.999,213.334 8.27,203.07 C2.415,198.348 -0.579,190.789 0.46,183.344 L0.46,183.344 L0.46,183.344 Z" fill="#557EBE"></path>
+<g id="Person-Left-Gabrielo" transform="translate(205.000000, 215.000000)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M0.46,183.344 C4.917,151.379 8.392,129.141 10.69,114.425 C12.059,105.678 23.995,90.652 28.833,84.858 C29.437,81.986 30.61,78.066 32.819,75.21 C33.171,69.123 33.01,63.02 32.799,58.807 C32.426,53.123 31.18,47.666 29.973,42.388 C27.596,31.99 25.348,22.151 31.918,15.254 C32.199,14.887 32.541,14.553 32.938,14.265 C32.948,14.256 32.958,14.248 32.967,14.241 C32.99,14.221 33.014,14.2 33.035,14.178 C33.021,12.51 33.844,10.921 35.262,9.977 C36.032,9.463 36.908,9.186 37.795,9.143 C43.766,2.077 54.061,1.683 62.588,1.358 C66.318,1.215 69.843,1.081 72.986,0.519 C73.279,0.466 73.574,0.441 73.867,0.441 C75.258,0.441 76.601,1.022 77.556,2.067 C78.347,2.932 78.798,4.034 78.859,5.172 C83.672,6.881 87.453,9.598 89.777,13.084 C91.252,15.297 90.736,18.277 88.605,19.866 C86.912,21.127 86.775,21.374 87.437,25.926 C88.005,29.822 88.777,35.122 86.894,42.266 L86.871,42.645 C86.846,43.09 86.762,43.525 86.623,43.94 C86.619,44.42 86.615,44.934 86.611,45.477 C86.611,45.511 86.609,45.544 86.609,45.578 C86.582,48.946 86.552,53.443 86.535,58.732 C86.531,59.961 86.527,61.235 86.525,62.545 L86.525,62.646 C86.521,64.229 86.519,65.862 86.519,67.549 C86.558,69.307 86.058,71.051 85.373,72.598 C89.418,75.375 93.646,79.277 96.734,85.228 C99.103,89.788 100.836,93.862 103.031,99.019 C105.073,103.818 107.572,109.685 111.333,117.613 L32.95,223.219 C32.882,223.174 32.812,223.131 32.749,223.078 C26.415,217.713 20.999,213.334 8.27,203.07 C2.415,198.348 -0.579,190.789 0.46,183.344 L0.46,183.344 L0.46,183.344 Z" fill="#557EBE"></path>
     <path d="M64.448,86.5 L68.048,92.721 C68.419,93.45 69.159,93.873 69.923,93.881 C70.259,93.887 70.601,93.811 70.919,93.649 C71.968,93.112 72.382,91.825 71.847,90.778 L67.671,82.608 C67.249,81.784 66.194,79.876 65.245,79.706 C64.95,82.276 64.448,86.5 64.448,86.5 L64.448,86.5 L64.448,86.5 Z M37.72,77.267 C37.591,78.332 37.64,78.555 37.503,79.954 C46.454,85.45 59.784,87.378 59.915,87.397 C60.739,87.512 61.421,88.1 61.663,88.895 L65.051,100.182 C65.244,100.83 65.121,101.53 64.719,102.069 C64.315,102.612 63.68,102.932 63.007,102.93 C62.997,102.928 62.907,102.93 62.902,102.928 C60.709,102.905 41.269,102.371 33.525,91.291 C33.404,91.121 33.31,90.928 33.246,90.725 C32.859,89.53 34.191,80.188 37.72,77.267 L37.72,77.267 L37.72,77.267 Z" id="Gabrielo-Colar_1_" fill="#EFEFEF"></path>
     <path d="M41.415,51.118 L41.491,44.184 C41.511,42.614 42.798,41.351 44.37,41.371 C45.938,41.39 47.2,42.677 47.181,44.249 L47.202,48.829 C48.007,48.998 48.722,48.948 49.296,48.766 C53.011,48.649 51.644,36.821 52.587,33.995 C53.593,30.987 60.22,28.098 65.409,29.356 C73.659,31.356 76.348,29.118 78.784,27.856 C79.282,27.659 79.694,27.647 80.038,27.778 L80.038,27.782 C80.472,28.932 80.815,30.17 81.071,31.487 L81.071,31.491 C81.198,32.147 81.305,32.824 81.391,33.519 C81.391,33.524 81.391,33.528 81.393,33.532 C81.477,34.229 81.543,34.946 81.588,35.679 C81.525,38.053 81.379,40.508 81.447,42.355 C81.453,42.513 81.541,42.527 81.636,42.497 C81.589,47.276 81.519,56.378 81.519,67.613 C81.644,71.363 76.062,78.604 71.644,78.737 C65.587,78.823 55.033,71.794 49.658,68.606 C46.699,66.85 46.187,66.047 45.924,61.927 C45.891,61.393 45.861,58.805 45.83,58.151 C45.625,54.436 43.627,52.871 41.637,52.233 C41.493,51.889 41.411,51.514 41.415,51.118 L41.415,51.118 L41.415,51.118 Z" id="Gabrielo-Body_4_" fill="#FFE0A5"></path>
     <path d="M81.641,42.061 C81.184,41.868 80.686,41.754 80.159,41.748 C77.981,41.726 76.19,43.477 76.165,45.656 C76.157,46.327 76.696,46.878 77.366,46.886 C78.04,46.894 78.591,46.355 78.598,45.683 C78.606,44.845 79.293,44.17 80.131,44.18 C80.875,44.189 81.486,44.73 81.611,45.435 C81.622,44.133 81.632,43 81.641,42.061 L81.641,42.061 L81.641,42.061 Z M64.565,45.525 C64.59,43.348 66.381,41.595 68.561,41.62 C70.741,41.643 72.495,43.437 72.471,45.615 C72.463,46.287 71.908,46.826 71.239,46.818 C70.567,46.811 70.03,46.258 70.036,45.589 C70.048,44.752 69.374,44.06 68.536,44.052 C67.698,44.042 67.007,44.718 66.999,45.554 C66.991,46.228 66.44,46.764 65.767,46.758 C65.096,46.75 64.557,46.199 64.565,45.525 L64.565,45.525 L64.565,45.525 Z" id="Gabrielo-Eyes_1_" fill="#3F372E"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-left-mustafa.svg

@@ -1,5 +1,5 @@
-<g id="person-left-mustafa" transform="translate(205.000000, 210.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M0.397,188.34 C4.856,156.36 8.331,134.129 10.629,119.419 C11.996,110.675 23.932,95.648 28.77,89.854 C29.364,87.025 30.516,83.165 32.672,80.318 C32.908,74.804 32.643,69.457 32.324,65.535 C26.734,55.666 23.08,39.35 27.068,27.312 C29.127,21.099 33.072,16.425 38.539,13.691 C43.582,4.92 53.102,-0.452 63.83,-0.452 C70.673,-0.452 77.462,1.683 83.472,5.723 C86.456,7.566 86.954,10.319 86.413,12.304 C86.315,12.659 86.184,12.997 86.026,13.316 C91.337,17.818 98.344,29.164 86.514,54.855 C86.494,57.794 86.481,60.764 86.471,63.73 C86.467,64.958 86.463,66.232 86.461,67.541 L86.461,67.64 C86.457,69.222 86.455,70.859 86.455,72.545 C86.494,74.303 85.994,76.046 85.309,77.594 C89.354,80.369 93.58,84.27 96.67,90.223 C99.037,94.783 100.772,98.856 102.965,104.011 C104.982,108.746 107.647,114.757 111.332,122.537 L32.892,228.221 C32.822,228.174 32.749,228.131 32.684,228.075 C26.329,222.692 20.916,218.317 8.205,208.069 C2.352,203.344 -0.642,195.785 0.397,188.34 L0.397,188.34 L0.397,188.34 Z" fill="#557EBE"></path>
+<g id="Person-Left-Mustafa" transform="translate(205.000000, 210.000000)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M0.397,188.34 C4.856,156.36 8.331,134.129 10.629,119.419 C11.996,110.675 23.932,95.648 28.77,89.854 C29.364,87.025 30.516,83.165 32.672,80.318 C32.908,74.804 32.643,69.457 32.324,65.535 C26.734,55.666 23.08,39.35 27.068,27.312 C29.127,21.099 33.072,16.425 38.539,13.691 C43.582,4.92 53.102,-0.452 63.83,-0.452 C70.673,-0.452 77.462,1.683 83.472,5.723 C86.456,7.566 86.954,10.319 86.413,12.304 C86.315,12.659 86.184,12.997 86.026,13.316 C91.337,17.818 98.344,29.164 86.514,54.855 C86.494,57.794 86.481,60.764 86.471,63.73 C86.467,64.958 86.463,66.232 86.461,67.541 L86.461,67.64 C86.457,69.222 86.455,70.859 86.455,72.545 C86.494,74.303 85.994,76.046 85.309,77.594 C89.354,80.369 93.58,84.27 96.67,90.223 C99.037,94.783 100.772,98.856 102.965,104.011 C104.982,108.746 107.647,114.757 111.332,122.537 L32.892,228.221 C32.822,228.174 32.749,228.131 32.684,228.075 C26.329,222.692 20.916,218.317 8.205,208.069 C2.352,203.344 -0.642,195.785 0.397,188.34 L0.397,188.34 L0.397,188.34 Z" fill="#557EBE"></path>
     <path d="M42.153,17.542 C48.747,4.021 66.567,0.314 80.776,9.935 C82.401,10.894 81.29,11.714 80.36,11.185 C79.165,10.255 76.801,13.433 80.747,15.73 C85.38,18.183 93.954,27.437 81.524,53.726 L81.524,53.728 C81.534,52.255 81.544,50.926 81.555,49.749 C81.526,49.319 81.494,48.859 81.45,48.34 C81.313,46.971 81.45,44.913 81.6,42.736 C81.553,38.925 81.032,35.54 79.944,32.692 C79.493,32.737 78.95,32.973 78.282,33.463 C76.221,34.976 71.971,36.351 65.346,34.101 C60.29,32.383 53.346,31.976 52.524,38.991 C52.169,42.02 53.016,54.218 48.963,53.757 L48.963,53.741 C48.408,53.891 47.75,53.983 47.065,54.046 L47.118,49.244 C47.138,47.672 45.876,46.386 44.307,46.366 C42.735,46.346 41.448,47.609 41.428,49.18 L41.352,56.114 C41.346,56.622 41.485,57.093 41.713,57.508 C41.065,60.705 40.315,64.97 37.652,64.695 C30.42,53.617 24.037,24.846 42.153,17.542 L42.153,17.542 L42.153,17.542 Z" id="Mustafa-Hair_2_" fill="#3F372E"></path>
     <path d="M41.307,59.467 C41.455,58.801 41.586,58.133 41.713,57.507 C41.484,57.092 41.346,56.621 41.352,56.113 L41.428,49.179 C41.448,47.608 42.735,46.345 44.307,46.365 C45.875,46.385 47.137,47.671 47.118,49.243 L47.065,54.045 C47.751,53.982 48.409,53.891 48.963,53.74 L48.963,53.756 C53.016,54.217 52.168,42.02 52.524,38.99 C53.346,31.975 60.29,32.383 65.346,34.1 C71.971,36.35 76.221,34.975 78.282,33.462 C78.95,32.972 79.493,32.735 79.944,32.691 C81.032,35.539 81.553,38.924 81.6,42.735 C81.45,44.912 81.313,46.969 81.45,48.339 C81.495,48.856 81.526,49.313 81.554,49.74 C81.511,54.854 81.458,62.94 81.458,72.607 C81.583,76.357 76.001,83.599 71.583,83.732 C65.526,83.818 51.214,75.877 48.39,73.621 C45.353,71.195 45.351,70.568 45.769,65.146 C46.25,61.478 43.793,60.021 41.307,59.467 L41.307,59.467 L41.307,59.467 Z" id="Mustafa-Face_2_" fill="#FFE0A5"></path>
     <path d="M64.385,91.497 L67.985,97.718 C68.356,98.447 69.096,98.87 69.86,98.878 C70.196,98.884 70.538,98.808 70.856,98.646 C71.905,98.109 72.319,96.822 71.784,95.775 L67.608,87.605 C67.186,86.781 66.131,84.873 65.182,84.703 C64.886,87.272 64.385,91.497 64.385,91.497 L64.385,91.497 L64.385,91.497 Z M37.656,82.262 C37.527,83.328 37.576,83.551 37.439,84.95 C46.39,90.446 59.72,92.374 59.851,92.393 C60.675,92.508 61.357,93.096 61.599,93.891 L64.987,105.178 C65.18,105.826 65.057,106.526 64.655,107.065 C64.251,107.608 63.616,107.928 62.943,107.926 C62.933,107.924 62.843,107.926 62.838,107.924 C60.645,107.901 41.205,107.367 33.461,96.287 C33.34,96.117 33.246,95.924 33.182,95.721 C32.795,94.526 34.127,85.184 37.656,82.262 L37.656,82.262 L37.656,82.262 Z" id="Mustafa-Colar_1_" fill="#EFEFEF"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-right-alina.svg

@@ -1,5 +1,5 @@
-<g id="person-right-alina" transform="translate(760.000000, 214)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M102.881,162.547 C100.541,145.769 99.397,134.956 98.477,126.268 C97.661,118.557 97.014,112.466 95.87,105.132 C94.932,99.128 91.02,93.511 85.009,86.42 C84.974,86.374 84.937,86.33 84.9,86.285 L84.295,85.564 C94.332,69.79 92.707,53.121 89.166,41.246 C91.025,29.142 88.184,21.31 85.416,16.828 C81.395,10.322 74.787,6.438 67.738,6.438 C67.658,6.438 67.578,6.439 67.496,6.44 C62.654,2.126 56.041,-0.222 48.59,-0.222 C39.182,-0.222 30.371,3.445 26.145,9.119 C23.659,12.454 22.124,15.93 21.565,19.477 C18.151,23.168 15.432,29.957 19.12,37.748 C19.13,37.769 19.14,37.788 19.149,37.808 C20.389,40.342 22.251,42.886 24.096,44.681 C24.096,44.685 24.098,44.688 24.098,44.692 L24.106,44.902 C24.114,45.06 24.12,45.218 24.131,45.377 C24.463,50.7 25.213,55.797 26.36,60.519 C26.391,60.648 26.428,60.792 26.467,60.936 L26.506,61.081 C27.412,64.685 28.531,67.975 29.852,70.908 C28.678,71.854 27.637,72.929 26.715,74.144 C21.067,81.583 14.348,92.177 7.235,103.394 C4.898,107.077 2.492,110.865 0.051,114.664 L70.189,209.161 C70.211,209.143 70.237,209.129 70.258,209.109 C75.219,204.606 79.779,200.129 90.133,189.773 C99.223,180.681 103.989,170.503 102.881,162.547 L102.881,162.547 L102.881,162.547 Z" fill="#557EBE"></path>
+<g id="Person-Right-Alina" transform="translate(760.000000, 214)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M102.881,162.547 C100.541,145.769 99.397,134.956 98.477,126.268 C97.661,118.557 97.014,112.466 95.87,105.132 C94.932,99.128 91.02,93.511 85.009,86.42 C84.974,86.374 84.937,86.33 84.9,86.285 L84.295,85.564 C94.332,69.79 92.707,53.121 89.166,41.246 C91.025,29.142 88.184,21.31 85.416,16.828 C81.395,10.322 74.787,6.438 67.738,6.438 C67.658,6.438 67.578,6.439 67.496,6.44 C62.654,2.126 56.041,-0.222 48.59,-0.222 C39.182,-0.222 30.371,3.445 26.145,9.119 C23.659,12.454 22.124,15.93 21.565,19.477 C18.151,23.168 15.432,29.957 19.12,37.748 C19.13,37.769 19.14,37.788 19.149,37.808 C20.389,40.342 22.251,42.886 24.096,44.681 C24.096,44.685 24.098,44.688 24.098,44.692 L24.106,44.902 C24.114,45.06 24.12,45.218 24.131,45.377 C24.463,50.7 25.213,55.797 26.36,60.519 C26.391,60.648 26.428,60.792 26.467,60.936 L26.506,61.081 C27.412,64.685 28.531,67.975 29.852,70.908 C28.678,71.854 27.637,72.929 26.715,74.144 C21.067,81.583 14.348,92.177 7.235,103.394 C4.898,107.077 2.492,110.865 0.051,114.664 L70.189,209.161 C70.211,209.143 70.237,209.129 70.258,209.109 C75.219,204.606 79.779,200.129 90.133,189.773 C99.223,180.681 103.989,170.503 102.881,162.547 L102.881,162.547 L102.881,162.547 Z" fill="#557EBE"></path>
     <path d="M74.166,82.202 C74.156,82.136 73.764,82.247 73.756,82.179 C71.283,82.115 68.731,81.458 66.688,80.343 C61.344,77.421 57.936,73.167 56.559,67.7 C56.516,67.524 56.485,67.348 56.446,67.171 C53.594,68.956 48.962,71.519 44.979,73.247 C45.043,74.651 45.106,75.786 45.221,76.688 C43.903,77.766 43.735,77.969 40.68,80.153 C40.68,80.153 24.93,92.403 33.43,102.153 C41.93,111.903 66.555,96.778 73.555,90.278 C76.93,88.403 81.071,89.501 81.071,89.501 L78.012,85.86 L74.166,82.202 L74.166,82.202 Z" id="Alina-Neck" fill="#FFD191"></path>
     <path d="M56.769,55.492 C56.78,55.452 56.79,55.416 56.8,55.376 C56.868,55.118 56.938,54.864 57.009,54.624 C57.043,54.511 57.077,54.408 57.111,54.299 C57.161,54.14 57.211,53.978 57.26,53.827 C57.329,53.622 57.399,53.431 57.468,53.244 C57.484,53.202 57.499,53.153 57.516,53.111 C57.779,52.416 58.036,51.861 58.252,51.483 C59.966,42.252 58.606,36.419 56.564,32.788 C56.093,31.95 55.585,31.23 55.072,30.612 C51.201,31.864 47.152,32.538 43.342,32.538 C35.805,32.944 30.074,30.716 29.582,30.282 C29.543,30.486 29.509,30.678 29.474,30.871 C29.235,32.617 28.883,37.704 28.991,42.235 C28.989,42.234 28.987,42.232 28.985,42.231 C29.398,54.864 32.308,67.305 37.846,74.903 C40.108,76.284 51.245,70.425 56.445,67.174 C55.473,62.825 55.973,58.563 56.769,55.492 L56.769,55.492 L56.769,55.492 Z" id="Alina-Face" fill="#FFE0A5"></path>
     <path d="M30.151,42.337 C32.114,42.316 33.727,43.894 33.749,45.857 C33.757,46.461 33.272,46.957 32.667,46.964 C32.062,46.971 31.565,46.487 31.558,45.88 C31.552,45.126 30.931,44.517 30.177,44.526 C29.745,44.532 29.366,44.741 29.118,45.055 C29.067,44.225 29.03,43.391 29.001,42.557 C29.362,42.429 29.744,42.341 30.151,42.337 M43.963,47.13 C44.567,47.122 45.053,46.628 45.045,46.021 C45.024,44.062 43.408,42.482 41.447,42.505 C39.484,42.525 37.902,44.14 37.926,46.101 C37.934,46.706 38.432,47.193 39.037,47.185 C39.639,47.179 40.125,46.681 40.119,46.078 C40.109,45.324 40.717,44.701 41.471,44.693 C42.225,44.685 42.848,45.295 42.856,46.047 C42.862,46.653 43.358,47.136 43.963,47.13" id="Alina-Eyes" fill="#40382F"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-right-gabrielo.svg

@@ -1,5 +1,5 @@
-<g id="person-right-gabrielo" transform="translate(760, 214)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M110.954,183.006 C106.497,151.041 103.022,128.803 100.724,114.086 C99.355,105.339 87.419,90.313 82.581,84.519 C81.977,81.647 80.804,77.727 78.595,74.871 C78.243,68.784 78.404,62.681 78.615,58.468 C78.988,52.784 80.234,47.327 81.441,42.049 C83.818,31.651 86.066,21.812 79.496,14.915 C79.215,14.548 78.873,14.214 78.476,13.926 C78.466,13.917 78.456,13.909 78.447,13.902 C78.424,13.882 78.4,13.861 78.379,13.839 C78.393,12.171 77.57,10.582 76.152,9.638 C75.382,9.124 74.506,8.847 73.619,8.804 C67.648,1.738 57.353,1.344 48.826,1.019 C45.096,0.876 41.57,0.742 38.428,0.18 C38.135,0.127 37.84,0.102 37.547,0.102 C36.156,0.102 34.813,0.683 33.858,1.728 C33.067,2.593 32.616,3.695 32.555,4.833 C27.742,6.542 23.961,9.259 21.637,12.745 C20.162,14.958 20.678,17.938 22.809,19.527 C24.502,20.788 24.639,21.035 23.977,25.587 C23.409,29.483 22.637,34.783 24.52,41.927 L24.543,42.306 C24.568,42.751 24.652,43.186 24.791,43.601 C24.795,44.081 24.799,44.595 24.803,45.138 C24.803,45.172 24.805,45.205 24.805,45.239 C24.832,48.607 24.862,53.104 24.879,58.393 C24.883,59.622 24.887,60.896 24.889,62.206 L24.889,62.307 C24.893,63.89 24.895,65.523 24.895,67.21 C24.856,68.968 25.356,70.712 26.041,72.259 C21.996,75.036 17.768,78.938 14.68,84.889 C12.311,89.449 10.578,93.523 8.383,98.68 C6.341,103.479 3.842,109.346 0.081,117.274 L78.465,222.881 C78.533,222.836 78.603,222.793 78.666,222.74 C85,217.375 90.416,212.996 103.145,202.732 C108.999,198.01 111.993,190.451 110.954,183.006 L110.954,183.006 L110.954,183.006 Z" fill="#557EBE"></path>
+<g id="Person-Right-Gabrielo" transform="translate(760, 214)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M110.954,183.006 C106.497,151.041 103.022,128.803 100.724,114.086 C99.355,105.339 87.419,90.313 82.581,84.519 C81.977,81.647 80.804,77.727 78.595,74.871 C78.243,68.784 78.404,62.681 78.615,58.468 C78.988,52.784 80.234,47.327 81.441,42.049 C83.818,31.651 86.066,21.812 79.496,14.915 C79.215,14.548 78.873,14.214 78.476,13.926 C78.466,13.917 78.456,13.909 78.447,13.902 C78.424,13.882 78.4,13.861 78.379,13.839 C78.393,12.171 77.57,10.582 76.152,9.638 C75.382,9.124 74.506,8.847 73.619,8.804 C67.648,1.738 57.353,1.344 48.826,1.019 C45.096,0.876 41.57,0.742 38.428,0.18 C38.135,0.127 37.84,0.102 37.547,0.102 C36.156,0.102 34.813,0.683 33.858,1.728 C33.067,2.593 32.616,3.695 32.555,4.833 C27.742,6.542 23.961,9.259 21.637,12.745 C20.162,14.958 20.678,17.938 22.809,19.527 C24.502,20.788 24.639,21.035 23.977,25.587 C23.409,29.483 22.637,34.783 24.52,41.927 L24.543,42.306 C24.568,42.751 24.652,43.186 24.791,43.601 C24.795,44.081 24.799,44.595 24.803,45.138 C24.803,45.172 24.805,45.205 24.805,45.239 C24.832,48.607 24.862,53.104 24.879,58.393 C24.883,59.622 24.887,60.896 24.889,62.206 L24.889,62.307 C24.893,63.89 24.895,65.523 24.895,67.21 C24.856,68.968 25.356,70.712 26.041,72.259 C21.996,75.036 17.768,78.938 14.68,84.889 C12.311,89.449 10.578,93.523 8.383,98.68 C6.341,103.479 3.842,109.346 0.081,117.274 L78.465,222.881 C78.533,222.836 78.603,222.793 78.666,222.74 C85,217.375 90.416,212.996 103.145,202.732 C108.999,198.01 111.993,190.451 110.954,183.006 L110.954,183.006 L110.954,183.006 Z" fill="#557EBE"></path>
     <path d="M46.966,86.163 L43.366,92.384 C42.995,93.113 42.255,93.536 41.491,93.544 C41.155,93.55 40.813,93.474 40.495,93.312 C39.446,92.775 39.032,91.488 39.567,90.441 L43.743,82.271 C44.165,81.447 45.22,79.539 46.169,79.369 C46.464,81.938 46.966,86.163 46.966,86.163 L46.966,86.163 L46.966,86.163 Z M73.695,76.929 C73.824,77.994 73.775,78.217 73.912,79.616 C64.961,85.112 51.631,87.04 51.5,87.059 C50.676,87.174 49.994,87.762 49.752,88.557 L46.363,99.844 C46.17,100.492 46.293,101.192 46.695,101.731 C47.099,102.274 47.734,102.594 48.408,102.592 C48.418,102.59 48.508,102.592 48.513,102.59 C50.706,102.567 70.146,102.033 77.89,90.953 C78.011,90.783 78.105,90.59 78.169,90.387 C78.556,89.192 77.224,79.85 73.695,76.929 L73.695,76.929 L73.695,76.929 Z" id="Gabrielo-Colar" fill="#EFEFEF"></path>
     <path d="M69.999,50.78 L69.923,43.846 C69.903,42.276 68.616,41.013 67.044,41.033 C65.476,41.052 64.214,42.339 64.233,43.911 L64.212,48.491 C63.407,48.66 62.692,48.61 62.118,48.428 C58.403,48.311 59.77,36.483 58.827,33.657 C57.821,30.649 51.194,27.76 46.005,29.018 C37.755,31.018 35.066,28.78 32.63,27.518 C32.132,27.321 31.72,27.309 31.376,27.44 L31.376,27.444 C30.942,28.594 30.599,29.832 30.343,31.149 L30.343,31.153 C30.216,31.809 30.109,32.486 30.023,33.181 C30.023,33.186 30.023,33.19 30.021,33.194 C29.937,33.891 29.871,34.608 29.826,35.341 C29.889,37.715 30.035,40.17 29.967,42.017 C29.961,42.175 29.873,42.189 29.778,42.159 C29.825,46.938 29.895,56.04 29.895,67.275 C29.77,71.025 35.352,78.266 39.77,78.399 C45.827,78.485 56.381,71.456 61.756,68.268 C64.715,66.512 65.227,65.709 65.49,61.589 C65.523,61.055 65.553,58.467 65.584,57.813 C65.789,54.098 67.787,52.533 69.777,51.895 C69.921,51.551 70.003,51.176 69.999,50.78 L69.999,50.78 L69.999,50.78 Z" id="Gabrielo-Body_2_" fill="#FFE0A5"></path>
     <path d="M29.773,41.723 C30.23,41.53 30.728,41.416 31.255,41.41 C33.433,41.388 35.224,43.139 35.249,45.318 C35.257,45.989 34.718,46.54 34.048,46.548 C33.374,46.556 32.823,46.017 32.816,45.345 C32.808,44.507 32.121,43.832 31.283,43.842 C30.539,43.851 29.928,44.392 29.803,45.097 C29.792,43.795 29.782,42.663 29.773,41.723 L29.773,41.723 L29.773,41.723 Z M46.849,45.187 C46.824,43.01 45.033,41.257 42.853,41.282 C40.673,41.305 38.919,43.099 38.943,45.277 C38.951,45.949 39.506,46.488 40.175,46.48 C40.847,46.473 41.384,45.92 41.378,45.251 C41.366,44.414 42.04,43.722 42.878,43.714 C43.716,43.704 44.407,44.38 44.415,45.216 C44.423,45.89 44.974,46.426 45.647,46.42 C46.318,46.412 46.857,45.861 46.849,45.187 L46.849,45.187 L46.849,45.187 Z" id="Gabrielo-Eyes" fill="#3F372E"></path>

+ 2 - 2
apps/web/priv/static/dart/svg/person-right-mustafa.svg

@@ -1,5 +1,5 @@
-<g id="person-right-mustafa" transform="translate(760.000000, 211.000000)" sketch:type="MSShapeGroup">
-    <path id="selection" d="M110.987,188.456 C106.528,156.475 103.053,134.245 100.755,119.534 C99.388,110.79 87.452,95.763 82.614,89.969 C82.02,87.14 80.868,83.28 78.712,80.433 C78.476,74.919 78.741,69.572 79.06,65.65 C84.65,55.781 88.304,39.465 84.316,27.427 C82.257,21.214 78.312,16.54 72.845,13.806 C67.802,5.035 58.282,-0.337 47.554,-0.337 C40.71,-0.337 33.921,1.798 27.911,5.838 C24.927,7.681 24.429,10.434 24.97,12.419 C25.068,12.774 25.199,13.112 25.357,13.431 C20.046,17.933 13.039,29.279 24.869,54.97 C24.889,57.909 24.902,60.879 24.912,63.845 C24.916,65.073 24.92,66.347 24.922,67.656 L24.922,67.755 C24.926,69.337 24.928,70.974 24.928,72.66 C24.889,74.418 25.389,76.161 26.074,77.709 C22.029,80.484 17.803,84.385 14.713,90.338 C12.346,94.898 10.611,98.971 8.418,104.126 C6.401,108.861 3.736,114.872 0.051,122.651 L78.491,228.336 C78.561,228.289 78.634,228.245 78.699,228.19 C85.054,222.806 90.467,218.432 103.178,208.183 C109.031,203.46 112.026,195.901 110.987,188.456 L110.987,188.456 L110.987,188.456 Z" fill="#557EBE"></path>
+<g id="Person-Right-Mustafa" transform="translate(760.000000, 211.000000)" sketch:type="MSShapeGroup">
+    <path id="Selection" d="M110.987,188.456 C106.528,156.475 103.053,134.245 100.755,119.534 C99.388,110.79 87.452,95.763 82.614,89.969 C82.02,87.14 80.868,83.28 78.712,80.433 C78.476,74.919 78.741,69.572 79.06,65.65 C84.65,55.781 88.304,39.465 84.316,27.427 C82.257,21.214 78.312,16.54 72.845,13.806 C67.802,5.035 58.282,-0.337 47.554,-0.337 C40.71,-0.337 33.921,1.798 27.911,5.838 C24.927,7.681 24.429,10.434 24.97,12.419 C25.068,12.774 25.199,13.112 25.357,13.431 C20.046,17.933 13.039,29.279 24.869,54.97 C24.889,57.909 24.902,60.879 24.912,63.845 C24.916,65.073 24.92,66.347 24.922,67.656 L24.922,67.755 C24.926,69.337 24.928,70.974 24.928,72.66 C24.889,74.418 25.389,76.161 26.074,77.709 C22.029,80.484 17.803,84.385 14.713,90.338 C12.346,94.898 10.611,98.971 8.418,104.126 C6.401,108.861 3.736,114.872 0.051,122.651 L78.491,228.336 C78.561,228.289 78.634,228.245 78.699,228.19 C85.054,222.806 90.467,218.432 103.178,208.183 C109.031,203.46 112.026,195.901 110.987,188.456 L110.987,188.456 L110.987,188.456 Z" fill="#557EBE"></path>
     <path d="M69.231,17.657 C62.637,4.136 44.817,0.429 30.608,10.05 C28.983,11.009 30.094,11.829 31.024,11.3 C32.219,10.37 34.583,13.548 30.637,15.845 C26.004,18.298 17.43,27.552 29.86,53.841 L29.86,53.843 C29.85,52.37 29.84,51.041 29.829,49.864 C29.858,49.434 29.89,48.974 29.934,48.455 C30.071,47.086 29.934,45.028 29.784,42.851 C29.831,39.04 30.352,35.655 31.44,32.807 C31.891,32.852 32.434,33.088 33.102,33.578 C35.163,35.091 39.413,36.466 46.038,34.216 C51.095,32.498 58.038,32.091 58.86,39.106 C59.215,42.135 58.368,54.333 62.421,53.872 L62.421,53.856 C62.976,54.006 63.634,54.098 64.319,54.161 L64.266,49.359 C64.246,47.787 65.508,46.501 67.077,46.481 C68.649,46.461 69.936,47.724 69.956,49.295 L70.032,56.229 C70.038,56.737 69.899,57.208 69.671,57.623 C70.319,60.82 71.069,65.085 73.732,64.81 C80.963,53.732 87.346,24.962 69.231,17.657 L69.231,17.657 L69.231,17.657 Z" id="Mustafa-Hair_1_" fill="#3F372E"></path>
     <path d="M70.076,59.583 C69.928,58.917 69.797,58.249 69.67,57.623 C69.899,57.208 70.037,56.737 70.031,56.229 L69.955,49.295 C69.935,47.724 68.648,46.461 67.076,46.481 C65.508,46.501 64.246,47.787 64.265,49.359 L64.318,54.161 C63.632,54.098 62.974,54.007 62.42,53.856 L62.42,53.872 C58.367,54.333 59.215,42.136 58.859,39.106 C58.037,32.091 51.093,32.499 46.037,34.216 C39.412,36.466 35.162,35.091 33.101,33.578 C32.433,33.088 31.89,32.851 31.439,32.807 C30.351,35.655 29.83,39.04 29.783,42.851 C29.933,45.028 30.07,47.085 29.933,48.455 C29.888,48.972 29.857,49.429 29.829,49.856 C29.872,54.97 29.925,63.056 29.925,72.723 C29.8,76.473 35.382,83.715 39.8,83.848 C45.857,83.934 60.169,75.993 62.993,73.737 C66.03,71.311 66.032,70.684 65.614,65.262 C65.133,61.594 67.59,60.137 70.076,59.583 L70.076,59.583 L70.076,59.583 Z" id="Mustafa-Face_1_" fill="#FFE0A5"></path>
     <path d="M46.998,91.612 L43.398,97.833 C43.027,98.562 42.287,98.985 41.523,98.993 C41.187,98.999 40.845,98.923 40.527,98.761 C39.478,98.224 39.064,96.937 39.599,95.89 L43.775,87.72 C44.197,86.896 45.252,84.988 46.201,84.818 C46.496,87.388 46.998,91.612 46.998,91.612 L46.998,91.612 L46.998,91.612 Z M73.727,82.378 C73.856,83.444 73.807,83.667 73.944,85.066 C64.993,90.562 51.663,92.49 51.532,92.509 C50.708,92.624 50.026,93.212 49.784,94.007 L46.395,105.294 C46.202,105.942 46.325,106.642 46.727,107.181 C47.131,107.724 47.766,108.044 48.44,108.042 C48.45,108.04 48.54,108.042 48.545,108.04 C50.738,108.017 70.178,107.483 77.922,96.403 C78.043,96.233 78.137,96.04 78.201,95.837 C78.588,94.642 77.256,85.3 73.727,82.378 L73.727,82.378 L73.727,82.378 Z" id="Mustafa-Colar" fill="#EFEFEF"></path>

BIN
apps/web/priv/static/doc/Kakaranet-Scene.sketch/Data


+ 4 - 4
apps/web/priv/static/doc/Kakaranet-Scene.sketch/metadata

@@ -5,9 +5,9 @@
 	<key>app</key>
 	<string>com.bohemiancoding.sketch3</string>
 	<key>build</key>
-	<integer>7799</integer>
+	<integer>7892</integer>
 	<key>commit</key>
-	<string>e645bc992e78ea0d8f54ab21bcdc83987015d34b</string>
+	<string>a6af16d03e62e9b34da1be1098affa7b56d9838b</string>
 	<key>fonts</key>
 	<array>
 		<string>Exo2-Regular</string>
@@ -15,8 +15,8 @@
 		<string>LucidaGrande-Bold</string>
 	</array>
 	<key>length</key>
-	<integer>2637831</integer>
+	<integer>2679279</integer>
 	<key>version</key>
-	<integer>36</integer>
+	<integer>37</integer>
 </dict>
 </plist>

+ 1 - 1
apps/web/priv/static/doc/Kakaranet-Scene.sketch/version

@@ -1 +1 @@
-36
+37