chat

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

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

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

@@ -734,28 +734,6 @@
         <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="Message-3" transform="translate(0.000000, 150.000000)">
-                <path d="M8,0 L8,11.6284985 L8.8817842e-16,24.290657 L8,24.290657 L8,34 L204,34 L204,0 L8,0 Z" id="Rectangle-81" fill="#84DAE5" sketch:type="MSShapeGroup"></path>
-                <text id="Please-enjoy-the-gam" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" fill="#3B5998">
-                    <tspan x="14" y="23">Please enjoy the game</tspan>
-                </text>
-            </g>
-            <g id="Message-2" transform="translate(8.000000, 107.000000)">
-                <path d="M9,0 L9,15.360363 L0,27 L9.00000001,27 L9,34 L205,34 L205,0 L9,0 Z" id="Rectangle-80" fill="#F6C97F" sketch:type="MSShapeGroup" transform="translate(102.500000, 17.000000) scale(-1, 1) translate(-102.500000, -17.000000) "></path>
-                <text id="Yes,-design-is-well." sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" fill="#3B5998">
-                    <tspan x="7" y="23">Yes, design is well.</tspan>
-                </text>
-            </g>
-            <g id="Message-1" transform="translate(1.000000, 0.000000)">
-                <path d="M8,0 L8,75.6284985 L8.8817842e-16,88.290657 L8,88.290657 L8,98 L204,98 L204,0 L8,0 Z" id="Rectangle-79" fill="#84DAE5" sketch:type="MSShapeGroup"></path>
-                <text id="Hello,-this-is-new-K" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" fill="#3B5998">
-                    <tspan x="13" y="21">Hello, this is new </tspan>
-                    <tspan x="13" y="43">Kakaranet design. </tspan>
-                    <tspan x="13" y="65">Hope you will love it’s </tspan>
-                    <tspan x="13" y="87">made by Intersog.</tspan>
-                </text>
-            </g>
-            <rect id="Chat-Input" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="8" y="194" width="196" height="61"></rect>
         </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

@@ -282,6 +282,41 @@ function drawSampleCards() {
 var scrollSensitivity = 0.2;
 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 textElement = chatText(id,me,string);
+    console.log("Text Element: ");
+    var html = "<g xmlns='http://www.w3.org/2000/svg' " + 
+        "id='Message-"+id+"' transform='translate(0,"+translate_y+")'></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+
+                " L"+x2+","+y1+
+                " L"+x2+","+y2+
+                " L"+x1+","+y2+
+                " L"+x1+","+y1+"' fill='#84D9E5'></path>";
+    console.log(svg(box));
+    messageElement.insertBefore(svg(box),textElement);
+    console.log(messageElement);
+}
+
+function chatText(id, me, string) {
+    var i = 0;
+    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]+"'>" +
+            string + "</text>";
+    console.log(html);
+    return svg(html);
+}
+
 function mouseWheelHandler(e) {
     var evt = window.event || e;
     var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
@@ -294,3 +329,39 @@ function mouseWheelHandler(e) {
     console.log(ori);
     return true; 
 }
+
+var svgNS = "http://www.w3.org/2000/svg";
+
+function create_multiline(target) {
+    var text_element = target; // evt.target;
+    var width = target.getAttribute("width");
+    var lines = text_element.firstChild.data.split('\n');
+    var words = [].concat.apply([],lines.map(function(line) { return line.split(' '); }));;
+    var start_x = 15; //text_element.getAttribute('x');
+    text_element.firstChild.data = '';
+
+    var tspan_element = document.createElementNS(svgNS, "tspan");
+    tspan_element.setAttribute("x", start_x);
+    tspan_element.setAttribute("dy", 18);
+    var text_node = document.createTextNode(words[0]);
+
+    tspan_element.appendChild(text_node);
+    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];
+
+        if (tspan_element.getComputedTextLength() > width) {
+            tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);
+            var tspan_element = document.createElementNS(svgNS, "tspan");
+            tspan_element.setAttribute("x", start_x);
+            tspan_element.setAttribute("dy", 18);
+            text_node = document.createTextNode(words[i]);
+            tspan_element.appendChild(text_node);
+            text_element.appendChild(tspan_element);
+        }
+    }
+}

apps/web/priv/static/doc/svg_clean.htm

@@ -10,7 +10,6 @@
 
 <svg id="Refined" width="900px" style="position:fixed; top:0; left:0; height:100%; width:100%;">Placeholder for SVG Game Scene</svg>
 
-
 <div class="controls" id="history">
 <button id="pluslogin" type="button" data-gapiattached="true">Login</button>
 <label id="nothing"> Google</label></div><label id="gosterge">Gosterge: 1 5</label><br>