84 lines
151 KiB
JavaScript
84 lines
151 KiB
JavaScript
|
(function(){'use strict';let create = CARDT => {// exec after SVGpaths below are loaded
|
||
|
|
let drawCard = cardt => {
|
||
|
|
let doc = 'ATTRs:\n';// show attrs on click
|
||
|
|
// create Object from all (String) attributes
|
||
|
|
let newcard = CARDT.cardt(cardt.constructor.observedAttributes
|
||
|
|
.reduce((settings, attr) => {
|
||
|
|
if (cardt.hasAttribute(attr)) {
|
||
|
|
let value = cardt.getAttribute(attr);
|
||
|
|
settings[attr] = value || attr;// allow attributes names without values (set attr as value)
|
||
|
|
doc += `\n${attr} : ${value}`;// attribute definition for easier CSS Selectors
|
||
|
|
}
|
||
|
|
return settings;
|
||
|
|
}, {/* settings overwrite default AND attribute values */
|
||
|
|
cardcolor: '#FEFEFE',
|
||
|
|
cid: cardt.nodeName
|
||
|
|
}
|
||
|
|
)
|
||
|
|
);
|
||
|
|
cardt.setAttribute('doc', doc);
|
||
|
|
if (cardt.IMG) {
|
||
|
|
cardt.IMG.src = newcard.src;
|
||
|
|
} else {
|
||
|
|
cardt.IMG = cardt.appendChild(newcard);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
let dispatch = (el, name, options = {
|
||
|
|
detail: el,
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}) => el.dispatchEvent(new CustomEvent(name, options));
|
||
|
|
|
||
|
|
class CARDTElement extends HTMLElement {
|
||
|
|
static get observedAttributes() {
|
||
|
|
return CARDT.attributes;
|
||
|
|
}
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
//this.attachShadow({mode:'open'});//no need for shadowDOM
|
||
|
|
if (this.hasOwnProperty('cid')) console.warn('cid defined');
|
||
|
|
else props(this);
|
||
|
|
}
|
||
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
|
if (oldValue) drawCard(this);// redraw IMG for every attribute change
|
||
|
|
if (name == 'draggable') {
|
||
|
|
this.firstChild.setAttribute(name, newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
connectedCallback() {
|
||
|
|
drawCard(this);
|
||
|
|
dispatch(this, 'CONNECTEDCARDT');
|
||
|
|
}
|
||
|
|
disconnectedCallback() {
|
||
|
|
dispatch(this, 'DISCONNECTEDCARDT');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
customElements.define('card-t', CARDTElement);//todo check if already defined
|
||
|
|
} catch (e) {
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// let pars = (CE, init = {}) => CE.constructor.observedAttributes.reduce((s, a) => {
|
||
|
|
// if (CE.hasAttribute(a)) s[a] = CE.getAttribute(a) || a;
|
||
|
|
// return s;
|
||
|
|
// }, init);
|
||
|
|
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
|
||
|
|
}));
|
||
|
|
/*minified SVGcardt */
|
||
|
|
let m=m=>m.split`,`,c=m=>"string"==typeof m,l=(m,c=",")=>m.includes(c),a=m("cid,suit,rank,letters,suits,courts,norank,backcolor,cardcolor,suitcolor,borderradius,bordercolor,borderline,opacity,courtcolors,backtext,backtextcolor,showpips,pips,draggable,svg"),z=(m,a=-1,z)=>(z=c(m)?m.split(l(m)?",":""):m,a>-1?z[a]:z),h=m("back,ace,two,three,four,five,six,seven,eight,nine,ten,jack,queen,king"),v=m("spades,hearts,diamonds,clubs");function M({log:a=0,cid:M=!1,suit:t=0,rank:e=1,pips:r=!1,letters:o=!1,courts:L="012",suits:i="0123",suitcolor:n="#000,red,red,#000",shadow:p="5,5,5",norank:d=!1,backcolor:$="#E55",cardcolor:C="#FFF",opacity:u=.8,borderradius:g=12,bordercolor:V="#444",borderline:H="1",courtcolors:b="#DB3,red,#44F,#000,#000,4",backtext:f="CARD-TS",backtextcolor:A="#555",toSVG:P=0,img:x=0,showpips:k=0,pipy:w=0,svg:y=""}){try{let a={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},D=m=>{if(m.match(/^\d+$/))return Number(m);m=m.toLowerCase();let c=a[m];return c?(c>19&&(c-=20),c):m},F=10,S="R",j="S";M&&"CARD-T"!==M&&((M=M.toUpperCase()).includes("-")&&(M=(M=M.split("-OF-"))[0][0]+M[1][0]),M=M.replace("10","T"),e=M[0],t=M[1],"F"==e&&($="green",e=1,d=1,u=.3,C="transparent",o=" ","F"==t?(e=0,t=0,$="transparent",f=""):t=D(t))),c(t)&&(t=D(t)),c(e)&&(e=D(e)),b=z(b),""==s[2][0][0][0]&&(i="1111",0!=t&&3!=t||(b[2]="#0303FF"),2==t&&(b[1]="#DC143C")),t>3&&(t=3),e>13&&(e=13),M=(e>1&&e<10?e:h[e][0])+"shdc"[t];let Z=l(n)?z(n)[t]:n,E=m=>-m+" -"+m+" "+2*m+" "+2*m,R=m=>`fill='${m}' fill-opacity='1'`,T=(m,c="3",l="none")=>`stroke='${m}' ${R(l)} stroke-width='${c}'`,N=(m,c,l,a,z="")=>(m&&(z+=` width='${m}'`),c&&(z+=` height='${c}'`),l&&(z+=` x='${l}'`),a&&(z+=` y='${a}'`),z),q=(m,c,l,a,z,h)=>`<rect${N(m,c,l,a)} rx='${z}' ry='${z}' ${h}></rect>`,B=(m,c=0,l=0,a="",z="",h=20,v=-7,M="middle")=>`<text x='${c}' y='${l}' stroke='${a}' text-anchor='${M}' style='font-weight:600;font-family:Arial;letter-spacing:${v}px;fill:${z};stroke:none;font-size:${h}px;'>${m}</text>`,O=(m,c,l,a,z,h="")=>`<use href='#${m+M}'`+N(c,l,a,z)+` ${h}></use>`,U=(m,c,l,a,z=[])=>`<symbol id='${m+M}' viewBox='${c}' preserveAspectRatio='xMinYMid' opacity='${z.length?1:u}' ><path d='${l}' ${a} `+("S"==m[0]?"style='filter:url(#SH);'":"")+`></path>${z.map(m=>O(...m)).join``}</symbol>`,I=[[d?"":S,0,o?50:39,o?-116:-120,-158],[d?"":j+t,0,e>9&&t>2?40:42,-121,-119]].map(m=>O(...m)).join``,G=[],W=[],Y=[],J=["2020-08-06 17:13","000000000P0","00000P00000","00P000000P0","P0P00000000","P0P000000P0","P0P00000P0P","P0P0000PP0P","P0P000P0P0P","P0PPP0000P0","P0PPPP00000"];J=r?r[1]?r:J[D(r)]:J[e],e>0&&e<11&&J.split``.map((m,c)=>{let a,z=70,h=-z/2,v=-h/2,M=-z-v,s=9==e||10==e?-130:-122,o=-68.5;s-=w,w&&(o-=s/2.2);let L,i,n;n=[[M,s],[h,s],[v,s],[M,o],[v,o],[h,-102],[h,-90],[h,-90],[M,h],[h,h],[v,h]][c],"0"!=m&&(L=n[0],i=n[1],4==e&&(i+=30),1==e&&9==c&&([L,i]=[-z,-z],z*=2),l("SHDC",m)&&(t="SHDC".search(m)),a=O(j+t,!1,z,L,i),G.push(a),c<7&&Y.push(a)),k&&W.push(B("abcdefghijk"[c],n[0]+27,n[1]+40,"red","red",40));});let K=240,Q=334,X=E(500),_=Number(H),mm=P?"":"data:image/svg+xml,";if(mm+=`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='${-K/2} ${-Q/2} ${K} ${Q}' ${y}>`,mm+=q(K-_,Q-_,-K/2+_/2,-Q/2+_/2,g,T(V,H,C)),p=m(p),mm+=`<filter id='SH'><feDropShadow dx='${p[0]}' dy='${p[1]}' stdDeviation='${p[2]}' /></filter>`,e>0){if(o){let m=z(o),c=[0,m.shift(),2,3,4,5,6,7,8,9,10,...m][e];mm+=`<symbol id='${S}${M}' viewbox='${X}' opacity='${u}'>${B(c,1,33,"",Z,"W"==c?30:40,-7,"left")}</symbol>`;}else mm+=U(S,X,s[1][e],T(Z,110));[0,1,2,3].map(m=>mm+=U(j+m,E(600),s[0][m],R(l(n)?z(n)[t]:n))),mm+=`${I}${G.join``}<g transform='rotate(180)'>${I}${Y.join``}</g>`,mm+=W.join``;}else{let m=F/2,c=K-2*g,l=Q-2*g;f&&(mm+=B(f,0,10,"",A,42)),mm+=`<pattern patternUnits='userSpaceOnUse' id='A' ${N(F,F)}><path d='M${m} 0L${F} ${m}L${m} ${F}L0 ${m}Z' ${R($)}></path></pattern>`+q(c,l,-c/2,-l/2,g,R("url(#A)"));}if(e>10){let c=(...m)=>O(...m)+O(...m,"transform
|
||
|
|
}());
|