working deck

apps/face/priv/static/doc/svg.htm

@@ -711,34 +711,59 @@
 
 <code>
 
-&lt;svg width="400px" height="600px" viewBox="0 0 90 120"&gt;
-
-&lt;g id="Slot-1,1" transform="translate(0,0)&gt;
-    &lt;rect id="Card-1,1" fill="#FFFFFF"
-          x="0.576" y="-0.3231875"
-          width="40" height="60" rx="4"/&gt;
-    &lt;text id="Number-1,1" x="4.91796875" y="26.4873125"
-          font-family="Lucida Grande" font-size="24"
-          font-weight="bold" letter-spacing="-2"
-          fill="#CE290F"&gt;12&lt;/text&gt;
-    &lt;circle id="Bullet-1,1" fill="#CE290F"
-          cx="20" cy="43" r="7"/&gt;&lt;/g&gt;&lt;
-
-&lt;g id="Slot-2,2" transform="translate(42,62)&gt;
-    &lt;rect id="Card-2,2" fill="#FFFFFF"
-          x="0.576" y="-0.3231875"
-          width="40" height="60" rx="4"/&gt;
-    &lt;text id="Number-1,2" x="4.91796875" y="26.4873125"
-          font-family="Lucida Grande" font-size="24"
-          font-weight="bold" letter-spacing="-2"
-          fill="#CE290F"&gt;12&lt;/text&gt;
-    &lt;circle id="Bullet-2,2" fill="#CE290F"
-          cx="20" cy="43" r="7"/&gt;&lt;/g&gt;           &lt;svg&gt;
-
-
-<svg id="Scene" width="600px" height="200px" viewBox="0 0 600 130">
-    <defs><style type="text/css"> g { display: block; } </style> </defs>
+function template_engine(html, data) {
+    var re = /{([^}]+)?}/g, code = 'var r=[];', cursor = 0;
+    var add = function(line,js) {
+        js? (code += 'r.push(' + line + ');') :
+            (code += line != '' ?
+            'r.push("' + line.replace(/"/g, '\\"') + '");' : '');
+        return add; }
+    while(match = re.exec(html)) {
+        add(html.slice(cursor, match.index))(match[1],true);
+        cursor = match.index + match[0].length; }
+    add(html.substr(cursor, html.length - cursor));
+    code += 'return r.join("");';
+    return new Function(code).apply(data); }
+
+function color(c) {
+    switch(c) {
+        case 1: return '#CE290F';
+        case 2: return '#3B5998';
+        case 3: return '#48AF5E';
+        case 4: return '#FFEC00';
+        default: return ''; } }
 
+function card(line,pos,col,v) {
+    var p = line + ',' + pos, c = color(col);
+    var t = '&lt;g xmlns="http://www.w3.org/2000/svg" id="Slot-{this.pos}" '+
+                  'transform="translate({this.x},{this.y})"&gt;' +
+            '&lt;rect id="Card-{this.pos}" fill="#FFFFFF" x="0" y="0" ' + 
+                  'width="40" height="60" rx="4" style="display: inline;"/&gt;' +
+            '&lt;text id="Value-{this.pos}" dx="20" x="0" y="26.4873125" ' +
+                  'font-family="Lucida Grande" font-size="24" '+
+                  'font-weight="bold" letter-spacing="-2" text-anchor="middle" '+
+                  'fill="{this.suit}"&gt;{this.value}&lt;/text&gt;'+
+            '&lt;circle id="Color-{this.pos}" fill="{this.suit}" '+
+                  'cx="20" cy="43" r="7"/&gt;&lt;/g&gt;';
+    var res = template_engine(t,{pos: p,suit: c,value: v,y:line*69,x:pos*42 });
+    return res; }
+
+function svg(html) {
+    var dom = new DOMParser().parseFromString(html, "text/xml");
+    return dom.childNodes[0]; }
+
+function place_card(x,y,c,v) {
+    var name = "Slot-"+x+","+y;
+    var slot = document.getElementById(name);
+    slot.parentNode.replaceChild(svg(card(x-1,y-1,c,v)),slot); }
+
+function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
+
+for (var i=1;i<16;i++) { place_card(1,i,rand(1,4),rand(1,13)); }
+
+<svg id="Scene" width="630px" height="200px" viewBox="-3 0 634 130">
+    <rect id="Deck" fill="#AF7B58" x=-5 y=-2 width=635 height=133></rect>
+    <rect id="Deck" fill="#BC8864" x=-5 y=62 width=635 height=5></rect>
     <g id="Slot-1,1"/><g id="Slot-1,2"/><g id="Slot-1,3"/>
     <g id="Slot-1,4"/><g id="Slot-1,5"/><g id="Slot-1,6"/>
     <g id="Slot-1,7"/><g id="Slot-1,8"/><g id="Slot-1,9"/>
@@ -749,16 +774,6 @@
     <g id="Slot-2,7"/><g id="Slot-2,8"/><g id="Slot-2,9"/>
     <g id="Slot-2,10"/><g id="Slot-2,11"/><g id="Slot-2,12"/>
     <g id="Slot-2,13"/><g id="Slot-2,14"/><g id="Slot-2,15"/>
-
-            <!--g id="Slot-1,4" transform="translate(42.0,62.0)" >
-                <rect id="Card-1,4" fill="#FFFFFF" x="0" y="0"
-                      width="40" height="60" rx="4"/>
-                <text id="Number-2,2" style="text-anchor: middle;" dx="20" x="0" y="26.4873125"
-                      font-family="Lucida Grande" font-size="24"
-                      font-weight="bold" letter-spacing="-2" fill="#3B5998">12</text>
-                <circle id="Bullet-2,2" fill="#3B5998" cx="20" cy="43" r="7"/>
-            </g-->
-
 </svg>
 
 <script>
@@ -795,7 +810,7 @@ function card(line,pos,col,v) {
                   'font-weight="bold" letter-spacing="-2" text-anchor="middle" '+
                   'fill="{this.suit}">{this.value}</text>'+
             '<circle id="Color-{this.pos}" fill="{this.suit}" cx="20" cy="43" r="7"/></g>';
-    var res = template_engine(t,{pos: p,suit: c,value: v,y:line*60,x:pos*40 });
+    var res = template_engine(t,{pos: p,suit: c,value: v,y:line*69,x:pos*42 });
     return res; }
 
 function svg(html) {
@@ -811,7 +826,7 @@ function place_card(x,y,c,v) {
 function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
 
 for (var i=1;i<16;i++) {
-    place_card(1,i,rand(1,4),rand(1,13));
+    place_card(rand(1,2),i,rand(1,4),rand(1,13));
 }
 </script>