real joker display hint

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

@@ -8,7 +8,8 @@ function CardScope(scope) {
         this.pos = {},
         this.elements = {
             $circle: "circle",
-            $text: "text",
+            $text: ".value",
+            $joker: ".joker",
             $overlay: ".overlay"
         },
         this.proxies = [ "toggle", "selectGroup", "dragGroup", "clearGroup", "revertGroup" ], 
@@ -43,12 +44,27 @@ function CardScope(scope) {
             }).html(result), this.__super__.constructor.call(this), this.render();
         },
         render: function() {
-            null == this.value && null == this.color ? (this.$circle.hide(), this.$text.hide()) : 0 == this.value ? (this.$circle.hide(), 
-            this.$text.show().attr({
-                fill: this.color,
-                "font-size": "26pt",
-                y: 42
-            }).text("❦")) : (this.$circle.show().attr("fill", this.color), this.$text.show().attr("fill", this.color).text(this.value));
+            this.$joker.hide();
+            if (null == this.value && null == this.color)
+            {
+                this.$circle.hide();
+                this.$text.hide();
+            } else if (0 == this.value) {
+                this.$circle.hide();
+                this.$text.show().attr({fill: this.color,"font-size":"26pt",y:42}).text("❦");
+            } else if (scope.gosterme != null && scope.gosterme.color == this.color &&
+                (scope.gosterme.value == this.value-1 ||
+                 (scope.gosterme.value == 13 && this.value == 1)))
+            {
+                this.$circle.hide();
+                this.$joker.show().attr({fill: this.color,"font-size":"20pt",y:52}).text("❦");
+//                this.$circle.show().attr("fill", this.color);
+                this.$text.show().attr("fill", this.color).text(this.value);
+//                this.$text.show().attr({fill: this.color,"font-size":"16pt",y:26}).text("❦");
+            } else {
+                this.$circle.show().attr("fill", this.color);
+                this.$text.show().attr("fill", this.color).text(this.value);
+            };
         },
         drag: function() {
             this.dragHandler = new scope.Draggable(this.$el), this.dragHandler.owner = this;

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

@@ -85,7 +85,11 @@ function HandScope(scope) {
         render: function() {
             var history = this.cards.slice(0, this.cards.length - 1);
             this.$cards.empty(), this.shown && this.hide(), history.reverse().forEach(function(card) {
-                card = card.clone(), card.template(scope.CARD_SMALL_SOURCE), card.$el.attr("transform", "translate(" + defCardTrf + ")"), 
+                card = card.clone(), card.template(scope.CARD_SMALL_SOURCE),
+                card.render(),
+                (card.value == 0 && card.$text.attr({"font-size":"20pt",y:33})),
+                card.$joker.attr({"font-size":"16pt",y:40,x:0}),
+                card.$el.attr("transform", "translate(" + defCardTrf + ")"), 
                 this.$cards.append(card.$el[0]);
             }, this); },
 

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

@@ -388,17 +388,19 @@ function initOkeyScene(x)
     }
 
     if (scope.ended = !1, 
-        scope.deck.fill(x.tiles),
-        scope.deck.render(),
         scope.centralCard.dragHandler.disable(),
         scope.centralCard.$el
             .off(document.createTouch ? "touchstart" : "mousedown", fadeIn)
             .off(document.createTouch ? "touchend"   : "mouseup",   fadeOut), 
         x.gosterme && "null" != x.gosterme)
     {
-        var gosterme = new scope.Card({color:scope.CARD_COLORS[x.gosterme[1]-1],value:x.gosterme[2]});
-        gosterme.$el.attr({transform: "translate(16,-60)"}),
-        $gosterme.append(gosterme.$el);
+        scope.gosterme = new scope.Card({color:scope.CARD_COLORS[x.gosterme[1]-1],value:x.gosterme[2]});
+        scope.gosterme.$el.attr({transform: "translate(16,-60)"}),
+        $gosterme.append(scope.gosterme.$el);
+
+        scope.deck.fill(x.tiles);
+        scope.deck.render();
+
     }
 
     if (null != x.piles && null != x.piles.length) for (var i = 0; i < x.piles.length; i++)

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

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

apps/web/priv/static/app/svg/Card-Small.svg

@@ -1,3 +1,4 @@
 <rect fill="#FFFFFF" x="0" y="0" width="32" height="46" rx="8"></rect>
-<text dx="16" x="0" y="21" font-family="Exo 2" font-size="20" font-weight="normal" text-anchor="middle" fill="#48AF5E">1</text>
+<text class="value" dx="16" x="0" y="21" font-family="Exo 2" font-size="20" font-weight="normal" text-anchor="middle" fill="#48AF5E">a</text>
 <circle cx="16" cy="33" r="5" fill="#48AF5E"></circle>
+<text class="joker" dx="16" x="0" y="26" font-family="Exo 2" font-size="20" font-weight="normal" text-anchor="middle" fill="#48AF5E">b</text>

apps/web/priv/static/app/svg/Card.svg

@@ -1,4 +1,5 @@
 <rect fill="#FFFFFF" x="0" y="0" width="40" height="60" rx="8"></rect>
-<text dx="20" x="0" y="26" font-family="Exo 2" font-size="24" font-weight="normal" text-anchor="middle" fill="#48AF5E">1</text>
+<text class="joker" dx="20" x="0" y="26" font-family="Exo 2" font-size="20" font-weight="normal" text-anchor="middle" fill="#48AF5E">x</text>
+<text class="value" dx="20" x="0" y="26" font-family="Exo 2" font-size="24" font-weight="normal" text-anchor="middle" fill="#48AF5E">y</text>
 <circle cx="20" cy="43" r="7" fill="#48AF5E"></circle>
 <rect class="overlay" fill-opacity="0.6" fill="#3B5998" x="0" y="0" width="40" height="60" rx="8" style="display:none;"></rect>