32 lines
33 KiB
JavaScript
32 lines
33 KiB
JavaScript
|
(function(){'use strict';let create = CARDT => {
|
||
|
|
let draw = CE => {
|
||
|
|
let C = CARDT.cardt(pars(CE));
|
||
|
|
CE.I ? CE.I.src = C.src : CE.I = CE.appendChild(C);
|
||
|
|
};
|
||
|
|
customElements.define('card-t', class extends HTMLElement {
|
||
|
|
static get observedAttributes() {
|
||
|
|
return CARDT.attributes
|
||
|
|
}
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
props(this);
|
||
|
|
}
|
||
|
|
attributeChangedCallback(n, o) {
|
||
|
|
if (o) draw(this);
|
||
|
|
}
|
||
|
|
connectedCallback() {
|
||
|
|
draw(this);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
let pars = (CE, init = {}) => CE.getAttributeNames().reduce((s, a) => (s[a] = CE.getAttribute(a), s), init);
|
||
|
|
let props = CE => CE.constructor.observedAttributes.map(a => Object.defineProperty(CE, a, {
|
||
|
|
get() {
|
||
|
|
return CE.getAttribute(a);
|
||
|
|
}, set(val) {
|
||
|
|
val ? CE.setAttribute(a, val) : CE.removeAttribute(a);
|
||
|
|
}, configurable: true
|
||
|
|
}));
|
||
|
|
let c=c=>c.split`,`,m=c=>"string"==typeof c,l=(c,m=",")=>c.includes(m),t=c("cid,suit,rank,letters,suits,courts,norank,backcolor,cardcolor,suitcolor,borderradius,bordercolor,borderline,opacity,courtcolors,backtext,backtextcolor,showpips,pips,draggable,svg"),e=(c,t=-1,e)=>(e=m(c)?c.split(l(c)?",":""):c,t>-1?e[t]:e),a=c("back,ace,two,three,four,five,six,seven,eight,nine,ten,jack,queen,king"),z=c("spades,hearts,diamonds,clubs");function s({cid:t=!1,suit:z=0,rank:s=1,pips:h=!1,letters:M=!1,courts:o="012",suits:i="0123",suitcolor:v="#000,red,red,#000",norank:n=!1,backcolor:L="#E55",cardcolor:p="#FFF",opacity:$=.8,borderradius:d=12,bordercolor:u="#444",borderline:C="1",courtcolors:g="#DB3,red,#44F,#000,#000,4",backtext:b="CARD-TS",backtextcolor:A="#555",img:P=0,svg:f=""}){try{let x={ace:1,a:1,two:2,three:3,four:4,five:5,six:6,seven:7,eight:8,nine:9,ten:10,t:10,jack:11,j:11,queen:12,q:12,king:13,k:13,spades:20,s:20,hearts:21,h:21,diamonds:22,d:22,clubs:23,c:23},k=c=>{if(c.match(/^\d+$/))return Number(c);c=c.toLowerCase();let m=x[c];return m?(m>19&&(m-=20),m):c},w=10,y="R",F="S";t&&"CARD-T"!==t&&((t=t.toUpperCase()).includes("-")&&(t=(t=t.split("-OF-"))[0][0]+t[1][0]),t=t.replace("10","T"),s=t[0],z=t[1],"F"==s&&(L="green",s=1,n=1,$=.3,p="transparent",M=" ","F"==z?(s=0,z=0,L="transparent",b=""):z=k(z))),m(z)&&(z=k(z)),m(s)&&(s=k(s)),g=e(g),""==r[2][0][0][0]&&(i="1111",0!=z&&3!=z||(g[2]="#0303FF"),2==z&&(g[1]="#DC143C")),z>3&&(z=3),s>13&&(s=13),t=(s>1&&s<10?s:a[s][0])+"shdc"[z];let j=l(v)?e(v)[z]:v,V=c=>-c+" -"+c+" "+2*c+" "+2*c,E=c=>`fill='${c}' fill-opacity='1'`,R=(c,m="3",l="none")=>`stroke='${c}' ${E(l)} stroke-width='${m}'`,D=(c,m,l,t,e="")=>(c&&(e+=` width='${c}'`),m&&(e+=` height='${m}'`),l&&(e+=` x='${l}'`),t&&(e+=` y='${t}'`),e),S=(c,m,l,t,e,a)=>`<rect${D(c,m,l,t)} rx='${e}' ry='${e}' ${a}></rect>`,N=(c,m=0,l=0,t="",e="",a=20,z=-7,s="middle")=>`<text x='${m}' y='${l}' stroke='${t}' text-anchor='${s}' style='font-weight:600;font-family:Arial;letter-spacing:${z}px;fill:${e};stroke:none;font-size:${a}px;'>${c}</text>`,T=(c,m,l,e,a,z="")=>`<use href='#${c+t}'`+D(m,l,e,a)+` ${z}></use>`,Z=(c,m,l,e,a=[])=>`<symbol id='${c+t}' viewBox='${m}' preserveAspectRatio='xMinYMid' opacity='${a.length?1:$}' ><path d='${l}' ${e} `+`></path>${a.map(c=>T(...c)).join``}</symbol>`,q=[[n?"":y,0,M?50:39,M?-116:-120,-158],[n?"":F+z,0,s>9&&z>2?40:42,-121,-119]].map(c=>T(...c)).join``,B=[],H=[],O=[],U=["2020-08-06 17:13","000000000P0","00000P00000","00P000000P0","P0P00000000","P0P000000P0","P0P00000P0P","P0P0000PP0P","P0P000P0P0P","P0PPP0000P0","P0PPPP00000"];U=h?h[1]?h:U[k(h)]:U[s],s>0&&s<11&&U.split``.map((c,m)=>{let l,t=70,e=-t/2,a=-e/2,r=-t-a,h=9==s||10==s?-130:-122;let o,i,v;v=[[r,h],[e,h],[a,h],[r,-68.5],[a,-68.5],[e,-102],[e,-90],[e,-90],[r,e],[e,e],[a,e]][m],"0"!=c&&(o=v[0],i=v[1],1==s&&9==m&&([o,i]=[-t,-t],t*=2),l=T(F+z,!1,t,o,i),B.push(l),m<7&&O.push(l));});let I=240,Y=334,G=V(500),J=Number(C),K="data:image/svg+xml,";if(K+=`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='${-I/2} ${-Y/2} ${I} ${Y}' ${f}>`,K+=S(I-J,Y-J,-I/2+J/2,-Y/2+J/2,d,R(u,C,p)),s>0){if(M){let c=e(M),m=[0,c.shift(),2,3,4,5,6,7,8,9,10,...c][s];K+=`<symbol id='${y}${t}' viewbox='${G}' opacity='${$}'>${N(m,1,33,"",j,40,-7,"left")}</symbol>`;}else K+=Z(y,G,r[1][s],R(j,110));[0,1,2,3].map(c=>K+=Z(F+c,V(600),r[0][c],E(l(v)?e(v)[z]:v))),K+=`${q}${B.join``}<g transform='rotate(180)'>${q}${O.join``}</g>`,K+=H.join``;}else{let c=w/2,m=I-2*d,l=Y-2*d;b&&(K+=N(b,0,10,"",A,42)),K+=`<pattern patternUnits='userSpaceOnUse' id='A' ${D(w,w)}><path d='M${c} 0L${w} ${c}L${c} ${w}L0 ${c}Z' ${E(L)}></path></pattern>`+S(m,l,-m/2,-l/2,d,E("url(#A)"));}if(s>10){let m=(...c)=>T(...c)+T(...c,"transform='rotate(180)'"),l=e(o,s-11),t=e(i,z);K+=[[1,0,0,0],[0,1,0,0],[1,1,1,1]][l][t]?"<g transform='scale(-1,1)'>":"<g>";let a=(c,m,l,t="")=>[F+z,!1,c,m,l,`transform='${t}'`],h=[[[],[a(114,520,939),a(100,1100,60,"rotate(30)"),a(100,1100,160,"rotate(30)"),a(100,440,430,"rotate(30)"),a(160,370,560,"rotate(30)")],[],[]],[[],[a(80,1140,552,"rotate(10)"),a(80,1155,6
|
||
|
|
}());
|