pixel precise online chat positioning

apps/web/priv/static/app/Kakaranet-Scene.svg

@@ -440,11 +440,11 @@
                 <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>
             <rect id="Gabrielo-Discard-Shape" stroke="#F8E81C" stroke-width="10" sketch:type="MSShapeGroup" x="231" y="391" width="42" height="63.012453" rx="8"></rect>
-            <g id="Gabrielo-Discard" transform="translate(233.000000, 392.000000)" fill="#9B9B9B" sketch:type="MSShapeGroup">
+            <g id="Gabrielo-Discard" transform="translate(233.000000, 392.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
                 <rect id="Gabrielo-Discard-Shape" x="0" y="-0.0465116279" width="39" height="59.8006645" rx="8"></rect>
             </g>
             <rect id="You-Discard-Shape" stroke="#F8E81C" stroke-width="10" sketch:type="MSShapeGroup" x="798" y="391" width="42" height="63" rx="8"></rect>
-            <g id="You-Discard" transform="translate(800.000000, 393.000000)" fill="#4F5563" sketch:type="MSShapeGroup">
+            <g id="You-Discard" transform="translate(800.000000, 393.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
                 <rect id="You-Discard-Shape" x="0" y="0" width="38" height="60" rx="8"></rect>
             </g>
             <g id="Alina-Discard" transform="translate(669.000000, 261.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
@@ -453,7 +453,7 @@
             <g id="Mustafa-Discard" transform="translate(370.000000, 261.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
                 <rect id="Shape" x="0" y="0" width="38" height="60" rx="8"></rect>
             </g>
-            <rect id="Left-Bar" opacity="0.64" fill="url(#linearGradient-3)" sketch:type="MSShapeGroup" x="3" y="91" width="213" height="456" rx="5"></rect>
+            <rect id="Left-Bar" opacity="0.64" fill="url(#linearGradient-3)" sketch:type="MSShapeGroup" x="1" y="91" width="214" height="456" rx="5"></rect>
             <g id="Have-8-Tashes" transform="translate(649.000000, 615.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(21.000000, 17.000000) scale(-1, 1) translate(-21.000000, -17.000000) " font-family="Exo 2" font-size="17" font-weight="normal" sketch:alignment="middle">
@@ -537,7 +537,6 @@
         <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 id="Five-Pointed-Star" sketch:type="MSLayerGroup" transform="translate(479.000000, 627.000000)"></g>
     </g>
 
     <foreignObject id="GameChatEditor" x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
@@ -546,7 +545,7 @@
         xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
     </foreignObject>
 
-    <foreignObject id="OnlineChatEditor" x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
+    <foreignObject id="OnlineChatEditor" x="7" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
         <div xmlns:data="Chat+xxx" contentEditable="true" id="onlineChatEdit"
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
          xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>

apps/web/priv/static/app/js/bootloader.js

@@ -295,14 +295,14 @@ function manualForeignObjectPositioning()
         shiftY = (innerHeight - realY) / 2;
     }
 
-    $("#GameChatEditor").attr({x: 864 * realX / svgWidth + shiftX,
+    $("#GameChatEditor").attr({x: 866 * realX / svgWidth + shiftX,
                                y: 504 * realY / svgHeight + shiftY,
-                               width: 198 * realX / svgWidth,
+                               width: 194 * realX / svgWidth,
                                height: 120 * realY / svgHeight});
 
     $("#OnlineChatEditor").attr({x: 10 * realX / svgWidth + shiftX,
                                y: 504 * realY / svgHeight + shiftY,
-                               width: 198 * realX / svgWidth,
+                               width: 194 * realX / svgWidth,
                                height: 120 * realY / svgHeight});
 }
 

apps/web/priv/static/app/js/chat.js

@@ -54,7 +54,7 @@ function mouseWheelHandler(e) {
 function chatMessage(chatName, id, me, string) {
     var i=0;
     var colors=['#FDFDFD','#DFF1F4'];
-    var x1 = 7;
+    var x1 = 10;
     var y1 = 0;
     var container = chatName == "Chat" ? "Right-Bar" : "Left-Bar";
     var hover = chatName == "Chat" ? "barHover" : "onlineHover";
@@ -204,7 +204,7 @@ function openChat(evt) {
 
 function create_multiline(target) {
     var text_element = target; // evt.target;
-    var width = 190; //target.getAttribute("width");
+    var width = 188; //target.getAttribute("width");
     var words = text_element.firstChild.data.split('');
 //    console.log(words);
 //    var words = [].concat.apply([],lines.map(function(line) { return line.split(' '); }));;
@@ -243,8 +243,8 @@ function initChat()
 {
 
     var inGameChat = '<g id="Chat"         y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
-    var onlineList = '<g id="Online-List"  y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
-    var onlineChat = '<g id="Online-Chat"  y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
+    var onlineList = '<g id="Online-List"  x="10" y="0" clip-path="url(#myClip1)" transform="translate(7.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
+    var onlineChat = '<g id="Online-Chat"  x="10" y="0" clip-path="url(#myClip3)" transform="translate(7.000000, 107.000000)" xmlns="http://www.w3.org/2000/svg" />';
 
     var page = document.getElementById("Kakaranet-Scene");
     var settings = document.getElementById("Settings");

apps/web/priv/static/app/js/selector.js

@@ -15,7 +15,7 @@ var scope = {
     MALE_SKINS: [ "Gabrielo", "Mustafa" ],
     FEMALE_SKINS: [ "Alina" ],
     paused: false,
-    version: 1906201405
+    version: 1906201406
 };
 
 var $ = function(_undefind)

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

@@ -16,7 +16,7 @@
 		<string>ZapfDingbatsITC</string>
 	</array>
 	<key>length</key>
-	<integer>3013905</integer>
+	<integer>3013689</integer>
 	<key>version</key>
 	<integer>37</integer>
 </dict>