|
|
@@ -5,6 +5,28 @@
|
|
|
</head>
|
|
|
<body border=0>
|
|
|
|
|
|
+<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.replace(/[\r\t\n]/g, '')).apply(data); }
|
|
|
+
|
|
|
+function loadFile(name, cont) {
|
|
|
+ var client = new XMLHttpRequest();
|
|
|
+ client.open('GET', name, true);
|
|
|
+ client.onload = function() { localStorage.setItem("card",client.responseText); (cont)(); }
|
|
|
+ client.send(); }
|
|
|
+
|
|
|
+</script>
|
|
|
<div class="threecol">
|
|
|
|
|
|
<div class="left">
|
|
|
@@ -707,7 +729,7 @@
|
|
|
Gifts
|
|
|
</code>
|
|
|
|
|
|
-<h1>The Card</h1>
|
|
|
+<h1>SVG Templates in localStorage</h1>
|
|
|
|
|
|
<code>
|
|
|
|
|
|
@@ -715,38 +737,53 @@ 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, '\\"') + '");' : '');
|
|
|
+ (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); }
|
|
|
+ return new Function(code.replace(/[\r\t\n]/g, '')).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 loadFile(name, cont) {
|
|
|
+ var client = new XMLHttpRequest();
|
|
|
+ client.open('GET', name, true);
|
|
|
+ client.onload = function() { localStorage.setItem("card",client.responseText); (cont)(); }
|
|
|
+ client.send(); }
|
|
|
+
|
|
|
+</code>
|
|
|
+
|
|
|
+<h1>The Card</h1>
|
|
|
+
|
|
|
+<code>
|
|
|
+templates/card.svg:
|
|
|
+
|
|
|
+<g xmlns="http://www.w3.org/2000/svg" id="Slot-{this.pos}"
|
|
|
+ transform="translate(<font color=yellow>{this.x}</font>,<font color=yellow>{this.y}</font>)">mbership,
|
|
|
+ <rect fill="#FFFFFF" x="0" y="0"
|
|
|
+ width="40" height="60" rx="4" style="display: inline;"/>
|
|
|
+ <text dx="20" x="0" y="26.4873125"
|
|
|
+ font-family="Lucida Grande" font-size="24"
|
|
|
+ font-weight="bold" letter-spacing="-2" text-anchor="middle"
|
|
|
+ fill="<font color=yellow>{this.suit}</font>"><font color=yellow>{this.value}</font></text>.19\ AM.png healthy.png
|
|
|
+ <circle fill="<font color=yellow>{this.suit}</font>" cx="20" cy="43" r="7">
|
|
|
+ <animate begin="0" fill="freeze" attributeName="r"
|
|
|
+ values="4;5;6;7;8;6;5;4" dur="1s"
|
|
|
+ calcMode="linear" repeatCount="indefinite"/></circle></g></code>
|
|
|
+
|
|
|
+<code>
|
|
|
+
|
|
|
+var color = ['#CE290F','#3B5998','#48AF5E','#FFEC00'];
|
|
|
|
|
|
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*69,x:pos*42 });
|
|
|
- return res; }
|
|
|
+ return template_engine(
|
|
|
+ localStorage.getItem("card"),
|
|
|
+ { pos: line + ',' + pos,
|
|
|
+ suit: color[col],
|
|
|
+ value: 1,
|
|
|
+ y: line*69,
|
|
|
+ x: pos*42 }); }
|
|
|
|
|
|
function svg(html) {
|
|
|
var dom = new DOMParser().parseFromString(html, "text/xml");
|
|
|
@@ -758,8 +795,9 @@ function place_card(x,y,c,v) {
|
|
|
slot.parentNode.replaceChild(svg(card(x-1,y-1,c,v)),slot); }
|
|
|
|
|
|
function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
|
|
|
+function drawCards() { for (var i=1;i<16;i++) { place_card(1,i,rand(1,4),rand(1,13)); } }
|
|
|
|
|
|
-for (var i=1;i<16;i++) { place_card(1,i,rand(1,4),rand(1,13)); }
|
|
|
+loadFile('templates/card.svg', drawCards);
|
|
|
|
|
|
<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>
|
|
|
@@ -778,18 +816,6 @@ for (var i=1;i<16;i++) { place_card(1,i,rand(1,4),rand(1,13)); }
|
|
|
|
|
|
<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) {
|
|
|
@@ -800,37 +826,27 @@ function color(c) {
|
|
|
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">'+
|
|
|
- '<animate begin="0" fill="freeze" attributeName="r" values="4;5;6;7;8;6;5;4" dur="1s" calcMode="linear" repeatCount="indefinite"/>'+
|
|
|
- '</circle>'+
|
|
|
- '</g>';
|
|
|
- var res = template_engine(t,{pos: p,suit: c,value: v,y:line*69,x:pos*42 });
|
|
|
- return res; }
|
|
|
+ return template_engine(
|
|
|
+ localStorage.getItem("card"),
|
|
|
+ { pos: line + ',' + pos,
|
|
|
+ suit: color(col),
|
|
|
+ value: v,
|
|
|
+ y: line*69,
|
|
|
+ x: pos*42 }); }
|
|
|
|
|
|
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);
|
|
|
+ var slot = document.getElementById("Slot-"+x+","+y);
|
|
|
slot.parentNode.replaceChild(svg(card(x-1,y-1,c,v)),slot); }
|
|
|
|
|
|
function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
|
|
|
+function drawCards() { for (var i=1;i<16;i++) { place_card(rand(1,2),i,rand(1,4),rand(1,13)); } }
|
|
|
+
|
|
|
+loadFile('templates/card.svg', drawCards);
|
|
|
|
|
|
-for (var i=1;i<16;i++) {
|
|
|
- place_card(rand(1,2),i,rand(1,4),rand(1,13));
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
</code>
|
Maxim Sokhatsky
