clipPath and Mouse Scroll

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

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

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

@@ -756,22 +756,84 @@
             <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" transform="translate(1.000000, 95.000000)">
-            <g id="Online-Maxim">
-                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                <rect id="Rectangle-84" stroke="#48AF5E" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="7" y="7" width="60" height="60"></rect>
-                <text id="Максим-Сохацкий" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                    <tspan x="72" y="25">Максим </tspan>
-                    <tspan x="72" y="43">Сохацкий</tspan>
-                </text>
-            </g>
-            <g id="Online-Sinan" transform="translate(0.000000, 74.000000)">
-                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
-                <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                    <tspan x="75.685446" y="24">Синан</tspan>
-                    <tspan x="75.685446" y="42">Устел</tspan>
-                </text>
+            <g id="Online-Scroll">
+                <g id="Online-Maxim">
+                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                    <rect id="Rectangle-84" stroke="#48AF5E" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="7" y="7" width="60" height="60"></rect>
+                    <text id="Максим-Сохацкий" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                        <tspan x="72" y="25">Максим </tspan>
+                        <tspan x="72" y="43">Сохацкий</tspan>
+                    </text>
+                </g>
+                <g id="Online-Sinan" transform="translate(0.000000, 74.000000)">
+                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                        <tspan x="75.685446" y="24">Синан</tspan>
+                        <tspan x="75.685446" y="42">Устел</tspan>
+                    </text>
+                </g>
+                <g id="Online-Sinan-2" transform="translate(0.000000, 148.000000)">
+                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                        <tspan x="75.685446" y="24">Синан</tspan>
+                        <tspan x="75.685446" y="42">Устел</tspan>
+                    </text>
+                </g>
+                <g id="Online-Sinan-3" transform="translate(0.000000, 222.000000)">
+                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                        <tspan x="75.685446" y="24">Синан</tspan>
+                        <tspan x="75.685446" y="42">Устел</tspan>
+                    </text>
+                </g>
+                <g id="Online-Sinan-4" transform="translate(0.000000, 296.000000)">
+                    <rect id="Rect" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                        <tspan x="75.685446" y="24">Синан</tspan>
+                        <tspan x="75.685446" y="42">Устел</tspan>
+                    </text>
+                </g>
             </g>
         </g>
+        <g id="Player-Statistics" sketch:type="MSLayerGroup" transform="translate(209.000000, 87.000000)">
+            <g id="Dialog-2" sketch:type="MSShapeGroup">
+                <rect id="Rectangle-54" stroke="#48AF5E" stroke-width="10" fill="#FFFFFF" x="0" y="0" width="643" height="515" rx="30"></rect>
+                <rect id="Rectangle-55" stroke="#979797" fill="#48AF5E" x="5" y="4" width="633" height="67"></rect>
+                <path d="M10,149 L10,485.993284 C10,497.042694 18.9566601,506.000011 30.0008497,506.000011 L612.99915,506.000018 C624.045315,506.000018 633,497.050485 633,486.002368 L633,283.000003 C64,486.999987 603,92.0000002 10,149 Z" id="Rectangle-60" fill="#DFF1F4"></path>
+            </g>
+            <text id="Notes" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="normal" fill="#4A4A4A">
+                <tspan x="24" y="453.5">How good is Player (win/lose) per each game type, and how </tspan>
+                <tspan x="24" y="477.5">player usualy reveals the games.</tspan>
+            </text>
+            <text id="Stat-Left" sketch:type="MSTextLayer" font-family="Exo 2" font-size="23.586" font-weight="normal" fill="#517ECE">
+                <tspan x="24" y="183">Lucky</tspan>
+                <tspan x="24" y="212">Std Color                       124/23</tspan>
+                <tspan x="24" y="241">Std Even/Odd             234/2</tspan>
+                <tspan x="24" y="270">Std Countdown          20/10</tspan>
+                <tspan x="24" y="299">Tour Color 512             30/100</tspan>
+                <tspan x="24" y="328">Tour Even/Odd 64    44/23</tspan>
+            </text>
+            <text id="Stat-Right" sketch:type="MSTextLayer" font-family="Exo 2" font-size="23.586" font-weight="normal" fill="#517ECE">
+                <tspan x="341.5" y="182.971549">Have 8 Tashes         40</tspan>
+                <tspan x="341.5" y="211.971549">Normal                      124</tspan>
+                <tspan x="341.5" y="240.971549">Okey                           234</tspan>
+            </text>
+            <text id="Reveals" sketch:type="MSTextLayer" font-family="Exo 2" font-size="35.1627907" font-weight="normal" fill="#3B5998">
+                <tspan x="341.5" y="133">Reveals</tspan>
+            </text>
+            <text id="Games" sketch:type="MSTextLayer" font-family="Exo 2" font-size="35.1627907" font-weight="normal" fill="#3B5998">
+                <tspan x="24" y="134.014225">Games</tspan>
+            </text>
+            <text id="Score:-722-" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="35.1627907" font-weight="bold">
+                <tspan x="24" y="48.0284512">Score: 722 </tspan>
+            </text>
+            <text id="Rank:-22--2" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Exo 2" font-size="35.1627922" font-weight="bold">
+                <tspan x="482" y="48.0284509">Rank: 22 </tspan>
+            </text>
+        </g>
     </g>
 </svg>

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

@@ -171,7 +171,8 @@ function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
 function loadScene() {
     reload("Kakaranet-Scene.svg", "Refined");
     for (var i=1;i<16;i++) { empty_card(i,2); empty_card(i,1); }
-    drawSampleCards(); }
+    //drawSampleCards();
+     }
 
 function findPlace() {
     for (var y=1;y<3;y++) for (var x=1;x<15;x++) {
@@ -223,6 +224,14 @@ loadFile('templates/Card.svg', function() {
         document.getElementById("Point-Table").setAttribute('onclick', 'onPlayerInfo(evt)');
         document.getElementById("Player-Statistics").setAttribute('onclick', 'onPlayerInfoClose(evt)');
         
+        document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
+        
+        var clipPath = svg('<clipPath clipPathUnits="objectBoundingBox" id="myClip"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path" x="0" y="200" width="216" height="200"/></clipPath>');
+        document.getElementsByTagName('defs').item(0).appendChild(clipPath);
+        document.getElementById("Online-Scroll").setAttribute("clip-path","url(#myClip)");
+        document.getElementById('Player-Statistics').style.display = 'none';
+        
+        
 //        onRightMenuDown();
 
     });
@@ -253,13 +262,14 @@ function onRightMenuDown(evt) {
 
 // SVG Samples for svg.htm
 
+/*
 loadFile('templates/Mustafa-Persona.svg',   null, "Mustafa-Persona-Sample");
 loadFile('templates/Mustafa-Selection.svg', null, "Mustafa-Selection-Sample");
-
 document.getElementById("MustafaSelection").addEventListener('click', function() {
     var style = document.getElementById("Mustafa-Selection-Sample").style;
     if (style.display == 'none') style.display = 'block';
                             else style.display = 'none'; });
+*/
 
 function slotName1(x,y) { return "1Slot-"+y+","+x; }
 
@@ -268,3 +278,16 @@ function drawSampleCards() {
     for (var i=1;i<15;i++) { place_card(i,rand(1,2),rand(1,4),rand(1,13)); }
     slotName = slotNameDef; }
 
+var scrollSensitivity = 0.2;
+
+function mouseWheelHandler(e) {
+    var evt = window.event || e;
+    var scroll = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
+    var ori = document.getElementById("Clip-Path").getAttribute("y");
+    ori = parseFloat(scroll) + parseFloat(ori);
+    document.getElementById("Clip-Path").setAttribute("y",parseFloat(ori));
+    document.getElementById("Online-Scroll").setAttribute("transform", "translate(0,"+(parseFloat(ori))+")");
+    document.getElementById("Online-Scroll").setAttribute("y", -parseFloat(ori));
+    console.log(ori);
+    return true; 
+}

apps/web/priv/static/doc/synrc.css

@@ -1,3 +1,5 @@
+//html, body { margin:0; padding:0; overflow:hidden }
+//svg { position:fixed; top:0; left:0; height:100%; width:100% }
 
     A:link      { color: blue; }
     A:visited   { color: darkblue; }