cards

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

@@ -723,7 +723,7 @@
           fill="#CE290F">12</text>
     <circle id="Bullet-1,1" fill="#CE290F"
           cx="20" cy="43" r="7"/></g><
-          
+
 <g id="Slot-2,2" transform="translate(42,62)>
     <rect id="Card-2,2" fill="#FFFFFF"
           x="0.576" y="-0.3231875"
@@ -735,27 +735,85 @@
     <circle id="Bullet-2,2" fill="#CE290F"
           cx="20" cy="43" r="7"/></g>           <svg>
 
-<svg width="400px" height="600px" viewBox="0 0 90 130">
 
-            <g id="Slot-1,3">
-                <rect id="Card-1,3" fill="#FFFFFF" x="0" y="0"
-                      width="40" height="60" rx="4"/>
-                <text id="Number-1,3" x="4.91796875" y="26.4873125"
-                      font-family="Lucida Grande" font-size="24"
-                      font-weight="bold" letter-spacing="-2" fill="#CE290F">12</text>
-                <circle id="Bullet-1,3" fill="#CE290F" cx="20" cy="43" r="7"/>
-            </g>
+<svg id="Scene" width="600px" height="200px" viewBox="0 0 600 130">
+    <defs><style type="text/css"> g { display: block; } </style> </defs>
 
-            <g id="Slot-1,4" transform="translate(42.0,62.0)" >
+    <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"/>
+    <g id="Slot-1,10"/><g id="Slot-1,11"/><g id="Slot-1,12"/>
+    <g id="Slot-1,13"/><g id="Slot-1,14"/><g id="Slot-1,15"/>
+    <g id="Slot-2,1"/><g id="Slot-2,2"/><g id="Slot-2,3"/>
+    <g id="Slot-2,4"/><g id="Slot-2,5"/><g id="Slot-2,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" x="11.91796875" y="26.4873125"
+                <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">1</text>
+                      font-weight="bold" letter-spacing="-2" fill="#3B5998">12</text>
                 <circle id="Bullet-2,2" fill="#3B5998" cx="20" cy="43" r="7"/>
-            </g>
+            </g-->
+
+</svg>
 
-<svg>
+<script>
+
+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 = '<g xmlns="http://www.w3.org/2000/svg" id="Slot-{this.pos}" '+
+                  'transform="translate({this.x},{this.y})">' +
+            '<rect id="Card-{this.pos}" fill="#FFFFFF" x="0" y="0" ' + 
+                  'width="40" height="60" rx="4" style="display: inline;"/>' +
+            '<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}">{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 });
+    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);
+    console.log(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));
+}
+</script>
 
 </code>