chat scroll

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

@@ -15,7 +15,7 @@
 		<string>LucidaGrande-Bold</string>
 	</array>
 	<key>length</key>
-	<integer>2668971</integer>
+	<integer>2669208</integer>
 	<key>version</key>
 	<integer>36</integer>
 </dict>

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

@@ -733,7 +733,7 @@
         <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="Chat" sketch:type="MSLayerGroup" transform="translate(857.000000, 102.000000)">
+        <g id="Chat" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(857.000000, 102.000000)">
         </g>
         <g id="Online-List" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(1.000000, 95.000000)">
             <g id="Online-Maxim">

apps/web/priv/static/doc/svg.js

@@ -229,6 +229,7 @@ loadFile('templates/Card.svg', function() {
         var clipPath = svg('<clipPath id="myClip"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path" x="0" y="0" width="216" height="400"/></clipPath>');
         document.getElementsByTagName('defs').item(0).appendChild(clipPath);
         document.getElementById("Online-List").setAttribute("clip-path","url(#myClip)");
+        document.getElementById("Chat").setAttribute("clip-path","url(#myClip)");
         document.getElementById("Clip-Path").setAttribute("transform", "translate(0,0)");
         document.getElementById('Player-Statistics').style.display = 'none';
         
@@ -285,18 +286,18 @@ var scroll = 0.0;
 function chatMessage(id, me, string) {
     var x1 = 10;
     var y1 = 0;
-    var translate_y = document.getElementById("Chat").getBBox().height + 20;
-    var x2 = 210;
+    var translate_y = parseFloat(document.getElementById("Chat").getBBox().height);
+    var x2 = 205;
     var textElement = chatText(id,me,string);
-    console.log("Text Element: ");
+    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,"+translate_y+")'></g>";
+        "id='Message-"+id+"' transform='translate(0,"+dy+")'></g>";
     var messageElement = svg(html);
     messageElement.appendChild(textElement);
     document.getElementById("Chat").appendChild(messageElement);
     create_multiline(textElement);
     var y2 = textElement.getBBox().height + 5;
-    var box = "<path  xmlns='http://www.w3.org/2000/svg' d='M"+x1+","+y1+
+    var box = "<path xmlns='http://www.w3.org/2000/svg' d='M"+x1+","+y1+
                 " L"+x2+","+y1+
                 " L"+x2+","+y2+
                 " L"+x1+","+y2+
@@ -311,7 +312,7 @@ function chatText(id, me, string) {
     var colors=['#3B5998'];
     var html = "<text id='ChatText-"+id+"' width='180' " +
         " xmlns='http://www.w3.org/2000/svg' "+
-        " font-family='Exo 2' font-size='18' font-weight='normal' fill='"+colors[i]+"'>" +
+        " font-family='Exo 2' font-size='16' font-weight='normal' fill='"+colors[i]+"'>" +
             string + "</text>";
     console.log(html);
     return svg(html);
@@ -322,11 +323,12 @@ function mouseWheelHandler(e) {
     var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
     var ori = scroll;
     scroll = parseFloat(scroll_dy) + parseFloat(ori);
+    var limit = parseFloat(document.getElementById("Chat").getBBox().height);
     if (scroll > 0) scroll = 0;
-    if (scroll < -274) scroll = -274;
+    if (scroll < -limit) scroll = -limit;
     document.getElementById("Clip-Path").setAttribute("transform", "translate(0,"+parseFloat(-scroll)+")");
     document.getElementById("Online-List").setAttribute("transform", "translate(0,"+(parseFloat(95+scroll))+")");
-    console.log(ori);
+    document.getElementById("Chat").setAttribute("transform", "translate(857,"+(parseFloat(95+scroll))+")");
     return true; 
 }
 
@@ -349,7 +351,6 @@ function create_multiline(target) {
     text_element.appendChild(tspan_element);
 
     for(var i=0; i<words.length; i++) {
-        console.log(words[i]);
         if (words[i]=="") continue;
         var len = tspan_element.firstChild.data.length;
         tspan_element.firstChild.data += " " + words[i];