fix SVG positioning in safari

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

@@ -377,14 +377,14 @@
             <g id="Mustafa-Discard" transform="translate(372.000000, 261.000000)" fill="#B5C6D8" sketch:type="MSShapeGroup">
                 <rect id="Shape" x="0" y="0" width="40" height="60" rx="8"></rect>
             </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>
+            <rect id="Left-Bar" opacity="0.64" fill="#FFFFFF" sketch:type="MSShapeGroup" x="2" y="91" width="213" height="456" 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>
+            <rect id="Right-Bar" opacity="0.762360075" fill="#FFFFFF" sketch:type="MSShapeGroup" x="856" y="91" width="214" height="456" 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">
@@ -459,21 +459,18 @@
         <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>
-
-    <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
-        <div xmlns:data="Chat" id="edit"
+    
+    <foreignObject id="GameChatEditor" x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
+        <div xmlns:data="Chat" id="edit" contentEditable="true"
           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>
+        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"
+    <foreignObject id="OnlineChatEditor" x="10" 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;"
-        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
+         xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
     </foreignObject>
 
-
 </svg>

apps/web/priv/static/app/SVG.txt

@@ -2,6 +2,9 @@
     HOW TO PATCH SVG
     ================
 
+    MANUAL
+    ------
+
     1. Clipping Regions for Sidebars
     --------------------------------
 
@@ -14,20 +17,23 @@
     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"
+    <foreignObject id="GameChatEditor" x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
+        <div xmlns:data="Chat" id="edit" contentEditable="true"
           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>
+        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"
+    <foreignObject id="OnlineChatEditor" x="10" 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;"
-        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
+         xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
     </foreignObject>
 
-    3. Chat Containers
-    ------------------
+    JavaScript
+    ----------
+
+    3. Chat Containers (insert after Settings element for Z-order) 
+    --------------------------------------------------------------
 
     <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)"/>

apps/web/priv/static/app/css/main.css

@@ -1,31 +1,6 @@
 
-:focus {-moz-outline-style:none;}
-html, body {margin: 0; padding:0;}
-html { overflow: hidden; height: 100%; }
-
-body {
-    height: 100%;
-    font-family: 'Exo 2', Arial, sans-serif;
-    font-weight: bold;
-    text-align: center;
-    font-size: 16px;
-    color: #fff;
-    overflow: hidden;
-    -webkit-user-select: none;  
-    -moz-user-select: none;     
-    -ms-user-select: none; 
-    -o-user-select: none;
-    user-select: none;          
-}
-
-svg { width: auto; height: 100%; }
+div { -webkit-user-select: text; user-select: text; }
+html, body { -webkit-user-select: none; user-select: none; }
+html, body { margin: 0; padding:0; overflow: hidden; width: 100%; height: 100%; font-family: "Exo 2"; }
 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;}

apps/web/priv/static/app/index.htm

@@ -2,16 +2,15 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <meta name="description" content="Okey" />
+    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="initial-scale=1, user-scalable=no">
     <title>Kakaranet Okey</title>
     <link href='http://fonts.googleapis.com/css?family=Exo+2:600' rel='stylesheet' type='text/css'>
     <link href="css/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
-    <svg id="Refined" preserveAspectRatio="xMidYMin meet" viewBox="0 0 1071 661"
-         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-        style="style="position:fixed; top:0; left:0; height:100%; width:100%;">    </svg>
+    <svg id="Refined" style="top:0; left:0; height:100%; width:100%;"></svg>
 
     <script src="js/bert.js"></script>
     <script src="js/selector.js"></script>
@@ -30,26 +29,30 @@
 
     <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>
+<!-- Lynx Mode Client with minimal set of Okey game controls
+
+<div    class="controls" id="history" height=0 width=0>
+<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></div>
+
+-->
 
 </body>
 </html>

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

@@ -1,3 +1,7 @@
+function isSafari() {
+    var ua = navigator.userAgent.toLowerCase(); 
+    return ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1;
+}
 
 var svgNS = "http://www.w3.org/2000/svg";
 var color = ['#DE3F26','#606060','#48AF5E','#FFC800'];
@@ -72,8 +76,9 @@ function PatchSVG()
     initDiscards();
     initChat();
     initChatSample();
+    initEditorsSafari()
 
-    //document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
+//    document.addEventListener('touchmove',function(e) {e.preventDefault();},false);
     $svg.attr({preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%"});
 }
 
@@ -105,3 +110,49 @@ $.load('Kakaranet-Scene.svg', function(x) {
         StartApp(); 
     });
 });
+
+function initEditorsSafari()
+{
+    if (isSafari()) {
+        $("#edit").css({position:"relative"});
+        $("#onlineChatEdit").css({position:"relative"});
+        $(window).on("resize", manualForeignObjectPositioning);
+        $(window).on("orientationchange", manualForeignObjectPositioning);
+        manualForeignObjectPositioning();
+    }
+}
+
+function manualForeignObjectPositioning()
+{
+    var svgWidth = $svg[0].viewBox.baseVal.width,
+        svgHeight = $svg[0].viewBox.baseVal.height;
+
+    var sizeX = svgWidth / innerWidth,
+        sizeY = svgHeight / innerHeight,
+        size = Math.max(sizeX, sizeY) || 1;
+
+    var realX, realY, scale, shiftX, shiftY;
+
+    realX = 1/size * svgWidth;
+    realY = 1/size * svgHeight;
+
+    if (sizeX < sizeY) {
+//      console.log("Left and Right White Spaces. Do stretch the Width ");
+        shiftY = 0;
+        shiftX = (innerWidth - realX) / 2;
+    } else  {
+//      console.log("Top and Bottom White Spaces. Do reorient, or adopt the Height.");
+        shiftX = 0;
+        shiftY = (innerHeight - realY) / 2;
+    }
+
+    $("#GameChatEditor").attr({x: 864 * realX / svgWidth + shiftX,
+                               y: 504 * realY / svgHeight + shiftY,
+                               width: 198 * realX / svgWidth,
+                               height: 120 * realY / svgHeight});
+
+    $("#OnlineChatEditor").attr({x: 10 * realX / svgWidth + shiftX,
+                               y: 504 * realY / svgHeight + shiftY,
+                               width: 198 * realX / svgWidth,
+                               height: 120 * realY / svgHeight});
+}

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

@@ -23,24 +23,6 @@ function onlineHoverOutColor(evt) {
     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;
-        if (e.innerText.trim() != ""){
-            var text = e.innerText.trim().encodeHTML();
-            chatMessage(chatContainer,"100","Maxim",text);
-                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) {
 
@@ -298,3 +280,22 @@ function initChat()
     document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
 
 }
+
+function chatEditor(evt) {
+    var chatContainer = evt.target.getAttribute("xmlns:data");
+    if (evt.keyCode == 13 && evt.altKey == false) {
+        var e = evt.target;
+        if (e.innerText.trim() != ""){
+            var text = e.innerText.trim().encodeHTML();
+            chatMessage(chatContainer,"100","Maxim",text);
+                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.altKey == true) {
+        document.execCommand('insertText',false, '\n');
+    }
+    var scroll = -100000;
+    if (null != currentChat) { left_scroll = scroll; }
+    mouseWheelHandler({'detail':scroll,'wheelDelta':scroll});
+}

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

@@ -1,10 +1,45 @@
+
 function DragScope(scope) {
 
     function calcShift()
     {
-        sizeX = $svg[0].viewBox.baseVal.width / innerWidth;
-        sizeY = $svg[0].viewBox.baseVal.height / innerHeight;
+        var svgWidth = $svg[0].viewBox.baseVal.width;
+        var svgHeight = $svg[0].viewBox.baseVal.height;
+
+        sizeX = svgWidth / innerWidth;
+        sizeY = svgHeight / innerHeight;
         size = Math.max(sizeX, sizeY) || 1;
+
+        var realX, realY, scale, shiftX, shiftY;
+
+        realX = 1/size * svgWidth;
+        realY = 1/size * svgHeight;
+
+        if (sizeX < sizeY)
+        {
+//            console.log("Left and Right White Spaces. Do stretch the Width ");
+            shiftY = 0;
+            shiftX = 0;//(innerWidth - realX) / 2;
+        }
+        else 
+        {
+//            console.log("Top and Bottom White Spaces. Do reorient, or adopt the Height.");
+            shiftX = 0;
+            shiftY = 0;//(innerHeight - realY) / 2;
+        }
+
+        console.log("width:" + realX +" height:" + realY);
+/*
+        document.getElementById("GameChatEditor").setAttribute("x", 864 * realX / svgWidth + shiftX);
+        document.getElementById("GameChatEditor").setAttribute("y", 504 * realY / svgHeight + shiftY);
+        document.getElementById("GameChatEditor").setAttribute("width", 198 * realX / svgWidth);
+        document.getElementById("GameChatEditor").setAttribute("height", 120 * realY / svgHeight);
+
+        document.getElementById("OnlineChatEditor").setAttribute("x", 10 * realX / svgWidth + shiftX);
+        document.getElementById("OnlineChatEditor").setAttribute("y", 504 * realY / svgHeight + shiftY);
+        document.getElementById("OnlineChatEditor").setAttribute("width", 198 * realX / svgWidth);
+        document.getElementById("OnlineChatEditor").setAttribute("height", 120 * realY / svgHeight);
+*/
     }
 
     function Draggable(root, options)

apps/web/priv/static/app/js/okey/okey_protocol.js

@@ -60,7 +60,7 @@ function OkeyApiProviderScope(scope) {
 
             var msg = JSON.parse(e.data);
 
-            if (msg.eval) { try{eval(msg.eval)}catch(e){console.log(e);} }
+            if (msg.eval) { try{eval(msg.eval)}catch(ex){console.log(ex);} }
             if (msg.data) { this.emitEvent(msg.data,this.beutify(this.parse(dec(msg.data)))); }
 
         },

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

@@ -5,7 +5,7 @@ var scope = {
     CARD_SMALL_SOURCE: "svg/Card-Small.svg",
     CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
     SKIN_NAMES: [ "Alina", "Gabrielo", "Mustafa" ],
-    version: 0906201401
+    version: 0906201402
 };
 
 var $ = function(_undefind)

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

@@ -15,7 +15,7 @@
 		<string>LucidaGrande-Bold</string>
 	</array>
 	<key>length</key>
-	<integer>2575020</integer>
+	<integer>2575110</integer>
 	<key>version</key>
 	<integer>37</integer>
 </dict>

apps/web/src/okey.erl

@@ -54,24 +54,25 @@ user() ->
             X;
         U-> U end.
 
-color(Id,Color) -> wf:wire(wf:f("document.querySelector('#~s').style.color = \"~s\";",[Id,Color])).
+color(Id,Color) -> ok. % wf:wire(wf:f("document.querySelector('#~s').style.color = \"~s\";",[Id,Color])).
 unselect(Id) -> color(Id,black).
 select(Id) -> color(Id,red).
+update(A,B) -> ok.  % wf:update(A,B);
 
 redraw_istaka(TilesList) ->
     redraw_tiles(TilesList, #dropdown{id = "istaka", postback = combo, source = [istaka]}).
 
 redraw_tiles(undefined, _DropDown) -> [];
 redraw_tiles([] = _TilesList, DropDown = #dropdown{id = ElementId}) ->
-    wf:update(ElementId, [DropDown#dropdown{value = [], options = []}]);
+    okey:update(ElementId, [DropDown#dropdown{value = [], options = []}]);
 redraw_tiles([{Tile, _}| _ ] = TilesList, DropDown = #dropdown{id = ElementId}) ->
-    wf:update(ElementId, [DropDown#dropdown{value = Tile,
+    okey:update(ElementId, [DropDown#dropdown{value = Tile,
              options = [#option{label = CVBin, value = CVBin} || {CVBin, _} <- TilesList]}]).
 
 redraw_players(Players) ->
     User = user(),
     [ begin PN = player_name(PI),
-            wf:update(LabelId, #label{ id = LabelId,
+            okey:update(LabelId, #label{ id = LabelId,
                style= case User#user.id == Id of
                   true -> "font-weight: bold;";
                   _ -> "" end, body = <<" ",PN/binary," ">>}) 
@@ -108,7 +109,9 @@ send_roster_group(List) ->
     wf:info(?MODULE,"User Group: ~p",[List]),
     self() ! {server,{roster_group,List}}.
 
-body() ->
+body() -> [].
+
+body2() -> 
     wf:wire(#api{name=plusLogin, tag=plus}),
   [ #panel    { id = history },
     #button   { id = pluslogin,  body = "Login",       postback = login_button },
@@ -148,7 +151,7 @@ event(init) ->
       [] -> [?GAMEID];
       List -> List end,
 
-    wf:update(games_ids,#dropdown{id = games_ids, value = ?GAMEID, options = 
+    okey:update(games_ids,#dropdown{id = games_ids, value = ?GAMEID, options = 
       [#option{label = wf:to_list(GameId), value = wf:to_list(GameId)} || GameId <- GamesIds]}),
 
     wf:info(?MODULE,"Istaka on Started:"),
@@ -235,11 +238,11 @@ event(pause) ->
         case get(game_okey_pause) of 
             X when X == resume orelse X == undefined -> 
                 put(game_okey_pause, pause),
-                wf:update(pause, [#button{id = pause, body = "Resume", postback = pause}]),
+                okey:update(pause, [#button{id = pause, body = "Resume", postback = pause}]),
                 "pause";
             pause ->
                 put(game_okey_pause, resume),
-                wf:update(pause, [#button{id = pause, body = <<"Pause">>, postback = pause}]),
+                okey:update(pause, [#button{id = pause, body = <<"Pause">>, postback = pause}]),
                 "resume"
         end,
     GameId = get(okey_game_id),
@@ -267,7 +270,7 @@ event({server, {game_event, _, okey_game_started, Args}}) ->
     case lists:keyfind(gosterge, 1, Args) of
         {_, {_, C, V}} ->
             wf:info(?MODULE,"Gosterge: ~p ~p",[C,V]),
-            wf:update(gosterge, #label{id = gosterge, body = wf:to_binary(["Gosterge: ", wf:to_list(C), " ", wf:to_list(V)])});
+            okey:update(gosterge, #label{id = gosterge, body = wf:to_binary(["Gosterge: ", wf:to_list(C), " ", wf:to_list(V)])});
         _ -> ok end,
     put(game_okey_tiles, TilesList),
     put(game_okey_pause, resume),
@@ -288,7 +291,7 @@ event({server, {game_event, _, okey_game_player_state, Args}}) ->
 
             case lists:keyfind(gosterge, 1, Args) of
                 {_, {_, C, V}} ->
-                    wf:update(gosterge, #label{id = gosterge, body = wf:to_binary(["Gosterge: ", wf:to_list(C), " ", wf:to_list(V)])});
+                    okey:update(gosterge, #label{id = gosterge, body = wf:to_binary(["Gosterge: ", wf:to_list(C), " ", wf:to_list(V)])});
                 _ -> ok end,
 
             {_, Tiles} = lists:keyfind(tiles, 1, Args),
@@ -374,14 +377,14 @@ event({server,{game_event, _Game, okey_turn_timeout, Args}}) ->
 %%    
 %%    if Im =/= Who ->
 %%            put(game_okey_pause, Action),
-%%            wf:update(pause, [#button{id = pause, body = case Action of pause -> "Resume"; resume -> "Pause" end, postback = pause}]);
+%%            okey:update(pause, [#button{id = pause, body = case Action of pause -> "Resume"; resume -> "Pause" end, postback = pause}]);
 %%       true -> ok end;
 
 event({server, {game_event, _, okey_game_info, Args}}) ->
     wf:info(?MODULE,"Game Info: ~p", [Args]),
     {_, PlayersInfo} = lists:keyfind(players, 1, Args),
 
-    [wf:update(ElementId, [Element]) || {ElementId, Element} <- ?RESET_ELEMENTS],
+    [okey:update(ElementId, [Element]) || {ElementId, Element} <- ?RESET_ELEMENTS],
 
     PlayersTempl = [
         #player{label = player1, discard = h1, take = player4},
@@ -427,4 +430,4 @@ event({user_online,User}) -> wf:info(?MODULE,"User ~p goes Online",[User#user.id
 event({user_offline,User}) -> self() ! {server,{offline,User#user.id,User#user.names,User#user.surnames}};
 event(_Event) -> wf:info(?MODULE,"Unknown Event: ~p", [_Event]).
 
-api_event(X,Y,Z) -> avz:api_event(X,Y,Z).
+%api_event(X,Y,Z) -> avz:api_event(X,Y,Z).